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.
Lightthouse 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 las métricas Core Web se añadirán al algoritmo de clasificación de Google en la actualización de Google Page Experience, son señales claras de que el gigante de las búsquedas 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 que tu sitio se carga, mayor será tu rango y más conversiones recibirás.
Las seis métricas de Lighthouse que necesita optimizar
Google se preocupa por cómo los usuarios experimentan la web. Dos sitios web pueden terminar de cargar exactamente al mismo tiempo, pero uno puede parecer que se carga más rápido, según cómo se muestra el contenido en la página. Mientras que ambos sitios terminaron de cargar 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 . La primera pintura con contenido (FCP), el índice de velocidad (SI) y la mayor pintura con contenido (LCP) miden la velocidad de carga percibida y mantienen un peso combinado del 55% en la puntuación de 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 interactivo (TTI). El último 5% de la puntuación se basa en una métrica que mide la estabilidad visual, llamada Cupulative Layout Shift (CLS).
La primera pintura significativa (FMP) y la primera CPU indle (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. Estos son los más grandes de Pintura Contenida (LCP) y Tiempo Total de Bloqueo (TBT) en Lighthouse 6,0.
| Faro 5,7 | Peso | Faro 6,0 | Peso |
|---|---|---|---|
| Primera Pintura Contenida (FCP) | 20% | Primera Pintura Contenida (FCP) | 15% |
| Índice de velocidad (SI) | 27% | Índice de velocidad (SI) | 15% |
| Primera pintura significativa (FMP) | 7% | La pintura más grande con contenido (LCP) | 25% |
| Primer CPU inactivo (FCI) | 13% | Tiempo total de bloqueo (OTC) | 25% |
| Tiempo de Interacción (TTI) | 33% | Tiempo de Interacción (TTI) | 15% |
| - | - | Cambio de diseño acumulativo (CLS) | 5% |
Estas son las métricas de seis velocidades en las que debes centrarte mientras auditas tu 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 a las que debes apuntar 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 en el que 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 tenía un peso del 20% en Lighthouse 5,7, pero solo tenía un peso del 15% sobre su puntuación de Lighthouse 6,0.
En la tira de película anterior, el FCP para la carga de la primera página se mide a 0,6 segundos. Aquí 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 es visible. Esta es una distinción importante entre la primera pintura contentful y la más grande. LCP se mide a 0,9 segundos cuando se muestra el contenido de arriba del pliegue.
A medida que pases por tu auditoría de puntuación de Lighthouse 6,0, asegúrate de que tus páginas promedien FCP de 2 segundos o menos, ya que este es el umbral de la métrica para el percentil 75 y Google lo considera rápido. Los FCPS entre 2 y 4 segundos se consideran velocidades moderadas, y los FCP superiores a 4 segundos caen por debajo del percentil 50 y se clasifican como lentos.
Si encuentra que los FCP se cargan demasiado lentos, puede deberse a uno o más de los siguientes:
- Demasiados recursos de bloqueo de renderizado
- Archivos CSS grandes
- Falta de conexiones seguras con orígenes de terceros
- Tiempos de respuesta del servidor largos
- Múltiples redirecciones de página
- Recursos estáticos no almacenados
- Excesivo tamaño DOM
Para optimizar su FCP, considere lo siguiente:
- Incorpore 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 procesamiento.
- Elimine todos los caracteres innecesarios del CSS para reducir el tamaño de los archivos.
- Utilice preconnect para establecer conexiones tempranas a orígenes importantes de terceros.
- Reduzca los tiempos de respuesta del servidor optimizando la lógica de aplicación del servidor o actualizando el hardware del servidor para tener más memoria.
- Evita más de una redirección de 1 página.
- Utilice el almacenamiento en caché HTTP para almacenar en caché recursos estáticos.
- Tenga menos de 1.500 nodos en total, una profundidad de menos de 32 nodos y un nodo padre con menos de 60 nodos secundarios para reducir el tamaño del 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 está semi-disminuido, lo que influye en el 15% de la puntuación de rendimiento de una página. Google todavía ve esto como una métrica perceptiva clave, ya que una página con una visualización lenta de la imagen puede ser percibida como imprudente.
Lightthouse 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 medio en el que se muestran las partes visibles de la página determina el SI. Esta métrica diferirá en función de los tamaños de pantalla del dispositivo.
A medida que avanza en su auditoría de calificaciones de Lighthouse 6,0, apunte a SIS en 4.3 segundos o menos. Esta velocidad se ubica 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 los SIS más lentos que 5,8 segundos caen por debajo del percentil 50 y se consideran lentos.
Los tiempos SI más lentos tienden a provenir de lo siguiente:
- Los tiempos de carga en el hilo principal superan los 4 segundos
- El tiempo de ejecución de JavaScript supera los 3,5 segundos
- Los archivos de fuente grandes causan un destello de texto invisible (FOIT).
Para reducir los tiempos SI, considere lo siguiente:
- 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.
- Asegúrese de que el texto permanezca visible durante la carga de Webfont para evitar FOIT.
La pintura más grande y contentful
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 que se muestra el elemento de contenido más grande, FMP es conocido por producir resultados inconsistentes y solo puede estandarizarse en ciertos navegadores web.
LCP mide cuando el elemento de contenido más grande está 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 en el que un usuario percibe una página completamente cargada, pero el contenido aún puede estar cargando debajo del pliegue.
Los sitios web de mejor rendimiento, como los de Layer0 (ahora Edgio), ofrecen LCP en menos de 1 segundo. Los LCPS de hasta 2,5 segundos se consideran rápidos y se clasifican en el percentil 75 para esta métrica. Los LCPS entre 2,5 segundos y 4 segundos se consideran moderados, necesitan mejoras, y los LCP que superan los 4 segundos caen por debajo del percentil 50 y son considerados lentos por Google.
Los LCP lentos generalmente provienen de uno o más de los siguientes:
- Tiempos de respuesta del servidor lentos
- Bloqueo de renderizado JavaScript y CSS
- Largos tiempos de carga de recursos
- Problemas de renderizado 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:
- Optimice los tiempos de respuesta del servidor enrutando el tráfico a la CDN más cercana disponible, almacenando activos en caché, proporcionando páginas HTML en primer lugar en caché y estableciendo conexiones de terceros con anticipación.
- Reduzca CSS eliminando CSS innecesarios, diferir CSS no crítico y CSS crítico en línea. Reduzca el tiempo de bloqueo de JavaScript comprimiendo archivos JavaScript.
- Para reducir los tiempos de carga de recursos, optimizar y comprimir archivos de imagen y texto, y precargar recursos importantes.
- Optimice el renderizado del lado del cliente mediante el renderizado del lado del servidor y la pre-renderización.
Tiempo total de bloqueo
TBT reemplaza a FCI de Lighthouse 5,7, que solía tener un peso del 13%. En Lighthouse 6,0, TBT mide la capacidad de respuesta de la página y representará el 25% de una puntuación de rendimiento. El TBT mide la gravedad de lo no interactiva que es una página antes de que se vuelva interactiva de forma fiable.
Conoces estos casos dolorosos: Estás esperando que una página se cargue y, finalmente, parece lista. Tocas el producto que quieres ver, pero no pasa nada. ¿Topas de nuevo? Se sabe que este período de espera causa literalmente estrés en los consumidores. Esencialmente, el 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 tardan 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 tome más de 50 ms será lo suficientemente larga para que un usuario note y perciba la página como lenta, o peor aún, inactiva, y lo lleve a irse. Para evitarlo, intente que un TBT inferior a 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 una o más de las siguientes:
- Código de terceros que bloquea el hilo principal durante 250 ms o más
- El tiempo de ejecución de JavaScript tarda más de 3,5 segundos
- El hilo principal está ocupado durante más de 4 segundos durante la carga
- Un alto volumen de solicitudes de red y grandes tamaños de transferencia
Para mejorar esta métrica, considere lo siguiente:
- Cargue eficientemente JavaScript de terceros usando los atributos async o diferer en las etiquetas de script, establezca conexiones tempranas a orígenes importantes de terceros y use carga perezosa.
- 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.
- Optimice CSS y JavaScript para reducir el recuento de recursos y los tamaños de transferencia.
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 a TBT, que mide cuánto tiempo tarda una página en ser fiable o totalmente interactiva. Lightthouse considera una página interactiva de forma fiable cuando se muestra el primer elemento de contenido, se han cargado sus scripts iniciales (si los hay) y puede responder a la entrada del usuario dentro de 50 ms.
Para un usuario, las TTI lentas pueden parecer que una página está inactiva o rota. Aunque una página parece interactiva, en realidad no es porque el hilo principal está bloqueado (medido por TBT). Al auditar su sitio web para Lighthouse 6,0, intente que las TTI en 5,2 segundos o menos se consideren rápidas. Las TTI de entre 5,2 y 7,3 segundos se consideran velocidades moderadas, y las TTI más lentas de 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 una o más de las siguientes:
- Grandes tamaños de carga útil y largo tiempo de análisis de script
- Largos tiempos de carga de recursos
- El código de terceros bloquea el hilo principal durante 250ms o más
- Cadenas de peticiones críticas
- Velocidad del hilo principal lenta y tiempo de ejecución de JavaScript
- Altos recuentos de recursos o grandes tamaños de transferencia
Reducir el tiempo de TTI se puede hacer optimizando su JavaScript. Esto incluye:
- Reduzca y comprima archivos JavaScript para reducir los tamaños de carga útil y el tiempo de análisis de scripts.
- Precargue las solicitudes y / o agregue preconexión para tiempos de carga más rápidos.
- Cargue eficientemente JavaScript de terceros usando los atributos async o diferer en las etiquetas de script y usando lazy-loading.
- 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 que se cargan los recursos restantes.
- 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.
- Optimice CSS y JavaScript para reducir el recuento de recursos y los tamaños de transferencia.
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 la frecuencia con la que los usuarios experimentan cambios inesperados en el diseño. Ya has experimentado esto antes: Estás a punto de tocar un producto, y bam, de repente, tocas algo más en la página porque los elementos cambiaron. Estas experiencias pueden ser bastante molestas y ser vistas como janky para un usuario.
El CLS se mide por la suma total de todas las puntuaciones de cambio de diseño individuales para cada cambio de diseño inesperado que ocurre durante toda la vida útil de la página. Un buen CLS es inferior a 0,1 y se ubica en el percentil 75 para el rendimiento. Un CLS entre 0,1 y 0,25 se considera moderado, y cualquier medida superior a 0,25 cae por debajo del percentil 50 y es considerado lento por Google.
Si encuentra un CLS deficiente durante su auditoría de puntuación de Lighthouse 6,0, es probable que se deba a uno de los siguientes:
- Una imagen o vídeo que se redimensiona a sí mismo
- Una fuente que se carga tarde y se muestra más grande o más pequeño de lo previsto
Para mejorar esta métrica, considere lo siguiente:
- Incluye dimensiones exactas en tus imágenes y elementos de video
- Evita anuncios emergentes o banners
- Evite la fuente que causa FOIT/FOUT
Las puntuaciones de Lightthouse 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 para medir cómo perciben los usuarios la velocidad. Si una puntuación cae por debajo de los estándares, será percibida como lenta, no solo por los usuarios, sino por el propio gigante de las búsquedas, lo que resulta 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, descubrió que un retraso de 1 segundo en la carga de la página podría costarle a la compañía una pérdida de 1.6 millones de dólares al año.
Conclusión
Esta última versión de Lighthouse demuestra el énfasis del gigante de las búsquedas en las métricas de velocidad perceptual. Las métricas de puntuación de Lighthouse 6,0 intentan medir la rapidez con la que los visitantes perciben que tu página está completamente cargada (incluso si todavía está ejecutando procesos en segundo plano).
Tres métricas, Primera pintura con contenido, Índice de velocidad y Pintura con contenido más grande, miden la velocidad de carga percibida y representan el 55% de su puntuación de rendimiento. Apunta a FCP 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 para interactivo. Una rápida auditoría de puntuación de Lighthouse 6,0 mostrará un TBT en menos de 300 ms y un TTI en menos de 5,2 segundos, o un usuario percibirá su sitio como un janky.
Finalmente, 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. Intenta obtener mediciones de CLS inferiores a 0,1 y recibirás el 5% del peso total que tiene en tu Puntaje de Rendimiento.
Para recibir una lista de verificación simple que cubra las velocidades que debe aspirar a entregar en su auditoría de Lighthouse 6,0 Score, junto con las técnicas de optimización por métrica, por favor complete el siguiente formulario.
