Auditar el rendimiento de una página web es sencillo: abres las DevTools de Chrome, ejecutas Lighthouse y ves los resultados. Pero, ¿qué pasa cuando tienes 50, 100 o más páginas en tu sitio? ¿Vas a auditar cada una manualmente?
Aquí es donde Unlighthouse cambia el juego. Esta herramienta automatiza las auditorías de Google Lighthouse para todo tu sitio, permitiéndote identificar problemas de rendimiento, accesibilidad y SEO en minutos, no en horas.
¿Qué son los Core Web Vitals?
Antes de profundizar en Unlighthouse, es importante entender qué estamos midiendo. Los Core Web Vitals son un conjunto de métricas definidas por Google que evalúan la experiencia del usuario en tu sitio web:
- LCP (Largest Contentful Paint): Mide el tiempo que tarda en renderizarse el elemento visual más grande de la página. Un buen LCP es menor a 2.5 segundos.
- FID (First Input Delay): Evalúa el tiempo que tarda tu sitio en responder a la primera interacción del usuario. Debe ser menor a 100 milisegundos.
- CLS (Cumulative Layout Shift): Cuantifica los cambios inesperados del diseño mientras se carga la página. Un buen CLS es menor a 0.1.
Estas métricas no solo afectan la experiencia del usuario: también influyen directamente en tu posicionamiento en Google. Un sitio lento o con mala usabilidad será penalizado en los resultados de búsqueda.
¿Qué es Unlighthouse?
Unlighthouse es una herramienta que ejecuta auditorías de Google Lighthouse en todas las páginas de tu sitio de manera automatizada. En lugar de auditar página por página manualmente, Unlighthouse:
- Descubre automáticamente todas las URLs de tu sitio mediante crawling
- Ejecuta auditorías en paralelo para ahorrar tiempo
- Genera reportes visuales con gráficos y comparativas
- Identifica patrones de problemas que se repiten en múltiples páginas
Es como tener un asistente que revisa todo tu sitio mientras tú te enfocas en corregir los problemas encontrados.
Instalación
Unlighthouse funciona como un paquete de Node.js. Puedes instalarlo de forma global o como dependencia de desarrollo en tu proyecto:
# Con npm
npm install -g @unlighthouse/cli
# Con pnpm
pnpm add -g @unlighthouse/cli
# Con bun
bun add -g @unlighthouse/cliTambién puedes usarlo directamente con npx sin instalarlo:
npx unlighthouse --site https://tu-sitio.comConfiguración Mínima
Para empezar, solo necesitas especificar la URL de tu sitio. Ejecuta el siguiente comando:
unlighthouse --site https://www.arte-facts.mxUnlighthouse comenzará a:
- Crawlear tu sitio para descubrir todas las páginas
- Ejecutar auditorías de Lighthouse en cada una
- Generar un servidor local donde podrás ver los resultados en tiempo real
- Generar los reportes en el directorio .unlighthouse
Una vez creado, puedes previsualizar los reportes usando:
npx sirv-cli .unlighthouse/Configuración Avanzada
Si necesitas mayor control, puedes crear un archivo unlighthouse.config.ts en la raíz de tu proyecto:
export default {
site: "https://www.arte-facts.mx",
scanner: {
// Limitar el número de páginas a escanear
maxRoutes: 100,
// Excluir ciertas rutas
exclude: ["/admin/*", "/api/*"],
include: [],
// Throttling de red (simular conexión lenta)
throttle: true,
},
lighthouseOptions: {
// Ejecutar solo en escritorio
onlyCategories: ["performance", "accessibility", "best-practices", "seo"],
},
};Con esta configuración, puedes personalizar qué páginas auditar, qué métricas priorizar y cómo simular las condiciones de tus usuarios.
Visualización de Resultados
Una vez completado el escaneo, Unlighthouse genera un dashboard interactivo que incluye:
Vista General (Overview)
Un resumen visual de todas las páginas escaneadas con sus puntuaciones de rendimiento, accesibilidad, mejores prácticas y SEO. Cada página se representa con un color:
- Verde: Puntuación superior a 90
- Naranja: Puntuación entre 50 y 90
- Rojo: Puntuación inferior a 50
Detalle por Página
Puedes hacer clic en cualquier página para ver:
- El reporte completo de Lighthouse
- Métricas específicas de Core Web Vitals
- Oportunidades de mejora priorizadas por impacto
- Diagnósticos detallados de problemas encontrados
Comparativas
Unlighthouse te permite comparar páginas entre sí para identificar patrones. Por ejemplo:
- ¿Todas las páginas de blog tienen problemas con imágenes sin optimizar?
- ¿Las páginas de productos cargan más lento que las páginas institucionales?
- ¿Qué páginas tienen mejor accesibilidad?
Exportación de Reportes
Puedes exportar los resultados en múltiples formatos:
# Generar reportes estáticos HTML
unlighthouse --site https://tu-sitio.com --build-static
# Exportar a JSON para análisis programático
unlighthouse --site https://tu-sitio.com --output-path ./reportsCasos de Uso Reales
1. Auditorías Pre-Deploy
Integra Unlighthouse en tu pipeline de CI/CD para asegurar que ninguna nueva versión degrade el rendimiento del sitio:
unlighthouse-ci --site https://staging.arte-facts.mx --budget 80Si alguna página tiene una puntuación inferior a 80, el deploy fallará.
2. Monitoreo Continuo
Programa ejecuciones periódicas para detectar regresiones de rendimiento:
# Ejecutar cada semana y notificar por email si hay problemas
unlighthouse --site https://tu-sitio.com --reporter email3. Análisis de la Competencia
Audita sitios de la competencia para identificar áreas donde puedes superarlos:
unlighthouse --site https://competencia.comConclusión
Unlighthouse transforma una tarea tediosa y propensa a errores en un proceso automatizado y visual. Ya no necesitas adivinar qué páginas tienen problemas de rendimiento: la herramienta te muestra exactamente dónde enfocar tus esfuerzos.
En un mundo donde los Core Web Vitals afectan directamente tu posicionamiento en Google y la experiencia de tus usuarios, tener visibilidad completa del rendimiento de tu sitio no es opcional: es esencial.
Visita unlighthouse.dev, documentate, instala y descubre qué páginas necesitan atención.