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 en sus sitios.
Lighthouse 10 está disponible de inmediato en la línea de comandos a través de npm y en Chrome Canary. En las próximas semanas, llegará a la versión estable de Chrome en Chrome 112 y a PageSpeed Insights.
Cambios en la puntuación
Quitaremos la métrica Tiempo de carga (TTI) en Lighthouse 10, lo que concluye el proceso de baja que comenzó en Lighthouse 8. La ponderación de la puntuación del 10% de TTI está cambiando al Cambio de diseño acumulado (CLS), que ahora representará el 25% de la puntuación de rendimiento general.
TTI marca un momento determinado, pero la forma en que se define hace que sea demasiado sensible a las solicitudes de red con valores atípicos y las tareas largas. Por lo general, el Procesamiento de imagen con contenido más grande (LCP) y el Índice de velocidad son mejores heurísticas para comprobar si el contenido de una página está cargado que un recuento de solicitudes de red activas. Mientras tanto, el Tiempo de bloqueo total (TBT) controla las tareas largas y la disponibilidad del subproceso principal de manera más sólida y, aunque no es un proxy directo, tiende a correlacionarse mejor con las Métricas web esenciales según se mide en el campo.
El aumento de peso de CLS es imprevisto para la eliminación de TTI, pero refleja mejor su importancia como Métrica web esencial y lo ideal es que aumente el enfoque de los sitios que aún realizan cambios de diseño innecesarios.
Esperamos que esto mejore las puntuaciones de rendimiento de la mayoría de las páginas, ya que la mayoría de ellas tienden a obtener mejores puntuaciones en CLS que en TTI. En un análisis de 13 millones de cargas de páginas en la última ejecución de HTTP Archive, el 90% de esas páginas vería una mejora en su puntuación de rendimiento de Lighthouse, y el 50% de ellas percibía una mejora en el rendimiento de más de 5 puntos.
![Un indicador de puntuación de Lighthouse, desglosado por las métricas (FCP, SI, LCP, TBT y CLS) que conforman la puntuación total](https://developer.chrome.com/static/blog/lighthouse-10-0/image/a-lighthouse-score-gauge-af1b4e727c113.png?authuser=7&hl=es)
Si, por alguna razón, aún necesitas el valor TTI de Lighthouse (por ejemplo, en una aserción de CI), aún está disponible sin cambios en el resultado de JSON de Lighthouse, solo con el peso de puntuación 0 y oculto en el informe HTML. Cualquier acceso por secuencia de comandos al valor JSON debería seguir funcionando sin cambios.
Auditorías nuevas
Lighthouse 10 ofrece una nueva auditoría de rendimiento y un cambio significativo en otra.
Memoria caché atrás/adelante
La memoria caché atrás/adelante (bfcache) es una de las herramientas más potentes disponibles para mejorar el rendimiento de una página para los usuarios reales. Más allá de la caché normal del navegador, una página cargada desde la bfcache restablecerá el diseño de la página y el estado de ejecución casi al instante, por lo que omitirá en gran medida toda la actividad de carga de página y hará que tu página se muestre a los usuarios de inmediato a medida que navegan hacia atrás y hacia adelante por su historial.
Sin embargo, existen algunas maneras en que una página puede evitar que el navegador la restablezca desde la bfcache. Esta nueva auditoría de Lighthouse en realidad sale de la página de prueba y vuelve a ella para probar si se puede almacenar en la memoria caché y se enumeran los motivos por los que falla.
![Un resultado de ejemplo de la auditoría de bfcache, en el que se enumeran las fallas debido a una conexión IndexDB abierta y se descargan controladores en la página](https://developer.chrome.com/static/blog/lighthouse-10-0/image/an-example-result-the-bf-5819bf7710451.png?authuser=7&hl=es)
Consulta los documentos de auditoría de bfcache para obtener más información.
Entradas para evitar el pegado
Se amplió la auditoría de las prácticas recomendadas "Permite que los usuarios peguen contenido en los campos de contraseña" para verificar que funcione la acción de pegar datos en cualquier campo de entrada (que no sea de solo lectura). En la mayoría de los sitios, evitar que se pegue contenido es una experiencia del usuario negativa e impide flujos de trabajo legítimos de seguridad y accesibilidad.
La nueva auditoría ahora es "Permite que los usuarios peguen contenido en los campos de entrada" (paste-preventing-inputs
).
Usuarios del nodo
Si usas Lighthouse como biblioteca de nodos, es posible que debas tener en cuenta algunos cambios programáticos rotundos en esta versión. Consulta el registro de cambios 10.0 para obtener más detalles.
Lighthouse 10 también se envía con declaraciones completas de tipo de TypeScript. Todo lo que se importe desde lighthouse
debería estar escrito, lo que debería ser muy útil si estás escribiendo secuencias de comandos de flujos de usuario de Lighthouse.
![Una secuencia de comandos de Node que importa Lighthouse como función, lo que demuestra que el objeto de opciones que se pasó a la función ahora tiene el tipo verificado por TypeScript.](https://developer.chrome.com/static/blog/lighthouse-10-0/image/a-node-script-importing-l-94bd6d132bf88.png?authuser=7&hl=es)
Prueba los tipos y comunícate con nosotros si tienes algún problema al usarlos.
Faro en ejecución
Lighthouse está disponible en las herramientas para desarrolladores de Chrome, en npm (como módulo de Node y una herramienta de CLI) y como extensión del navegador (en Chrome y Firefox). También funciona con varios servicios de Google, como PageSpeed Insights.
Para probar la CLI de Node de Lighthouse, usa los siguientes comandos:
npm install -g lighthouse
lighthouse https://www.example.com --view
Comunícate con el equipo de Lighthouse
Para analizar las nuevas funciones, los cambios en la versión de Lighthouse 10 o cualquier otro aspecto relacionado con Lighthouse, haz lo siguiente:
- Informa un problema o envía comentarios a través de la herramienta de seguimiento de errores de Lighthouse en GitHub.
- Haz preguntas en los foros de discusión de Lighthouse en GitHub.
- Comunícate con el equipo de Lighthouse en Twitter @____lighthouse.