SEO

¿Qué son las core web vitals de Google?

Core Web Vitals de Google

A la hora de diseñar un sitio web la mayoría de la gente se concentra solamente en la estructura del contenido y el atractivo visual del sitio. Esto no es malo si no obvias otros aspectos como la velocidad de tu sitio o la popularidad del mismo (los backlinks).

En este artículo analizaremos una de las métricas más importantes que usa Google para evaluar un sitio web: la velocidad de carga del mismo.


Qué son las Core Web Vitals y en qué se basan

Para evaluar la calidad del rendimiento que presenta una web Google creó 3 métricas estandarizadas y más o menos independientes que te permitirán evaluar la calidad de la velocidad de descarga de tu sitio desde diferentes puntos de vista:

  • LCP o Largest Contentful Paint
  • FID o First Input Delay
  • CLS o Cumulative Layout Shift

¿Por qué crear 3 métricas en vez de una para medir la velocidad de carga? Pues porque por muy rápida que sea una web a la hora de cargar, puede ser que no lo haga de forma óptima (y esto es muy importante para el usuario).

puntuación de page speed insights
Puntuación de LCP, FCP y CLS para esta web

Vamos a estudiar estas 3 métricas una por una para que conozcas en que consisten y cómo puedes aumentar la calidad en cada elemento.

LCP (Largest Contentful Paint)

LCP velocidad de carga de Google

Este indicador conocido como «Procesamiento de imagen con contenido más grande» se encarga de medir en cuánto tiempo carga una web en base al elemento más grande de la misma. Google registra el tiempo de carga visual del elemento con más peso en cuestión de Bytes.

Este indicador te permite aproximar el tiempo máximo de carga del sitio web. Esto es debido a que en principio, cuando el elemento más pesado del sitio se cargue, el resto de los componentes del sitio web ya deberían estar visualizados en la pantalla. Sin embargo como veremos esto a veces no ocurre.

Lo recomendado por Google es una carga con un tiempo no mayor a 2.5 segundos de LCP ara una carga buena. Para una carga con puntuación mediana, debe ser menor a los 4 segundos. Si la puntuación de velocidad es más alta de eso, Google considera el tiempo de carga como pobre.

FID (First Input Delay)

FID de core web vitals de Google

La métrica «Retraso de primera entrada» (First Input Delay) realiza la medición de la interactividad. Es decir, mide cuán rápida es la interacción del operador con la página. Esta métrica mide el tiempo de respuesta de la página, es decir, cuando la página está lista para que el usuario realice la primera interacción

Al igual que métrica anterior, esta mide la respuesta visual del contenido y no el tiempo de carga. En otras palabras: esta métrica evalúa la navegabilidad de tu sitio web.

Esta tiene tres calificaciones dada por Google, la primera es buena si la carga es menor de 100 milisegundos. En el caso de estar superior a 100 milisegundos y menor 300 milisegundos, lo califica como “requiere mejorar”. En el caso de superar los 300 milisegundos lo considera como un rendimiento pobre.

CLS (Cumulative Layout Shift)

CLS de core web vitals de Google

La métrica «Cambio de diseño acumulado»(Cumulative Layout Shift) mide los cambios que realiza el sitio, cuando aún está cargando. Es común que por efectos de Javascript o CSS añadidos se creen esos efectos en la carga. Google los puede registrar y detalla cuanto tardan en cargarse dentro del website. Los layout shifts se entiende como los cambios en la forma o tamaño de los elementos de la página mientras esta todavía se está cargando.

Nota: a Google no le gustan para nada los layout shifts ya que perjudican la experiencia de usuario de la página.

Google no sólo puede registrar cuanto tardan en cambiar, sino con qué frecuencia estos cambios ocurren en tu sitio web. Google evalúa este parámetro y establece que hasta 0,1 es un valor óptimo. En el caso de estar entre ese valor y 0,25 estará en un rango de necesita mejorar.

