Google PageSpeed ​​Insights: una guía para principiantes para equilibrar los puntajes con la funcionalidad del sitio

Cada segundo cuenta en línea, y la velocidad de su página web afecta directamente el rendimiento, el tráfico y las conversiones de SEO. La forma más fácil de obtener una imagen clara del rendimiento de su sitio es probarlo en Google PageSpeed ​​Insights (Google PSI).

Es una herramienta de análisis de rendimiento web gratuita que proporciona una puntuación general (de 100) y consejos procesables para aumentar su rendimiento. ¡Y la guinda del pastel es que obtienes los resultados en unos segundos!

Mito común: "Necesito anotar 100/100 en PSI para tener un sitio web rápido".

Esa es un error común. Si bien los puntajes altos son agradables, lo que más importa es pasar la evaluación central de la web vital (CWV) en Google PSI.

¿Pero por qué?

Core Web Vitals es un conjunto de tres métricas creadas por Google para medir la experiencia real del usuario en una página. Estas métricas se han convertido en parte del sistema de clasificación principal de Google, afectando directamente su visibilidad en los motores de búsqueda.

Esta guía lo ayudará a encontrar el equilibrio correcto entre aplicar las mejores prácticas de rendimiento web y mantener las características y el diseño que importan a sus visitantes.

¿Qué es Google PageSpeed ​​Insights?

PageSpeed ​​Insights (PSI) es una herramienta gratuita creada por Google que analiza el rendimiento de una página web y proporciona sugerencias concretas de mejora. Ofrece una puntuación de rendimiento junto con comentarios detallados basados ​​en métricas del faro. Lighthouse es una herramienta de código abierto (también desarrollada por Google) diseñada para mejorar la calidad y la experiencia del usuario de las páginas web.

Aquí hay un ejemplo de la puntuación global y algunas métricas importantes que puede encontrar en Google PSI:

Métricas clave del faro utilizadas en Google PageSpeed ​​Insights

Google PSI usa Lighthouse para calcular los puntajes de rendimiento. Estos puntajes se basan principalmente en los vitales web centrales y otras métricas importantes que ayudan a evaluar la experiencia del usuario y el comportamiento de carga.

Para cada KPI, aquí están los colores de puntaje a seguir:

• 0 a 49 (rojo): pobre

• 50 a 89 (naranja): necesita mejorar

• 90 a 100 (verde): bueno

Y aquí están las métricas.

1. La pintura contenta más grande (LCP) le dice qué tan rápido se carga el contenido principal.

Ejemplo: cuando la imagen y el título de héroe de una publicación de blog aparecen claramente en la pantalla.

2. La interacción a la siguiente pintura (INP) indica qué tan rápido reacciona su sitio cuando alguien hace clic o golpea.

Ejemplo: toca "Agregar al carrito", y el botón responde instantáneamente o podría haber un retraso pequeño.

3. Cambio de diseño acumulativo (CLS) mide cuán estable es la página mientras se carga.

Ejemplo: está a punto de hacer clic en un enlace cuando el diseño cambia (como un anuncio), y accidentalmente toca algo más.

4. La primera pintura contenta (FCP) calcula el tiempo hasta que aparece el primer bit de contenido.

Ejemplo: un logotipo aparece poco después de aterrizar en la página.

5. Hora de primer byte (TTFB) Indica cuánto tiempo tarda el servidor en responder.

Ejemplo: hace clic en un enlace y hay una pausa antes de que algo comience a cargarse.

6. El tiempo total de bloqueo (TBT) analiza cuánto tiempo lleva el navegador para responder a la entrada.

Ejemplo: la página se ve cargada pero no reacciona inmediatamente a su pergamino o haga clic.

7. Speed ​​Index (SI) le dice qué tan rápido se ve todo en la página visualmente completo.

Ejemplo: el contenido se llena sin problemas en lugar de cargar en trozos.

Por qué la evaluación central de Web vital es más importante que la puntuación de rendimiento

