Ruta de renderizado crítica

La ruta crítica de renderizado es la secuencia de pasos que un navegador debe completar entre la recepción de una página y la visualización de cualquier contenido en pantalla. Implica analizar el marcado para crear una estructura de documento, analizar las hojas de estilo para crear una estructura de estilo, combinar ambas en un árbol de renderizado, calcular el diseño y dibujar el resultado. Comprender este proceso explica por qué algunos recursos retrasan la primera aparición del contenido y otros no.

Las hojas de estilo bloquean la renderización por diseño, y esto es intencional, no un defecto. Un navegador que renderizara antes de que los estilos estuvieran disponibles mostraría contenido sin estilo y luego se reorganizaría, lo cual es peor que una breve demora. La consecuencia práctica es que cada hoja de estilo referenciada en el encabezado del documento debe descargarse y procesarse antes de que aparezca cualquier contenido, por lo que la cantidad, el tamaño y la velocidad de entrega de las hojas de estilo determinan directamente cuándo se visualiza la página.

Los scripts bloquean el análisis sintáctico a menos que se indique lo contrario, lo cual es otra fuente importante de retraso. Un script síncrono encontrado durante el análisis detiene la construcción del documento hasta que se descarga y ejecuta, ya que podría modificarlo. Marcar los scripts como diferidos permite que el análisis continúe y los ejecuta una vez que el documento esté completo; marcarlos como asíncronos permite su ejecución tan pronto como llegan. Elegir el atributo correcto para cada script es una de las mejoras más económicas disponibles.

Acortar la ruta implica reducir tanto el número de viajes de ida y vuelta como el trabajo requerido en cada etapa. Incluir en línea los estilos necesarios para la vista inicial elimina por completo una solicitud de bloqueo, y el resto se carga sin bloqueo. Aplazar los scripts que no son necesarios para el primer renderizado, minimizar y comprimir los recursos, y eliminar las redirecciones que añaden viajes de ida y vuelta completos antes de que comience nada, todo ello reduce el tiempo transcurrido hasta el primer pintado.

Las sugerencias de recursos permiten que el navegador comience a trabajar antes de lo que lo permitiría el descubrimiento automático. La precarga indica que se necesitará un recurso descubierto al final del documento, como una fuente referenciada en una hoja de estilos o una imagen principal aplicada mediante CSS, por lo que la descarga comienza de inmediato. La preconexión establece conexiones con orígenes de terceros con antelación, eliminando la sobrecarga de conexión y negociación en el momento crítico. Si se usan selectivamente, son útiles; si se usan indiscriminadamente, compiten por el ancho de banda y empeoran la situación.

Las fuentes merecen especial atención porque se encuentran en la ruta de carga y se descubren tarde. Una fuente web referenciada en una hoja de estilos no puede comenzar a descargarse hasta que dicha hoja se haya procesado, y dependiendo de la estrategia de visualización, el texto puede permanecer invisible hasta que se cargue. Precargar las fuentes utilizadas en la parte visible de la página, elegir una estrategia de visualización que muestre el texto alternativo de inmediato y ajustar las métricas de reserva para reducir el reajuste del texto solucionan este problema.

La renderización del lado del cliente extiende considerablemente la ruta, por lo que requiere una mitigación específica. Cuando el documento inicial no contiene contenido y todo debe construirse mediante JavaScript, la ruta incluye la descarga, el análisis y la ejecución del paquete, así como la obtención de datos, antes de que aparezca nada. La renderización del lado del servidor o la generación estática devuelve contenido significativo a la ruta inicial, lo que constituye una solución estructural más que una optimización.

Debido a que la ruta está determinada por cómo se construye y se entrega la página, la mejora generalmente requiere cambios en la plantilla y la compilación en lugar de la configuración. En la práctica, este análisis se encuentra dentro de rendimiento web trabajo, la implementación se entrega a través de desarrollo de productosY cuando el método de renderizado de un sitio es la limitación subyacente, la discusión se convierte en una cuestión arquitectónica sobre cómo se producen las páginas, en lugar de un ejercicio de ajuste.