Home Blogs Auditoría de puntuación de Lighthouse 6,0: Una lista de verificación para preparar su sitio web
Applications

Auditoría de puntuación de Lighthouse 6,0: Una lista de verificación para preparar su sitio web

About The Author

Outline

Google Lighthouse se ha convertido en la herramienta de facto para muchos sitios web para medir su rendimiento con una sola puntuación: La puntuación de rendimiento de Lighthouse. Una nueva versión, Lighthouse 6,0, ya está disponible en npm en Chrome Canary, PageSpeed Insights y GSC Console. A mediados de julio, Lighthouse 6,0 se lanzará completamente a los usuarios de Chrome en Chrome 84. Ahora es el momento de asegurarse de que su sitio esté listo para la nueva versión con una auditoría de puntuación Lighthouse 6,0.

Lighthouse 6,0 viene con métricas nuevas y depreciadas, así como una nueva fórmula de ponderación para calcular las puntuaciones de rendimiento. Esta nueva versión, junto con el anuncio de que Core Web Metrics se agregará al algoritmo de clasificación de Google en la actualización de Google Page Experience, son señales claras de que el gigante de la búsqueda está enfatizando la velocidad percibida, la velocidad a la que un usuario percibe una página como cargada. Cuanto más rápido perciban los usuarios su sitio para cargar, más alto será su rango y más conversiones recibirá.

Las seis métricas de Lighthouse que necesita optimizar

Google se preocupa por cómo los usuarios experimentan la web. Es posible que dos sitios web terminen de cargarse exactamente al mismo tiempo, pero uno puede parecer que se carga más rápido, en función de cómo se muestra el contenido en la página. Si bien ambos sitios terminaron de cargarse simultáneamente, Google favorecerá a este último, el sitio con un rendimiento percibido más rápido.

Las puntuaciones de Lighthouse 6,0 se basan en un promedio ponderado de seis métricas de velocidad centradas en el usuario. First Contentful Paint (FCP), Speed Index (SI) y Large Contentful Paint (LCP) miden la velocidad de carga percibida y mantienen un peso combinado del 55% en la puntuación Lighthouse de un sitio web en la versión 6. Otro 40% de la puntuación se basa en métricas que miden la capacidad de respuesta, otro aspecto que afecta la percepción de velocidad de un usuario. Estos incluyen el tiempo total de bloqueo (TBT) y el tiempo de interacción (TTI). El último 5% de la puntuación se basa en una métrica que mide la estabilidad visual, llamada Cambio de diseño acumulativo (CLS).

La primera pintura significativa (FMP) y la primera inactividad de CPU (FCI) de la puntuación Lighthouse 5,7 fueron reemplazadas por mejores métricas para medir la velocidad desde una perspectiva centrada en el usuario. Estas son las pinturas contentful más grandes (LCP) y el tiempo total de bloqueo (TBT) en Lighthouse 6,0.

Faro 5,7 Peso Faro 6,0 Peso
Primera pintura contentful (FCP) 20% Primera pintura contentful (FCP) 15%
Índice de velocidad (SI) 27% Índice de velocidad (SI) 15%
Primera pintura significativa (FMP) 7% Pintura contentful más grande (LCP) 25%
Primer Idle de CPU (FCI) 13% Tiempo total de bloqueo (TBT) 25%
Tiempo de Interactividad (TTI) 33% Tiempo de Interactividad (TTI) 15%
- - Cambio de diseño acumulativo (CLS) 5%

Aquí están las métricas de seis velocidades en las que se debe concentrar mientras audita su sitio web en preparación para Lighthouse 6,0. Las métricas se presentan en el orden en que se miden a medida que se carga la página.

Una lista de verificación simplificada que cubre las velocidades que debe tratar de entregar y las técnicas de optimización por métrica están disponibles en la parte inferior de este artículo.

Primera pintura contentful

FCP marca el primer punto cuando un usuario puede ver cualquier contenido de la página en la pantalla. Este contenido incluye texto, imágenes, gráficos o archivos SVG. FCP tuvo un peso del 20% en Lighthouse 5,7, pero solo tuvo un peso del 15% sobre su puntuación Lighthouse 6,0.

