Lo que realmente debes saber para hacer más rápida tu web y tener mejor SEO: Cómo se renderiza una Web para optimizar la velocidad de carga – Critical Rendering Path (CRP)
Si no lo puedes medir, no lo puedes optimizar. Conoce cómo se renderiza una Web para optimizar la velocidad de carga conociendo el CRP.
Critical Rendering Path o Ruta Critica de Renderización es el proceso o «camino» que lleva a cabo un navegador web para transformar, pintar y mostrar una pagina web usando el código HTML, CSS y Javascript.
Este es un proceso bastante complejo pero veremos los puntos mas importantes o que mas nos interesan para el tema de la optimización de la velocidad de carga de tu Web y mejorar nuestro posicionamiento SEO (Search Engine Optimization). La optimizacion del CRP consiste técnicamente en entender que sucede tras recibir el HTML, CSS, Javascript hasta que estos son procesados por el navegador y convertirdos en pixeles (pintar).
Al optimizar el CRP puedes mejorar significativamente el tiempo de carga de tu página Web. Es más, entender estos conceptos también te sirven para las aplicaciones interactivas.
EL DOM – Document Object Model
En este diagrama puedes ver los elementos mas importantes del proceso.
- Primero se obtiene el HTML de la página y se empieza a crear el DOM (Modelo de Objetos del Documento).
- Luego se buscan y cargan los CSS y se crea el CSSOM o Modelo de Objetos del CSS
- Se combina el DOM y CSSOM y se crea el «Render tree» o árbol de renderización.
- Se calculan los espacios y posiciones de todos los elementos que conforman la página
- Finalmente se pintan los pixeles en la pantalla.
¿Y Javascript? se pueden estar preguntando. Pues bien, primero veamos como se construye el DOM y el CSSOM y luego veremos como es que Javascript interviene y afecta el renderizado.
Convirtiendo el HTML en el DOM
Cuando entras a una página Web o escribes la URL en la barra y pulsas ENTER, lo primero que sucede es que el navegador realiza una petición al servidor y descarga el archivo HTML. Supongamos que el HTML descargado es el siguiente:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link href="css/style.css" rel="stylesheet">
<title>Hablemos de SEO</title>
</head>
<body>
<p>
Hola <span>lectores de</span> <strong>HablemosDeSEO.ninja!</strong>
</p>
<div><img src="images/gato.jpg"></div>
</body>
</html>
Luego de recibido este HTML, el navegador debe convertir todo los markups en algo que se pueda ver en la pagina. A esto le llamamos la construcción del DOM y es una sucesión de pasos lógicos y bien definidos que sigue el navegador para procesar el HTML Las especificaciones del HTML tienen reglas que dictan como se deben procesar los datos, por ejemplo los simbolos de mayor que (>) y menor que (<) tienen un significado especial, nos dice que lo que esta encerrado entre ellas es una etiqueta HTML (tag). Cuando se encuentra un tag, se genera un identificador (Token), y la primera que se genera es la etiqueta HTML. Siguiendo nuestro HTML anterior, se generaría algo así
Si observan, por cada etiqueta se genera un token de apertura y uno de cierre a excepción de los que se no tienen o usan etiqueta de cierre, todo esto lo realiza el generador de identificadores (tokens). Al mismo tiempo, se ejecuta otro proceso que toma estos tokens y los convierte en objetos nodo (nodes), por ejemplo, observando la siguiente imagen, podemos ver como es el árbol del DOM construido y se puede observar como un nodo deriva de otro creando una estructura jerarquica.
Aunque la imagen esta incompleta (es solo ilustrativa), nos muestra como se ve a grandes rasgos el árbol del DOM. Si se fijan, hay una cierta simulitud o logica entre los StartTag y EndTag con el diagrama anterior, cuando este proceso se termina es que llegamos al Document Object Model DOM, que es una estructura en árbol que contiene el contenido y propiedades del HTML y la relación entre sus nodos. Ojo, por cuestiones de espacio, las propiedades de los elementos no se han incluido, pero si tomamos el tag img, bajo este estaria su propiedad SRC, ALT, TITLE, etc.
Entrega de HTML Parcial
Este tema es un poco complejo y no será parte de este post, pero en un futuro espero desarrollarlo como se debe. La entrega de HTML de forma parcial es otra forma de optimizar. Una entrega parcial del HTML es que por ejemplo, si tu header no varia en todo el sitio (o casi en todo), puedes hacer que se descargue y se muestre aun antes de que todo lo demás del DOM halla sido calculado, por ejemplo, la pagina de Google, cuando haces la petición a la pagina de Google, el servidor hace algo muy inteligente, y es que aun antes de conocer los resultados, muestra el header antes de conocer el resultado de la búsqueda, cuando ya la conoce, comienza a construir el DOM gradualmente ya en la zona de resultados, a esto se le conoce como devolver el HTML de forma parcial.
Convirtiendo el CSS en CSSOM (CSS Object Model)
El DOM (en forma resumida) captura el contenido de la página, pero es necesario saber como se debe mostrar la página y para esto es que se debe construir el CSSOM, que es mas o menos como la construcción del DOM.
Supongamos que tenemos el siguiente CSS:
body{
font-size: 14px;
}
p{
font-weight: 700;
}
span{
color: blue;
}
p span{
display: none
}
img{
float: right;
}
Lo primero, al igual que con la construcción del DOM es identificar los Tokens adecuados, y el primero con el que se encuentra es con el tag body con la propiedad font-size en 14px y luego viene la etiqueta p (parrafo) y esta es la parte importante, P hereda todo lo que body tenga especificado pues es un hijo del body, de hecho, todo hereda lo que body tenga especificado, asi que en este caso P tendrá un tamaño de letra de 14px y sera bold. De hecho, si observas la imagen del árbolo del DOM, verás que todos heredan el tamaño de fuente 14px, y por esto se llaman hojas de estilo en cascada.
Y he aquí una de las primeras optimizaciones que debemos hacer, debes asegurarte de que tus reglas se hereden adecuadamente para evitar sobrescribir reglas o escribir reglas de forma innecesaria, recuerda que menos letras, menos bytes (ten siempre en cuenta el tamaño de los archivos).
Ahora hagamos un ejercicio, usando el HTML de mas arriba, ejecutalo dentro de developer tools de Google Canary y hagamos una captura de información. Mira el timeline detenidamente.
Deberás ver algo así:
Para que puedan seguir todos el mismo ejemplo, en este enlace pueden descargar el Timeline que he usado… y si, si se pueden guardar y cargar Timeline, solo click derecho sobre el Timeline y guardar, esto es muy pero muy útil para no tener que estar haciendo todo el proceso una y otra vez y ademas puedes compartirlo con alguien mas para que te ayude.
Muy bien, ahora busquemos peticiones a CSS y sobre la opción que dice «Parse HTML» podemos verlo, observa bien y esta la solicitud al archivo style.css y nota que esto sucede después de recibir el HTML, al parsearlo encuentra la etiqueta que hacer referencia al archivo CSS e inicia la petición.
Luego se espera a que se obtengan todas las partes del CSS, y poco tiempo después, se recibe el evento de recalculado del CSS (Recalculate CSS), que es donde se construye el CSSOM
Con este ejemplo, la hoja de estilos es tan pequeña, que el tiempo de carga y proceso es muy pequeño, pero con hojas de estilo mas grandes, podras ver resultados mas variados. Asi que lo que debes hacer es guardar el Timeline y comprobar cuanto tiempo demora llegar a este paso, recuerda: Primero mide, luego optimiza si es necesario.
El árbol de renderizado (Render Tree)
El árbol de renderizado es donde se combina el DOM con el CSSOM para producir los pixeles en el navegador, y sólo muestra los ejemplos visibles, en nuestro caso, el <span> que esta dentro de <p> que tiene una propiedad CSS de display:none, no se creara en el árbol de renderizado. Al final, se crea una estructura de árbol similar a la siguiente: (la imagen no esta basada en nuestro CSS y HTML). Lo primero que hace el navegador, es tomar el primer nodo del DOM que en nuestro caso es la etiqueta P y verifica si en el CSSOM existe una regla que aplique, que en nuestro ejemplo, la etiqueta P tiene las propiedades de tamaño de texto de 14px y font-weight de 700 (bold), asi que en el arbol de renderizado se puede crear un nodo con la etiqueta P. Luego hay un SPAN que es hijo del tag P, y en nuestro CSS hay una regla que dice que los SPAN contenidos en un P, no se deben mostrar (display:none), asi que los omitimos (y todos sus hijos si los hubieran). Y por último (omitiendo la etiqueta strong) copiamos al árbol de renderizado el texto «HablemosDeSEO.ninja!». Al final, tendríamos algo similar a esto: (he omitido algunas etiquetas por cuestión de espacio en la imagen)
Luego de esto el navegador calcula las dimensiones, espacios pero no nos detendremos en esto pues no nos es relevante en este momento y aunque se pueden dar cuellos de botella y otras cosas, lo mejor es analizarlo en profundidad cuando ya se dominan las partes mas basicas de la optimizacion de la velocidad de carga de las webs.
Analizando todo el CRP junto
Asi que en resumen, el navegador sigue los siguientes pasos para crear los pixeles en la pantalla:
- Construye el DOM luego de leer o parsear el HTML
- Solicita los recursos CSS y JS (javascript)
- Lee o parsea el CSS y construye el CSSOM
- Ejecuta el JS, pero ojo, esto aun no lo incluimos, pero paciencia, primero entiende bien esta parte pues el Javascript al final afecta el DOM y el CSSOM y lo veremos directamente ya en la parte de la optimizacion en el siguiente post.
- Mezcla el DOM y el CSSOM para crear el Arbol de Renderizado (The Render Tree)
- Crea las dimensiones, espacios y pinta.
Y recuerda también, que lo que no se mide, no se puede optimizar, y esta regla aplica para todo, no solo para la velocidad de carga, sino para SEO, conversiones rate, etc. Asi que para realizar una buena optimización de la velocidad de carga de una WEB, debes conocer como es que le navegador realiza el proceso.
Este tema esta dividido en varios post, en el siguiente enlace esta el temario completo de que debes hacer para hacer mas rápida tu Web y tener mejor SEO
Esto es todo para esta entrega, espero que te sea útil. Si quieres que te avise cuando escriba la siguiente parte o algo nuevo, puedes suscribirte aquí:
No olvides agregarte en el grupo [button color=»success» size=»» type=»squared» target=»false» link=»https://www.facebook.com/groups/HablemosDeSEO.ninja»]Hablemos de SEO[/button] en Facebook
Recuerda que puedes encontrar mas info, tips, comentar, preguntar en los siguientes grupos en Facebook:
[button color=»primary» size=»» type=»» target=»false» link=»https://www.facebook.com/groups/desarrolladores.elsalvador»]Desarrolladores PHP El Salvador[/button][button color=»danger» size=»» type=»» target=»false» link=»https://www.facebook.com/groups/HablemosDeSEO/»]Hablemos de SEO[/button][button color=»info» size=»» type=»» target=»false» link=»https://www.facebook.com/groups/freeit»]Soy de IT y Soy Libre[/button][button color=»warning» size=»» type=»» target=»false» link=»https://www.facebook.com/groups/html5yhtml51/»]HTML5 y 5.1 de Verdad[/button]
