¿Qué es Google PageSpeed Insights y para qué sirve?

Google PageSpeed Insights (PSI) es la herramienta de prueba de velocidad más popular. Ayuda a los propietarios de sitios web a analizar la velocidad de las páginas web de forma gratuita. La prueba determina el rendimiento de tu página web en escritorio y móvil.

Las puntuaciones de velocidad y Core Web Vitals dentro del informe de PSI te ayudan a identificar áreas de mejora. Las oportunidades y diagnósticos ofrecen más detalles sobre los problemas que afectan a cómo interactúan los usuarios del mundo real con tu negocio en línea.

Con esta guía, dominarás la forma más rápida (y fácil) de probar la velocidad de tu sitio web utilizando la herramienta Google PageSpeed Insights, cómo leer tus informes y qué pasos tomar a continuación para solucionar cualquier problema de rendimiento.

¿Qué es Google PageSpeed Insights (PSI)?

PageSpeed Insights (PSI) es una herramienta de prueba de rendimiento de sitios web que analiza el tiempo de carga, la capacidad de respuesta y la estabilidad visual de una página web específica en dispositivos móviles y de escritorio.

Se utiliza para realizar auditorías de velocidad gratuitas (basadas en datos de laboratorio y de campo) que te proporcionan una visión general estimada del rendimiento y sugerencias para mejorar.

En los últimos 10 años, PSI se ha convertido en una herramienta de diagnóstico invaluable para los no desarrolladores que desean ver cómo están funcionando ciertas páginas. Las recomendaciones del informe de Google PageSpeed Insights son un excelente punto de partida para cualquiera que busque mejorar la velocidad y el rendimiento del sitio.

¿Por qué deberías controlar tu web PageSpeed Insights?

Los sitios web que cargan lentamente cuestan a sus propietarios 2.600 millones de euros en pérdidas cada año.

Además, se necesitan un promedio de 10,5 segundos para que un sitio web se cargue.

Eso es 8,5 segundos más de lo que un visitante está dispuesto a esperar antes de abandonar un sitio web.

En términos de rendimiento web, esta brecha aparentemente pequeña es donde un 61% de los sitios web a nivel mundial están luchando más.

Hay muchas herramientas de prueba de rendimiento disponibles, pero lo que distingue a Google PageSpeed es que te permite buscar soluciones y tomar decisiones basadas en datos. Además, el informe de PSI sigue las mejores prácticas de rendimiento web más recientes establecidas por Google.

¿Importa realmente la puntuación de Google Page Speed

Te lo aseguro, ¡sí! El informe de PageSpeed Insights te muestra dónde está sobresaliendo tu sitio y dónde está bajo rendimiento. Si tu velocidad de carga es mala, estás arriesgando una pérdida del 6% de ingresos y un 11% menos de vistas de página por cada segundo de espera.

Una puntuación baja de PSI indica problemas técnicos con tu sitio web, y es mejor utilizarla para fines de depuración. Pero perseguir una puntuación perfecta de 100/100 no vale la pena tu tiempo.

En su lugar, trabaja en una mejor experiencia del usuario, contenido de calidad útil y relevancia.

Después de su reciente actualización, Google PageSpeed ahora ofrece una interfaz más intuitiva y modernizada, una mejor diferenciación entre datos de laboratorio y de campo, y una evaluación clara de Core Web Vitals (CWV).

No es de extrañar que el panel de CWV ocupe la posición superior en el informe de PSI. Google ha verificado una y otra vez que las métricas de CWV son lo que realmente importa si quieres que tus visitantes del sitio se queden y conviertan.

Puntuación de rendimiento: una media ponderada de métricas

La puntuación de rendimiento es una media ponderada de las puntuaciones de las métricas, y el peso de cada métrica representa la percepción del usuario sobre el rendimiento.

Puedes experimentar con el impacto de diferentes métricas en tu puntuación utilizando la Calculadora de puntuación de Lighthouse.