En la tira de película de arriba, el FCP para la carga de la primera página se mide a 0,6 segundos. Esto es cuando el contenido aparece por primera vez en la página de inicio de TheTieBar.com, pero notarás que no es cuando todo el contenido está visible. Esta es una distinción importante entre la primera y la mayor pintura contentful. El LCP se mide a 0,9 segundos cuando se muestra el contenido sobre el pliegue.

A medida que avanzas en tu auditoría de puntuación Lighthouse 6,0, asegúrate de que tus páginas promedien FCPS de 2 segundos o menos, ya que este es el umbral de la métrica para el percentil 75 y es considerado rápido por Google. Los FCPS entre 2 y 4 segundos se consideran velocidades moderadas, y los FCPS superiores a 4 segundos caen por debajo del percentil 50 y se clasifican como lentos.

Si encuentra que la carga de FCPS es demasiado lenta, puede deberse a uno o más de los siguientes factores:

  1. Demasiados recursos de bloqueo de renderizado
  2. Grandes archivos CSS
  3. Falta de conexiones seguras con orígenes de terceros
  4. Largos tiempos de respuesta del servidor
  5. Múltiples redirecciones de página
  6. Recursos estáticos no almacenados en caché
  7. Tamaño DOM excesivo

Para optimizar su FCP, considere lo siguiente:

  1. Inline recursos críticos, aplace recursos no críticos y elimine todo lo que no se utilice para reducir el impacto de las URL de bloqueo de renderizado.
  2. Elimina todos los caracteres innecesarios del CSS para reducir el tamaño de los archivos.
  3. Utilice Preconnect para establecer conexiones tempranas con orígenes importantes de terceros.
  4. Reduzca los tiempos de respuesta del servidor optimizando la lógica de la aplicación del servidor o actualizando el hardware del servidor para tener más memoria.
  5. Evite más de una redirección de 1 página.
  6. Utilice el almacenamiento en caché HTTP para almacenar en caché recursos estáticos.
  7. Tener menos de 1.500 nodos en total, una profundidad de menos de 32 nodos, y un nodo padre con menos de 60 nodos hijos para disminuir el tamaño DOM.

Índice de velocidad

Si mide la progresión visual de una carga de página y calcula una puntuación general de la rapidez con la que se pinta el contenido. En Lighthouse 5,7, SI tenía un peso del 27% sobre el Performance Score de un sitio web. En Lighthouse 6,0, esto es semi-disminuido, influyendo en el 15% de la puntuación de rendimiento de una página. Google todavía ve esto como una métrica perceptual clave, ya que una página con una visualización lenta de la imagen puede ser percibida como janky.

Lighthouse mide SI capturando una tira de película de una página a medida que se carga en el navegador y analizando la progresión visual cuadro por cuadro. El tiempo promedio en el que se muestran partes visibles de la página determina el SI. Esta métrica diferirá según los tamaños de pantalla del dispositivo.

A medida que avanzas en tu auditoría de puntuación de Lighthouse 6,0, apunta a SIS en 4.3s o menos. Esta velocidad se sitúa en el percentil 75 y es considerada rápida por Google. Las páginas con SIS entre 4,3 y 5,8 segundos son moderadas, y SIS más lento que 5,8 segundos caen por debajo del percentil 50 y se consideran lentas.

Los tiempos de SI más lentos tienden a provenir de lo siguiente:

  1. Los tiempos de carga en el hilo principal exceden 4 segundos
  2. El tiempo de ejecución de JavaScript supera los 3,5 segundos
  3. Los archivos de fuente grandes causan un flash de texto invisible (FOIT).

Para reducir los tiempos de SI, considere lo siguiente:

  1. Implemente la división de código, elimine el código no utilizado y comprima el código para reducir la carga en el hilo principal y el tiempo de ejecución de JavaScript.
  2. Asegúrese de que el texto permanezca visible durante la carga de Webfont para evitar FOIT.

