Facebooktwitterlinkedin

¿Tu página web cumplen con los estándares de velocidad de carga de Google? Aprende a usar los informes de PageSpeed ​​Insights para identificar problemas e implementar correcciones para reducir al máximo el tiempo de carga de tu página web.

Nada es más frustrante que un site lento 🐢: no solo en el ámbito de SEO es interesante tener en cuenta esta métrica, sino también para mejorar la experiencia de usuario en tu web. Los tiempos de carga lentos dificultan la experiencia general del usuario y tienen un impacto muy negativo en la tasa de conversión de tu negocio.

Sí, la velocidad del sitio es un factor de ranking de Google, por lo que destinar recursos para mejorarla puede ayudarte en las posiciones en las SERPs.

El informe PageSpeed ​​Insights (PSI) de Google puede ayudarte a identificar si tus páginas cumplen o no con los estándares de rendimiento y de lo contrario te indicará cómo mejorarlos.

Utiliza esta guía para entender el informe de PageSpeed ​​Insights y aprender a explotarlo.

Índice

Qué es la velocidad de la página

Google define la velocidad de la página de 2 maneras:

  • Cuánto tiempo se tarda en mostrar el contenido en la mitad superior de la página.
  • El tiempo que tarda un navegador en renderizar completamente la página.

Pero mucho depende de la velocidad de nuestras páginas web. La conexión a Internet del usuario, el servicio de alojamiento web de un dominio y la limpieza de caché pueden afectar los tiempos de carga.

Entonces, cuando hablamos de la velocidad de la página, algunos elementos están fuera de nuestro control.

Pero tranquilo que no te vas a librar ya que hay muchos elementos que sí que podemos optimizar, como:

  • Imágenes
  • Videos
  • JavaScript
  • CSS
  • HTML
  • Fuentes
  • Otros…

Qué es PageSpeed ​​Insights (PSI) de Google

PageSpeed ​​Insights es una herramienta gratuita que analiza el contenido de una página web determinada y proporciona puntuaciones de velocidad de la página para las versiones móvil y de escritorio de la página.

pagespeed insights

La propia herramienta también identifica oportunidades de optimización y hace recomendaciones específicas para mejorar la velocidad de carga del site.

oportunidades pagespeed insights

PageSpeed ​​Insights es una de las muchas herramientas de auditoría de velocidad de página disponibles que me encanta complementar con los datos de la herramienta Gtmetrix, la cual te recomiendo ya que le eches un vistazo porque es muy top 😉

 

Información y clasificación de PageSpeed

Aunque la velocidad del sitio es un factor de clasificación, la puntuación de PageSpeed no lo es. La puntuación está diseñada como una descripción general del rendimiento estimado.

Algunas de las métricas en las que se basa la herramienta para calcular las puntuaciones de PSI son las Core Web Vitals, las cuales son parte del algoritmo de clasificación de Google.

Core Web Vitals

Las notas de PSI son una buena métrica para tener en cuenta y determinar si tus páginas cumplen o no con los estándares de velocidad y rendimiento de Google.

Guía de uso de PageSpeed ​​Insights, paso a paso

Para usar la herramienta PSI de Google, introduce cualquier URL de tu proyecto en la barra de herramientas, haz clic en «Analizar» y PSI se pondrá a ejecutar el análisis sobre esa URL y no todo el site. Si quieres analizar cómo hacer un análisis global de todas tus URLs aquí te dejo un vídeo explicativo: Analizar Page Speed de una Web Completa con Screaming Frog (Nivel técnico)

pagespeed insights paso a paso

Mientras esperas que se genere el informe, la herramienta está haciendo 2 cosas principales.

  1. En primer lugar, recopila los «datos de campo» de la página o los datos de rendimiento contenidos en el Informe de experiencia del usuario de Chrome (CrUX).
  2. En segundo lugar, mide el rendimiento de tu página a través de la API de Lighthouse. Esto se llama «Datos de laboratorio» porque mide la velocidad de la página web en un entorno simulado y controlado: redes móviles y un dispositivo de nivel medio.

Entiende el informe Pagespeed Insights

La herramienta PSI de Google generará un informe detallado que incluye:

  • Evaluación de Core Web Vitals
  • Datos de laboratorio de Lighthouse
  • Oportunidades
  • Diagnósticos
  • Auditorías aprobadas

A lo largo del informe PSI, la codificación por colores facilita la comprensión de las áreas en las que la página tiene un buen rendimiento, aún necesita mejoras o tiene un rendimiento deficiente 🙁

A continuación te explicaré cómo interpretar la información en cada área del informe 👇

Evaluación de Core Web Vitals

Los datos de Core Web Vitals de PSI provienen del Chrome UX Report e incluyen 3 métricas principales.

Core Web Vitals

Cada uno captura un aspecto diferente de la velocidad y el tiempo de carga. (Los que tienen ⭐️forman las Core Web Vitals)

  • First Contentful Paint (FCP): el tiempo que tarda en cargarse el primer activo de texto o imagen.
  • ⭐️ Largest Contentful Paint (LCP): el tiempo que tarda en cargarse el recurso de texto o imagen más grande.
  • ⭐️ First Input Delay (FID): el tiempo que tarda el navegador en responder a la primera interacción del usuario.
  • ⭐️ Cumulative Layout Shift (CLS): mide cualquier movimiento de la página en la ventana gráfica.

