Auditoría con Lighthouse

¿Qué Es Lighthouse? #

Lighthouse es una herramienta automatizada open-source desarrollada por Google para auditar la calidad de páginas web. Ejecuta una serie de pruebas contra una página y genera un reporte con puntajes y recomendaciones accionables en cinco categorías: Performance, Accessibility, Best Practices, SEO y PWA.

Para ingenieros QA, Lighthouse funciona como un gate de calidad integral que puede detectar problemas desde cargas lentas hasta atributos de accesibilidad faltantes y configuraciones incorrectas de SEO — todo desde una sola herramienta.

Cinco Categorías de Auditoría #

Performance (0-100) #

Mide qué tan rápido carga la página y se vuelve interactiva. Las métricas clave incluyen:

El puntaje de performance es un promedio ponderado de estas métricas. TBT tiene el mayor peso, lo que significa que la eficiencia de ejecución de JavaScript tiene el mayor impacto en el puntaje.

Accessibility (0-100) #

Verifica problemas de cumplimiento WCAG:

• Ratios de contraste de color
• Uso de atributos ARIA
• Asociaciones de labels de formularios
• Texto alt de imágenes
• Jerarquía de encabezados
• Gestión de focus
• Soporte de navegación por teclado

Nota: Lighthouse detecta aproximadamente 30-40% de los problemas de accesibilidad. El testing manual y con screen readers sigue siendo necesario.

Best Practices (0-100) #

Evalúa prácticas modernas de desarrollo web:

• Uso de HTTPS
• Sin APIs deprecadas
• Ausencia de errores de consola
• Ratios de aspecto correctos de imágenes
• Links cross-origin seguros (rel="noopener")
• Declaración correcta de charset
• Sin librerías JavaScript vulnerables

SEO (0-100) #

Verifica optimización básica para motores de búsqueda:

• Meta description válida
• Tags de título correctos
• Links rastreables
• robots.txt válido
• Hreflang correcto para sitios multilingües
• Targets de tap amigables para móvil
• Tamaños de fuente legibles

PWA (Aprobado/Reprobado) #

Evalúa criterios de Progressive Web App:

• Manifiesto de web app válido
• Registro de service worker
• HTTPS
• Íconos y splash screens correctos
• Capacidad offline

Ejecutando Lighthouse #

Método 1: Chrome DevTools #

1. Abre la página en Chrome
2. Abre DevTools (F12) > pestaña Lighthouse
3. Selecciona categorías y tipo de dispositivo (Mobile/Desktop)
4. Haz clic en Analyze page load
5. Revisa el reporte generado

Tip: Siempre ejecuta en modo incógnito para evitar que extensiones afecten los resultados.

Método 2: Línea de Comandos (Recomendado para CI) #

# Instalar
npm install -g lighthouse

# Ejecutar auditoría
lighthouse https://example.com --output=html --output-path=./report.html

# Ejecutar con categorías específicas
lighthouse https://example.com --only-categories=performance,accessibility

# Output como JSON para uso programático
lighthouse https://example.com --output=json --output-path=./report.json

# Usar flags específicos de Chrome
lighthouse https://example.com --chrome-flags="--headless --no-sandbox"

Método 3: PageSpeed Insights #

Visita pagespeed.web.dev — ejecuta Lighthouse en los servidores de Google y combina datos de laboratorio con datos reales de usuarios del Chrome UX Report.

Método 4: Lighthouse CI #

Para integración CI/CD:

npm install -g @lhci/cli

# Inicializar configuración
lhci wizard

# Ejecutar en pipeline de CI
lhci autorun

Leyendo un Reporte de Lighthouse #

Interpretación de Puntajes #

Entendiendo Opportunities y Diagnostics #

Opportunities muestran mejoras específicas con ahorros de tiempo estimados:

• “Serve images in next-gen formats” — Ahorro 2.4s
• “Eliminate render-blocking resources” — Ahorro 1.2s
• “Properly size images” — Ahorro 0.8s

Diagnostics proporcionan información adicional de rendimiento:

• Tamaño del DOM (número de elementos)
• Cadenas de solicitudes críticas
• Desglose del trabajo del hilo principal
• Tiempo de ejecución de JavaScript

Variabilidad en Puntajes #