La pintura contentful más grande

LCP es una nueva métrica añadida a Lighthouse 6,0 y recibe un 25% de peso en la puntuación de rendimiento de un sitio. LCP reemplaza la primera pintura significativa (FMP) de Lighthouse 5,7. Aunque ambas métricas miden el tiempo en que se muestra el elemento de contenido más grande, FMP es conocido por producir resultados inconsistentes y solo se puede estandarizar en ciertos navegadores web.

LCP mide cuando el elemento de contenido más grande es completamente visible en la pantalla. Los elementos de contenido medidos incluyen elementos a nivel de bloque, imágenes (incluidas imágenes dentro de archivos SVG) y videos. Esta es una métrica extremadamente importante para los sitios web de comercio electrónico, ya que marca el punto en el tiempo en el que la mayoría de los usuarios perciben la página como completamente cargada y son más propensos a hacer una compra.

En el ejemplo anterior, el LCP es de 0,9 segundos, cuando la imagen principal está completamente pintada. Esta métrica captura un momento distinto cuando un usuario percibe una página completamente cargada, sin embargo, el contenido aún puede estar cargando debajo del pliegue.

Los sitios web de alto rendimiento, como los de Layer0 (ahora Edgio), entregan LCP en menos de 1 segundo. Los LCPS de hasta 2,5 segundos se consideran rápidos y se ubican en el percentil 75 para esta métrica. Los LCPS entre 2,5 segundos y 4 segundos se consideran moderados, que necesitan mejoras, y los LCPs superiores a 4 segundos caen por debajo del percentil 50 y son considerados lentos por Google.

Los LCPs lentos generalmente se derivan de uno o más de los siguientes:

  1. Tiempos de respuesta del servidor lentos
  2. Bloqueo de renderizado JavaScript y CSS
  3. Largos tiempos de carga de recursos
  4. Problemas de renderización del lado del cliente

Si encuentra más lentos que los LCP deseados durante su auditoría de puntuación de Lighthouse 6,0, considere lo siguiente:

  1. Optimice los tiempos de respuesta del servidor enrutando el tráfico a la CDN más cercana disponible, almacenando activos en caché, sirviendo páginas HTML en primer lugar en caché y estableciendo conexiones de terceros con anticipación.
  2. Reduzca CSS eliminando CSS innecesarios, aplazando CSS no crítico y CSS crítico en línea. Reduzca el tiempo de bloqueo de JavaScript comprimiendo archivos JavaScript.
  3. Para reducir los tiempos de carga de recursos, optimizar y comprimir archivos de imagen y texto, y precargar recursos importantes.
  4. Optimice el renderizado del lado del cliente utilizando el renderizado del lado del servidor y el prerenderizado.

    Programe una demostración 1 a 1 programe una conversación consultiva ahora para aprender cómo Layer0 (ahora Edgio) puede ayudarlo a lograr cargas de páginas de subsegundos. Haga clic aquí.

Tiempo total de bloqueo

TBT reemplaza a FCI de Lighthouse 5,7, que solía contener un 13% de peso. En Lighthouse 6,0, TBT mide la capacidad de respuesta de la página y representará el 25% de una puntuación de rendimiento. TBT mide la severidad de lo no interactiva que es una página antes de que se vuelva confiable interactiva.

Conoces estos casos dolorosos: Estás esperando a que se cargue una página y, finalmente, parece lista. Usted toca el producto que desea ver, pero no pasa nada. ¿Tocan de nuevo? Se sabe que este período de espera causa literalmente estrés en los consumidores. Esencialmente, TBT es la cantidad de tiempo que un consumidor siente ese estrés debido a la no interactividad de una página.

Fuente: web.dev

Esta métrica se mide calculando la suma total del tiempo “bloqueado” (tareas que duran más de 50 ms) entre el primer elemento de contenido mostrado (FCP) y cuando un usuario puede interactuar completamente con la página (TTI). Por ejemplo, en la imagen de arriba, hay cinco tareas que tienen lugar en el hilo principal, pero solo tres de ellas superan los 50 ms. El primero por 200ms, el segundo por 40ms, y el tercero por 105ms. TBT es (200+40+105) 345ms.

