Novedades de Lighthouse 11

Adam Raine
Adam Raine
GitHub
Jasmine Yan
Jasmine Yan
GitHub

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 11 está disponible de inmediato en la línea de comandos a través de npm, en Chrome Canary y en PageSpeed Insights. Llegará a la versión estable de Chrome en Chrome 118.

Consulta la lista completa de cambios en el registro de cambios 11.0.

Actualizaciones de las categorías de accesibilidad

Las actualizaciones de categorías incluyen nuevas auditorías automatizadas, ponderación mejorada y auditorías manuales priorizadas para ayudar a los desarrolladores a hacer que sus sitios sean más accesibles.

Nuevas auditorías y ponderación

Desde Lighthouse 10.0, se agregaron 13 nuevas auditorías de accesibilidad:

  • aria-allowed-role
  • aria-dialog-name
  • aria-text
  • html-xml-lang-mismatch
  • image-redundant-alt
  • input-button-name
  • label-content-name-mismatch
  • link-in-text-block
  • select-name
  • skip-link
  • table–duplicate-name
  • table-fake-caption
  • td-has-header

Además de las nuevas auditorías, se actualizaron las ponderaciones de todas las auditorías para que coincidan mejor con los correspondientes niveles de impacto de la regla de AXe. Consulta la documentación sobre la puntuación de accesibilidad de Lighthouse para obtener detalles exactos sobre las nuevas auditorías y ponderaciones.

Visibilidad de la auditoría manual

Lighthouse siempre ha incluido algunas auditorías manuales que no se pueden probar automáticamente, pero de todas formas se incluyen como una lista de tareas para verificar funcionalidades importantes. Ahora, la sección de auditoría manual se expande automáticamente cuando se aprueban todas las auditorías automatizadas.

Un informe de Lighthouse que muestra las auditorías manuales de la categoría de accesibilidad expandida

Esto enfatiza que aprobar todas las auditorías automatizadas y obtener un 100 en accesibilidad no garantiza que se pueda acceder a la página auditada. las pruebas manuales siguen siendo importantes. También se reordenaron las auditorías manuales para comenzar con las verificaciones más accesibles.

Cambios en las auditorías existentes

Interacción con el siguiente procesamiento de imagen (INP)

INP ya no es experimental, por lo que la métrica se trasladó de experimental-interaction-to-next-paint a interaction-to-next-paint.

Trabajadores de servicio

Ya no se requiere un service worker para que una página se pueda instalar como una AWP en Chrome, por lo que se quitó la verificación service-worker de la categoría AWP de Lighthouse.

Resumen de recursos

Se quitó la auditoría resource-summary del informe de Lighthouse. Las estadísticas de solicitudes de red aún se pueden compilar con la auditoría oculta network-requests:

const {lhr} = await lighthouse('https://example.com');
const networkRequests = lhr.audits['network-requests'].details.items;
const resourceSummary = {};

for (const request of networkRequests) {
  let total = resourceSummary[request.resourceType] || 0;
  total += request.resourceSize;
  resourceSummary[request.resourceType] = total;
}

console.log(resourceSummary);

Navegación heredada

La marca --legacy-navigation de la CLI, la función legacyNavigation() en la API de Node y la barra de navegación heredada del panel de Herramientas para desarrolladores. Esto completa una transición de un año de duración en la infraestructura de Lighthouse para admitir flujos de usuarios.

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 11 o cualquier otro aspecto relacionado con Lighthouse, haz lo siguiente: