AVISO: Si ya tienes experiencia con HTML, omite la introducción.
Introducción
HTML significa (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup Language). Y cómo escribí en este articulo sigue el paradigma de programación declarativo.
Ahora bien, cuando visitas un sitio web, el servidor siempre responde con el contenido de un archivo de HTML, el navegador procesa ese contenido y termina mostrándolo en pantalla. Usualmente ese archivo tiene el nombre de index.html
Si no has escrito HTML, aquí vamos a aprender las bases, y lo mejor es empezar por la sintaxis.
HTML esta construido de elementos que tienen un significado semántico para representar títulos, párrafos , imágenes, enlaces, entre otros.
Cada elemento esta envuelto con los símbolos de menor que (<) y mayor que (>). Para dar nombre a “etiquetas” de HTML. Esas etiquetas tienen la siguiente estructura:
Etiqueta de apertura: En este ejemplo "p" es usado para representar un párrafo.
Cada elemento puede tener cero o muchos atributos. Por ejemplo el atributo
classes usado para darle estilos al párrafo.
Contenido: Puede ser texto o más elementos de HTML
Etiqueta de cierre.
Hay otras etiquetas de cierre automático y tienen la siguiente estructura:
Etiqueta de cierre automático. Presta mucha atención al
“/”al final.Cada etiqueta puede tener cero o muchos atributos.
Estructura del contenido de HTML
<html> es el nivel más alto definido en un documento de HTML, también conocido como el elemento raíz (root en inglés). En este elemento puedes especificar un atributo para especificar el idioma utilizado en el sitio web.
El elemento <head> incluye metadatos que no se muestran como parte del contenido de la página, por ejemplo la etiqueta <title> define el texto de la pestaña en el navegador:
Además de metadatos, en el head usualmente se especifican otros archivos como Javascript y CSS, descripción del sitio, y otra información utilizada cuando se comparte el enlace en alguna red social como Twitter o Facebook, donde vemos información relacionada a la página solo por utilizar etiquetas de Open Graph como en la siguiente imagen. (Puedes aprender más sobre Open Graph aquí)
Y finalmente tenemos el body donde se inserta todo el contenido que queremos mostrar en nuestra página web.
Ahora que sabes lo básico sobre HTML, podemos ahondar en como el navegador procesa el HTML, y dependiendo de cómo este estructurado los elementos de HTML podemos hacer más lento o rápido el sitio web durante el primer renderizado.
¿Cómo el navegador procesa el HTML?
Cuando un sitio web carga, el navegador descarga y procesa el HTML, durante ese proceso, el navegador recibe bytes, los convierte en caracteres, esos caracteres se convierten en tokens para generar un árbol de nodos llamado DOM (Document Object Model)
Idealmente la primera línea de código que encuentra es el DOCTYPE, por ejemplo:
<!DOCTYPE html>
Esa línea le dice al navegador que siga cierta especificación de HTML, en nuestro caso HTML 5.
Conforme el navegador procesa las líneas del HTML, si encuentra una etiqueta <link>, el navegador bloquea el renderizado, pide los estilos de CSS al servidor y una vez descargue el CSS, construye otro árbol, el CSSOM (CSS Object Model), similar al del DOM.
El navegador usa ambos árboles (DOM & CSSOM) para generar un árbol de renderizado, en otras palabras, el contenido final a mostrar en el sitio web.
💡 Como el CSS bloquea el renderizado, tenemos que asegurarnos de descargar el CSS lo más pronto posible. Estos son algunos consejos cuando decidas importar el CSS:
Importar los estilos dentro del
<head>Use atributos de media como:
media="(min-width: 640px)" />Esto solo descargaría el CSS para una resolución más alta.Posponer la descarga de CSS que no se utilice
Determinar cual es el CSS critico y colocarlo en línea, dentro del HTML head, hay herramientas que automatizan este proceso.
El navegador continua procesando el HTML y encuentra una etiqueta que contiene una imagen con el atributo de donde obtener la imagen (URL), por lo cual el navegador ejecuta un llamado al servidor para obtener la imagen SIN bloquear el procesamiento del HTML.
Luego en algún momento encuentra otra etiqueta de HTML, en este caso encuentra la etiqueta <script> con un atributo src apuntando a un archivo de Javascript.
Entonces el navegador BLOQUEA el procesamiento del HTML hasta que descargue, interprete/compile/ejecute el código Javascript porque el Javascript puede modificar el DOM ó el CSSOM dado que no le dijimos lo contrario al navegador. Este proceso puede durar bastante, por lo cual debemos tener cuidado en donde y cómo le especificamos al navegador que descargue el Javascript.
💡 Estas son algunas técnicas que te ayudarán a optimizar el Javascript:
Poner los scripts al final del
<body>Usar atributos como defer ó async para en caso de que no se modifique el DOM/CSSOM ó que se puede posponer la descarga respectivamente.
Aplicar técnicas para dividir el código y no terminar con un solo archivo de Javascript enorme.
Usar técnicas como Lazy load.
Conclusión
Todo lo que pongas en el HTML va a determinar que tan rápido el usuario va a acceder tu sitio web y debes prestarle mucha atención ya que hay estudios donde si un sitio toma mas de 2 segundos de cargar, es muy probable que el usuario se vaya del sitio, en otras palabras, la primera impresión importa!.
Si tienes la tarea de optimizar el sitio web, un primer buen paso es revisar cómo esta estructurado el contenido del HTML que estas enviando al navegador.
SPA (Single Page Applications) envían un HTML básico y cuando todos los archivos se hayan descargado/ejecutado se muestra la página web, entonces sí usas Server Side Rendering, vas a mejorar la primera vez que la página cargue.
Entre menos datos envies mejor!.
Investiga que dispositivos usan los usuarios, revisa métricas para determinar cuánto esta durando cargar el sitio, en lugar de usar el WIFI, utiliza conexiones lentas ó el plan de tu teléfono móvil para ver que tan lento carga el sitio.
Pregunta 🎁
Alguna vez has visto algún sitio que se ve “raro” y de pronto ya se ve bien?
Es muy probable que hayan puesto el CSS al final del HTML, entonces el navegador muestra el HTML y después le aplica el CSS.