¿Quieres saber cómo de rápido carga tu web? ¿O cómo te puntúa Google en formato móvil y en formato pc? 

Las Core Web Vitals se han convertido en factores claves de posicionamiento. Google busca por todos los medios ofrecer al usuario la mejor experiencia y bajo esta premisa exige a los creadores y empresas que trabajen por ofrecer al usuario una experiencia rápida y fluida en sus páginas web.  

Si quieres saber cómo te puntúa Google y conocer aquellos elementos que debes mejorar en tu web, atent@ al artículo que te traigo hoy sobre Page Speed Insight: La herramienta de google para medir la velocidad de carga y la experiencia de usuario 

Tabla de contenidos

¿Qué es PageSpeed Insight?

PageSpeed Insight es la herramienta de Google que te va a permitir conocer,  

  • Puntuación de cada url dentro de tu web en formato responsive y pc 
  • Los elementos a mejorar dentro de tu web y que te roban velocidad 
  • Oportunidades de mejora 
  • Plugins y elementos que te ayudarán a mejorar la velocidad y la experiencia de usuario 

 

Es una herramienta muy potente que en el artículo de hoy quiero desgranar contigo.  

La importancia de la velocidad de carga

Antes de entrar a ver por dentro esta herramienta, me gustaría entrar a valorar la importancia que tiene la velocidad de carga de una web.  

Así que te he preparado un vídeo muy corto en el que te cuento mucho más 

Conoce y accede a la herramienta PageSpeed Insight

Una vez que tenemos claro lo básico ya podemos entrar a trabajar con la herramienta 

Paso a paso de como acceder y como analizar una URL concreta  

Para poder trabajar con PageSpeed Insight, sólo tendrás que seguir los siguientes pasos,  

Entra en pagespeedinsight 

Introduce la url que quieres analizar 

Espera resultados.. 

¿Cómo interpretar el informe de Page Speed Insight?

First Contentful Pain

Cuando PageSpeed Insight hace referencia al First Contentful Paint es la primera métrica que vas a ver en tu informe. Lo que va a medir es la velocidad de carga percibida, puesto que marca el primer punto en la línea de tiempo de carga de la página en el que el usuario puede ver algo en la pantalla. 

¿Cómo podemos mejorar esta métrica? 

Para mejorar el FCP tienes varios recursos que podrían ser interesante implementar:  

  • Minificar css  
  • Eliminar CSS no utilizado 
  • Reducir los tiempos de respuesta del servidor 

 

Tranquilo que a lo largo de esta guía te lo voy a contar todo.  

Speed Index

Esta métrica será la encargada de medir la velocidad a la que se van mostrando los elementos visuales de la web durante la carga.  

El tiempo recomendable tiene que estar entre: 0 y4,3 segundos. 

Largest Contentful Paint

En este punto, PageSpeed Insight está centrándose en el despliegue del contenido, marcando el punto en la línea de tiempo de carga de la página cuando es probable que el contenido principal de la página se haya cargado.  

Normalmente hace referencia, por ejemplo, a una imagen o el elemento más extenso.  

Una buena puntuación de LCP pestaría ubicado en menos de 2,5 segundos.  

¿Cómo mejoramos el Largest Contentful Paint? 

Para mejorar este apartado, te recomiendo,  

  • Revisar el servidor 
  • Eliminar Javascript y CSS que bloqueen el renderizado 
  • Optimización de las imágenes 
  • Optimización de las fuentes web 

Time to interactive

En este caso, Page Speed mide el tiempo desde que un usuario clica en un punto de tu web, hasta que este se carga. De una manera coloquial podríamos decir que comprueba como de interactiva es tu página. 

Se considera una buena puntuación menos de 5 sdegundos.  

¿Cómo mejoramos esta métrica? 

  • Minificar Javascript 
  • Precarga 
  • Reducir el tiempo de ejecución de Javascript 

Total Blocking Time

Para Google esta métrica será la encargada de medir la cantidad total de tiempo entre el FCP (que como recuerdas corresponde al primer despliegue de contenido) y Time to Interactive (que será el tiempo para interactuar). 

Google se refiere al concepto de bloqueo porque el navegador no puede interrumpir la tarea que está en curso.  
Para que nos entendamos, Page Speed Insight te muestra el tiempo que pasa desde que el usuario entra e interactúa con el contenido mientras que el navegador está cargando el contenido (es un poco lío pero creo que ha quedado claro, y si no en comentarios me lo escribes) 

¿Cómo mejoro esta métrica? 

  • Reduce el código de 3ºs 
  • Reducir el tiempo de JavaScript 
  • Minimizar el trabajo del subproceso principal 
  • Mantener la cantidad de solicitudes bajas y tamaños de transferencia reducidos. 

Cumulative Layout Shift

Para terminar con las métricas principales es crucial que entendamos CLS. Está va a ser la encargada de medir la estabilidad visual.  
 

Estarás de acuerdo conmigo que es horrible visitar una web y a medida que estás leyendo, de repente todo se desplaza hacia la parte inferior de la web (a mi me desespera).  

He encontrado esta imagen que creo que lo explica muy bien,  