Auditoría	Descripción	Peso
First Contentful Paint (FCP)	El primer momento en que el usuario puede ver algún contenido de la página en la pantalla.	15%
Speed Index (SI)	La progresión visual de la carga de una página y qué tan rápido se muestra el contenido.	15%
Largest Contentful Paint (LCP)	El tiempo que tarda en aparecer completamente el elemento de contenido más grande en la pantalla.	25%
Time to Interactive (TTI)	El tiempo que tarda una página en ser completamente interactiva.	15%
Total Blocking Time (TBT)	La gravedad del tiempo durante el cual la página no es interactiva hasta que se vuelve confiablemente interactiva.	25%
Cumulative Layout Shift (CLS)	Con qué frecuencia el usuario experimenta cambios inesperados en el diseño.	5%

Nota: Estos pesos son precisos para Lighthouse 6, pero pueden cambiar en versiones futuras según la investigación del equipo de Lighthouse sobre qué métricas tienen mayor impacto en el rendimiento percibido por el usuario. Además, tu rendimiento puede variar cada vez que ejecutes la prueba debido a la variabilidad inherente de las tecnologías web y de red, incluso si el código no ha cambiado.

La puntuación de rendimiento global se divide en las siguientes categorías según los valores ponderados de cada métrica:

• Bueno: Puntuaciones de 90-100
• Necesita mejora: Puntuaciones de 50-89
• Malo: Puntuaciones de 1-49

¿Cómo ejecutar una prueba en Google PageSpeed Insights?

Google ha hecho que sea muy fácil utilizar la herramienta de prueba de rendimiento de PageSpeed Insights.

Paso 1: Visita el sitio web de PageSpeed Insights: https://pagespeed.web.dev/

Paso 2: Copia/Pega la URL de la página web que deseas probar en el campo indicado.

Paso 3: Haz clic en el botón «Analizar»

Relájate y deja que PageSpeed recopile datos tanto de la base de datos de Chrome User Experience Report (CrUX) como de la API de Lighthouse.

En casos raros, tu informe de PageSpeed Insights podría no cargar y si un simple refresco de la página no soluciona el problema, hay varias razones por las que esto podría estar sucediendo:

• Fallo del servidor con la solicitud inicial de URL
• El servidor no ofrece HTTP
• HSTS
• about:blank
• No se encontró ninguna solicitud de documento
• Intersticial TLS/certificado malo

¿Cómo leer los resultados de tu prueba de Google PageSpeed?

Un sistema de puntuación tricromático te ayudará a identificar dónde está funcionando bien tu página web y dónde necesita atención adicional.

• Verde: indica un buen rendimiento
• Naranja: muestra que hay margen para mejorar
• Rojo: indica un rendimiento pobre

Versiones de informe para móviles y escritorio

En la parte superior de tu informe de PSI, puedes cambiar entre las versiones de móvil y escritorio de tu página web. Por defecto, la prueba muestra la vista móvil primero.

Ten en cuenta que una puntuación más baja en Mobile PageSpeed Insights es completamente normal.

Aquí hay algunos factores que contribuyen a esto:

• Los dispositivos móviles funcionan con procesadores más lentos;
• Los dispositivos móviles tienen reglas CSS específicas para dispositivos (por ejemplo, cambio de tamaño de imágenes, tamaño de ventana, etc.);
• PSI prueba la red móvil a una velocidad más lenta.

Evaluación de Core Web Vitals

Google prioriza explícitamente la experiencia del usuario y la mide a través de las métricas de rendimiento que se muestran a continuación.

Importante: Para mejorar el rendimiento de tu sitio (y tus KPI), debes enfocarte en optimizar estas métricas. En tu informe de PageSpeed Insights, son las únicas que se basan en datos de campo, es decir, representan cómo experimentan tus visitantes en el mundo real tu sitio web.

Novedad: Vistas disponibles

Hay dos vistas que puedes cambiar entre ellas en la esquina superior derecha del panel:

• Esta URL: muestra los resultados de Core Web Vitals para la página web específica que estás probando en PageSpeed Insights.
• Origen: proporciona resultados para todo el dominio.

Tu evaluación de Core Web Vitals puede ser aprobada o rechazada. La forma en que funcionan estas métricas es que debes aprobarlas todas, o seguirás obteniendo el estado de rechazado.

Utiliza la opción de vista expandida en la esquina superior derecha del panel para ver un desglose de umbrales de cada métrica en %.

