Qué es Lighthouse de Google y cómo utilizarlo

En Posicionamiento Web Systems hoy explicaremos qué es Lighthouse de Google y cómo usar esta herramienta de fuente abierta. Es útil para auditorías de rendimiento, de accesibilidad, apps web progresivas, para el SEO e incluso para diseñadores. Sigue leyendo para saber más.

¿Qué es Google Lighthouse?

Empecemos por la definición. Lighthouse Developer Tool de Google es una herramienta de experiencia de página desarrollada por Google, de fuente abierta, la idea es ayudar a los dueños de sitios web a mejorar la calidad de estas.

La herramienta ejecuta cinco auditorías: accesibilidad, rendimiento, SEO, app web progresiva y una lista de las mejores prácticas. Estas auditorías ahora están relacionadas con los nuevos Core Web Vitals. Y al verlas todas juntas podrás tener una excelente idea de la calidad del funcionamiento de tu sitio y su desempeño en móviles, ordenadores o app web.

Lighthouse utiliza pruebas con data emulada, también conocida como lab data o data de laboratorio. Es decir, esta es data de rendimiento recolectada en un ambiente controlado con dispositivos predefinidos y configuración de red específica (3G).

La lab data es de ayuda para depurar problemas de rendimiento. Pero esto no significa que esa experiencia en tu ordenador, en un ambiente controlado, sea la experiencia real de los humanos.

Lighthouse de Chrome se actualizó con las nuevas métricas web principales de Google, y las Core Web Vitals representan más de la mitad del score que da como resultado.

Es una herramienta muy fácil de usar, con una interfaz muy sencilla.

¿Cómo utilizar Google Lighthouse?

Hay distintas formas de usar Google Lighthouse online:

• En Chrome DevTools.

Para usar Lighthouse debes entrar a Google Chrome, en el menú Más herramientas -> Herramientas del desarrollador. Y ahí haces clic en Lighthouse y a iniciar auditoría. Auditará la URL, hará una serie de análisis en la página y luego generará un informe con los resultados.

Con estos indicadores podrás empezar a mejorar la página y cada auditoría de las cinco que mencionamos arriba tiene un documento explicativo sobre los problemas y cómo mejorarlos.

• Desde la línea de comando.

Puedes configurar la automatización de Lighthouse para que corra por Shell scripts.

• Como Node module. Integrado con el sistema.

Para esto debes descargar Google Chrome para Escritorio. Instala la versión actual Long-Term Support de Node. Luego instala Lighthouse. Instala el -g flag como módulo global. Después lleva a cabo una autoría lighthouse <url>.

• Desde una UI Web.
• Usa Lighthouse como una Extensión de Chrome.

En Google Chrome busca en Google Chrome Store la extensión Lighthouse, instálala. Después debes hacer clic en el símbolo de la herramienta en la barra del Chrome. Se expande el menú y puedes hacer clic en generar reporte.

Se abrirá una pestaña nueva con el informe del análisis.

• Con PageSpeed Insights.

En PageSpeed Insights de Google podrás ver los datos de Lighthouse, solo debes ingresar a la web https://developers.google.com/speed/pagespeed/insights, colocar la URL y hacer clic en Analizar.

Es importante mencionar que Lighthouse audita una sola página a la vez. Por tanto, toma en cuenta que, aunque tengas una home rápida, no significa que toda tu web lo sea. Entonces la mejor opción sería analizar varias páginas, las principales y las que consiguen más conversiones.

Cuando tengas toda la información, elabora una lista de las cosas que debes hacer para mejorar tu sitio.

¿Qué mide Lighthouse?

Como mencionamos antes esta herramienta SEO de Google mide distintas métricas de rendimiento. También analiza la accesibilidad, el SEO, las mejores prácticas y app web progresiva.

El reporte te muestra oportunidades para mejorar la velocidad de carga de tu sitio. En general, te da muchos detalles del desempeño de tu sitio que podrías aprovechar para mejorarlo.

Para un mejor análisis de Lighthouse de Chrome lo ideal es hacerlo en modo incógnito. Así nada interferirá con la auditoría.

¿Qué es performance en Lighthouse?

En la parte de Performance o Rendimiento del informe de Lighthouse de Google el score se basa en 7 métricas, cada una contribuye a un porcentaje total de rendimiento. En Lighthouse 8 tienen el siguiente peso en la auditoría:

• Procesamiento de imagen con contenido más grande (LCP): 25 %.
• Total Blocking Time (TBT): 30 %. Representa el tiempo.
• First Contentful Paint (FCP): 10 %.
• Speed Index (SI): 10%.
• Tiempo para ser interactivo (TTI): 10 %.
• Cambio de diseño acumulado (CLS): 15 %.

Desglosando cada uno:

