Guía definitiva y práctica para interpretar PageSpeed Insights

Google PageSpeed Insights (PSI) también conocido como Speed Test o Speed Page, es una de las herramientas gratuitas más utilizadas y útiles a la hora de conocer el estado general de una página web en lo que respecta a su rendimiento, accesibilidad, prácticas recomendadas por Google y SEO Técnico, motivo por el cual en esta ocasión, hablaremos un poco sobre cómo utilizarla, entenderla y sacarle el máximo provecho para tu sitio.

¿Qué es PageSpeed Insights y por qué debería importarte?

Como ya te mencioné, es una herramienta gratuita de Google, la cual analiza el rendimiento de cualquier página web tanto en su versión móvil como en su versión de escritorio y te da recomendaciones claras con las que podrás mejorar su velocidad y la experiencia de tus usuarios.

En resumen, te ayudará a ver y entender qué tan rápido está tu web, qué fallos presenta respecto a su rendimiento y qué puedes hacer para que cargue mejor.

¿Qué mide el PageSpeed Insights?

Cuando entras al PSI no sólo vas a ver números de 0 a 100 en verde, amarillo o rojo, verás diferentes métricas y variables que se encuentran bien o que puedes mejorar en tu web, por lo que Google divide el análisis así:

• Velocidad y tiempos de carga:
  • Momento en el que aparece el primer contenido de tu web (FPC)
  • Cuándo se carga lo más importante (LCP)
  • Qué tan rápido responde tu web al primer clic (INP)
• Estabilidad visual:
  • Elementos que se mueven mientras carga tu web (CLS)
  • Si tu web salta cuando el usuario va a dar clic y corre los botones de lugar
• Fluidez general:
  • Qué tan rápido parece tu web (Speed Index)

Pero no se queda ahí, el Speed Test de Google también combina datos reales de usuarios (CrUX) con pruebas simuladas (Lighthouse), lo que es de gran utilidad para conocer la experiencia de quienes visitan tu web.

En resumen, ésta herramienta no sólo mide velocidad y rendimiento, mide la experiencia de usuario.

¿Cómo utilizar el Google PageSpeed Insights?

No necesitas ser programador o desarrollador web para utilizar ésta herramienta y podrás generar un diagnóstico de tu sitio con unos pocos clics con el siguiente paso a paso:

1. Ingresa a la herramienta

Claramente el paso más sencillo, ingresar a la URL https://pagespeed.web.dev/, dentro de la cual verás una barra en la que podrás escribir la URL de la página web que deseas analizar.

A tener en cuenta: esta herramienta no analizará de por si, toda tu página web, sino la URL en específico que tu le des, por lo que si deseas medir la página de inicio, las de producto, categorías o cualquier otra, deberás hacer la prueba con cada una de ellas.

2. Elige la vista móvil o escritorio

Una vez hayas dado clic en el botón Analizar, podrás elegir si quieres ver el informe de la versión móvil de tu sitio o la versión de escritorio (es recomendable que analices las dos).

• Versión móvil: aquí suelen haber resultados más bajos, pues el PSI simula conexiones lentas y pantallas pequeñas (como pasa en la realidad).
• Versión de escritorio: verás como carga tu web en computador desde una conexión estable.

Ojo con el first movil idexing: Google prioriza la versión móvil de tu página web sobre la de escritorio, por lo que te aconsejamos darle prioridad al análisis móvil, además ten en cuenta que la mayoría de tus visitas, serán desde celulares.

3. Interpreta el puntaje general

Más abajo, verás el diagnóstico general de rendimiento de tu web con una puntuación de 0 a 100 con tres colores:

• 🔴 0–49 (lento): si te encuentras aquí, hay mucho por mejorar.
• 🟡 50–89 (aceptable): tu sitio funciona, pero aún no está optimizado.
• 🟢 90–100 (rápido): excelente rendimiento.

Este puntaje es solo un resumen, por lo que tendrás que seguir navegando hacia abajo, donde la misma herramienta te explicará cada métrica y lo que debes mejorar.

4. Explora el reporte

Es momento de iniciar la navegación por las diferentes métricas que te da la heramienta:

• Resultados principales (Core Web Vitals): te permiten saber si tu web pasa o no las métricas clave (LCP, INP y CLS).
• Oportunidades: te da sugerencias sobre cosas que puedes optimizar como el peso de las imágenes, eliminar recursos innecesarios o que bloquean el renderizado, etcétera.
• Diagnósticos: este ya es una análisis más técnico, el cual si requiere de conocimientos un poco más avanzados y será útil para desarrolladores.
• Auditorias superadas: te mostrará las cosas que estás haciendo bien y que están a tu favor.

En cada ítem donde te muestre un triángulo rojo, un cuadrado amarillo o un círculo, podrás dar clic y leer a detalle, lo que la herramienta te dice al respecto, pues además de decirte dónde está el error, te dará consejos que te permitan solucionarlo.

Es cierto que habrán puntos o cosas que tal vez no entiendas, pero la herramienta te irá explicando qué es cada cosa, de forma tal que puedas entenderla.

En resumen, es sencillo: ingresas la URL que quieres analizar, revisas el puntaje, comparas móvil y escritorio, vas a cada detalle que puedes mejorar y puedes intentarlo o enviarle el reporte a tu desarrollador para que te ayude con él.

Entendiendo los principales indicadores

Veamos varios de los términos técnicos que encontrarás aquí y que tal vez suenen “raro” pero que en realidad, son muy fáciles de entender con las siguientes preguntas:

1. ¿Qué tan rápido ve algo el usuario?
2. ¿Qué tan rápido puede interactuar?
3. ¿Qué tan estable es la página?

⏱️ First Contentful Paint (FCP)

Aquí se mide el tiempo que tarda en aparecer el primer elemento visible de la URL, como un texto, una imagen, un color de fondo, etcétera.

Es importante porque le da al usuario, una señal de si la página está cargando o no; es como cuando estás esperando el bus y al fin ves que viene en la otra cuadra, aún no ha llegado pero sabes que viene.

🖼️ Largest Contentful Paint (LCP)

Esta métrica medirá cuánto tarda en mostrarse el contenido principal como por ejemplo la imagen grande de tu página, un bloque de texto, un banner, etcétera.

Tiene gran relevancia pues si el contenido principal se demora en cargar, el usuario sentirá que la página web está lenta y… ¿Te ha pasado que te carga lento una página y te sales y te vas a otra?, ¿Qué tal si te pasa a ti?, cosa que no te puedes permitir.

👆 Interaction to Next Paint (INP)

Te dice el tiempo que pasa desde que el usuario interactúa con un clic, un toque o teclado, hasta que la página responde visualmente.

Es importante pues mide si tu sitio reacciona rápido o desespera al usuario y el típico ejemplo, es cuando das clic en “Comprar” queriendo ir de una vez al carrito, pero la web se queda congelada.

🎯 Cumulative Layout Shift (CLS)

Mide la estabilidad visual de la página, si los elementos se mueven mientras carga o si permanecen estables.

Estos saltos suelen molestar al usuario, generar errores de clic y dañar la experiencia, como por ejemplo cuando vas a dar clic en el botón “Pagar” pero justo en ese momento, se baja y te aparece un anuncio en el que terminas dando clic sin querer.

📊 Speed Index

Esta métrica te mostrará qué tan rápido se ve la página en general y es importante pues da una visión global de la experiencia visual del usuario.

Por ejemplo, estás armando un rompecabezas pero aunque pongas la primera ficha rápido (FCP) y la última ficha también aparezca (LCP), lo que importa es qué tan rápido armaste el rompecabezas completo.

Interpretación básica del puntaje general

Cuando ves el resultado general del PageSpeed Insights, encontrarás un puntaje en colores, los cuales deberás tener en cuenta bajo los siguientes parámetros:

🔴 Puntaje rojo (0 – 49): sitio lento

Quiere decir que tu página tiene serios problemas de rendimiento que debes tener en cuenta, pues tu web está tardando demasiado en cargar, las imágenes pesan mucho, los botones responden lento y la experiencia de usuario no es buena.

Para solucionarlo, deberás optimizar imágenes, activar el caché y compresión en tu servidor y revisar que tengas un buen hosting.

