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

A partir de la versión de Chrome 84 se añadieron las nuevas métricas que serán tenidas en cuenta a partir de Junio 2021 motivados por las «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 las diferentes versiones.

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

Y es que éstas tres métricas no tiene el mismo peso sobre el total de las métricas de rendimiento en Lighthouse. Esto se puede ver claramente en la calculadora de peso de Core Web Vitals y que constantemente los ingenieros actualizan en el % de peso para ajustarse a las necesidades del usuario.

Lighthouse 8.0 – DevTools Chrome

Se ha publicado recientemente la versión 8 de Lighthouse que corre sobre la versión 93 de Chrome y la versión inestable de Chrome Canary (en la herramienta de PageSpeedInsights también se aplica).

Las principales novedades que trae resumidas son:

  • Se ha vuelto a ponderar la puntuación de rendimiento ( # 12577 )
  • Se actualizaron las curvas de puntuación TBT y FCP ( # 12576 ,  # 12556 )
  • CLS se ha actualizado a su nueva definición en ventana ( # 12554 )
  • Nuevo filtro. Puedes filtrar después de la auditoría, entre las diferentes métricas para centrarte en las oportunidades y diagnósticos más relevantes para mejorar.
  • El Lighthouse Treemap  ya está disponible en todos los principales clientes de Lighthouse. Si tu sitio expone mapas de origen a Lighthouse, busca el botón «View Treemap» para ver un desglose del todas de peticiones de la página filtrable por peso y cobertura (cuánto no se usa).

Esta actualización viene con algunos cambios importantes en el peso de las métricas: CLS aumenta su peso x3 en favor de otras métricas como FCP, SI o TTI (que bajan un 5% cada una), TBT (FID) sube un 5% y LCP que se mantiene en un 25%.

Comparativa de versiones Lighthouse en Mobile

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)