Cómo identificar y reducir los recursos de bloqueo de representación

En 2018, el tiempo promedio para cargar completamente una página móvil fue de 15 segundos. Eso es sustancialmente más alto que el tiempo de carga de la página recomendado por Google de 3 segundos.

Entonces, por supuesto, reducir el tiempo total de carga sigue siendo una prioridad para permitir la interacción del usuario lo más rápido posible.

Pero la velocidad de la página no es solo sobre el tiempo total de carga de la página; también se trata de lo que los usuarios experimentan en esos 3 (o 15) segundos. Es esencial tener en cuenta la eficiencia con la que se procesan las páginas.

Esto se logra mediante la optimización de la ruta de representación crítica para llegar a su primera pintura lo más rápido posible.

Básicamente, estás reduciendo la cantidad de tiempo que los usuarios pasan mirando una pantalla en blanco en blanco para mostrar contenido visual lo antes posible (ver 0.0 a continuación).

Hay un proceso completo sobre cómo hacer esto, que se describe en la documentación de la guía de desarrolladores de Google (gracias, Ilya Grigorik), pero me centraré en un gran bateador en particular: reducir los recursos de bloqueo de procesamiento.

¿Qué es la ruta de representación crítica?

La ruta de representación crítica se refiere a la serie de pasos que un navegador realiza en su viaje para representar una página, al convertir HTML, CSS y JavaScript en píxeles reales en la pantalla.

Esencialmente, el navegador necesita solicitar, recibir y analizar todos los archivos HTML y CSS (más algún trabajo adicional) antes de que comience a representar cualquier contenido visual.

Hasta que el navegador complete estos pasos, los usuarios verán una página en blanco en blanco.

¿Cómo lo optimizo?

Mejorar la ruta de representación crítica implica identificar y analizar sus recursos críticos (cualquier recurso que bloquee la representación inicial de la página) y buscar oportunidades para:

– Reduzca la cantidad de recursos críticos al aplazar los recursos de bloqueo de procesamiento.- Acorte el camino crítico priorizando el contenido de la mitad superior de la página y descargando todos los activos críticos lo antes posible.- Reduzca el número de bytes críticos al reducir el tamaño del archivo de los recursos críticos restantes.

Este artículo se centrará en el paso 1: aplazar los recursos de bloqueo de procesamiento (es decir, reorganizar los elementos para aumentar la eficiencia y ha

…Para leer más, siga el link del idioma que prefiera