Lighthouse es una herramienta automatizada de auditoría de sitios web que ayuda a los desarrolladores con oportunidades y diagnósticos para mejorar la experiencia del usuario en sus sitios. Está disponible en Herramientas para desarrolladores de Chrome, npm (como módulo Node y CLI) o como una extensión del navegador (en Chrome y Firefox). Es compatible con muchos servicios de Google, incluidos web.dev/measure y PageSpeed Insights.
Lighthouse 8.4 está disponible de inmediato en la línea de comandos y en Chrome Canary. Llegará a la versión estable de Chrome en Chrome 95 y estará disponible en PageSpeed Insights en una semana.
Para probar la CLI de Node de Lighthouse, usa los siguientes comandos:
npm install -g lighthouse
lighthouse https://www.example.com --view
Consulta la lista completa de cambios en el registro de cambios 8.4.
Nuevas auditorías
No realices una carga diferida de imágenes de Largest Contentful Paint
Las imágenes de carga diferida pueden ser una forma eficaz de diferir las imágenes fuera de pantalla para que no interfieran en la carga del contenido que está en la mitad superior de la página.
Sin embargo, si el elemento LCP de una página es una imagen, la carga diferida puede tener un efecto negativo importante en el LCP. Es posible que el navegador coloque la imagen en la cola y obtenga primero otros recursos, en lugar de priorizar la imagen para su descarga inmediata. En un estudio reciente sobre la carga diferida en WordPress, se descubrió que el LCP puede mejorar hasta en un 15% para algunos sitios si las imágenes del viewport inicial no se cargan de forma diferida.
Ahora, Lighthouse detectará si el elemento LCP era una imagen de carga diferida y recomendará quitarle el atributo loading
.
Para obtener más información, consulta la propuesta inicial y la solicitud de extracción de la implementación.
Cómo establecer un viewport de dispositivo móvil para un mejor retraso de primera entrada
La auditoría de viewport
ha formado parte de la categoría Prácticas recomendadas durante años, pero en la versión 8.4 también se acepta este consejo en la categoría Rendimiento.
Muchos navegadores móviles admiten "presionar dos veces para acercar". para permitir que los usuarios amplíen con facilidad el contenido que no está diseñado para una pantalla de dispositivo móvil, es decir, contenido sin un <meta name="viewport">
explícito para dispositivos móviles. En la práctica, esto significa que el navegador necesita esperar hasta 300 ms después de que un usuario presione un botón para ver si puede presionarlo por segunda vez y, durante ese tiempo, la página no podrá responder al toque inicial. Esto se traduce en un FID con errores de varios cientos de milisegundos.
En un estudio reciente de datos del HTTP Archive, más de la mitad de los sitios que recibieron una puntuación de 90 o más en Lighthouse, pero que fallaron al menos una de las métricas esenciales, no tenían configurado un viewport para dispositivos móviles y no tenían problemas con el FID. Como resultado, la sección de rendimiento de Lighthouse ahora recomendará agregar un viewport como el siguiente si no se encuentra ninguno:
<meta name="viewport" content="width=device-width">
Para obtener más detalles, consulta el problema de la propuesta y la solicitud de extracción de la implementación.
Comunicarse con el equipo de Lighthouse
Para analizar las nuevas funciones, los cambios en la versión 8.4 o cualquier otro aspecto relacionado con Lighthouse, haz lo siguiente:
- Informa un problema o envía comentarios a través del repositorio de GitHub de Lighthouse.
- Comunícate con el equipo de Lighthouse en Twitter (@____lighthouse).