0Pricing
Frontend Academy · Lección

Comprobaciones automatizadas con Lighthouse

Añada la acción de GitHub Lighthouse CI, establezca umbrales para las puntuaciones de rendimiento y accesibilidad y bloquee las fusiones que empeoren los Core Web Vitals.

Comprobaciones automatizadas con Lighthouse es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

¿Por qué automatizar Lighthouse?

Las ejecuciones manuales de Lighthouse detectan tarde las regresiones de rendimiento, normalmente después de que un usuario real se queje. Lighthouse CI automatizado se ejecuta en cada PR, hace fallar las compilaciones que empeoran métricas clave y muestra la evolución de las puntuaciones con el tiempo. Trate el rendimiento como una suite de pruebas.

Lighthouse CI

El conjunto de herramientas de código abierto Lighthouse CI (lhci), creado por Google: ejecuta Lighthouse varias veces, calcula la mediana, valida los umbrales y carga los resultados.

npm install -D @lhci/cli

# Run locally:
npx lhci autorun

lighthouserc.json — Configuración

Configure las URLs que se probarán, el número de ejecuciones y las aserciones.

// lighthouserc.json
{
  "ci": {
    "collect": {
      "url": [
        "http://localhost:3000",
        "http://localhost:3000/blog",
        "http://localhost:3000/pricing"
      ],
      "numberOfRuns": 5,
      "startServerCommand": "npm run start"
    },
    "assert": {
      "assertions": {
        "categories:performance":   ["error", { "minScore": 0.9 }],
        "categories:accessibility": ["error", { "minScore": 0.95 }],
        "categories:seo":            ["warn", { "minScore": 0.9 }],
        "largest-contentful-paint":  ["error", { "maxNumericValue": 2500 }],
        "total-blocking-time":       ["error", { "maxNumericValue": 200 }],
        "cumulative-layout-shift":   ["error", { "maxNumericValue": 0.1 }]
      }
    },
    "upload": {
      "target": "temporary-public-storage"
    }
  }
}

Integración con GitHub Action

La action oficial treosh/lighthouse-ci-action ejecuta lhci en cada PR y publica una comprobación de estado.

# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: [pull_request]
jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20', cache: 'npm' }
      - run: npm ci && npm run build
      - uses: treosh/lighthouse-ci-action@v11
        with:
          configPath: ./lighthouserc.json
          uploadArtifacts: true
          temporaryPublicStorage: true

Mediana de varias ejecuciones

Las puntuaciones de Lighthouse varían entre ejecuciones debido al ruido producido por las diferencias de tiempo. numberOfRuns: 5 calcula la mediana, lo bastante estable como para validarla frente a un umbral. Menos de 3 ejecuciones produce resultados inestables.

Presupuestos de rendimiento

Además de las puntuaciones, establezca límites estrictos para el tamaño y la cantidad de recursos. La compilación falla si se superan los límites.

// budget.json
[
  {
    "resourceSizes": [
      { "resourceType": "script", "budget": 300 },
      { "resourceType": "image", "budget": 100 }
    ],
    "resourceCounts": [
      { "resourceType": "third-party", "budget": 10 }
    ]
  }
]

// lighthouserc.json:
"collect": {
  "settings": { "budgetsPath": "./budget.json" }
}

Servidor de Lighthouse CI

Hospede el servidor de LHCI por su cuenta para conservar datos históricos, consultar gráficos de tendencias y comparar ramas a lo largo del tiempo. También puede usar almacenamiento público temporal para los resultados puntuales de un PR.

Pruebas de páginas autenticadas

Use scripts de Puppeteer para iniciar sesión antes de ejecutar Lighthouse.

// lighthouserc.json
"collect": {
  "puppeteerScript": "./lighthouse-login.js",
  "url": ["http://localhost:3000/dashboard"]
}

// lighthouse-login.js
module.exports = async (browser, context) => {
  const page = await browser.newPage();
  await page.goto('http://localhost:3000/login');
  await page.fill('#email', 'test@example.com');
  await page.fill('#password', 'test123');
  await page.click('button[type=submit]');
  await page.waitForNavigation();
};

Notificaciones de Slack/Discord

Envíe los resultados de LHCI al chat de su equipo: las regresiones de rendimiento merecen la misma atención que los fallos de las pruebas.

Móvil frente a escritorio

Lighthouse usa por defecto el modo móvil (4G lento y una CPU de gama media). Para escritorio, establezca preset: 'desktop'. La mayoría de las aplicaciones en producción deberían auditar ambos modos, mediante jobs independientes en CI.

Calibración de umbrales

Comience usando las puntuaciones actuales como líneas base. No haga fallar los PR el primer día: primero registre los resultados y muestre advertencias. Cuando el equipo se haya acostumbrado al workflow, aumente gradualmente los umbrales.

Más allá de Lighthouse

Lighthouse proporciona datos de laboratorio. Combínelo con la monitorización de usuarios reales (RUM): el paquete npm web-vitals junto con sus analíticas, o servicios como SpeedCurve y Calibre, ofrecen tendencias de rendimiento del mundo real.

Comprobación rápida

¿Por qué Lighthouse CI suele calcular la mediana de varias ejecuciones (por ejemplo, 5) en lugar de usar una sola?

Repaso: Lighthouse automatizado

lhci autorun se integra con CI. Configure lighthouserc.json con las URLs, las ejecuciones (5 o más), las aserciones sobre categorías y métricas, y los presupuestos de rendimiento. Use treosh/lighthouse-ci-action para GitHub. Hospede el servidor de LHCI por su cuenta para consultar tendencias. Use scripts de Puppeteer para las páginas autenticadas. Audite las versiones móvil y de escritorio. Comience con advertencias y ajuste los umbrales con el tiempo. Combine estos datos con RUM para obtener una visión completa.

Preguntas frecuentes

¿La lección «Comprobaciones automatizadas con Lighthouse» es gratis?

Sí — el texto completo de «Comprobaciones automatizadas con Lighthouse» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Comprobaciones automatizadas con Lighthouse»?

Añada la acción de GitHub Lighthouse CI, establezca umbrales para las puntuaciones de rendimiento y accesibilidad y bloquee las fusiones que empeoren los Core Web Vitals. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Comprobaciones automatizadas con Lighthouse»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. GitHub Actions para frontend: lint, test y build
  2. Implementación en Vercel, Netlify y Cloudflare Pages
  3. Variables de entorno en CI
  4. Comprobaciones automatizadas con Lighthouse
← Volver a Frontend Academy