Cómo crear una Web mejor con Lighthouse

Desde Google I/O, trabajamos arduamente para lograr que Lighthouse sea un complemento excelente para compilar apps web progresivas excelentes:

Hoy, nos complace anunciar el lanzamiento de la versión 1.3 de Lighthouse. Lighthouse 1.3 incluye una gran cantidad de funciones nuevas, 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.

Entonces, ¿cuáles son las novedades?

Nuevo diseño

Si usaste una versión anterior de Lighthouse, es posible que hayas notado que el logotipo es nuevo. El informe HTML y la extensión de Chrome también se actualizaron por completo, con una presentación más clara de las puntuaciones y más coherencia en los resultados de la auditoría. También agregamos información de depuración útil cuando fallas una prueba y, además, incluimos indicadores de soluciones alternativas recomendadas.

Informe de Lighthouse

Nuevas prácticas recomendadas

Hasta la fecha, Lighthouse se ha centrado en las métricas de rendimiento y la calidad de las AWP. Sin embargo, un objetivo general del proyecto es proporcionar una guía para todo el desarrollo web. Esto incluye orientación sobre prácticas recomendadas generales, sugerencias de rendimiento y accesibilidad, y ayuda de extremo a extremo para crear apps de calidad.

"Crear una mejor Web" es una iniciativa dentro del proyecto Lighthouse para ayudar a los desarrolladores a mejorar la Web. En otras palabras, ayúdalos a modernizar y optimizar sus aplicaciones web. A menudo, los desarrolladores web usan prácticas desactualizadas o antipatrones, o alcanzan errores de rendimiento conocidos sin darse cuenta. Por ejemplo, es muy conocido que las animaciones basadas en JS se deben realizar con requestAnimationFrame() en lugar de con setInterval(). Sin embargo, si el desarrollador no conoce la API más reciente, su aplicación web se ve afectada innecesariamente.

Lighthouse 1.3 incluye más de 20 nuevas prácticas recomendadas que van desde sugerencias para modernizar las funciones de CSS y JavaScript hasta recomendaciones de rendimiento, como "Reduce la cantidad de recursos que bloquean el procesamiento" y "Usa objetos de escucha de eventos pasivos para mejorar el rendimiento del desplazamiento".

Implementa mejores prácticas recomendadas para la Web.

Seguiremos agregando más recomendaciones con el tiempo. Si tienes sugerencias sobre prácticas recomendadas o quieres ayudarnos a escribir una auditoría, informa un problema en GitHub.

Visualizador de informes

Por último, nos complace anunciar un nuevo visor web para los resultados de Lighthouse. Visita googlechrome.github.io/lighthouse/viewer, arrastra y suelta el resultado de una ejecución de Lighthouse (o haz clic para subir tu archivo) y listo. "Insta" en el informe HTML de Lighthouse.

Visualizador de informes.
Visualizador de informes

Lighthouse Viewer también te permite compartir informes con otras personas. Si haces clic en el ícono para compartir, accederás a GitHub. Almacenamos los informes como un secreto en tu cuenta, para que puedas borrar fácilmente un informe compartido o actualizarlo más adelante. El uso de GitHub para el almacenamiento de datos también significa que puedes obtener el control de versiones de forma gratuita.

Arquitectura del visualizador.
Arquitectura del visualizador

El visor de Lighthouse puede volver a cargar los informes existentes si agregas ?gist=GIST_ID a la URL:

Arquitectura del visualizador 2.
Arquitectura del visualizador 2

Para obtener 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 informarnos errores, presentar solicitudes de funciones o intercambiar ideas sobre ideas sobre lo que te gustaría ver a continuación.