Una tarea que dure más de 50 ms será lo suficientemente larga como para que un usuario note y perciba la página como lenta, o peor, inactiva, y le lleve a irse. Para evitar esto, intente que un TBT de menos de 300 ms se considere rápido. Los TBT entre 300ms y 600ms se consideran velocidades moderadas y necesitan mejoras. Los TBT más lentos que 600 ms caen por debajo del percentil 50 y se consideran lentos.

Las tareas largas suelen ser causadas por uno o más de los siguientes factores:

  1. Código de terceros que bloquea el hilo principal por 250 ms o más
  2. El tiempo de ejecución de JavaScript tarda más de 3,5 segundos
  3. El hilo principal está ocupado durante más de 4 segundos durante la carga
  4. Un alto volumen de solicitudes de red y grandes tamaños de transferencia

Para mejorar esta métrica, considere lo siguiente:

  1. Cargue de manera eficiente JavaScript de terceros utilizando los atributos async o defer en las etiquetas de script, establezca conexiones tempranas a orígenes importantes de terceros y use la carga perezosa.
  2. Para acelerar la ejecución de JavaScript y reducir la carga en el hilo principal, implemente la división de código, elimine el código no utilizado y comprima el código.
  3. Optimice CSS y JavaScript para reducir el recuento de recursos y el tamaño de las transferencias.

Tiempo para Interactivo

TTI es la tercera métrica arrastrada de Lighthouse 5,7, pero Google ha disminuido su peso del 33% al 15% en Lighthouse 6,0. TTI es una métrica complementaria de TBT, que mide cuánto tiempo tarda una página en volverse fiable o totalmente interactiva. Lighthouse considera una página fiable interactiva cuando se muestra el primer elemento de contenido, sus scripts iniciales (si los hay) se han cargado, y puede responder a la entrada del usuario dentro de 50 ms.

Para un usuario, las TTI lentas pueden sentir que una página está inactiva o rota. Aunque una página parece interactiva, no es porque el hilo principal esté bloqueado (medido por TBT). A medida que audite su sitio web para Lighthouse 6,0, busque TTI en 5,2 segundos o menos para que se considere rápido. Las TTI entre 5,2 y 7,3 segundos se consideran velocidades moderadas, y las TTI más lentas que 7,3 segundos se consideran lentas y afectarán la disposición de los consumidores a permanecer en el sitio.

Si su auditoría de puntuación de Lighthouse 6,0 muestra velocidades TTI deficientes, puede deberse a uno o más de los siguientes factores:

  1. Grandes tamaños de carga útil y largo tiempo de análisis de script
  2. Largos tiempos de carga de recursos
  3. Código de terceros bloquea el hilo principal para 250 ms o más
  4. Cadenas de solicitud críticas
  5. Velocidad de subproceso principal lenta y tiempo de ejecución de JavaScript
  6. Altos recuentos de recursos o grandes tamaños de transferencia

La reducción del tiempo de TTI se puede hacer optimizando su JavaScript. Esto incluye:

  1. Reduzca y comprima archivos JavaScript para reducir el tamaño de la carga útil y el tiempo de análisis del script.
  2. Solicitudes de precarga y/o añadir preconexión para tiempos de carga más rápidos.
  3. Cargue de manera eficiente JavaScript de terceros mediante el uso de los atributos async o defer en las etiquetas de script y mediante el uso de lazy-loading.
  4. Reduzca el efecto de las cadenas de solicitudes críticas en el rendimiento reduciendo el número de recursos críticos y optimizando el orden en el que se cargan los recursos restantes.
  5. Implemente la división de código, elimine el código no utilizado y comprima el código para reducir la carga en el hilo principal y el tiempo de ejecución de JavaScript.
  6. Optimice CSS y JavaScript para reducir el recuento de recursos y el tamaño de las transferencias.

