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. Se incluirá en la versión estable de Chrome en Chrome 112 y en PageSpeed Insights en las próximas semanas.
Cambios en las puntuaciones
En Lighthouse 10, se quitará la venerable métrica Tiempo hasta que es interactiva (TTI), lo que concluye que el proceso de baja comenzó en Lighthouse 8. La ponderación de la puntuación del 10% de TTI cambiará a 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 y tareas largas. Por lo general, el Procesamiento de imagen con contenido más grande (LCP) y el Índice de velocidad son mejores métodos heurísticos para que el contenido de una página se sienta cargado que un recuento de solicitudes de red activas. Mientras tanto, el tiempo de bloqueo total (TBT) se encarga de las tareas largas y la disponibilidad del subproceso principal de forma más sólida y, si bien no es un proxy directo, tiende a correlacionarse mejor con las Métricas web esenciales según las mediciones en el campo.
El aumento de peso de CLS es imprevista a la eliminación de TTI, pero refleja mejor su importancia como Core Web Vital e idealmente aumentará el enfoque para los sitios que aún realizan cambios de diseño innecesarios.
Esperamos que esto mejore la experiencia de rendimiento, ya que la mayoría de las páginas tienden a obtener mejores resultados 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ían una mejora en la puntuación de rendimiento de Lighthouse, y el 50% de ellas notó una mejora en el rendimiento de más de 5 puntos.
Si, por algún motivo, aún necesitas el valor de TTI de Lighthouse (por ejemplo, en una aserción de CI), este sigue disponible sin cambios en el resultado de Lighthouse JSON, solo con un peso de puntuación 0 y oculto en el informe HTML. Cualquier acceso con secuencias de comandos del valor JSON debe seguir funcionando sin cambios.
Nuevas auditorías
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 y el estado de ejecución de la página casi al instante, lo que omitirá en gran medida toda la actividad de carga de la página y mostrará tu página a tus usuarios de inmediato mientras navegan hacia atrás y hacia adelante en su historial.
Sin embargo, hay algunas maneras en que una página puede impedir que el navegador restablezca una página desde la bfcache. Esta nueva auditoría de Lighthouse en realidad se aleja de la página de prueba y vuelve a la otra para probar si se puede bfcache, y enumera los motivos del error.
Para obtener más información, consulta los documentos de la auditoría de bfcache.
Pegar entradas para impedir
La auditoría de Prácticas recomendadas "Les permite a los usuarios pegar contenido en los campos de contraseñas" se expandió para comprobar que funcione la acción de pegar en cualquier campo de entrada (que no sea de solo lectura). Para la mayoría de los sitios, evitar que se pegue contenido es una experiencia del usuario netamente negativa y se impiden 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 una biblioteca de Node, es posible que debas tener en cuenta algunos cambios rotundos programáticos en esta versión. Consulta el registro de cambios 10.0 para obtener más detalles.
Lighthouse 10 también incluye declaraciones de tipo completas de TypeScript. Ahora, 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 usuarios de Lighthouse.
Prueba los tipos y comunícate con nosotros si tienes algún problema para usarlos.
Lighthouse en ejecución
Lighthouse está disponible en las herramientas para desarrolladores de Chrome, npm (como módulo Node y herramienta CLI) y como extensión del navegador (en Chrome y Firefox). También es compatible con varios servicios de Google, incluido 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 hablar sobre 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 GitHub de Lighthouse.
- Haz preguntas en los foros de debate de GitHub de Lighthouse.
- Comunícate con el equipo de Lighthouse en Twitter (@____lighthouse).