¿Cómo medir el rendimiento de nuestra web localmente con Google Lighthouse?
Actualizado el mes pasado
Google Lighthouse es una herramienta gratuita que podemos —y deberíamos— usar para auditar nuestro sitio web y comprobar su rendimiento (léase velocidad). Además, es abrir el capó para espiar también su accesibilidad, su performance SEO, y si se cumplen las llamadas "mejores" prácticas (la seguridad de nuestra web, el uso adecuado de recursos, etc.).
En esta guía veremos cómo aprovechar Google Lighthouse a nuestro favor, explicando qué hace y cómo entender las puntuaciones que nos brinda en su reporte. Comencemos.
¿Qué es Google Lighthouse?
De alguna manera, es ponernos los anteojos de Google. Eso, sin que Google nos cobre un céntimo. Cuando generamos un informe por Lighthouse, podremos evaluar la experiencia de página de nuestra web y acceder, nada más ni nada menos, que a consejos muy valiosos si pretendemos mejorar su rendimiento.
En el transcurso de los últimos años, Google puso más y más énfasis en la experiencia de cada página web, incluyendo la adición de un nuevo conjunto de señales de Core Web Vitals llamado INP. Los datos de Lighthouse diseccionan el modo en que un usuario experimenta la navegación de nuestro sitio, y así obtendremos un pantallazo nítido sobre la velocidad y los cuellos de botella y todo aquello que se puede mejorar.
¿Cómo uso Google Lighthouse?
→ NOTA: más adelante explicaremos cómo instalarlo en Firefox y cómo usarlo con Google Insights.
Google Lighthouse está integrado al navegador Chrome. Su uso más directo es a través de las DevTools (herramientas de desarrollador) incorporadas a dicho navegador. Para usarlo, haremos clic en cualquier parte de un sitio y seleccionaremos INSPECCIONAR en el menú emergente.
La pantalla se dividirá en dos para enseñarnos las herramientas DevTools ya mencionadas. Buscaremos la opción de LIGHTHOUSE al final del repertorio de herramientas (si no lo vemos, presionemos el ícono de la doble flecha al final de la lista para visualizar las herramientas ocultas por cuestión de espacio).
Una vez seleccionado, inmediatamente se presentará un mensaje comunicando que se esperan los resultados de Lighthouse, y luego se presentará un panorama similar a la siguiente captura:
Entendiendo el reporte de Google Lighthouse
Como podemos apreciar al comienzo mismo del reporte, se nos presentan 4 esferas de puntajes: Rendimiento, Accesibilidad, Mejores Prácticas y SEO.
Empecemos por el principio: la performance.
Performance
Performance es, lisa y llanamente, la velocidad de carga de nuestro sitio. En más palabras: el tiempo que tarda nuestro contenido en cargarse para que las visitas puedan verlo e interactuar con el mismo.
Estas métricas son exigentes (tanto como lo es Google, de hecho). No nos sorprendamos si aparecen esferas naranjas o rojas. Mejor dicho, la sorpresa sería que todo estuviese en verde (salvo que se haya trabajado el sitio para mejorar su SEO o tengamos un Tema y Componentes muy eficientes con un servidor de hosting a la altura).
Ahora, veamos qué significan los datos arrojados en el rectángulo remarcado de la captura superior:
First Contenful Paint (FCP o Primera pintura de contenido): Mide el instante en que el primer texto o imagen es visible para los usuarios.
Largest Contenful Paint (LCP o Mayor carga de contenido): Calcula el tiempo que tarda una página en cargar su elemento más grande (como por ejemplo, una fotografía, o un carrousel).
Total Blocking Time (TBT o Tiempo total de bloqueo): Mide la cantidad de tiempo donde una página no admite ninguna interacción por parte de la visita (ejemplo: un clic del ratón).
Cumulative Layout Shift (CLS o Desplazamiento de diseño acumulativo): Mide los cambios de diseño que se producen a medida que el contenido se carga (esto resulta en reacomodos de bloques, algo típico en la carga de páginas pero que impide comenzar a leer o interactuar correctamente, y por ende este intervalo debe de ser mínimo).
Speed Index (SI o Índice de velocidad): Expresa la rapidez con la que se carga el contenido de nuestra página.
La puntuación final es la sumatoria de todas las métricas, y oscila en el rango entre 0 y 100. Si es igual o superior a 90, la esfera será verde indicando una muy buena experiencia de carga. Por debajo de 90, Google Lighthouse nos avisa que hay muchas cosas que se pueden mejorar, es decir cuellos de botella y ralentizaciones.
La buena noticia es que no se remite a darnos un puntaje: va a brindarnos todas las sugerencias precisas para mejorar la velocidad de carga de nuestro sitio.
Es cierto que muchas cuestiones dependerán de la programación de nuestro sitio. Si tenemos una web hecha con WordPress, el Tema empleado y los plugins instalados tienen mucho peso. Además, el plugin para caché que empleemos es clave. Si mejorar nuestro puntaje excede el conocimiento que manejamos, pero estamos comprometidos con aumentar nuestras entradas y optimizar la navegación de nuestro contenido para todo el público, busquemos a una empresa entrenada para resolverlo (bueno, sí, como Duplika).
Accesibilidad
La accesibilidad se refiere a la facilidad con la que las personas con capacidades especiales pueden acceder y utilizar nuestro contenido. Evalúa aspectos críticos como la claridad de los botones y enlaces (por ejemplo, el contraste), asegurándose de que sean claramente reconocibles y funcionales, sin elementos que generen distracción.
También analiza las imágenes para ver si se especifica una descripción en el "texto alternativo" (etiqueta ALT en el llamado HTML de la imagen). De este modo, cuando los usuarios con visión limitada y no videntes utilizan lectores de pantalla, entienden de qué trata la imagen.
También encontramos un puntaje que va de 0 a 100, siendo de 90 a 100 lo óptimo.
Nuevamente, Lighthouse nos informará todo lo que puede mejorarse
Mejores Prácticas
La auditoría sobre las "buenas prácticas" compara la programación de nuestro contenido con un ideal moderno de desarrollo web.
Como dijimos, idealmente deberían acontecer las siguientes máximas:
Los recursos se cargan desde servidores seguros con certificados SSL, es decir bajo protocolo HTTPS.
Todas las imágenes se presentan con la relación de aspecto correcta y en la resolución adecuada (es decir, las imágenes no están estiradas ni a lo largo ni a lo ancho y, por otro lado, no son más grandes, en píxeles, de lo que se ven).
Todas las bibliotecas JavaScript son seguras, actualizadas y libres de vulnerabilidades conocidas.
La página tiene el doctype HTML.
La política de seguridad de contenidos (CSP) es eficaz contra los ataques de secuencias de comandos en sitios cruzados (llamados XSS).
La página no contiene errores de navegación.
La página no contiene frameworks ni API obsoletos.
La página tiene fuentes de mapas válidos (la correcta implementación y utilización de fuentes de iconos y demás gráficos vectoriales).
La página no presenta problemas visibles en DevTools de Chrome (como fallos en las solicitudes de red, medidas de seguridad insuficientes y otros problemas de 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 una contraseña en campos de contraseñas.
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.
SEO
La evaluación SEO en Lighthouse remite a la auditoría que se centra en las prácticas que empleamos para mejorar la visibilidad y el ranking de nuestra página web en los resultados de búsqueda. Esta medición desglosa aspectos como:
Si nuestra web se ve bien en celulares y tabletas, algo elemental ya.
La página tiene datos estructurados válidos.
Los enlaces internos son rastreables.
La página tiene un atributo hreflang válido.
Las etiquetas title y meta-description están completadas.
La página es indexable (no está bloqueada por WordPress o por Robots.txt).
El archivo Robots.txt es válido.
La página devuelve un código de respuesta de estado HTTP 200 (es decir que está OK).
La página tiene una etiqueta rel=canonical válida.
El contenido de la página es independiente de los plugins.
Los enlaces de una página contienen un texto descriptivo.
Las imágenes de una página tienen textos alt especificados.
La página tiene una etiqueta meta-viewport con anchura o escala inicial definidas.
Nuevamente nos encontramos con un puntaje que oscila entre 0 y 100, plus todo lo que deberíamos mejorar si realmente queremos obtener puntajes mejores (es decir, más entradas a nuestra web).
¿Cómo puedo utilizar Google Lighthouse con Firefox?
Si empleamos el navegador Mozilla Firefox, podemos descargar en segundos el componente oficial de Google en la sección de Complementos y Temas:
Tras dirigirnos a la sección de complementos, debemos buscarlo en el campo de búsqueda de nuevos componentes.
El señalado en la captura inferior es el complemento oficial, desarrollado por Google. Haremos clic para ver sus detalles e instalarlo.
Un clic más sobre el botón azul para instalar.
Una vez instalada, la extensión oficial de Google Lighthouse podrá ser accedida desde nuestro Firefox a través del ícono de extensiones, tal cual se muestra en la siguiente captura de pantalla:
Y, a continuación, generaremos el reporte presionando el botón azul.
Tras una pantalla de carga, en donde se envían y recepcionan los datos, una solapa nueva se abrirá en nuestro navegador y podremos ver el reporte tal cual ya lo hemos mencionado.
Generar reportes Lighthouse vía PageSpeed Insights
Para auditar nuestra web con Lighthouse externamente, podemos acceder a PageSpeed Insights y allí escribir la URL correspondiente:
Pasados unos segundos de auditoría, veremos la pantalla con los puntajes ya mencionados.
Conclusión
La ejecución de pruebas de rendimiento local que posibilita Google Lighthouse es una gran ayuda al momento de identificar oportunidades para mejorar los tiempos de carga, la interactividad, la accesibilidad y el SEO de nuestro sitio.
Es la manera de poder ver cómo, a su vez, nos ve Google. Y sabemos que este buscador tiene un "fetiche" fuerte con la velocidad de la web. Para colmo, Lighthouse es gratis, y si nuestra página no está cargando en un tiempo prudencial o notamos latencias, es la herramientas a apelar. Al menos, como la punta del iceberg de todas las mejoras que nos ofrecerá su reporte (que con tiempo y paciencia deberemos trabajar).
Agradecemos la lectura, y les deseamos éxitos en sus emprendimientos. Hasta la próxima.