Los Core Web Vitals (CWV) son parte de las señales de clasificación de Google, lo que significa que pueden influir en su SEO y cómo su sitio web se ubica en Google. Cualquier esfuerzo por lograr una puntuación "buena" en la evaluación de CWV significa que su sitio ofrece una experiencia rápida, estable y receptiva para sus visitantes, y los motores de búsqueda lo recompensará por eso.

La optimización Core Web Vital también es importante para las agencias de WordPress; La mayoría de ellos se comprometen a entregar sitios que anotan en el verde. Ese es el caso, por ejemplo, con Agence Kn en Lyon. Su fundador, Thomas Baudry, explica:

Los vitales web centrales están en el corazón de nuestro enfoque de calidad: los probamos regularmente durante el desarrollo para garantizar el rendimiento y la experiencia del usuario suave. Justo antes de salir en vivo, activamos WP Rocket para maximizar los resultados. Siempre compartimos los puntajes de PageSpeed ​​Insights con nuestros clientes, junto con una garantía de rendimiento: una puntuación de más de 90 años en rendimiento y accesibilidad y 100 en las mejores prácticas y SEO.

Sección de diagnóstico: consejos procesables para aumentar el rendimiento de su sitio

PageSpeed ​​Insights proporciona una sección de diagnóstico detallada que enumera acciones específicas para mejorar el rendimiento de su sitio. Marca los problemas, explica por qué importan y sugiere lo que debe hacer para solucionarlos. PSI detecta cuándo su sitio se basa en WordPress y, a veces, recomienda que use un complemento para solucionar algunos problemas de la auditoría fácilmente.

Aquí hay un ejemplo de la sección de diagnóstico de rendimiento web con una lista de cosas que deben hacerse, como reducir el javascript no utilizado, eliminar los recursos de bloqueo de renderizado y permitir la compresión de texto.

Una vez que resuelva el problema, se trasladará a la sección de auditoría aprobada y se volverá verde.

Leer Google PSI a través de una lente equilibrada

Google PageSpeed ​​Insights lo ayuda a identificar qué elementos están afectando el rendimiento y cómo solucionarlos, no eliminarlos.

Por ejemplo, las características funcionales como widgets de chat, controles deslizantes y videos integrados agregan valor a su sitio, pero a menudo son pesados ​​de recursos y pueden dañar el rendimiento si no se optimizan correctamente.

Imagine que PSI marca su control deslizante de la página de inicio.

Podría resaltar problemas como:

• Las imágenes no están comprimidas o optimizadas correctamente

• Las imágenes no se sirven en el formato de próxima generación (como WebP o AVIF)

• CSS no utilizado está aumentando el tiempo de carga
  

PSI no sugiere que elimine el control deslizante. En cambio, señala que las imágenes deben estar mejor preparadas para la web: el formato correcto, el tamaño correcto y bien comprimido.

CSS no utilizado se puede limpiar utilizando herramientas en línea o complementos de WordPress diseñados específicamente para eliminar el código innecesario. Una vez que se realicen estas optimizaciones de rendimiento web, ejecute la prueba nuevamente; Es probable que vea el problema resuelto o mejorado.

Nicolas Richer, experto en WordPress en WPChef.fr, dice:

Obtener un 70 u 80 en Google PSI ya es una buena señal: ¡sabes que has hecho tu trabajo bastante bien! La cuestión es que hay una diferencia real entre los datos de laboratorio y cómo los usuarios realmente experimentan su sitio. Tenga en cuenta que alcanzar una puntuación verde puede ser mucho más difícil para algunos sitios, como una compleja tienda de WooCommerce o un sitio de Page Builder-Heavy, en comparación con un sitio simple de folletos. Entonces, si su puntaje está en la naranja, no se asuste. Poner las cosas en contexto; Todavía puede significar que su sitio no está mal optimizado. Y una última cosa: el rendimiento móvil es más importante, así que asegúrese de ejecutar su prueba desde la pestaña móvil. El escritorio es secundario.

Lo que afecta tu puntaje de Google PSI

Estos 5 problemas comunes a menudo perjudican su puntaje de Google PSI y tienen el mayor impacto en sus resultados generales de rendimiento:

1. Falta de almacenamiento en caché y compresión

Sin el almacenamiento en caché y la compresión de texto adecuado, su sitio tiene que volver a cargar todo desde cero cada vez, aumentando la carga del servidor y la velocidad de la entrega de la página.

Ejemplo : un sitio sin almacenamiento en caché del navegador hace que cada visitante que regrese vuelva a descargar los archivos CSS y JS completos, incluso si no han cambiado. Eso ralentiza su sitio, y Google PSI identifica espacio para la mejora como resultado.

2. Código no optimizado (CSS y JS)

Los archivos Bloated o no utilizados CSS y JavaScript pueden retrasar la rapidez con que aparece su contenido principal.

Ejemplo : una página de inicio que carga 600 kb de retrasos de JavaScript no utilizados que hacen que el contenido visible en varios segundos en el móvil. Google PSI probablemente le pedirá que optimice su JS y que priorice los scripts esenciales.

3. Grandes imágenes y videos

Los archivos multimedia pesados ​​tardan más en cargarse, especialmente en conexiones más lentas, que afectan tanto la velocidad como la estabilidad visual.

Ejemplo : una imagen de héroe de 3 MB en formato JPG hace que el contenido más grande se cargue por última vez, fallando en la métrica de pintura contenta más grande (LCP). Google PSI puede sugerir que comprime esta imagen y la convierta a un formato más ligero como WebP o AVIF.

4. Demasiadas solicitudes HTTP externas (incluidos scripts de terceros)

Cada solicitud externa agrega más trabajo al navegador, especialmente si los archivos se alojan en servidores lentos o distantes.

Ejemplo : múltiples scripts de terceros como anuncios, widgets de chat y alimentos sociales bloquean la representación y arrastran su puntaje de Google PSI.

5. complementos excesivos o mal gestionados

Demasiados complementos, especialmente los desactualizados o ineficientes, pueden hinchar su código y entrar en conflicto entre sí, reduciendo el rendimiento.

Ejemplo : una tienda WooCommerce con más de 20 complementos activos incluye scripts y estilos redundantes que ralentizan cada carga de página. Google PSI puede pedirle que reduzca su código no utilizado o que minimice el trabajo de subproceso principal.

Optimizaciones prácticas de Google PSI en inglés sencillo

Google PageSpeed ​​Insights a menudo le arroja términos técnicos, pero esto es lo que realmente significan y cómo solucionarlos fácilmente con dos complementos de WordPress: WP Rocket e Imagify. Estas herramientas trabajan juntas para abordar la mayoría de los problemas marcados por PSI y ayudarlo a alcanzar los puntajes verdes más fácilmente.

WP Rocket es el complemento de rendimiento más potente pero más fácil para WordPress que puede mejorar instantáneamente su web vital de la web. Aplica el 80% de las mejores prácticas del rendimiento web tras la activación, como el almacenamiento en caché, la compresión, la minificación y la carga perezosa. No necesita tocar una sola línea de código. Para ajustes avanzados, simplemente puede habilitar funciones de rendimiento como la carga de JavaScript diferida o eliminar CSS no utilizada en un solo clic.

Imagify es el complemento de optimización de imágenes más fácil para WordPress. Comprime sus imágenes sin pérdida de calidad y las convierte automáticamente en formatos de próxima generación como WebP y AVIF. El resultado: archivos de imagen más pequeños, tiempos de carga más rápidos y una experiencia de usuario más suave, sin levantar un dedo.

Ahora que sabe más sobre ambas herramientas, veamos cómo pueden ayudar a solucionar y optimizar algunas de las recomendaciones de PSI.

1. Implementar el almacenamiento en caché

Advertencia de rendimiento en Google PSI: Servir activos estáticos con una política de caché eficiente.

Lo que significa: guardar versiones de las páginas de su sitio web para que se carguen más rápido para los visitantes repetidos.

WP Rocket lo hace automáticamente . El almacenamiento en caché está habilitado tanto en el escritorio como en el móvil cuando activa el complemento.

