Lighthouse es una herramienta de auditoría de sitios web que ayuda a los desarrolladores con oportunidades y diagnósticos para mejorar la experiencia del usuario de sus sitios.
Lighthouse 9.0 está disponible de inmediato en la línea de comandos, en Chrome Canary y en PageSpeed Insights. Llegará a la versión estable de Chrome en Chrome 98.
Cambios en la API
La mayoría de los usuarios no deberían encontrar ningún cambio que interrumpa el flujo de trabajo con esta versión. Si ejecutas auditorías personalizadas de Lighthouse o usas herramientas que dependen de detalles en el JSON del informe de Lighthouse, es posible que haya algunos cambios drásticos en la versión 9.0 que debes tener en cuenta.
Consulta la lista completa de cambios en el registro de cambios de la versión 9.0.
Lighthouse para flujos de usuarios
Lighthouse tiene una nueva API de flujo de usuarios que permite realizar pruebas de lab en cualquier momento durante el ciclo de vida de una página.
Puppeteer se usa para crear secuencias de comandos de cargas de páginas y activar interacciones sintéticas de los usuarios. Lighthouse se puede invocar de varias maneras para capturar estadísticas clave durante esas interacciones. Esto significa que el rendimiento se puede medir durante la carga de la página y durante las interacciones con ella.
Para obtener más información, consulta el instructivo y las muestras de código de flujos de usuarios de Lighthouse.
Actualización de informes
Se actualizó el informe de Lighthouse para mejorar la legibilidad y aclarar la fuente del informe y cómo se ejecutó.
Se incorporó una captura de pantalla final en la parte superior del informe para que puedas ver de un vistazo si la página que se está probando se cargó correctamente y tiene el formato esperado.
La información de resumen que se encuentra en la parte inferior del informe también se rediseñó para comunicar mejor cómo se ejecutó Lighthouse y cómo se recopiló el informe.
Para ver el nuevo informe en acción, prueba Lighthouse 9.0 o consulta este informe de ejemplo.
Elementos de accesibilidad relacionados
Un problema de accesibilidad común ocurre cuando los elementos que deberían ser únicos en una página no lo son, por ejemplo, si el ID al que se hace referencia en un atributo aria-labelledby se usa en varios elementos.
Lighthouse siempre advirtió sobre esta situación, pero solo enumeraba la primera instancia de un elemento con un ID repetido, lo que a menudo causaba confusión porque algunos usuarios suponían que se mostraban todos los elementos que causaban un problema. Dado que Lighthouse solo mostraba un elemento, supondría que se trataba de un error que el elemento se marcara como duplicado.
En Lighthouse 9.0, ahora se muestran todos los elementos que comparten ese ID:
axe-core proporciona esta funcionalidad de "nodos relacionados", por lo que también puede aparecer en otras auditorías de accesibilidad.
Para obtener más información, consulta el problema de recopilación de informes de usuarios y la solicitud de extracción de implementación.
Cómo ejecutar Lighthouse
Lighthouse está disponible en las Herramientas para desarrolladores de Chrome, npm (como un módulo de Node y una CLI) y como una extensión de navegador (en Chrome y Firefox). Abastece muchos servicios de Google, incluidos web.dev/measure y PageSpeed Insights.
Para probar la CLI de Lighthouse Node, usa los siguientes comandos:
npm install -g lighthouse
lighthouse https://www.example.com --view
Comunícate con el equipo de Lighthouse
Para hablar sobre las funciones nuevas, los cambios en la versión 9.0 o cualquier otro tema relacionado con Lighthouse, haz lo siguiente:
- Informa un problema o envía comentarios en el seguimiento de problemas de Lighthouse en GitHub.
- Haz preguntas en los foros de debate de Lighthouse en GitHub.
- Comunícate con el equipo de Lighthouse en Twitter @____lighthouse.