Lighthouse Diff: comparación de dos pruebas de velocidad web
Martin Michálek25/2/20265 minutos lectura¿Has lanzado una nueva versión de tu sitio web y necesitas saber qué ha cambiado en su velocidad? Lighthouse Diff te lo mostrará de manera clara y en un solo lugar.
Lighthouse Diff es una herramienta de código abierto del equipo de Google Chrome que compara visualmente dos informes de Lighthouse y destaca las diferencias.
Funciona como un "diff para la velocidad": así como los desarrolladores comparan dos versiones de código, tú puedes comparar dos versiones de la velocidad de tu sitio web.
¿Para qué sirve Lighthouse Diff?
Imagina que regularmente monitorea la velocidad de tu sitio web y un buen día notas que la puntuación de Lighthouse u otra métrica ha cambiado significativamente.
¿Qué ha sucedido realmente? ¿Se ha deteriorado una métrica específica o ha cambiado la evaluación de varias áreas a la vez?
Lighthouse Diff responde a estas preguntas tomando dos informes JSON de la herramienta Lighthouse y mostrándote:
- Cambios en la puntuación general. Puedes ver cómo ha cambiado la evaluación general del rendimiento de la página.
- Diferencias en métricas. Compara métricas específicas como LCP (velocidad de carga), CLS (estabilidad del diseño) o TBT (bloqueo del navegador) y observa cuáles han mejorado y cuáles han empeorado.
- Cambios en auditorías. Lighthouse realiza decenas de auditorías, desde el tamaño de las imágenes hasta la configuración adecuada de la caché y la eficiencia de JavaScript. Diff te muestra qué auditorías pasaron o fallaron en comparación con la medición anterior.
¿Por qué es importante comparar las pruebas?
Una mirada aislada a los resultados de una prueba de Lighthouse te dirá cómo está el sitio ahora. Pero si quieres entender qué ha cambiado y por qué, necesitas una comparación.
Lighthouse Diff es útil en estas situaciones:
- Después de lanzar una nueva versión del sitio web. Ejecuta una prueba antes y después del lanzamiento, y Diff te mostrará el impacto de los cambios. Verás si el nuevo código ha afectado negativamente la velocidad.
- Al buscar causas de deterioro. Cuando Watchdog te alerta de un deterioro en las métricas, Diff te ayuda a identificar el problema específico, como un nuevo script que bloquea el renderizado o una imagen más grande en la página.
- Al optimizar la velocidad. ¿Quieres confirmar que tus ajustes realmente ayudaron? Compara la prueba antes y después de la optimización.
- En la comunicación del equipo. Diff proporciona una evidencia visual clara de los cambios, facilitando la comunicación entre desarrolladores, mercadólogos y la dirección.
¿Cómo funciona Lighthouse Diff?
La herramienta trabaja con archivos JSON, que son la salida estándar de Lighthouse. Hay dos formas de realizar la comparación:
Comparación manual en la herramienta online
- Obtén dos informes JSON, por ejemplo, desde el detalle de la ejecución de la prueba en tu monitoreo, donde puedes descargarlos.
- Abre Lighthouse Diff.
- Sube ambos archivos: uno como "base" (estado inicial) y otro como "compare" (estado a comparar).
- La herramienta te mostrará inmediatamente las diferencias.
Comparación directamente en el monitoreo de PageSpeed.ONE
Desde la versión 4.10, Lighthouse Diff está integrado directamente en el monitoreo de PageSpeed.ONE. En Historial de mediciones, abre el detalle de cualquier medición y haz clic en el enlace de Lighthouse diff: la comparación con la medición anterior se abrirá automáticamente, sin necesidad de descargar archivos.
Esto funciona en pruebas PLUS, donde disponemos de salidas JSON completas de cada ejecución de prueba.
¿En qué métricas enfocarse?
Al comparar dos pruebas, recomendamos seguir especialmente estas métricas, que se muestran en la parte superior del Diff:
| Métrica | Qué mide | A qué prestar atención |
|---|---|---|
| LCP | Velocidad de carga del contenido principal | Cambios superiores a 200 ms |
| TBT | Bloqueo del hilo principal | Cambios superiores a 50 ms |
| CLS | Desplazamientos del diseño durante la carga | Cambios superiores a 0.05 |
| FCP | Primer renderizado de contenido | Cambios superiores a 100 ms |
Además de las métricas, también observa la sección de auditorías. Allí encontrarás las causas específicas de los cambios, como una nueva imagen sin carga diferida, falta de compresión o fuentes web no optimizadas web fonts.
Ten en cuenta que las mediciones sintéticas de Lighthouse tienen cierta variabilidad. Pequeñas diferencias (hasta un par de puntos en la puntuación) pueden deberse a fluctuaciones naturales, no a cambios reales en el sitio web. Asegúrate de comparar informes de Lighthouse del mismo entorno.
Resumen
Lighthouse Diff es un asistente práctico para cualquiera que cuide la velocidad de un sitio web. Te permite ver con precisión lo que ha cambiado entre dos pruebas, sin tener que comparar decenas de valores manualmente.
En combinación con el monitoreo de velocidad y los Performance Budgets, Lighthouse Diff es una parte esencial del conjunto de herramientas para mantener y mejorar la velocidad del sitio web. Desde la versión 4.10, está disponible directamente en el monitoreo de PageSpeed.ONE.