Actualización de Lighthouse para enero de 2017

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.

Logotipo de Lighthouse
Logotipo de Lighthouse

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:

Auditoría de uso de CSS

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:

AudiT con imágenes optimizadas

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:

AudiT con imágenes optimizadas

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:

Auditoría de intervenciones y bajas

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:

Configuración de emulació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.

Datos de seguimiento

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.

Botón Abrir en el visualizador
Abrir en los resultados del lector

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.

Activar o desactivar la configuración del tiempo de ejecución

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.

Documentación nueva

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.