Auditorías y puntuación de Lighthouse
Ejecute Lighthouse en DevTools o CI, interprete la puntuación de rendimiento y los diagnósticos, y priorice las oportunidades que ofrezcan mayores ahorros.
Auditorías y puntuación de Lighthouse es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 2 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.
¿Qué es Lighthouse?
Lighthouse es la herramienta de auditoría de código abierto de Google que simula la carga de una página y la puntúa en las categorías de rendimiento, accesibilidad, prácticas recomendadas, SEO y PWA. Está integrada en Chrome DevTools y se puede ejecutar desde la CLI o CI.
Ejecutar Lighthouse en DevTools
Abra DevTools, haga clic en la pestaña Lighthouse, elija las categorías y el dispositivo (móvil/escritorio) y haga clic en «Analizar la carga de la página». La prueba simulada tarda unos 30 segundos.
Desglose de la puntuación de rendimiento
La puntuación de rendimiento (0–100) es una media ponderada de: LCP (25 %), tiempo total de bloqueo (30 %), CLS (25 %), FCP (10 %) e índice de velocidad (10 %). El listón es alto: una puntuación de 90 o más es «Buena».
First Contentful Paint (FCP)
FCP indica cuándo se renderiza la primera parte del contenido (texto o imagen). Se diferencia de LCP: FCP tiene en cuenta cualquier elemento, mientras que LCP tiene en cuenta el elemento más grande. Bueno: menos de 1,8 s.
Tiempo total de bloqueo (TBT)
TBT mide durante cuánto tiempo el hilo principal está bloqueado por tareas de JavaScript de más de 50 ms. Un TBT alto significa que la página parece no responder, aunque parezca estar lista.
Cómo leer la sección Oportunidades
Lighthouse muestra «Oportunidades» con el ahorro estimado (por ejemplo, «Eliminar recursos que bloquean el renderizado: 1,2 s»). Ordénelas por ahorro y corrija primero los elementos más importantes para obtener el máximo impacto.
Oportunidades habituales
Correcciones frecuentes: aplazar o cargar de forma asíncrona los scripts no críticos, insertar el CSS crítico en línea, precargar las solicitudes clave, utilizar una CDN, activar la compresión de texto (Brotli/gzip) y servir formatos de imagen modernos.
CLI de Lighthouse
Ejecute Lighthouse desde la línea de comandos para realizar auditorías mediante scripts.
npm install -g lighthouse
lighthouse https://example.com \
--output html \
--output-path ./report.html \
--chrome-flags="--headless"Lighthouse CI en GitHub Actions
Ejecute auditorías en cada pull request y haga que la compilación falle si las puntuaciones caen por debajo de los umbrales.
# .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
- run: npm ci && npm run build
- uses: treosh/lighthouse-ci-action@v11
with:
configPath: ./lighthouserc.jsonConfiguración de Lighthouse: aserciones de puntuación
Defina aserciones en lighthouserc.json para que fallen los pull requests que provoquen una regresión en las puntuaciones.
{
"ci": {
"assert": {
"assertions": {
"categories:performance": ["error", { "minScore": 0.9 }],
"categories:accessibility": ["error", { "minScore": 0.95 }],
"largest-contentful-paint": ["error", { "maxNumericValue": 2500 }]
}
}
}
}Limitación y simulación del dispositivo
De forma predeterminada, Lighthouse simula una red 4G lenta y una CPU móvil de gama media. Es intencionado: los usuarios en producción utilizan dispositivos reales que son más lentos que su máquina de desarrollo.
Variación de la puntuación: por qué fluctúa
Las puntuaciones de Lighthouse fluctúan entre ejecuciones debido a la variabilidad en los tiempos de JavaScript. Ejecute las auditorías entre 3 y 5 veces y utilice la mediana. Use numberOfRuns de Lighthouse CI para calcular automáticamente la mediana.
Comprobación rápida
¿Qué métrica de Lighthouse mide durante cuánto tiempo el hilo principal está bloqueado por tareas largas de JavaScript?
Resumen: Lighthouse
Lighthouse audita el rendimiento, la accesibilidad, las prácticas recomendadas, el SEO y las PWA. La puntuación de rendimiento es una media ponderada de LCP, TBT, CLS, FCP e índice de velocidad. La sección Oportunidades clasifica las correcciones según el ahorro estimado. Ejecútelo con DevTools, la CLI o en CI mediante treosh/lighthouse-ci-action. Debido a la variación de las puntuaciones, utilice la mediana de varias ejecuciones.
Preguntas frecuentes
¿La lección «Auditorías y puntuación de Lighthouse» es gratis?
Sí — el texto completo de «Auditorías y puntuación de 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 «Auditorías y puntuación de Lighthouse»?
Ejecute Lighthouse en DevTools o CI, interprete la puntuación de rendimiento y los diagnósticos, y priorice las oportunidades que ofrezcan mayores ahorros. 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 2 de 4.
¿Cuánto tiempo toma la lección «Auditorías y puntuación de 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
- Core Web Vitals: LCP FID CLS
- Auditorías y puntuación de Lighthouse
- Optimización de imágenes: carga diferida y formato WebP
- División de código y rutas diferidas