Lighthouse Auditoría de Webs

Cómo auditar el rendimiento de una página usando Lighthouse

La funcionalidad “Lighthouse” dentro de la herramienta para desarrolladores de Chrome en su versión 83, te permite analizar el rendimiento de la página según la puntuación obtenida en los valores de Progressive Web App (PWA), Performance, Best Practices, Accessibility y SEO. Podrás diferenciar en el test por dispositivo móvil y PC. Además, incluyen una opción de auditoría en fase beta para los anuncios.

Por ahora, sólo se permite realizar de página en página, no sobre un listado de urls. Los resultados en términos por ejemplo de velocidad de una página en concreto, no deberían ser tomados como 100% fiables y es recomendable no sólo hacer varias pruebas con diferentes tipos de urls que conformen el site (desde las páginas de registro a páginas detalle, categorías, etc.) sino que además se recomienda medir el resultado con otras herramientas como por ejemplo WebPageTest.org , PageSpeedInsight , TestMySite , etc. y sacar conclusiones de mejora de esos tiempos.

Puedes además hacer la simulación entre los dispositivos de mobile y desktop.

Cómo acceder a Lighthouse

Es preferible utilizar la herramienta desde la vista de incógnito simulando la experiencia de un nuevo usuario sin caché.

Monitoriza los resultados

Se recomienda hacer un seguimiento de cada resultado para poder comprobar si se ha mejorado en las estadísticas.

Para ello puedes descargar el .json de cada auditoría y a través de la opción “Lighthouse Viewer” puedes ir importando cada informe y ver los resultados (no permite hacer un volcado de varios informes y ver la evolución de esas puntuaciones).

ACTUALIZACIÓN 19/05/2020 LIGHTHOUSE 6.0

El pasado 19 de mayo, se comunicó la nueva versión de Lighthouse 6.0 para la próxima versión de Chrome 84 que estará disponible en el próximo mes de Julio. Si no quieres esperar y empezar a probarla, puedes hacerlo instalando la versión Canary de Chrome.

Algunas de las novedades que se incluyen en ésta nueva actualización son:

Nuevas métricas

En la versión de Chrome 83 las métricas son:

En la versión de Chrome 84 se añaden tres nuevas métricas que sustituyen a First Meaningful Paint, First CPU Idle y Max Potential FID.

Las nuevas métricas son:

Largest Contentful Paint (LCP) : muestra la rapidez con que un usuario puede ver realmente el contenido más grande de una página. Un valor LCP por debajo de 2.5 segundos se considera ‘Bueno’.

Cumulative Layout Shift (CLS) : se trata de una métrica centrada en la experiencia de usuario, y que mide cuánto cambia visualmente el contenido de una página. Una puntuación baja de CLS es una señal de que los usuarios no están experimentando cambios de contenido indebidos; por lo que un valor de CLS por debajo de 0,10 se considera ‘Bueno’.

Total Blocking Time (TBT) : TBT mide la cantidad de tiempo total entre First Contentful Paint (FCP) y Time to Interactive (TTI). Es una métrica complementaria de TTI. Lo recomendable es tener un tiempo de bloqueo total de menos de 300 milisegundos.

Nueva puntuación de Performance

Los pesos de las métricas han cambiado para dar más peso al Main Thread (TBT) y al Cumulative Layout Shift (CLS).

Calculadora de puntuación Lighthouse

Esta herramienta permite jugar con los valores y puntuaciones de las diferentes métricas de rendimiento, e incluso puedes hacer una comparativa entre las puntuaciones de la versión 5 y 6 de Lighthouse => Calculadora Lighthouse

Cuando ejecuta una auditoría con Lighthouse 6.0, el informe viene con un enlace a la calculadora con sus resultados completados:

Simulación del test

La configuración predeterminada de Lighthouse usa dispositivo móvil (recordemos MFI y Mobile Friendly). La simulación tiene en cuenta:

  • Red de conexión lenta
  • Emulación de pantalla del dispositivo (la misma que se encuentra en Chrome DevTools).
  • Se cambia de Nexus 5X Moto G4 como dispositivo de referencia (igual que tiene por defecto WebPageTest).

Fuentes:

What’s New in Lighthouse 6.0

A Technical SEO Guide to Lighthouse Performance Metrics

Web.dev Performance Audit

Developers Google Auditar Apps Web con Lighthouse