2. Habilitar compresión

Advertencia de rendimiento en Google PSI: Habilitar compresión de texto.

Lo que significa: archivos encogidos como HTML, CSS y JavaScript antes de enviarlos al navegador.

WP Rocket permite la compresión de GZIP automáticamente reducir el tamaño del archivo y el tiempo de carga.

3. Minificación del código

Advertencias de rendimiento en Google PSI: minificar CSS y JS.

Lo que significa: eliminar caracteres innecesarios (como espacios o comentarios) en el código para que sea más ligero.

WP Rocket minifica automáticamente los archivos CSS y JavaScript.

4. Elimine los recursos de bloqueo de renderizado

Advertencia de rendimiento en Google PSI: elimine los recursos de bloqueo de renderizado.

Lo que significa: evitar que ciertos scripts o estilos retrasen la parte visible de su sitio web.

WP Rocket aborda este problema de rendimiento con la "carga JS diferida", la "ejecución de JS JS" y "eliminar las opciones de CSS no utilizados".

5. Implementar la carga perezosa

Advertencia de rendimiento en Google PSI: diferir las imágenes fuera de la pantalla.

Lo que significa: cargar imágenes, videos e iframes solo cuando los usuarios se desplazan hacia ellos.

WP Rocket incluye una característica de lazada que puede habilitar con un solo clic. Mejora la velocidad de carga al diferir la carga de elementos fuera de la pantalla, incluidas imágenes, imágenes de fondo CSS, videos e iframes, hasta que los usuarios se desplazan hacia ellos.

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

Advertencia de rendimiento en Google PSI: Servir imágenes en formatos de próxima generación.

Lo que significa: use formatos modernos como WebP o AVIF en lugar de los más antiguos y más pesados ​​como JPG o PNG.

Imagify convierte automáticamente sus imágenes en WebP y también le brinda la opción de convertirlas en AVIF. El complemento utiliza el modo de compresión inteligente que comprime imágenes mientras mantiene intacta la calidad visual.

Cómo usar Google PSI para su sitio web

Siga estos 6 pasos para prepararse correctamente, mantener un ojo crítico y adoptar un enfoque paso a paso para mejorar el rendimiento de su sitio web:

1. Comprenda sus necesidades y su tipo de sitio web

Comience con el propósito de su sitio: ¿está muy pesado, centrado en la imagen, comercio electrónico o un blog simple? Las expectativas y requisitos son muy diferentes. Un blog personal con algunas publicaciones no tiene las mismas necesidades que una plataforma de bienes raíces con listados, integraciones de mapas y contenido generado por el usuario. Tenga en cuenta este contexto antes de sumergirse en informes de rendimiento.

2. Vaya a Google PSI e ingrese su URL

Dirígete a PagesPeed Insights y pegue la URL de su sitio para iniciar la auditoría:

3. Interpreta los resultados cuidadosamente

Use PSI para identificar áreas de mejora, pero no elimine ciegamente las características esenciales para su negocio.

Ejemplo: si ejecuta un sitio de bienes raíces y PSI marca su integración de mapas como JavaScript-Heavy, eso no significa que deba eliminarlo. Lo mismo ocurre con complementos de chat o imágenes de alta calidad de casas en venta. Optimizar esas características en lugar de eliminarlas .

4. Toma medidas y comienza a optimizar

Con las herramientas y complementos adecuados, mejorar los vitales de la web principales y solucionar problemas de PSI se vuelve mucho más fácil.

Si su informe muestra problemas de imagen como "Servir imágenes en formatos de próxima generación" o "codificar eficientemente imágenes" o "minificar JS", "servir activos estáticos con una política de caché eficiente", intente usar Imagify y WP Rocket para solucionarlos.

Repita los pasos para cada problema marcado por PageSpeed ​​Insights, y sus vitales de web principales seguramente mejorarán.

5. Monitoree sus cambios

Después de unos días o semanas, ejecute otra prueba de PSI para rastrear mejoras. También puede monitorear su progreso de SEO: verifique si sus clasificaciones han mejorado ya que sus vitales de web principales se volvieron verdes.

