Lighthouse es una herramienta automatizada de código abierto para mejorar la calidad de tus apps web. Puedes instalarlo como una extensión de Chrome o ejecutarlo como una herramienta de línea de comandos de Node. Cuando le proporcionas una URL a Lighthouse, se ejecuta un bombardeo de pruebas contra la página y, luego, se genera un informe que explica el rendimiento de la página y que indica áreas de mejora.
Hoy, nos complace anunciar la versión 1.5 de Lighthouse, una gran actualización, con más de 128 PR. Lighthouse 1.5 incluye muchas funciones nuevas importantes, auditorías y las correcciones de errores habituales. Puedes instalarla
desde npm (npm i -g lighthouse) o
descargar la extensión
desde Chrome Web Store.
Auditorías nuevas
La Auditoría de uso de CSS informa la cantidad de reglas de diseño sin usar en tu página y el ahorro de costos y tiempo que se obtienen al quitarlas:
La Auditoría de imágenes optimizadas informa las imágenes que no están optimizadas y el ahorro de tiempo y costo de optimizarlas:
La auditoría de imágenes responsivas informa las imágenes que son demasiado grandes y el ahorro de tiempo y costo potencial de ajustarlas correctamente para el dispositivo determinado:
En la auditoría de bajas e intervenciones, se enumeran las advertencias de la consola de Chrome si tu página usa APIs obsoletas o funciones que tienen intervenciones:
Informar modificaciones
Como viste, nos enfocamos en agregar datos tabulares, ocultar texto de ayuda irrelevante y agregar funciones nuevas para facilitar la navegación por los datos, lo que permite que el informe esté menos desordenado.
Configuración de emulación
Es fácil olvidar qué configuración de regulación y emulación se usó para una ejecución específica de Lighthouse. Los informes de Lighthouse ahora incluyen la configuración de emulación del entorno de ejecución que se usó para crear el informe; una solicitud de función de larga duración:
Datos de seguimiento más útiles
Las métricas de Lighthouse, como "Primer procesamiento de imagen significativo", "Tiempo de carga", etc., se simulan como mediciones de Tiempo de usuario y se vuelven a insertar en los datos de seguimiento guardados con la marca --save-assets.
Si usas la marca --save-assets, ahora puedes colocar el seguimiento en Herramientas para desarrolladores o abrirlo en el Visualizador de cronograma de Herramientas de desarrollo.
Podrás ver tus métricas clave en contexto con el seguimiento completo de la carga de la página.
Visualizador de Lighthouse
En los informes HTML, verás un botón nuevo con opciones para exportar el informe en diferentes formatos. Una de las opciones es "Abrir en el visualizador". Si haces clic en este botón, se enviará el informe al Visualizador en línea, donde podrás compartirlo aún más con los usuarios de GitHub.
En segundo plano, el visualizador obtiene tu permiso a través de OAuth para crear un gist secreto de GitHub y guarda el informe allí. Dado que se realiza en tu Gist, tienes el control total sobre el uso compartido del informe y puedes borrarlo en cualquier momento. Puedes revocar el permiso del visualizador para crear GIS en tu configuración de GitHub.
Experimento de rendimiento
La primera versión del proyecto Experimentos de rendimiento llegó a la versión 1.5.0. Esto te permite experimentar con el rendimiento de carga de tu página y probar de forma interactiva los efectos del bloqueo o la demora de los recursos en la ruta crítica durante el desarrollo.
Cuando se ejecuta Lighthouse con la marca --interactive, se genera un informe especial que permite la selección interactiva de recursos costosos de la página. Luego, el servidor del experimento vuelve a ejecutar Lighthouse en esa página con esos recursos bloqueados.
Obtén más información sobre el experimento de rendimiento en Lighthouse.
Nueva documentación
Por último, pero no menos importante, modernizamos la documentación en developers.google.com/web/tools/lighthouse/ y agregamos nuevas referencias de auditoría.
Eso es todo por ahora.
Para conocer todos los detalles sobre la versión más reciente de Lighthouse, consulta las notas de la versión completas en GitHub. Como siempre, comunícate con nosotros para informar errores, presentar solicitudes de funciones o intercambiar ideas sobre ideas sobre lo que te gustaría ver a continuación.