Los puntajes de Lighthouse pueden variar entre ejecuciones debido a:

• Condiciones de red
• Fluctuaciones en el tiempo de respuesta del servidor
• Carga de CPU en la máquina de testing
• Timing de scripts de terceros

Buena práctica: Ejecuta Lighthouse 3-5 veces y toma el puntaje mediano, o usa Lighthouse CI que maneja múltiples ejecuciones automáticamente.

Ejercicio: Flujo Completo de Auditoría Lighthouse #

Realiza una auditoría completa de Lighthouse en una aplicación web y crea un plan de acción priorizado.

Paso 1: Ejecutar la Auditoría #

Ejecuta Lighthouse contra un sitio web en tres configuraciones:

# Móvil (por defecto)
lighthouse https://tu-sitio.com --output=json --output-path=./mobile.json

# Desktop
lighthouse https://tu-sitio.com --preset=desktop --output=json --output-path=./desktop.json

# Página específica (ej. página de producto)
lighthouse https://tu-sitio.com/producto/123 --output=json --output-path=./producto.json

O usa la pestaña Lighthouse de DevTools — ejecuta una vez para Mobile, una vez para Desktop.

Paso 2: Documentar Puntajes #

Paso 3: Priorizar Hallazgos #

Para cada auditoría fallida, evalúa:

1. Impacto: ¿Cuántos usuarios son afectados? ¿Qué tan severo es el problema?
2. Esfuerzo: ¿Qué tan difícil es la corrección? (cambio CSS vs cambio de arquitectura)
3. Prioridad: Alto impacto + bajo esfuerzo = corregir primero

Crea una matriz de prioridad:

Paso 4: Configurar Lighthouse CI #

Crea una configuración lighthouserc.js:

module.exports = {
  ci: {
    collect: {
      url: [
        'https://tu-sitio.com/',
        'https://tu-sitio.com/productos',
        'https://tu-sitio.com/checkout',
      ],
      numberOfRuns: 3,
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', {minScore: 0.8}],
        'categories:accessibility': ['error', {minScore: 0.9}],
        'categories:best-practices': ['warn', {minScore: 0.9}],
        'categories:seo': ['error', {minScore: 0.9}],
      },
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};

Lighthouse CI en GitHub Actions #

Ejemplo de workflow para verificaciones automáticas de Lighthouse en cada pull request:

name: Lighthouse CI
on: pull_request

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci && npm run build
      - name: Run Lighthouse
        uses: treosh/lighthouse-ci-action@v11
        with:
          urls: |
            http://localhost:3000/
            http://localhost:3000/products
          budgetPath: ./budget.json
          uploadArtifacts: true

Esto audita automáticamente cada PR y señala regresiones de rendimiento antes de hacer merge a main.

Errores Comunes #

1. Optimizar para el puntaje, no para los usuarios. Un puntaje 100 de Lighthouse no garantiza buena experiencia de usuario. Significa que pasaste las verificaciones automatizadas.

2. Probar solo la homepage. Las páginas de producto, flujos de checkout y resultados de búsqueda frecuentemente tienen peor rendimiento. Audita páginas representativas de cada sección.

3. Ignorar mobile. Los puntajes de desktop casi siempre son más altos. El rendimiento mobile es lo que Google usa para ranking.

4. Auditorías únicas. Lighthouse es más valioso como herramienta de monitoreo continuo, no como verificación única. Configura integración CI.

5. Tratar todos los hallazgos igual. Una mejora de 2 segundos en LCP vale más que corregir un warning menor de consola. Prioriza por impacto al usuario.

Puntos Clave #

• Lighthouse audita cinco categorías: Performance, Accessibility, Best Practices, SEO y PWA
• Siempre ejecuta en modo incógnito y toma la mediana de múltiples ejecuciones para puntajes confiables
• CLI y Lighthouse CI son preferibles sobre DevTools para auditorías reproducibles y automatizadas
• Prioriza hallazgos por impacto al usuario y esfuerzo de implementación, no solo por delta del puntaje
• Integra Lighthouse CI en tu pipeline de CI/CD para detectar regresiones antes de producción
• Lighthouse detecta muchos problemas pero no es sustituto completo del testing manual, especialmente para accesibilidad