Saber si tu aplicación web progresiva cumple con los estándares no es opcional, es parte fundamental del proceso profesional. Sin una herramienta que te permita medir lo que implementas, resulta imposible detectar puntos de mejora o confirmar que vas por buen camino. Aquí es donde Lighthouse se convierte en tu mejor aliado.
¿Qué es Lighthouse y por qué es esencial para tu PWA?
Lighthouse es una herramienta de auditoría desarrollada por Google que inspecciona qué tan bien está construida tu aplicación web [0:14]. No se limita únicamente a aplicaciones web progresivas; también evalúa performance, accesibilidad, buenas prácticas y SEO. Sin embargo, el foco principal aquí es el módulo de PWA, donde puedes verificar si tu app es instalable, rápida y cumple con el checklist necesario.
Un punto importante es que Lighthouse es agnóstico [1:16]. Esto significa que no importa si tu proyecto está hecho con Angular, Vue, React o Polymer. Los estándares web son universales y la herramienta los evalúa sin distinción de framework.
¿Cómo instalar y ejecutar Lighthouse en Google Chrome?
La instalación es sencilla [0:55]:
- Abre Google Chrome y busca la extensión Lighthouse en chrome.google.com.
- Añádela como extensión al navegador.
- Aparecerá un ícono de faro en tu barra de herramientas.
- Haz clic en él y selecciona generar reporte.
Al ejecutarse, Lighthouse realiza múltiples pruebas automáticas: simula conexiones sin internet, conexiones lentas e incluso emula dispositivos móviles para verificar si tu sitio es responsive [1:36].
¿Qué módulos evalúa el reporte?
El reporte muestra cinco módulos con puntuaciones independientes [1:48]:
- Performance: velocidad de carga y renderizado.
- Accesibilidad: qué tan usable es para todos los usuarios.
- Best practices: cumplimiento de buenas prácticas web.
- SEO: optimización para motores de búsqueda.
- PWA: cumplimiento del estándar de aplicación web progresiva.
Cada módulo te indica exactamente qué falta para alcanzar el cien y ofrece enlaces a la documentación oficial para resolver cada ítem pendiente [2:33].
¿Qué información específica obtienes en el módulo PWA?
Dentro del módulo PWA puedes revisar si tu aplicación es instalable, si funciona correctamente offline y si cumple con requisitos como el Apple Touch Icon para iOS [3:50]. También existe un PWA checklist manual que complementa la auditoría automática. Sin esta herramienta, simplemente no podrías saber con certeza qué tan bien estás implementando los estándares progresivos.
¿Lighthouse evalúa todas las rutas de tu aplicación?
Este es un detalle crucial que muchos pasan por alto. Lighthouse genera un reporte por página, no de toda la aplicación [4:24]. Si ejecutas la auditoría en /home, obtendrás métricas exclusivas de esa ruta. Si necesitas evaluar /products o una landing page específica, debes correr Lighthouse nuevamente en cada una.
Esto resulta especialmente útil cuando:
- Creas landing pages para promociones u ofertas puntuales.
- Quieres comparar el performance entre diferentes rutas.
- Necesitas identificar fallos específicos en una página concreta.
Por ejemplo, al comparar los reportes entre /home y /products, es posible que una tenga mejor performance que la otra [5:17]. La parte de PWA generalmente no varía mucho entre rutas, ya que la implementación del service worker y el manifest son compartidos. Pero el rendimiento y otros indicadores sí pueden diferir.
¿Qué tanto trabajo ahorra Angular con PWA?
Al agregar el paquete @angular/pwa con el comando ng add, Angular configura automáticamente gran parte de los requisitos [5:56]. Esto hace que el módulo PWA en Lighthouse muestre casi todos los ítems aprobados sin esfuerzo adicional. Aun así, ser profesional implica entender qué ocurre internamente: cómo se realiza el caché de assets, qué requests se almacenan y cómo optimizar cada detalle.
La diferencia entre un buen resultado y uno excelente está en revisar cada ítem que Lighthouse marca como pendiente, leer la documentación sugerida y aplicar las correcciones necesarias. Recuerda: eres lo que mides, y medir correctamente es el primer paso para ofrecer la mejor experiencia a tus usuarios.
¿Ya corriste Lighthouse en tu proyecto? Comparte qué puntuación obtuviste y qué ítems te faltan por resolver.
