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, 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.

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, deshabilitando la opción de caché y no permitiendo el uso de extensiones en incógnito.

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 la url base y la comparativa (no permite hacer un volcado de varios informes y ver la evolución de esas puntuaciones).

También es posible hacer un seguimiento desde la herramienta online de medición WebDev. Si te logas con una cuenta podrás ir registrando tus informes guardados y ver la comparativa con el visor «Lighthouse CI Diff». Como punto negativo de esta tool es que necesitarás recordar las urls que estás monitorizando cada vez, además de que sólo permite un único informe.

Nuevas métricas

En la versión de Chrome 84 se añadieron las nuevas métricas que serán tenidas en cuenta a partir de Mayo 2021 por Google llamadas «Core Web Vitals», y que en Lighthouse se ven reflejadas en Large Contentful Paint y Cumulative Layout Shift, ya que son métricas que se analizan bajo entorno simulado con este tipo de herramientas de laboratio.

La otra métrica, First Input Delay, se analiza desde el punto de vista del usuario real (RUM) y no es posible simularla con Lighthouse, por lo que se sustituiría por el Total Blocking Time o Max Potential First Input Delay.

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, el informe adjunta un enlace a la calculadora con sus resultados completados:

Simulación del test

La configuración predeterminada de Lighthouse usa dispositivo móvil. 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:

Performance Audit (WebDev)

Developers Google Auditar Apps Web con Lighthouse

A Technical SEO Guide to Lighthouse Performance Metrics (SEJ)