Fecha de publicación: 31 de marzo de 2014
Optimizar la ruta de acceso de renderización crítica hace referencia a priorizar la visualización de el contenido que se relaciona con la acción actual del usuario.
Ofrecer una experiencia web rápida implica una alta exigencia para el navegador. Como desarrolladores web, no podemos ver la mayor parte de este trabajo: escribimos el lenguaje de marcado y aparece una bonita página en pantalla. Pero, ¿cómo pasa exactamente el navegador de consumir nuestro lenguaje HTML, CSS y JavaScript a píxeles representados en la pantalla?
La optimización para mejorar el rendimiento se basa en la comprensión de lo que ocurre en estos pasos intermedios entre la recepción de los bytes de HTML, CSS y JavaScript, y el procesamiento necesario para convertirlos en píxeles representados; esa es la ruta de acceso de representación crítica.
Al optimizar la ruta de acceso de representación crítica, podemos mejorar significativamente el el tiempo que tarda la primera representación de nuestras páginas. Además, comprender la ruta de acceso de renderización crítica también sirve como base para crear aplicaciones interactivas de buen rendimiento. El proceso de actualizaciones interactivas es el mismo, aunque se realiza en un bucle continuo e, idealmente, a 60 fotogramas por segundo. Pero primero, veremos una descripción general de la manera en que el navegador muestra una página simple.
Recursos adicionales
- Construcción del modelo de objetos
- Construcción, diseño y pintura del árbol de renderización
- CSS que bloquea la representación
- Cómo agregar interactividad con JavaScript
- Medición de la ruta de renderización crítica
- Análisis del rendimiento de la ruta de acceso de representación crítica
- Optimización de la ruta de acceso de representación crítica
- Reglas y recomendaciones de PageSpeed