¿Qué es Google Lighthouse?
Google Lighthouse es una herramienta gratuita de Google que te ayuda a mejorar la calidad de las páginas de tu web.
Esta herramienta analiza tus páginas en términos de rendimiento, accesibilidad, SEO y mucho más. A continuación, te ofrece recomendaciones de mejora.
Lighthouse de Google está creado como software de código abierto: cualquiera puede utilizarlo en cualquier web.
Tanto si eres desarrollador, SEO o propietario de una web, Google Lighthouse puede ayudarte a mejorar la experiencia y el rendimiento general de tu proyecto.
En este artículo, te contamos cómo funciona Google Lighthouse y cómo puedes utilizarlo para auditar tu web.
Vamos a ello.
¿Cómo Funciona Google Lighthouse?
Google Lighthouse realizar auditorías de cinco categorías principales que pasamos a detallar.
1. Rendimiento
En esta auditoría, Lighthouse mide la rapidez con la que se carga la web y la velocidad con la que los usuarios pueden acceder.
Te ofrece información sobre tu rendimiento en cinco métricas de velocidad, cada una de las cuales mide algún aspecto diferente de la velocidad de la página:
- First Contentful Paint (FCP): mide el momento en que el primer texto o imagen se hace visible para los usuarios.
- Largest Contentful Paint (LCP): calcula el tiempo que tarda una página en cargar su elemento más grande para los usuarios.
- Total Blocking Time (TBT): mide la cantidad de tiempo que una página está bloqueada para reaccionar a una acción del usuario, como un clic del ratón.
- Cumulative Layout Shift (CLS): mide los cambios de diseño que se producen a medida que los usuarios acceden a una página.
- Speed Index (IS): muestra la rapidez con la que se carga el contenido de una página.
Lighthouse asigna una puntuación global de rendimiento a una página basándose en el rendimiento de tu página en todas estas métricas. La puntuación puede ser de 0 a 100.
Si tu puntuación está entre 90 y 100, indica que tu página está bien optimizada desde el punto de vista de experiencia del usuario.
Cualquier valor por debajo de 90 significa hay recursos que están ralentizando la carga, lo que afecta a la experiencia general de la página.
Además, Lighthouse también te ofrece sugerencias que puedes poner en práctica para mejorar tu rendimiento.
2. Accesibilidad
La auditoría de accesibilidad de Lighthouse analiza la facilidad de uso de tu web para aquellos que necesitan asistencia.
En concreto, examina elementos como botones y enlaces para ver si están bien descritos.
También analiza las imágenes para ver si se especifica el texto alternativo. Cuando los usuarios con visión limitada o nula utilizan lectores de pantalla, entienden de qué trata la imagen.
Al igual que en el caso del rendimiento, este informe de accesibilidad te da una puntuación de 0 a 100. Cuanto mayor sea la puntuación, mejor.
La herramienta también destaca las oportunidades para mejorar tu accesibilidad general.
3. Buenas Prácticas
La auditoría de buenas prácticas de Lighthouse comprueba si tu página está creada según los estándares modernos de desarrollo web.
Lighthouse analiza si:
- Los recursos se cargan desde servidores seguros con HTTPS.
- Todas las imágenes aparecen con la relación de aspecto correcta y en la resolución adecuada.
- Todas las bibliotecas JavaScript son seguras y están libres de cualquier vulnerabilidad.
- La página tiene el doctype HTML.
- La Política de Seguridad de Contenidos (CSP) es eficaz contra los ataques de secuencia de comandos en sitios cruzados (XSS).
- La página no tiene errores de navegación.
- La página está libre de marcos y API obsoletos.
- La página tiene mapas fuente válidos.
- La página está libre de problemas que aparecen en el panel DevTools de Chrome, como fallos en la solicitud de red, medidas de seguridad insuficientes y otros problemas del navegador.
- La codificación de caracteres de la página se establece con la etiqueta meta charset.
- La página permite a los usuarios pegar la contraseña en el campo de contraseña.
- La página crea una buena experiencia de usuario bloqueando las solicitudes de permisos de geolocalización y notificación al cargar la página.
Todos estos factores deciden tu puntuación sobre 100.
El informe Lighthouse sobre buenas prácticas también destaca elementos específicos que requieren tu atención y que pueden mejorar tu puntuación.
4. SEO
Lighthouse realiza una prueba para analizar tu página relacionada con algunos aspectos técnicos del SEO.
En concreto, comprueba si:
- Tu página web es apta para móviles.
- Tiene datos estructurados válidos.
- Los enlaces internos son rastreables.
- Tiene un atributo hreflang válido.
- Las etiquetas de título y meta descripción están presentes.
- La página es indexable.
- El archivo robots.txt es válido.
- La página devuelve el código de respuesta de estado HTTP 200 (OK).
- La página tiene definida una etiqueta "rel=canonical" válida.
- El contenido de la página es independiente de los plugins.
- Los enlaces de una página tienen un texto descriptivo.
- Las imágenes de una página tienen especificado texto alt.
- La página tiene una metaetiqueta viewport con anchura o escala inicial definidas.
Y luego asigna una puntuación sobre 100.
También destaca cualquier problema de SEO que haya detectado al realizar una auditoría.
Lamentablemente, esta herramienta no te da una imagen completa de todos los aspectos de tu SEO.
Si quieres que tu web se posicione mejor en Google, debes asegurarte de que está optimizada para todos ellos. Debes asegurarte de que ningún problema afecta a tu posicionamiento.
Ahí es donde las herramientas de Semrush pueden resultar útiles.
Por ejemplo, Auditoría del Sitio comprueba más de 140 aspectos de SEO en tu web, como la presencia de contenido duplicado, redireccionamientos, enlaces internos, la estructura de URL y mucho más.
Para utilizar la herramienta, configura un proyecto y ejecuta tu auditoría.
Una vez finalizada, conseguirás una imagen completa de la salud SEO de tu web.
Además, puedes ver qué problemas específicos que están afectando a tu rendimiento. Solo tienes que ir a la pestaña "Problemas".
Para cada problema detectado, la herramienta ofrece consejos sobre cómo solucionarlo.
Resuelve cada problema detectado para que la salud técnica de tu web está en buena forma.
5. Progressive Web Apps (PWA)
La auditoría PWA en Lighthouse valida si tu web utiliza capacidades modernas para ofrecer una experiencia de usuario óptima.
Comprueba si tu web es:
- Rápida y de confianza en móviles, así como si ofrece funcionalidad offline.
- Se puede instalar en varios tipos de dispositivos y tiene características como la funcionalidad offline y las notificaciones push.
- Está optimizada para PWA redirigiendo el tráfico HTTP a HTTPS, configurando una pantalla de inicio personalizada, dimensionando el contenido de la web para que se ajuste a las pantallas móviles e implementando todas las demás buenas prácticas enumeradas por Lighthouse.
La auditoría compara tu web con estos factores y le asigna una de las insignias PWA.
(Fuente de la imagen: Github)
A diferencia de los cuatro primeros informes, cuando ejecutas una auditoría PWA en Lighthouse, se te asigna una insignia (no una puntuación de 0 a 100).
De esta manera:
El informe también proporcionará sugerencias para mejorar el rendimiento general de tu PWA, incluyendo cuestiones específicas que debes abordar.
Cómo Utilizar Google Lighthouse
Ahora que sabes qué es Google Lighthouse y cómo funciona, vamos a ver cómo puedes utilizar esta herramienta para auditar las páginas de tu web.
Utilizar Lighthouse con Chrome DevTools
En tu navegador Chrome, puedes ejecutar una auditoría de Google Lighthouse con Chrome DevTools.
Abre la página web que quieras auditar.
A continuación, haz clic con el botón derecho en cualquier parte de la página y selecciona "Inspeccionar".
La función Inspeccionar abrirá un panel DevTools en la parte derecha de la página web.
Selecciona "Lighthouse" en la barra de herramientas del panel. (Si no encuentras la opción "Lighthouse", haz clic en las dos flechas que hay al final de la barra de herramientas. Allí la verás).
Desde aquí, puedes seleccionar una, varias o todas las categorías, en función de los aspectos de tu web que quieras analizar. Y haz clic en "Analyze page load".
A continuación, la herramienta generará un informe. Encontrarás las puntuaciones de la auditoría de cada categoría en la parte superior.
Puedes hacer clic en una categoría concreta para conseguir más información. En este ejemplo, hemos hecho clic en la auditoría "Rendimiento".
Nota: te habrás dado cuenta de que Lighthouse mide tu rendimiento para seis métricas de velocidad (en lugar de cinco) cuando ejecutas una auditoría de rendimiento con DevTools.
Esa métrica adicional es el Tiempo hasta la Interactividad (TTI). Calcula el tiempo que tarda una página en estar totalmente interactiva para los usuarios.
Se trata de una de las métricas retiradas, por lo que no está claro por qué se sigue utilizando en las auditorías de Lighthouse ejecutadas desde DevTools.
Utilizar Lighthouse con la Extensión de Chrome
Lighthouse tiene una extensión de Chrome con la que puedes realizar auditorías.
Instala en tu navegador Chrome la extensión Lighthouse Chrome.
Visita la página que quieres auditar.
A continuación, abre el menú de extensiones de Chrome y selecciona "Lighthouse".
Ahora, haz clic en el icono del engranaje.
En el panel que se abre, podrás seleccionar las categorías que quieres activar o desactivar, en función de los informes que necesites.
Una vez que hayas terminado de configurar, haz clic en el botón "Generar informe" para iniciar la auditoría.
Lighthouse generará tu informe en una nueva pestaña.
Uso de Lighthouse en PageSpeed Insights
Lighthouse también está disponible a través de la herramienta PageSpeed Insights de Google.
Abre la herramienta. Introduce la URL de tu página y haz clic en "Analizar".
La herramienta genera informes para todas las categorías, excepto PWA, para las que PageSpeed insights no realiza auditorías.
Utilizar Google Lighthouse Mediante el Módulo Node
También puedes utilizar un módulo JavaScript de Node para ejecutar las auditorías de Lighthouse.
Instala Node.js en tu sistema.
A continuación, ejecuta la siguiente línea de comandos para instalar Lighthouse:
npm install -g lighthouse
Una vez instalado Lighthouse, utiliza la siguiente línea de comandos para generar informes.
lighthouse <url>
(Tienes que sustituir la "url" por la dirección web de la página que quieres probar).
Preguntas Frecuentes
¿En qué se Diferencia Lighthouse de PageSpeed Insights?
Lighthouse se diferencia de PageSpeed Insights en que Lighthouse solo utiliza datos de laboratorio (“lab date”) para medir el rendimiento de tus páginas. PageSpeed Insights utiliza tanto datos de laboratorio como de campo.
Los datos de laboratorio reflejan la experiencia en tu web de unos usuarios hipotéticos. En cambio, los datos de campo reflejan usuarios reales.
¿Por qué mis Puntuaciones Son Diferentes?
Las puntuaciones que ves en Lighthouse pueden variar cada vez que realizas la prueba.
Las condiciones de la red, las extensiones del navegador que modifican las solicitudes de red y los anuncios de la página afectan a tu puntuación cada vez que realizas la prueba.
¿Incluyen los Informes de Lighthouse en las Métricas Core Web Vitals?
Sí. La auditoría de Lighthouse analiza tu web en función de las siguientes métricas de Core Web Vitals: