Buscando cómo automatizar esto antes de los pases a producción en Vercel, llegué a Unlighthouse (https://unlighthouse.dev/).
¿Qué es y por qué me sirve?
Básicamente, Unlighthouse escanea el sitio completo. En vez de abrir las DevTools de Chrome y darle al botón de Lighthouse en una sola pestaña, esta herramienta lee el sitemap.xml (o hace un crawl recursivo) y levanta un dashboard local con las métricas de todas las rutas del dominio.
Para mí, esto resuelve dos problemas de golpe:
- Control de calidad en migraciones: Si muevo un sitio a la nueva arquitectura basada en Cloudflare Workers, puedo tirar un escaneo antes y después para confirmar que el TBT (Total Blocking Time) o el CLS (Cumulative Layout Shift) no se fueron al demonio por algún script mal cargado.
- Validación del Portfolio: Correrlo en el entorno de desarrollo de Astro (
localhost:4321) me permite ver si alguna imagen de un post del blog quedó sin optimizar antes de hacer el push.
Implementación rápida
No requiere instalar nada a nivel global si usas npx. Para pegarle una mirada rápida a cualquier dominio, basta con correr:
npx unlighthouse --site https://mi-proyecto.cl
Levanta un cliente web en el puerto 5678 con una tabla hermosa. Te agrupa las URLs por ruta, lo que es súper útil para detectar si un layout específico (por ejemplo, el template de los artículos del blog) es el que está matando el performance.
Configuración para proyectos locales (Astro / Vite)
Para integrarlo mejor en el flujo de trabajo, lo ideal es dejar un archivo de configuración en la raíz del proyecto. Unlighthouse detecta automáticamente la configuración de Vite, pero si necesito ajustar el escaneo, creo un unlighthouse.config.ts:
export default {
site: 'https://mi-proyecto.cl',
scanner: {
// Evitar que el crawler reviente el servidor en local
throttle: true,
device: 'mobile', // Siempre auditar en mobile first
},
puppeteerClusterOptions: {
maxConcurrency: 3, // Ajustar según lo que aguante la máquina
}
}