Lighthouse

Qué es Lighthouse

Lighthouse es una herramienta open source de Google para auditar la calidad de páginas web, midiendo rendimiento, accesibilidad, buenas prácticas de desarrollo, SEO y conformidad con Progressive Web Apps (PWA). Integrada directamente en Chrome DevTools (tab Lighthouse), también se ejecuta como extensión de Chrome, desde la línea de comandos vía Node.js, o como módulo programático en pipelines de CI/CD. Lighthouse genera un informe detallado con puntuaciones de 0 a 100 en cada categoría y recomendaciones específicas para mejorar cada métrica. Es la herramienta que alimenta PageSpeed Insights de Google: cuando se analiza una URL en PageSpeed Insights, el informe de laboratorio proviene de Lighthouse. La versión Lighthouse 13 (octubre 2025) renovó completamente la experiencia de auditoría con insights más comprensivos que reemplazan las auditorías individuales anteriores, proporcionando una visión más clara de los problemas de rendimiento y cómo resolverlos. Lighthouse es utilizada por millones de desarrolladores y es el estándar de facto para medir la calidad web.

Core Web Vitals y métricas de rendimiento

Lighthouse mide las Core Web Vitals de Google que son factores de ranking en resultados de búsqueda: Largest Contentful Paint (LCP) mide el tiempo de carga del elemento visual más grande de la página (objetivo menor de 2.5 segundos), Interaction to Next Paint (INP) mide la latencia de respuesta a interacciones del usuario (objetivo menor de 200ms), y Cumulative Layout Shift (CLS) mide la estabilidad visual cuantificando los cambios inesperados de layout (objetivo menor de 0.1). Adicionalmente, Lighthouse reporta First Contentful Paint (FCP), Speed Index, Total Blocking Time (TBT) y Time to Interactive. Es importante distinguir entre datos de laboratorio (lo que mide Lighthouse en condiciones simuladas) y datos de campo (experiencia real de usuarios medida por Chrome User Experience Report). Google utiliza los datos de campo de Core Web Vitals para el ranking de búsqueda, no las puntuaciones de Lighthouse directamente.

Lighthouse para ecommerce

Para tiendas online, el rendimiento web medido por Lighthouse tiene impacto directo en las ventas. Estudios demuestran que cada segundo adicional de carga reduce las conversiones entre un 7-20%. Las páginas de producto con LCP lento pierden compradores que abandonan antes de ver el precio y las imágenes del producto. Un CLS alto durante la carga puede causar que los usuarios hagan clic en el botón equivocado cuando los elementos de la página se reposicionan inesperadamente. Las auditorías de Lighthouse identifican problemas específicos de ecommerce: imágenes de producto sin optimizar (formato, tamaño, lazy loading), JavaScript de terceros que bloquea el renderizado (analytics, chat widgets, scripts de remarketing), CSS no utilizado que retrasa la primera pintura, fuentes web que causan FOIT/FOUT, y recursos sin compresión Brotli/GZIP. Para Shopify, WooCommerce y Magento, Lighthouse revela el impacto de temas, plugins y apps instaladas en el rendimiento del storefront.

Auditorías de accesibilidad y SEO

La categoría de accesibilidad de Lighthouse verifica el cumplimiento de las pautas WCAG 2.1: contraste de color suficiente, etiquetas ARIA correctas, navegación por teclado, textos alternativos en imágenes, estructura de encabezados lógica y formularios accesibles. Para ecommerce, la accesibilidad no solo es una obligación legal (ADA en USA, EAA en Europa desde 2025) sino que amplía la audiencia potencial de la tienda. La categoría de SEO verifica: títulos y meta descripciones presentes y con longitud adecuada, imágenes con atributos alt, enlaces rastreables, viewport meta tag configurado para móvil, canonical tags, robots.txt accesible, y structured data válido. Las buenas prácticas verifican HTTPS, consola sin errores JavaScript, APIs modernas y seguridad del navegador. Para tiendas online, estas auditorías identifican problemas que afectan directamente al posicionamiento en Google y la experiencia de compra de usuarios con discapacidades.

Integración en workflows de desarrollo

Lighthouse se integra en pipelines de CI/CD mediante Lighthouse CI, que ejecuta auditorías automáticamente en cada despliegue y compara los resultados con umbrales definidos. Si una nueva versión del código reduce la puntuación de rendimiento por debajo del umbral configurado (ejemplo: LCP superior a 3 segundos), el pipeline falla y bloquea el despliegue hasta que se corrija. Los presupuestos de rendimiento (performance budgets) definen límites máximos para tamaño de JavaScript, CSS, imágenes y número de requests que Lighthouse verifica en cada build. Para equipos de ecommerce que despliegan cambios frecuentemente, Lighthouse CI previene regresiones de rendimiento que podrían impactar las ventas sin que nadie lo detecte. La integración con GitHub Actions, GitLab CI, Jenkins y otros sistemas de CI es directa mediante el paquete @lhci/cli de npm. Los resultados históricos se almacenan para tracking de tendencias.

Limitaciones y herramientas complementarias

Las principales limitaciones de Lighthouse son: mide rendimiento en condiciones de laboratorio simuladas (throttling de CPU y red) que no reflejan exactamente la experiencia real de los usuarios; las puntuaciones varían entre ejecuciones consecutivas por factores como carga del sistema y variabilidad de red; y no mide el rendimiento de interacciones de usuario reales (INP real solo se mide en campo). Para una visión completa, Lighthouse se complementa con: PageSpeed Insights (que combina datos de laboratorio y campo), Chrome User Experience Report (CrUX) para datos reales de usuarios, GTmetrix para análisis detallado con waterfall charts, WebPageTest para pruebas desde múltiples ubicaciones geográficas y dispositivos, y DebugBear o SpeedCurve para monitorización continua de rendimiento con alertas automáticas y tracking histórico.

Características Principales

• Auditoría de rendimiento: LCP, INP, CLS, FCP, Speed Index, TBT y Time to Interactive con recomendaciones
• Accesibilidad: verificación de WCAG 2.1 incluyendo contraste, ARIA, navegación por teclado y alt texts
• SEO técnico: títulos, meta descripciones, canonical tags, robots.txt, structured data y viewport mobile
• Buenas prácticas: HTTPS, consola sin errores, APIs modernas, seguridad del navegador y mixed content
• Lighthouse CI: integración en GitHub Actions, GitLab CI y Jenkins con umbrales y bloqueo de despliegues
• Performance budgets: límites máximos de tamaño de JS, CSS, imágenes y requests verificados en cada build
• Múltiples modos: Chrome DevTools, extensión de Chrome, CLI Node.js y módulo programático para CI/CD
• PageSpeed Insights: los informes de laboratorio de PSI provienen directamente de ejecuciones de Lighthouse

Se integra con 9 herramientas