Cómo mejoro el CLS? 

  • Siempre que sea posible indica el tamaño en tus imágenes y vídeos y reserva el espacio para cualquier banner que quieras añadir o que se añada 
  • Nunca insertes contenido encima del contenido actual 

 

De hecho, estas métricas que te he comentado, son cada vez más importantes. Hace unas semanas Google terminó su actualización relacionada con la experiencia de usuario en formato pc. De hecho actualmente ya te ha debido aparecer una pestaña nueva en Google Search Console donde te vendrá información de tus urls y mejoras que puedas implementar siempre que sea necesario. 

Consejos para mejorar la puntuación en PageSpeed Insight

Publica imágenes con formatos de próxima generación

Cuando PageSpeed Insight nos habla sobre los nuevos formatos de imágenes podemos quedarnos con una cara como esta: 

Sin embargo, es conveniente que hay un mundo detrás de: JPG y PNG que son los formatos a los que más acostumbrados estamos.  

Las dos alternativas que te ofrece PageSpeed son: AVIF y WEBP. 

¿Qué son las imágenes WEBP?

Webp es un formato desarrollado por el mismísimo Google. Este se diferencia de JPG por ejemplo, que ahorrando en el peso de la imagen no pierde ni un ápice de calidad.  

Y cuándo te digo que ahorras en peso es que ahorras MUCHO.  

Te pongo un ejemplo con una imagen a continuación para que puedas comprobarlo por ti mismo,  

Imagen JPG

PageSpeed Insight

Imagen WEBP

PageSpeed Insight

¿Qué son las imágenes AVIF?

Por su parte AVIF es un formato nuevo que ya se está incorporando a los móviles Android y que lo desarrolló el grupo MPEG. Se trata de un nuevo formato fotográfico. 

¿Cuál de las dos elijo?

Personalmente yo utilizo WEBP, aunque es conveniente que sepas que a pesar de que hay muchas webs en internet que aseguran que este formato no da fallos, no es verdad 100%.  

Es cierto que la mayoría de plataformas (como google chrome u opera) lo leen sin problemas. Pero yo ya he tenido algún susto con alguna web que no ha sabido leerme correctamente las imágenes y he tenido que volver a la versión anterior.  

Sin embargo, en la mayoría de casos no me ha dado un solo problema y en cuanto a la puntuación y la velocidad de carga se ha notado muchísimo. 

Elimina los recursos que bloqueen el renderizado,

Provocado por elementos de JS y CSS que impiden que nuestra web muestre la página en cuestión hasta que no ha terminado de cargar 100%.  

Problema bastante común en páginas desarrolladas con WP.  Elementos que pueden venir hasta en la propia plantilla pueden afectar a que se generen una serie de scripts que se traduzca en un mayor tiempo de carga.  

 

Esto se traduce en que los navegadores de los usuarios tendrán que cargar previamente los scripts comentados antes de poder visualizar la web. Y los visitantes con conexiones más lentas tendrán que esperar para poder acceder al contenido, algo que Google penaliza al no dar una experiencia de 10 al usuario.  

 

  • Wp Rocket, en el apartado de Optimizar Archivos, vas a poder encontrar las opciones siguientes 
    • Minificar archivos CSS 
    • Combinar archivos CSS, esto se traduce en que en vez de tener 10 archivos CSS sólo vamos a tener 1, ahorrando por lo tanto tiempo en la velocidad de carga 
    • Optimizar la entrega del CSS, eliminando el CSS que bloquea la visualización en tu sitio web 
    • Igual que nos encontramos este tipo de opciones para el CSS nos lo vamos a encontrar para los archivos JS 
  • Autoptimize 
  • WP Caché, en su versión gratuita también tendrás la opción de mejorar la velocidad de carga 

Evita movimiento en tu web

Parece una tontería pero cada efecto en texto, imagen o cualquier otro elemento dentro de tu web, requiere de muchos recursos para cargarlo.  

¿Solución? 

Para conseguir una mejora en la puntuación te recomiendo que tu web sea lo más estática posible.  

De hecho te comparto mis propias métricas de los últimos meses, donde he estado poniendo el foco en la mejora constante de la web y como a medida que he ido aplicando estos consejos que te he dado, he ido viendo como he ganado posiciones, he conseguido más tráfico y he aumentado en todas mis demás métricas.  

Conclusión

PageSpeed Insight es una herramienta muy común entre los profesionales de seo (incluir enlace a servicios de seo) sin embargo, si estás empezando con tu negocio es natural que te cueste entender cada una de estas métricas.  

Si necesitas ayuda entendiendo la herramienta o mejorando tu posicionamiento web, te animo a que me contactes, ¡Estaré encantada de poder ayudarte! 

DebugView en Google Analytics 4

Cuando se trata de implementar una nueva herramienta es indispensable confirmar y reconfirmar que todo está funcionando correctamente. ¿Cuántas veces has implementado algo en tu

Leer más »

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Quieres encontrarme? Te lo dejo fácil

Email: mariagarnachoherreroveno@gmail.com

Teléfono: +34 684501008

Related posts:

Ebook Gratuito

Descarga el ebook de SEO Local y empieza a trabajar tu posicionamiento orgánico