Google PageSpeed actualiza sus métricas de tiempo de carga
El pasado 13 de noviembre de 2018 PageSpeed Insights (PSI) incorporó la herramienta Lighthouse a su motor de análisis de tiempo de carga. El cambio se realizó con el fin de homogeneizar las métricas entre las diferentes herramientas que Google ofrecía a los desarrolladores ya que hasta el momento utilizaban diferentes factores para sus análisis y los informes ofrecían resultados y recomendaciones de rendimiento diferentes. De este modo y sabiendo la importancia que tiene el Page Speed en un mundo 100% mobile, la obsesión de conseguir acercarse al 100/100 se vuelve prioritaria. Y más para la comunidad SEO desde la llegada de Mobile First Index, un nuevo sistema de rastreo que prioriza el posicionamiento en la versión móvil de la web, y para ello el tiempo de carga juega un papel decisivo. Pero antes de mejorar la nota, vamos a repasar las métricas de análisis del nuevo PageSpeed Insights: Datos de campo: Ofrece una primera foto del tiempo de carga de la web durante los últimos 30 días en comparación con el rendimiento de otras webs incluidas en el informe de Experiencia de Usuario de Chrome. Los datos que se tienen en cuenta para esta parte del análisis son el Primer Renderizado de Contenido (FCP), el tiempo que tarda la página en mostrar la primera imagen o texto, y la Latencia de la Primera Interacción (FID), es decir, el tiempo de carga total hasta que el usuario puede interactuar con nuestros botones o contenidos dentro de la página. 
La herramienta arroja los resultados en una escala de colores. Es una representación de cómo se ha cargado tu página para los diferentes usuarios de los que se han registrado datos en el informe de Chrome UX Report en los últimos 30 días. En color verde, las veces que el FCP y el FID se mostraron en un tiempo rápido (<1s), en naranja, las veces en las que se cargó en un tiempo medio normal (entre 1 y 2,5s), y en rojo, las veces que se cargó de forma lenta (>2,5s). La media de todos los FCP y los FID aparece en el lado superior de la derecha de cada una de las métricas. Si la mediana de tu página comparada con la del resto de páginas que hay en Chrome UX Report es normal, tu puntuación saldrá en naranja. Si está por encima, saldrá en verde, siendo más rápido que la media; y si está por debajo de la media, saldrá en rojo. Aquí podemos ver como la media de carga del FCP frente al resto de webs es lento, de unos 4s, y que además tienen que pasar otro segundo más de media para que la página empiece a ser sea interactiva para el usuario. A veces el informe Experiencia de Usuario de Chrome no tiene suficientes datos en tiempo real de la velocidad de la web analizada. Cuando no tenga histórico, este campo aparecerá vacío. Datos de experimento: Google PageSPeed simula un test de carga a través de un dispositivo móvil con una conexión 3G analizando una serie de métricas vinculadas a las diferentes etapas de carga de una web y la posibilidad de interacción del usuario a lo largo de las mismas, que son: 
La herramienta arroja los resultados en una escala de colores. Es una representación de cómo se ha cargado tu página para los diferentes usuarios de los que se han registrado datos en el informe de Chrome UX Report en los últimos 30 días. En color verde, las veces que el FCP y el FID se mostraron en un tiempo rápido (<1s), en naranja, las veces en las que se cargó en un tiempo medio normal (entre 1 y 2,5s), y en rojo, las veces que se cargó de forma lenta (>2,5s). La media de todos los FCP y los FID aparece en el lado superior de la derecha de cada una de las métricas. Si la mediana de tu página comparada con la del resto de páginas que hay en Chrome UX Report es normal, tu puntuación saldrá en naranja. Si está por encima, saldrá en verde, siendo más rápido que la media; y si está por debajo de la media, saldrá en rojo. Aquí podemos ver como la media de carga del FCP frente al resto de webs es lento, de unos 4s, y que además tienen que pasar otro segundo más de media para que la página empiece a ser sea interactiva para el usuario. A veces el informe Experiencia de Usuario de Chrome no tiene suficientes datos en tiempo real de la velocidad de la web analizada. Cuando no tenga histórico, este campo aparecerá vacío. Datos de experimento: Google PageSPeed simula un test de carga a través de un dispositivo móvil con una conexión 3G analizando una serie de métricas vinculadas a las diferentes etapas de carga de una web y la posibilidad de interacción del usuario a lo largo de las mismas, que son: 
- Primer Renderizado de Contenido o FCP. El tiempo que tarda la página en cargar la primera imagen o fragmento de texto, por ejemplo el logo o el menú de navegación.
- Primer Renderizado Significativo. El tiempo que tarda la página en cargar el contenido principal de la página con sus imágenes y textos correspondientes.
- Índice de Velocidad. La rapidez con la que se rellenan los blancos de los contenidos que se van pintando en la página. Cuanto más bajo sea el número, más rápido se carga el site.
- Primer Tiempo Inactivo de la CPU. Es el tiempo que transcurre hasta que los principales elementos de una página son mínimamente interactivos.
- Tiempo hasta que está interactiva. El tiempo que ha de transcurrir para que la página sea completamente interactiva.
- Latencia de Entrada Estimada o FID. El tiempo que tardan los elementos en responder a la interacción del usuario durante los 5 segundos de carga. Si la latencia es mayor a 50ms el usuario percibirá que la página tarda en cargarse.
Oportunidades: Recomendaciones que ofrece Google PageSpeed en base al análisis de Lighthouse sobre cómo optimizar las métricas de rendimiento de la página. Al lado de cada recomendación aparece una estimación de cuánto de rápido se cargaría la página si la mejora se implementara. 
Diagnóstico: Recomendaciones más técnicas pensadas en los desarrolladores principalmente que mejoran el renderizado de la página, entre ellas reducir el número de nodos de los que se compone la página o el tiempo de ejecución de JS. 
¿Cómo mejorar la puntuación? A continuación, mencionamos algunas recomendaciones generales que mejoran el performance y aumentan la puntuación de PageSpeed de Google.
- Aplaza la carga de las imágenes o vídeos que no son visibles de entrada. Tecnologías como Lazy Load permiten la carga progresiva de los recursos a medida que los necesita el usuario al interactuar con ellos o hacer scroll. Su implementación reduce el tiempo de carga inicial ya que se carga solo lo que hay en zona visible de la pantalla a ojos del usuario.
- Elimina o aplaza los recursos que bloquean la carga de la página. El bloque se produce cuando el navegador se encuentra un script o un CSS al procesar el HTML. Para continuar con la carga de la página, el navegador tiene que detenerse y pedir el archivo al servidor, esperar a que se descargue y procesarlo. Hasta que no lo ejecuta no puede terminar de procesar el resto del HTML
- Evita los redireccionamientos innecesarios. Resuelve los bucles de redirecciones, ya que se pierde tiempo de carga en ir de una página a otra.
- Elimina las reglas de CSS que no se utilizan. Suprimir las líneas que no se usan mejorarán el rendimiento de tu web, ya que estarás reduciendo el tamaño de tus hojas de estilo. Puedes ver el CSS que no se está usando en la consola de Chrome, en el apartado Coverage.
- Actualiza tus imágenes a los formatos de próxima generación: JPEG 2000, JPEG XR o WebP. Se trata de formatos de imagen que se descargan de forma más rápida y consumen menos datos, además de tener características de compresión y calidad mucho mayores a los clásicos formatos PNG o JPEG. El principal problema es que estos formatos no son compatibles aún en todos los navegadores, por lo que habrá que seguir de cerca su evolución durante el 2019 para ver si finalmente podemos implementarlos en las webs.
Fuentes: Google y LightHouse
Configuración de cookies