Google Lighthouse: guía práctica para desarrolladores
Qué es Lighthouse, cómo ejecutarlo en Chrome DevTools, CLI o CI, en qué fijarte en el informe, y por qué un 100 en la puntuación no cuenta toda la historia del rendimiento real.
Lighthouse es una herramienta de código abierto de Google que audita páginas web y devuelve un informe con puntuaciones y recomendaciones. Cubre rendimiento, accesibilidad, buenas prácticas, SEO y, cuando aplica, PWA.
Este artículo explica cómo usarla en el día a día, qué mirar en el informe y algunos trucos que marcan la diferencia — sin confundir el análisis de laboratorio con la experiencia real de tus usuarios.
Por qué deberías usar Lighthouse
- Feedback rápido: en segundos tienes una lista priorizada de problemas y sugerencias, sin montar un ambiente de pruebas complejo.
- Cubre varias dimensiones: no solo "va lento", también contraste, etiquetas, HTTPS, metaetiquetas y recursos que bloquean la carga.
- Encaja en el flujo de desarrollo: puedes usarla desde Chrome DevTools, la línea de comandos o integrarla en CI para detectar regresiones antes de que lleguen a producción.
- Complementa otras herramientas: PageSpeed Insights usa Lighthouse como motor, pero agrega datos reales de usuarios. Laboratorio + campo es la combinación ideal.
Si solo haces una cosa después de leer esto: ejecuta Lighthouse en la URL real que importa y repite la auditoría después de cada cambio para ver si mejoró.
Qué audita Lighthouse
| Categoría | Qué revisa |
|---|---|
| Rendimiento | Tiempos de carga, interactividad, estabilidad visual, peso de recursos |
| Accesibilidad | Subconjunto automático de problemas — muchas cosas aún requieren revisión manual |
| Buenas prácticas | Seguridad básica, APIs obsoletas, errores en consola |
| SEO | Metadatos, enlaces, indexabilidad en móvil |
| PWA | Service worker, manifest, soporte offline |
Las puntuaciones van de 0 a 100. En general: menos de 50 es rojo, 50–89 es ámbar, 90 o más es verde. Úsalas como orientación, no como certificado absoluto.
Cómo ejecutar Lighthouse
Chrome DevTools (ideal para iterar en local)
- Abre la página en Chrome.
- Abre DevTools → pestaña Lighthouse.
- Elige categorías y dispositivo (móvil es el estándar).
- Haz clic en Analizar.
Es la opción más práctica para páginas locales o con autenticación, ya que corre en tu sesión de Chrome.
CLI (automatización y CI)
npm install -g lighthouse
lighthouse https://tu-sitio.com --output html --output-path informe.html
Para auditar solo categorías específicas:
lighthouse https://tu-sitio.com --only-categories=performance,accessibility
Exporta el resultado en JSON para guardarlo o abrirlo en el visor de informes.
PageSpeed Insights
Introduces una URL pública y obtienes el análisis de Lighthouse más, si hay datos disponibles, información de experiencia real de usuarios (CrUX). Es la forma más rápida de obtener contexto de campo sin configurar nada.
Qué mirar en el informe
Métricas principales
- FCP (First Contentful Paint): cuándo aparece el primer texto o imagen.
- LCP (Largest Contentful Paint): cuándo carga el elemento principal visible.
- TBT (Total Blocking Time): cuánto tiempo el hilo principal estuvo bloqueado por JavaScript.
- CLS (Cumulative Layout Shift): cuánto se mueven los elementos durante la carga.
Oportunidades vs diagnósticos
- Oportunidades: cambios concretos con estimado de ahorro en tiempo de carga. Prioriza los de mayor impacto.
- Diagnósticos: contexto adicional sobre el DOM, scripts de terceros, fuentes, etc. Útil para entender el problema de raíz.
Algunas auditorías que vale la pena revisar siempre:
- JavaScript no usado
- Caché en recursos estáticos
- Texto visible mientras cargan las fuentes (
font-display) preconnecta orígenes críticos- Redireccionamientos innecesarios
- Videos en lugar de GIFs pesados
Accesibilidad: no confíes solo en el 100
Lighthouse cubre solo una parte de los problemas de accesibilidad — los que se pueden detectar automáticamente. El resto requiere pruebas manuales: navegación por teclado, orden de foco, anuncios de estado, etc. Un 100 en accesibilidad no significa que tu sitio sea accesible para todos.
Trucos útiles
- Audita en modo incógnito: evita que extensiones de Chrome afecten los resultados.
- Emulación consistente: usa siempre el mismo dispositivo y resolución para poder comparar auditorías entre sí.
- Guarda el JSON: puedes abrir informes anteriores en el visor oficial y comparar evolución.
- Cuidado con
preload: agregarel=preloadsolo después de medir — precargar mal puede retrasar el primer render. - Revisa terceros: filtra por "third party" en la pestaña de red y cruza con el tiempo de evaluación de scripts. Muchas regresiones vienen de analytics, widgets o publicidad.
- Intégralo en CI: define umbrales mínimos en tu pipeline para detectar regresiones antes de que lleguen a producción. Lighthouse CI facilita esta integración.
La advertencia honesta: un 100 no es la web perfecta
Lighthouse trabaja con datos simulados en condiciones de laboratorio. Eso es útil para detectar problemas técnicos, pero no refleja lo que viven tus usuarios en dispositivos y redes reales.
Lo que Lighthouse te dice → problemas técnicos concretos y regresiones. Lo que los usuarios reales experimentan → necesitas RUM o datos de campo como CrUX.
La combinación ideal es Lighthouse para el desarrollo + PageSpeed Insights o WebPageTest para entender el comportamiento real en producción.
Conclusión
Usa Lighthouse temprano y con frecuencia. Es barata de ejecutar, enseña a tu equipo un vocabulario común — LCP, CLS, TBT — y alinea mejoras de rendimiento, accesibilidad y SEO. Combínala con pruebas manuales de accesibilidad y métricas reales cuando el tráfico lo justifique.