Lighthouse es una herramienta de código abierto y automatizada, desarrollada por Google, diseñada para mejorar la calidad de las páginas web. Permite realizar auditorías completas en cualquier URL para evaluar métricas clave que afectan la experiencia del usuario. Si te gustaría saber un poco más de nuestro blog te dejo el linke para que lo vallas a visitar, blog.
Categorías de Auditoría Principales
Lighthouse genera un informe que incluye puntuaciones y sugerencias de mejora en varias categorías, siendo las principales:
- Rendimiento (Performance): Mide la velocidad de carga de la página y otros factores que contribuyen a una experiencia rápida. Evalúa métricas orientadas al usuario, como Largest Contentful Paint (LCP), First Input Delay (FID) (o Total Blocking Time – TBT en datos de laboratorio) y Cumulative Layout Shift (CLS), que son parte de las Core Web Vitals de Google.
- Accesibilidad (Accessibility): Comprueba si la página web está construida para ser accesible a todos los usuarios, incluyendo aquellos que dependen de tecnologías de asistencia como lectores de pantalla. Revisa elementos como el uso correcto de atributos ARIA, el contraste de color adecuado y si las imágenes tienen texto alternativo (
alt). - Mejores Prácticas (Best Practices): Evalúa la salud general del código y la seguridad del sitio. Por ejemplo, comprueba que los recursos se carguen a través de HTTPS, que las bibliotecas de JavaScript sean seguras y que no haya errores de navegación en la consola.
- SEO (Search Engine Optimization): Asegura que la página esté optimizada para la clasificación en los resultados de los motores de búsqueda. Revisa aspectos básicos como la optimización para dispositivos móviles, la existencia de etiquetas de título y meta descripciones, la rastreabilidad de enlaces y la validez de los datos estructurados.
¿Cómo Ejecutar Lighthouse?
El «Hack» que mencionas es la forma más común y accesible:
- Desde Chrome DevTools (Herramientas para Desarrolladores de Chrome):
- Abre Google Chrome y navega a la URL que deseas auditar.
- Abre DevTools (presiona
F12oCtrl+Shift+Ien Windows/Linux, oCmd+Option+Ien Mac). - Selecciona la pestaña Lighthouse.
- Elige las categorías a auditar (lo ideal es dejarlas todas activadas) y el dispositivo (Móvil o Escritorio).
- Haz clic en «Analyze page load» o «Run audit».
Otras formas incluyen:
- PageSpeed Insights: Una herramienta en línea de Google que usa Lighthouse y también proporciona datos de experiencia de usuario real (datos de campo).
- Extensión de Chrome Lighthouse: Permite generar el informe desde la barra de extensiones.
- CLI (Command Line Interface) de Node.js: Para automatizar auditorías.
Ejemplos de Sugerencias de Mejora
El informe de Lighthouse no solo da una puntuación, sino que también ofrece sugerencias detalladas para mejorar los puntos débiles. Algunos ejemplos concretos por categoría:
| Categoría | Auditoría Fallida (Ejemplo) | Indicación/Solución Sugerida |
| Rendimiento | Eliminar recursos que bloquean el renderizado | Se recomienda cargar archivos CSS y JavaScript de manera asíncrona o diferida para que no retrasen la visualización inicial del contenido. |
| Accesibilidad | Los elementos de imagen no tienen atributos [alt] | Se debe agregar un texto descriptivo a todas las imágenes para que los lectores de pantalla puedan informar a los usuarios con discapacidad visual sobre el contenido. |
| Mejores Prácticas | No se sirve el sitio web a través de HTTPS | Se recomienda migrar a HTTPS para garantizar una conexión segura y cifrada entre el navegador del usuario y el servidor. |
| SEO | La página no tiene una meta descripción | Se debe incluir una etiqueta <meta name="description" content="..."> concisa y relevante en el <head> para mejorar la visibilidad en los resultados de búsqueda. |
1. El Sistema de Puntuación de Lighthouse
El informe genera una puntuación de 0 a 100 para cada categoría (Rendimiento, Accesibilidad, etc.). Esta puntuación es una media ponderada de los resultados de las auditorías individuales dentro de esa categoría.
| Puntuación | Color | Significado |
| 90 – 100 | Verde (Green) | Excelente, la web está optimizada. |
| 50 – 89 | Naranja (Orange) | Necesita mejoras, hay margen de optimización. |
| 0 – 49 | Rojo (Red) | Pobre, se requiere una intervención inmediata. |
Importante: La categoría de Rendimiento es la más compleja, ya que su puntuación se basa en un conjunto de métricas de tiempo cruciales, como las Core Web Vitals.
2. Profundizando en las Métricas de Rendimiento (Core Web Vitals)
La puntuación de Rendimiento se compone de varias métricas de la experiencia de usuario. Las más críticas, que Google ha destacado, son las Core Web Vitals:
| Métrica | Significado | Lo que Mide |
| LCP (Largest Contentful Paint) | Velocidad de carga | El tiempo que tarda en cargarse el elemento de contenido más grande de la página (título, imagen principal). Debe ser < 2.5 segundos. |
| INP (Interaction to Next Paint) / Sustituye a FID | Interactividad | El tiempo que tarda el navegador en responder a la primera interacción del usuario (un clic, una pulsación). Un buen tiempo es < 200 milisegundos. |
| CLS (Cumulative Layout Shift) | Estabilidad visual | La cantidad de cambio de diseño inesperado en el viewport (cuando los elementos se mueven después de cargarse), lo que puede causar clics erróneos. Debe tener una puntuación de < 0.1. |
3. Estructura del Informe
El reporte de Lighthouse es una hoja de ruta para la mejora. Después de las puntuaciones principales, verás secciones con los problemas específicos y soluciones sugeridas:
- Métricas: Muestra el valor medido para LCP, TBT, CLS, etc.
- Oportunidades (Opportunities): Sugerencias con alto impacto potencial en el rendimiento (ej: «Eliminar recursos que bloquean el renderizado»). Lighthouse estima cuánto tiempo ahorraría aplicar esa corrección.
- Diagnósticos (Diagnostics): Información más detallada que no tiene un impacto directo en la puntuación, pero puede ayudar a los desarrolladores (ej: «Evitar redes de solicitud críticas con gran profundidad»).
- Auditorías superadas (Passed Audits): Una lista de todos los elementos que tu página web cumple correctamente.
El gran valor de Lighthouse es que cada auditoría fallida viene con un enlace a la documentación de Google que explica por qué es importante el problema y cómo solucionarlo paso a paso.Para saber y si te gusta interactuar mas te dejamos un linke para que le heches un vistaso visitar pagina.
Este video de YouTube muestra cómo ejecutar una auditoría de aplicaciones web utilizando Lighthouse ver video.