Optimización web

Entender el proceso de renderización de una página web es clave para su optimización. A continuación resumo los pasos y puntos a tener en cuenta en cada paso para optimizar el renderizado global y todo lo que ello conlleva a la práctica.

Critical rendering path > Interpretación de html, css y js para convertir en píxeles en pantalla.

1.Leer html para crear el dom (document object model). Parse HTML

Lee characteres entre brackets (html tags) y crea un token para cada uno (un token de inicio y uno de fin). Este proceso lo lleva a cabo el tokenizer. Paralelamente hay otro proceso que convierte los tokens en node objects. Si hay un token de inicio antes de un token de cierre, este será un child del token de inicio anterior.

DOM> Estructura de árbol que captura contenido y propiedades del html y todas las relaciones entre los nodos.

Solicitamos arhivos js y css. El js, al ser síncrono, no puede ejecutarse hasta que el cssom no esté creado (puede modificar cssom). Completar el cssom desbloquea el motor de js.

Optimización:

Minificar html

Compresión

Http caching

2.Fetch css para crear CSS object model. Recalculate style

Para cada selector se crea un nodo que tendrá como propiedades las propiedades css.

Los nodos heredan propiedades de los nodos padres, por eso se le llama cascading style sheets.

El css bloquea el renderizaje de la página hasta que se ha procesado todo el css. CSS is render blocking.

Cuanto más específico sea una regla (mayor profundidad), más tiempo de renderizaje.

Proceso de recalculate style > conveirte css en css object model.

Optimización:

Eliminar estilos innecesarios

Minificar

Compresión

Caché

En los link stylesheets puede indicarse una media query por ejempo por tamaño de pantalla. De este modo permite separar la hoja de estilos en varios recursos. Los recursos que no encajan en la media query no bloquean el renderizado.

Javascript

Capacidad para manipular html y css.

Cuando se encuentra un script tag, dom construction se para y ejecuta el js antes de continuar. Javascript es parser blocking porque bloquea la construcción del dom.

Optimización

Min

Compress

Caché

Si el código javascript no modifica el dom o cssom, debería ejecutarse una vez cargada la página.

Async attribute hace que no no bloquee la construcción del dom. Se ejecuta paralelamente una vez se reciben los datos.

Inline siempre ejecuta una vez el parseador html llega al tag script. No permite async.

Blocking scirpts, bloquean el dom y son dependientes del cssom para ejecutarse.

Defer scripts,

3.Combinamos 1 y 2 para crear render tree. Layer tree

Render tree solo captura contenido visible. Propiedades como display none hacen que ese nodo no se genere en el render tree. El head tampoco se visualiza en el render tree.

Cada vez que cambia el render tree, hay muchas probabilidades de que los siguientes dos procesos tengan que volver a ejecutarse.

4.Colocar donde va cada cosa > Layout Step

Calcular los pixeles y posición de cada nodo en base al viewport. Si el viewport cambia (resize), tiene que volver a calcularse el layout.

Una manera de debugear los tiempos de layout es, mientras grabamos el performance, cambiar el tamaño de la pantalla. De este modo recalcula el layout y podemos identificar donde tarda mucho.

5.Paint pixels on screen. Paint.e

Optimization buckets

Minify, compress, cache > Minimize bytes. Menos datos, antes podemos empezar a renderizar la página

Reduce number of critical resources > Minimize use of render blocking resources (css) and minimize use of parser blocking resources (js)

Analizar opimización

Analizar nº de recursos críticos para renderizar la página

Analizar nº de bytes necesarios para renderizar la página

Analizar minimum critical path length

Referencias a leer