Esta sección muestra datos de los últimos 28 días, como se ve en la franja en la parte inferior de la evaluación. Ese es el período mínimo requerido de tiempo antes de que puedas ver cambios en tus Core Web Vitals después de aplicar cualquier tipo de optimización de velocidad y rendimiento.

Si tu sitio es relativamente nuevo o no atrae a muchos visitantes todavía, esta sección puede no estar disponible para ti. Esto sucede cuando CrUX no ha rastreado tu sitio web debido a tráfico insuficiente. En tales casos, te recomiendo utilizar Lighthouse para ejecutar una auditoría de rendimiento sintético para «estimar» la velocidad de la página, te dejo el enlace.

Oportunidades y Diagnósticos

La siguiente sección se enfoca en diagnosticar problemas de rendimiento basados en datos de laboratorio. A continuación, repasaremos los más comunes y sus soluciones.

Haz clic en las puntuaciones para saltar a las listas de rendimiento.

Puedes ver la lista de diagnósticos bajo tu puntuación de Rendimiento tal como es, o cambiar entre auditorías relevantes para:

• FCP (First Contentful Paint): el tiempo que tarda en cargar el primer contenido de la página.
• TBT (Total Blocking Time): el tiempo total que la página está bloqueada por tareas que impiden la interacción del usuario.
• CLS (Cumulative Layout Shift): el desplazamiento acumulado de la disposición de la página, que puede causar problemas de usabilidad.
• LCP (Largest Contentful Paint): el tiempo que tarda en cargar el contenido más grande de la página.

Todos los diagnósticos son expandibles, lo que te permite inspeccionar qué advertencias y sugerencias específicas se refieren a los problemas que encuentran. Aquí por ejemplo desplegamos el principal problema.

Ten en cuenta que hay una explicación debajo de la advertencia que sugiere qué mejoras puedes esperar en tus Core Web Vitals.

Todas las demás puntuaciones presentan paneles similares e incluyen listas que puedes explorar a tu propio ritmo.

La puntuación de Accesibilidad determina cuán disponible es tu contenido para los usuarios, independientemente de las discapacidades o la diversidad operativa.

La puntuación de Mejores Prácticas en el informe de PageSpeed evalúa si tu sitio web se adhiere a las pautas relacionadas con la confianza y la seguridad, JavaScript, imágenes, mapas de origen, etc.

La puntuación de SEO calcula cuán bien sigue tu página web los consejos básicos de optimización para motores de búsqueda. Sin embargo, ten en cuenta que la lista de verificación no cubre todo lo que podría afectar tu clasificación en Google.

¿Qué te dice realmente PageSpeed Insights?

Aunque el informe de PSI ha mejorado significativamente la forma en que combina y presenta los resultados de rendimiento de tu página web, no debería ser la única herramienta de prueba que uses, pero para empezar, es lo mejor.

El algoritmo de PageSpeed considera cientos de factores, por lo que es mejor tomar tus puntuaciones con cautela.

Sin embargo, tus conocimientos de velocidad son un trampolín útil para una estrategia de mejora de velocidad del sitio para principiantes. Utiliza los informes para:

• Ideas para oportunidades de optimización
• Análisis rápido y gratuito de un proyecto que posees en su totalidad
• Las últimas pautas de optimización de rendimiento de Google

Desafortunadamente, algunos usuarios de sitios web tienden a tomar los datos de PSI al pie de la letra y a menudo malinterpretan los propios datos de PageSpeed. Para mejorar realmente la experiencia del usuario, debes centrarte en soluciones a largo plazo y seguir cómo avanzas hacia tus objetivos de rendimiento.

9 advertencias de rendimiento en Google PageSpeed Insights para resolver

Ahora que has aprendido a utilizar el informe de PageSpeed Insights, es hora de arremangarte y empezar a trabajar en la mejora de la velocidad y el rendimiento de tu sitio.

No es una tarea fácil y es posible que debas consultar con un desarrollador. Utiliza la lista a continuación para iniciar tus mejoras en el rendimiento del sitio.

1. Minimizar el trabajo en el hilo principal

El hilo principal es donde el navegador realiza la mayor parte del trabajo necesario para mostrar una página. Si está bloqueado, no puede realizar sus tareas cruciales. Esto conduce a tiempos de carga lentos, páginas no responsivas y una mala experiencia del usuario. Minimizar el trabajo en el hilo principal permite que el navegador pinte píxeles en la pantalla más rápido y sea más responsivo al usuario.