• LCP: Mide cuando un usuario percibe que el contenido más grande de la página es visible. Puede ser texto, imágenes, vídeos o imágenes de fondo. Debe ser menos de 2,5 segundos, es una métrica web esencial.
• TBT: mide la respuesta a la acción del usuario. El peso de esta métrica en el Performance es de 25 %. Mide el tiempo entre FCP y el TTI. Es la data de laboratorio equivalente al Core Web Vital Retraso de Primera Entrada (FID), debe ser menor de 300 milisegundos.
• FCP: marca el tiempo en el que el primer texto o imagen es visible (pintado), es decir, el tiempo en el que puedes ver la página. Lo ideal es menos de 2 segundos.
• SI: velocidad de indexación, representa cuánto de tu página es visible el tiempo que dura la carga. Es el promedio de tiempo en que partes de la página se muestran. No es una métrica web esencial.
• TTI: representa el tiempo de carga, identifica dónde una página se ve responsiva pero no lo es todavía. Mide el tiempo desde que la página comienza a cargar hasta que los principales recursos han cargado y pueden responder a la interacción del usuario. Debe ser menos de 3,8 segundos.
• CLS: es la percepción del usuario de la estabilidad visual de una página. Cuantifica los cambios de los elementos de una página hasta el final de la carga.

¿Cómo puedes mejorar tu score de rendimiento en Lighthouse?

La recomendación desde la web de Google para desarrollares es que uses el calculador de score de Lighthouse, al entender estos umbrales podrás apuntar a lograr un mejor rendimiento  de tu web.

Además, en el reporte de Lighthouse puedes ver la sección de Oportunidades donde hay sugerencias y documentación sobre cómo implementar estos cambios. Y en la sección de Diagnóstico puedes ver una lista de guías adicionales.

Algunas recomendaciones comunes en las Oportunidades son sugerencias para optimizar la velocidad de carga de tu sitio, lo que afecta directamente el Performance:

• Usar imágenes en formatos de nueva generación. Por ejemplo, WebP o AVIF, que según indican da mejor compresión que PNG o JPEG, lo que ayuda a que carguen más rápido y consuman menos recursos.
• Usar imágenes del tamaño adecuado.
• Reducir JavaScript que no se usa.
• Eliminar los recursos que bloquean las imágenes de tu web, esto afecta FCP y LCP.
• Los recursos basados en texto deben servir con compresión gzip y otra, para minimizar el total de consumo.
• Reduce el CSS que no se usa. Difiere el que no sea crítico.
• Minimiza y comprime archivos JavaScript.
• Optimiza tu servidor, lleva a los usuarios a un CDN cercado, almacena en caché.

Mientras que en Diagnóstico puede indicar aspectos como:

• Asegúrate que el texto sea visible mientras cargan las fuentes.
• Reduce el impacto de código de terceros.
• Dale a las imágenes un tamaño específico, alto y ancho explícito.
• Reduce el tiempo de ejecución de JavaScript.

Evita aspectos como animaciones no compuestas, tareas largas, cambios en la estabilidad de la página.

¿Qué puedo ver en el informe de Mejores prácticas y el informe SEO de Lighthouse?

En el informe de mejores prácticas se analizan aspectos generales y otros relacionados con la confianza y seguridad. Tales como uso de https, enlaces externos poco seguros; que no se pida geolocalización para la carga, tampoco pedir notificaciones.

Si permite que los usuarios puedan pegar en los campos de contraseñas, si muestra imágenes en tamaños apropiados, entre otras cosas.

En cuanto al informe SEO de Lighthouse se analiza lo amigable que es una web con los móviles, que tenga title y meta descripción, que tenga HTTPS, que los enlaces sean rastreables, que no esté bloqueada para la indexación.

¿Cómo ayuda Google Lighthouse al SEO?

La herramienta Google Lighthouse te puede ayudar a mejorar los tiempos de carga de tu web. Y esto será clave para posicionarte en el buscador, además podrás optimizar por las métricas web esenciales.

Al ofrecer no solo el análisis, sino las sugerencias sobre lo que puedes mejorar Lighthouse de Google se convierte en una gran herramienta SEO. Puedes hacer una auditoría simplemente desde tu navegador y ver aspectos como:

• Si tu web es amigable con Google, por tanto, si se podrá posicionar.
• Si tiene datos estructurados válidos.
• Tiene elementos <title> y meta descripción.
• Si la página tiene un código de estatus HTTP exitoso.
• Los anchor text.
• Si las fuentes que se usan son legibles.
• Podrás ver si la página no está bloqueada para la indexación.
• Si tiene un archivo robots.txt válido.
• La validez de los atributos alt de las imágenes.
• Si el documento tiene una implementación hreflang.
• Si tiene un rel=canonical válido.
• Verá si tu web tiene plugins no deseados, como Java o Flash.

Saber qué es Lighthouse de Google y cómo utilizarlo es muy importante para mejorar tu posicionamiento web. Los datos que te otorga esta herramienta de Google también son claves para las métricas web principales que son un factor del ranking. Si necesitas ayuda no dudes en pedir presupuesto gratis.