Cada métrica de rendimiento se mide en segundos o milisegundos, excepto el cambio de diseño acumulativo (CLS). CLS se calcula a través de una fórmula especializada. Una puntuación CLS inferior a 0,1 se considera buena, mientras que una puntuación CLS superior a 0,25 se considera deficiente.

(A lo largo de los últimos meses esta formula de ponderación la han variado y puede que actualmente se haya actualizado los parámetros)

Datos de campo

Los datos de campo presentados en el informe provienen de los 28 días anteriores y siempre se presentarán con barras de distribución adjuntas. Esto se debe a que «field data» se compone de datos agregados del informe CrUX y la misma página web nunca funciona de la misma manera para todos los usuarios.

Datos de laboratorio

Los datos de laboratorio de PageSpeed ​​Insights de Google incluyen datos sintéticos de la API de Lighthouse. Lighthouse mide Core Web Vitals y tres métricas adicionales.

datos de core web vitals de laboratorio

  • Índice de velocidad: el tiempo que tarda el contenido en aparecer visualmente durante la carga de la página.
  • Tiempo para ser interactivo : el tiempo que tarda la página en volverse completamente interactiva.
  • Tiempo total de bloqueo : la suma de tiempo entre FCP y la interactividad total.

A diferencia de los datos de campo, las métricas medidas en los datos de laboratorio no contendrán una barra de visualización sino simplemente las marcas de tiempo o los resultados de la prueba de laboratorio.

Es importante tener en cuenta que algunas de estas métricas tienen más peso en la puntuación general de PSI. Esta es la rúbrica ponderada actual para datos de laboratorio en Lighthouse 8 👇

https://web.dev/performance-scoring/?utm_source=lighthouse&utm_medium=lr#lighthouse-8

Oportunidades y diagnósticos

El apartado de Oportunidades y diagnósticos nos presenta recomendaciones específicas para mejorar la velocidad de la página.

El informe también detalla el ahorro de tiempo estimado que podría generar seguir las recomendaciones indicadas. Para obtener más detalles sobre los próximos pasos, tienes que hacer clic en la flecha desplegable 🔽  junto a cualquier Oportunidad ofrecida en tu informe.

La herramienta te explicará el problema y ofrecerá información sobre cómo solucionarlo paso a paso. ¿Fácil, verdad?

optimizar web mediante pagespeed

De manera similar, la sección Diagnóstico del informe detalla las mejores prácticas a seguir y que la página web no esta siguiendo…

diagnostico pagespeed

Cómo en la sección anterior, selecciona la flecha desplegable 🔽 para obtener más información sobre las mejores prácticas y los datos específicos del análisis de la página relacionados con cada problema.

pagespeed

Auditorías aprobadas

Esta sección del informe básicamente te permite saber qué se está haciendo bien. Después de la paliza te dan un poco de amor 😂

Tener una lista larga de auditoría aprobada es una buena señal. Así que si es así felicidades 👍 De lo contario, es una métrica que te permitirá ir visualizando la evolución positiva del proyecto.

Después del informe PSI: consejos para mejorar la velocidad de la página

Afortunadamente Google «siempre está pensando en los SEOs» 😜 y tenemos que reconocer que hace un buen trabajo proporcionando documentación sobre las soluciones que podemos aplicar. Dependiendo de las Oportunidades y los problemas que identifique la herramienta PSI los próximos pasos variarán…

Aún así debes tener en cuneta los siguientes tips para la mayoría de casuísticas:

  1. Mejora primero el servidor antes que la web (front-end); con un TTFB (el tiempo que tarda en cargarse el primer byte de una web) alto será muy complicado que mejores tus métricas
  2. Reduce el peso de las páginas sobre los elementos: HTML, JSS, CSS, imágenes, vídeos, fuentes
  3. Implementa una CDN para mejorar la entrega de tu página web
  4. Sube las imágenes optimizadas desde el principio
  5. Simplifica al máximo la cantidad de fuentes en uso (Arial, Montserrat…)

Además si quieres indagar más sobre cómo mejorar la velocidad de carga de una web te recomiendo este artículo completo sobre mejora de velocidad de carga de una web.

Conclusiones sobre PageSpeed ​​Insights

Pues ya estas listo para empezar a mejorar la carga de tu página web.

Puede que algunas correcciones específicas pueden requerir de la ayuda de desarrolladores web, el informe de PageSpeed ​​Insights te proporcionará una hoja de ruta clara para acelerar la velocidad del sitio.

Resaltar que el hecho de que mejores la velocidad de carga de tu web no es garantía de mejorar en los rankings ya que es un factor más de posicionamiento web y dependerá del estado global del SEO on page y Off page del proyecto además del sector competitivo que te encuentres.

Lo que si que te garantizo es que mejorarás la experiencia de usuario de tu proyecto desde el día 1 de la implementación.

Así que empieza analizar la velocidad de carga de tu página web y empieza a mejorar su velocidad de carga 🚀

Cualquier duda te leeré en los comentarios ;D

Imagen: Depositphotos

Mantente informado de las noticias más relevantes en nuestro canal de Telegram

Escribir comentario

¡Mantente al día!