6. Prueba con usuarios reales

Ir más allá de los números. Pregunte a sus visitantes o clientes sobre su experiencia:

• ¿Hay demasiadas ventanas emergentes?

• ¿El proceso de compra es suave?

• ¿El sitio se siente rápido?

Después de que su sitio haya reunido suficiente tráfico, PSI también comenzará a mostrar datos de campo, lo que significa métricos de rendimiento del mundo real basadas en el comportamiento real del usuario.

Siéntase libre de guardar esta hoja de trucos para más tarde para que sepa qué hacer cuando decida ejecutar su primera auditoría:

Herramientas alternativas para ir más allá de Google PSI Prueba

Si bien Google PageSpeed ​​Insights es un excelente punto de partida, otras dos herramientas de rendimiento web se destacan para pruebas de rendimiento más profundas: Gtmetrix y WebPageTest. Ambos ofrecen más datos granulares y opciones de personalización que van más allá de lo que PSI proporciona en términos de monitoreo del rendimiento web.

Prueba de rendimiento con GTMetrix

Gtmetrix es una herramienta freemium también alimentada por Lighthouse. Es ideal para comprender cómo cada recurso impacta el rendimiento y cómo se comporta el sitio en diferentes condiciones. Al igual que Google PSI, muestra todas las métricas clave de rendimiento web, incluidas las vitalidades básicas de la web, pero va más allá.

Gtmetrix proporciona ideas detalladas, como el tiempo completamente cargado en segundos, el peso total de la página con un desglose de los tipos de contenido (JavaScript, imágenes, CSS, etc.) y un cuadro de cascada visual que le permite ver exactamente cuándo y cómo se carga cada elemento. También puede probar múltiples URL de lado a lado para comparar los resultados y simular más de 40 dispositivos móviles y de escritorio y varios tipos de conexión (4G, LTE, etc.).

Prueba de rendimiento con WebPageTest

WebPageTest es una herramienta gratuita que ofrece características avanzadas para el análisis en profundidad y es uno de los favoritos entre los desarrolladores por su flexibilidad e ideas detalladas. Proporciona cuadros de cascada y un desglose de contenido completo para ayudarlo a comprender exactamente cómo se carga su página.

Puede comparar visualmente múltiples URL e incluso exportar informes de rendimiento, lo que lo hace ideal para un análisis más profundo o compartir con los clientes. WebPageTest admite 300 pruebas gratuitas por mes y le brinda acceso a más de 30 ubicaciones de pruebas globales. También le permite probar todos los principales navegadores y velocidades de conexión para simular las condiciones del mundo real con mayor precisión (similar a GTMetrix).

Limitaciones de Google PSI

Para resumir, Google PSI tiene tres limitaciones principales que están cubiertas por Gtmetrix y WebPagetest:

1. Especificidad del dispositivo: no puede seleccionar un dispositivo exacto (por ejemplo, iPhone 12) para las pruebas.

2. Control de ubicación: no puede elegir una ubicación específica para simular la experiencia de un usuario (por ejemplo, París).

3. Falta de KPI: PSI no muestra tiempo completamente cargado, peso total de la página con descomposición de contenido o proporciona una tabla de cascada visual.

Aquí hay una tabla de resumen que compara las tres herramientas:

Preguntas frecuentes de Google PageSpeed ​​Insights

¿Cómo funciona Google PSI?

Google PageSpeed ​​Insights es una herramienta gratuita que evalúa qué tan rápido y estable es su página web tanto en dispositivos móviles como de escritorio. Ejecuta una prueba de rendimiento utilizando la tecnología Lighthouse y le brinda una puntuación general de 100, basada en métricas clave de rendimiento como la velocidad de carga y la estabilidad visual. También proporciona diagnósticos y sugerencias detallados para ayudarlo a comprender qué está ralentizando las cosas y cómo solucionarlo.

¿Cómo puedo aprovechar Google PSI para la optimización móvil?