2. Servir imágenes en formatos de próxima generación

Los formatos de imágenes de próxima generación como JPEG 2000, JPEG XR y WebP son el resultado de aplicar técnicas de compresión modernas a formatos de imágenes más antiguos (.jpeg, .png, .bmp).

De estos formatos, WebP es el más cercano a convertirse en el nuevo predeterminado. Servir imágenes en formatos de próxima generación reduce significativamente el tamaño del archivo mientras mantiene la misma calidad.

Aquí te dejo mi Guía de SEO para imágenes en Google

3. Eliminar recursos que bloquean la representación

Algunos archivos CSS y JavaScript (como hojas de estilo, etiquetas de script) e imágenes pueden estar marcados como recursos que bloquean la representación. A medida que el navegador pasa por el HTML de una página, puede ser interceptado por dichos recursos.

El navegador debe detenerse, descargar, analizar y ejecutar dichos recursos. Eliminar recursos que bloquean la representación permite que se realicen acciones cruciales como visualizar (representar) la página.

4. Minimizar recursos

Reducir el tamaño de los archivos HTML, CSS y JavaScript es una parte crucial para acelerar tu sitio web. Puedes hacer que los archivos de código sean más ligeros minimizando recursos y comprimiéndolos. Ambos son optimizaciones de bajo esfuerzo y alto rendimiento, y es inteligente obtenerlos en un solo paso.

5. Diferir imágenes fuera de pantalla

Diferir imágenes fuera de pantalla (también conocido como carga diferida de imágenes o lazy load) se refiere a utilizar un conjunto de técnicas para cargar solo las imágenes que los visitantes están viendo actualmente. Las imágenes fuera de pantalla se vuelven visibles solo cuando el usuario navega hacia ellas. Diferirlas garantiza que se carguen primero recursos más críticos.

6. Servir activos estáticos con una política de caché eficiente

De todas las formas de mejorar el rendimiento del sitio web, la caché es la más fundamental. Si deseas acelerar el rendimiento de tu sitio, reducir la carga de tu servidor y proporcionar a los visitantes una experiencia excepcional, debes tener una política de caché eficiente.

7. Asegurarse de que el texto permanezca visible durante la carga de fuentes web

Las fuentes suelen ser archivos grandes que tardan un rato en cargar. Incluso pueden bloquear la representación del texto, que es lo que tus visitantes necesitan más para navegar por tu sitio web. Por eso, asegurarse de que el texto permanezca visible durante la carga de fuentes web es una pieza crítica de la estrategia general de rendimiento.

8. Los elementos de imagen no tienen ancho y alto especificados

Una de las principales razones por las que la mayoría de los sitios web fallan en su puntuación CLS es porque no tienen suficiente espacio reservado para sus elementos de imagen. Por eso, tener atributos de ancho y alto explícitos puede ahorrarte problemas de CLS y evitar que tus visitantes experimenten cambios inesperados.

9. Reducir el impacto del código de terceros

Aunque es imposible ejecutar un sitio web sin scripts de terceros, hay muchas técnicas de optimización que puedes aplicar para reducir el impacto del código de terceros. Hacerlo te permitirá seguir utilizando funcionalidades útiles sin ralentizar tu sitio.

En resumen

Google PageSpeed Insights vale la pena agregarlo a tu arsenal de pruebas de rendimiento, pero no te olvides de utilizarlo de manera inteligente y enfocarte en los datos que importan:

• No te enfoces en obtener una puntuación perfecta de 100/100. En su lugar, presta atención a la evaluación de Core Web Vitals;
• Un puntaje de rendimiento bajo sugiere problemas técnicos en tu sitio. Utilízalo para depurar;
• Los datos de campo son más importantes que los datos de laboratorio para una gran experiencia del usuario;
• Revisa la herramienta PageSpeed cada 28 días aproximadamente para seguir tu progreso en Core Web Vitals.

El rendimiento es fundamental para el éxito de cualquier aplicación web. Google PageSpeed Insights es una gran herramienta para medir el rendimiento y recibir recomendaciones relevantes, pero no debería ser la única herramienta que utilices.