En el peor de los casos estará por encima de 0,25, en este caso tendrás un rango pobre. Si es el caso, es recomendable que revistes tu website y optimices los efectos y el contenido del mismo.


Herramientas para evaluar la velocidad de tu sitio

caracol web lenta
¿Tienes una web más lenta que un caracol?

Puedes utilizar diversas herramientas para evaluar la métrica de tu sitio web. La más popular es la de Google Search Console, ya que te permite evaluar el SEO completo de tu sitio web y las puntuaciones de Web Core Vitals están integradas dentro de la consola. Google Search Console es la base de cualquier proyecto SEO, ya que permite evaluar la velocidad, contenido, la visibilidad del índice, los enlaces rotos y otros elementos relacionados con el SEO.

Otras herramientas muy conocidas para evaluar la velocidad de una web son:


Consideraciones básicas para mejorar las métricas de tu sitio web

velocímetro
Dale un acelerón a tu sitio web

Existen muchos elementos a considerar en el momento de optimizar el sitio web a nivel de velocidad de carga: los archivos de media que involucran videos, imágenes, documentos, entre otros, así como las hojas de estilos, el número de scripts que se cargan con a base de datos es otro elemento a considerar al momento de optimizar.

Sin embargo, vamos a ver algunos aspectos que puedes mejorar por ti mismo y que pueden mejorar mucho la velocidad de tu web.

Optimización de imágenes

Para la optimización de imágenes lo primero a fijarse es el peso recomendado para las mismas. Este debe estar entre 50Kb a 200Kb como peso máximo por imagen, aunque a decir verdad cuanto más pequeñas sean mejor. Es recomendable utilizar herramientas de transformación o compresión para bajarle peso a la imagen. Algunas de nuestras recomendaciones, en el caso de WordPress son:

Es probable que le restes un poco de calidad a la imagen con dicha compresión, sin embargo los cambios no serán perceptibles para el ojo humano.

Instala un sistema de caché

Instalar un sistema de caché permite que la carga de la web sea más rápida porque el navegador del usuario no tiene que volver a descargar la web entera si detecta que no ha habido cambios desde la última visita. Dicho de otro modo, el navegador utilizará los estilos y archivos que tenga almacenados dentro del disco duro de tu PC en vez de volver a descargarlos, a no ser que se le indique lo contrario.

Nuestras recomendaciones de cachés para WordPress son:

  • WP Fastest Cache
    • No ofrece un salto de velocidad tan grande como se espera pero es muy estable y no entra en conflicto con otros plugins
  • Lite Speed Cache
    • Es algo compleja de configurar pero ofrece muy buenas mejoras en la velocidad de carga y es muy estable
  • WP Super Cache
    • A veces provoca errores 500 en webs y tiene que ser desinstalada. Nosotros hace tiempo que no la usamos en ninguna web
  • W3 Total Cache
    • Es la que ofrece los mejores rendimientos pero entra en conflicto con Elementor y otros plugins con mucha facilidad. No se recomienda para uso básico

Los sistemas de caché mejoran la velocidad de carga ya que ahorran tiempo y recursos.

Optimización de archivos CSS y Javascript

Es necesario revisar los archivos CSS y Javascript, no sólo a nivel de cuán largos son sino también a nivel de en qué orden se descargan cuando se está cargando la web.

Aunque parezca que no sea importante, cargar muchas hojas de estilos y archivos JS en primer orden provocará que la web no sea visible para el usuario hasta que dichos archivos estén descargados, lo que a ojos del usuario eso parece simplemente lentitud.

Las dos soluciones para este problema son la minificación de archivos y la carga asíncrona de los mismos.

Esta tarea suena muy compleja pero no desesperes: la mayoría de veces estas funciones vienen incluidas como opciones extra en cualquier plugin de caché (como los listados más arriba). Normalmente lo único que tendrás que hacer será activar la opción y comprobar que no se rompe nada en la web. Te recomendamos hacer una copia de seguridad del sitio antes de hacer nada.