Cambio de diseño acumulativo

CLS es la tercera métrica nueva introducida en Lighthouse 6,0, y es la única que no reemplaza ninguna métrica de Lighthouse 5,7. CLS representa el último 5% de su puntuación de Lighthouse 6,0, y mide la estabilidad visual.

Esta métrica mide con qué frecuencia los usuarios experimentan cambios de diseño inesperados. Has experimentado esto antes: Estás a punto de tocar un producto, y bam, de repente, toca algo más en la página porque los elementos cambiaron. Estas experiencias pueden ser bastante molestas y vistas como Janky para un usuario.

CLS se mide por la suma total de todas las puntuaciones de desplazamiento de diseño individuales para cada cambio de diseño inesperado que se produce durante toda la vida útil de la página. Un buen CLS es inferior a 0,1 y se sitúa en el percentil 75 para el rendimiento. Un CLS entre 0,1 y 0,25 se considera moderado, y cualquier medida mayor de 0,25 cae por debajo del percentil 50 y es considerada lenta por Google.

Si encuentra un CLS pobre durante su auditoría de puntuación de Lighthouse 6,0, es probable que se deba a uno de los siguientes factores:

  1. Una imagen o video redimensionándose a sí mismo
  2. Una fuente que se carga tarde y se muestra más grande o más pequeña de lo previsto

Para mejorar esta métrica, considere lo siguiente:

  1. Incluye dimensiones exactas en tus imágenes y elementos de vídeo
  2. Evite los anuncios popup o banners
  3. Evite la fuente que causa FOIT/FOUT

Las puntuaciones de Lighthouse te muestran lo que Google piensa de tu sitio

La puntuación de rendimiento de Lighthouse de una página indica cómo Google percibe la página en términos de velocidad. Cada métrica de Lighthouse 6,0 refleja el mejor intento de Google de medir cómo perciben los usuarios la velocidad. Si una puntuación cae por debajo de los estándares, se percibirá como lenta, no solo por los usuarios, sino por el propio gigante de la búsqueda, lo que resultará en impactos negativos en los ingresos y el SEO.

Google clasifica los sitios más rápido y más alto en la página de resultados del motor de búsqueda. Más allá del SEO, se ha encontrado que la velocidad del sitio tiene un impacto significativo en las conversiones y los ingresos. Amazon, por ejemplo, encontró que un retraso de 1 segundo en la carga de página podría costar a la compañía una pérdida DE $ 1.6B al año.

En resumen

Esta última versión de Lighthouse demuestra el énfasis del gigante de la búsqueda en las métricas de velocidad perceptual. Las métricas de puntuación en Lighthouse 6,0 intentan medir la rapidez con que los visitantes perciben su página como completamente cargada (incluso si todavía está ejecutando procesos en segundo plano).

Tres métricas, la primera Pintura contentosa, el índice de velocidad y la mayor Pintura contentosa, miden la velocidad de carga percibida y representan el 55% de su puntaje de rendimiento. Apunta a FCPS de 2 segundos, LCP de 2,5 y SIS de 4,3 segundos o menos.

Otro 40% de una puntuación de rendimiento se basa en métricas perceptuales que miden la capacidad de respuesta de una página. Estos incluyen el tiempo total de bloqueo y el tiempo de interacción. Una rápida auditoría de puntuación de Lighthouse 6,0 mostrará un TBT en menos de 300 ms y TTI en menos de 5,2 segundos, o un usuario percibirá su sitio como janky.

Por último, a nadie le gusta el texto o las imágenes saltando dentro y fuera de la pantalla. El cambio de diseño acumulativo es la sexta métrica a tener en cuenta en su auditoría de Lighthouse 6,0. Apunta a mediciones de CLS inferiores a 0,1 y recibirás el 5% del peso total que tiene en tu puntuación de rendimiento.

Para recibir una lista de verificación simple que cubra las velocidades que debe tratar de entregar en su auditoría de puntuación Lighthouse 6,0, junto con técnicas de optimización por métrica, por favor complete el siguiente formulario.