La mejor manera de usar Google PSI para la optimización móvil es simplemente hacer clic en la pestaña Móvil al ejecutar su prueba PSI. Simula cómo su sitio se desempeña en condiciones móviles del mundo real, incluidas conexiones más lentas y energía reducida del dispositivo. Es la mejor manera de ver lo que los visitantes móviles realmente están experimentando y dónde optimizar primero.

¿Cómo puedo mejorar mi puntaje de Google PSI?

Concéntrese en las áreas de gran impacto: almacenamiento en caché del navegador, minimización de JavaScript y CSS no utilizados, compresando y cambia el tamaño de imágenes, y reduciendo los scripts de terceros. Herramientas como WP Rocket e Imagify hacen que sea fácil abordar los problemas más comunes, sin tocar el código.

¿Cómo descargo un informe de PageSpeed ​​Insights?

No hay un botón de descarga de un solo clic en la interfaz PSI. Pero si es un poco experto en tecnología, puede usar la API PageSpeed ​​Insights para obtener sus resultados en formato JSON para informar o integrar en sus herramientas. Para los usuarios cotidianos, su mejor opción es tomar una captura de pantalla o copiar los resultados manualmente.

¿Por qué mis puntajes PSI Mobile and Desktop son diferentes?

PageSpeed ​​Insights prueba móvil y escritorio por separado, y los resultados a menudo difieren. Los puntajes móviles suelen ser más bajos debido a dispositivos más lentos y estranguladores de red que simula condiciones del mundo real. Las vistas móviles también pueden cargar diferentes reglas CSS, impactando la velocidad y el diseño.

¿Cómo se mide la puntuación de rendimiento?

PageSpeed ​​Insights calcula el puntaje de rendimiento de su página web de cada 100 basadas en varias métricas clave del faro, incluida la primera pintura contenta, el índice de velocidad, la pintura contenta más grande, el tiempo de bloqueo total y el cambio de diseño acumulativo. Cada uno de estos juega un papel diferente en el grado final. La calculadora de puntuación del faro de Google indica qué KPI tiene más peso en la calificación final.

¿Cuál es la diferencia entre datos de laboratorio y datos de campo en Google PageSpeed ​​Insights?

Los datos de laboratorio se generan en un entorno de prueba controlado con condiciones fijas (dispositivo, red), por lo que es útil para depurar y detectar problemas de rendimiento. Los datos de campo, por otro lado, reflejan experiencias reales del usuario en los últimos 28 días, dando una visión más precisa de cómo su sitio funciona en el mundo real.

¿Por qué Google PSI muestra diferentes puntajes en datos de laboratorio y campo?

Debido a que los datos de laboratorio simulan la carga en un dispositivo preestablecido y una conexión, mientras que los datos de campo se basan en visitas reales con dispositivos variados, ubicaciones y redes, su puntaje PSI puede diferir entre los dos, dependiendo de cómo los usuarios realmente interactúen con su sitio.

¿Qué es más importante: datos de laboratorio o datos de campo?

Los datos de campo son generalmente más valiosos porque se basa en la experiencia real del usuario. Sin embargo, los datos de laboratorio siguen siendo esenciales para probar y solucionar problemas de rendimiento durante el desarrollo. Idealmente, usen ambos juntos para guiar las mejoras.

Concluir

Google PageSpeed ​​Insights (PSI) es una de las herramientas gratuitas más confiables para medir el rendimiento de su sitio web e identificar lo que afecta la velocidad y la experiencia del usuario. Se centra en las métricas clave de rendimiento web y los vitales de la web central, que están directamente vinculados a su SEO y clasificaciones.

Este artículo debería haberle ayudado a comprender mejor cómo funciona PSI, cómo leer sus informes y qué pasos prácticos puede tomar para mejorar sus puntajes, sin sacrificar su diseño o funcionalidad.

Ahora es el momento de tomar medidas:
Ejecute su auditoría en Google PageSpeed ​​Insights y optimice su web vital de la web con WP Rocket, ¡no hay riesgo asumido gracias a la garantía de devolución de dinero de 14 días!