🟡 Puntaje amarillo (50 – 89): sitio aceptable

Cuando tu puntaje está dentro de éste rango, significa que tu página funciona pero no está optimizada completamente, pues el usuario puede navegar pero hay pequeños retrasos o movimientos que pueden dañar la experiencia de usuario.

Aquí deberás revisar las oportunidades más grandes que te sugiere el PSI, reducir el JavaScript y el CSS innecesario en tu web e implementar Lazy Load en imágenes y videos.

🟢 Puntaje verde (90 – 100): sitio rápido

Tu página está funcionando correcta y completamente, es rápida y fluida, el usuario navega sin demoras, con confianza.

Lo que debes hacer en este punto, es mantener las buenas prácticas que hasta el momento hayas venido haciendo y revisar periódicamente para mantenerte sempre OK.

No te obsesiones con el 100/100

No siempre será posible lograr el puntaje perfecto, lo importante es tener el puntaje lo más alto posible y buscar estar siempre en verde, pues esto nos estará diciendo que estamos brindando una experiencia real buena a los usuarios.

Concéntrate en las mejoras que tienen más impacto en la web y en ahorrar segundos en la carga de la misma.

Acciones prácticas más comunes para optimizar tu web

Veamos ahora algunas de esas acciones comunes que suelen ser grandes oportunidades de mejora para tu web y para las cuales, no necesitas ser experto en desarrollo web y puedes utilizar plugins o programas que te ayuden con ello:

• Optimizar imágenes: utiliza formatos modernos como WebP o AVIF, comprime las imágenes y busca que sean lo más livianas posibles sin que pierdan su calidad.
• Activa la compresión de archivos: cosa que puedes hacer desde tu hosting y para lo cual le puedes pedir ayuda a tu proveedor del servicio.
• Minifica y combina CSS/JS: minificar es eliminar espacios, comentarios y códigos innecesarios y puedes hacerlo por medio de plugins gratuitos.
• Activa la carga diferida (Lazy Load): hace que las imágenes y videos se carguen sólo cuando el usuario haga scroll y los vea.
• Usa un CDN (Content Delivery Network): este es un servicio encargado de distribuir tu sitio en varios servidores al rededor del mundo, haciendo que cargue más rápido.
• Mejora el servidor/hosting: no todos los hosting son buenos y puede que el problema no sea tu web sino el servidor, cosa que el PSI te dirá. (TE REGALO UN -20% EN EL MEJOR HOSTING).
• Elimina recursos innecesarios: borra plugins, imágenes, textos y cosas que no necesites o utilices en tu web.

Comparte el informe con tu desarrollador

Otra de las ventajas y características del Speed Test de Google, es que si cuentas con un desarrollador o profesional que pueda trabajar en tu web, podrás compartirle el informe del análisis que realizaste, el cual tendrá todo lo que viste y básicamente podrás solicitar con conocimiento de causa, que te ayude a mejorar X o Y aspecto que sea una oportunidad para tu sitio.

Limitaciones de PageSpeed Insights

Si bien el PageSpeed Insights de Google es una excelente y muy útil herramienta, no es la herramienta definitiva para analizar o auditar una página web, su rendimiento, su SEO, etcétera.

Es importante tener en cuenta que:

• Esta no es una auditoría completa de SEO.
• No siempre refleja la experiencia 100% real de los usuarios.
• Estos puntajes no lo son todo.
• Algunas recomendaciones son muy técnicas y requerirán de un experto.
• No evalúa factores como diseño y usabilidad, calidad del contenido y conversión.

Esta herramienta es un buen punto de partida para saber cómo está tu web respecto a velocidad y experiencia e iniciar con actividades básicas que ayudarán a mejorarla demasiado, pero no es la foto completa de tu sitio.

Checklist final de interpretación

Hemos preparado para ti, un checklist con el que podrás analizar tu web y conocer en qué punto se encuentra; este checklist podrás descargarlo gratis dando clic en el botón azul de abajo:

Igualmente, déjanos saber qué resultado arroja tu web, qué recomendaciones te hace el PageSpeed Insights de Google y si requires ayuda con ello, no dudes en contactarnos y solicitar tu consultoría gratis.