Lighthouse es una herramienta automatizada de código abierto que sirve 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, este ejecuta una serie de pruebas en la página y, luego, genera un informe en el que se explica el rendimiento de la página y se indican las áreas de mejora.
Hoy, nos complace anunciar la versión 1.5 de Lighthouse, una gran versión con más de 128 PR. Lighthouse 1.5 incluye muchas funciones nuevas, auditorías y las correcciones de errores habituales. Puedes instalarlo 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 estilo no utilizadas en tu página y los ahorros de costo y tiempo que se obtienen si las quitas:
La auditoría de imágenes optimizadas informa las imágenes que no están optimizadas y el ahorro de costos y tiempo que se obtiene al optimizarlas:
La Auditoría de imágenes responsivas informa las imágenes que son demasiado grandes y el posible ahorro de costos o tiempo que se obtendría si se ajustaran correctamente el tamaño para el dispositivo determinado:
La auditoría de baja y de intervenciones enumera las advertencias de la consola de Chrome si tu página usa APIs o funciones obsoletas que tienen intervenciones:
Informar modificaciones
Como viste, nos enfocamos en hacer que el informe sea menos desordenado visualmente. Para ello, agregamos datos tabulares, ocultamos el texto de ayuda innecesario y agregamos funciones nuevas para facilitar la navegación por los datos.
Configuración de emulación
Es fácil olvidar qué parámetros de configuración de limitación y emulación se usaron para una ejecución de Lighthouse en particular. 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 tiempo prolongado:
Datos de seguimiento más útiles
Las métricas de Lighthouse, como "Primera pintura significativa", "Tiempo de carga", etc., se simulan como medidas de Tiempos del 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 registro en DevTools o abrirlo en el Visor de cronograma de DevTools.
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 nuevo botón con opciones para exportar el informe en diferentes formatos. Una de esas opciones es "Abrir en el visor". Si haces clic en este botón, el informe se enviará al Visor en línea, donde podrás compartirlo con los usuarios de GitHub.
En segundo plano, el visor obtiene tu permiso a través de OAuth para crear un gist secreto de GitHub y guardar el informe allí. Como se hace como tu Gist, mantienes el control total sobre el uso compartido del informe y puedes borrarlo en cualquier momento. Puedes revocar el permiso del lector para crear resúmenes en la configuración de GitHub.
Experimento de rendimiento
La primera versión del proyecto Experimento de rendimiento se lanzó en la versión 1.5.0. Esto te permite experimentar con el rendimiento de carga de la página y probar de forma interactiva los efectos de bloquear o retrasar los recursos en tu ruta crítica durante el desarrollo.
Cuando Lighthouse se ejecuta con la marca --interactive, se genera un informe especial que permite la selección interactiva de recursos de página costosos. 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, modernizamos la documentación en developers.google.com/web/tools/lighthouse/ y agregamos nuevas referencias de auditoría.
Eso es todo por ahora.
Para obtener todos los detalles sobre las últimas novedades de Lighthouse, consulta las notas de la versión completas en GitHub. Como siempre, comunícate con nosotros para informar errores, enviar solicitudes de funciones o intercambiar ideas sobre lo que te gustaría ver a continuación.