Core Vitals: Qué son y explicación con ejemplos

Seven SERP

Si hay algo en lo que Google presta especial atención, eso es la velocidad de carga de una página web.

Con el paso del tiempo Google ha añadido nuevas maneras de calificar una web que son capaces de darnos una visión general de cómo lo estamos haciendo y cómo Google ve nuestra web.

Afectan al posicionamiento, como el Mobile-First Indexing -se prioriza la versión móvil-. La velocidad de carga también ha tomado un papel muy importante y se puede medir con herramientas como Page Speed Insights, de la que hablaremos en otro artículo.

En esta ocasión, concretamente vamos a tratar de aclarar qué son las Core Web Vitals, las más recientes y que no son más una serie de mediciones que determinan si una web es rápida y usable, y básicamente, si es capaz de proporcionar una buena experiencia al usuario en base a diferentes métricas.

Cada una de estas métricas atenderá a diferentes factores. Por lo general, son bastante complicados de solucionar, especialmente si no tocamos código ya que implican modificaciones. No obstante, algunos son más sencillos de solucionar que otros. No nos asustemos por sus nombres, entenderlas es mucho más sencillo de lo que parece. Vamos a verlas:

First Input Delay (FID)

Esta métrica mide el tiempo desde que un usuario interactúa con la página web hasta que su navegador está preparado para responder a su acción.

Mientras más scripts, hojas de estilo CSS y elementos tenga la web, más tiempo tardará en navegador del usuario en renderizar el contenido final y por lo tanto el FID será más elevado.

Para mejorarla, debemos de intentar mantener nuestro contenido lo más simple posible. Utilizar scripts de anuncios, píxeles o videos suele ralentizar bastante el tiempo de carga afectando de lleno al FID.

Lo podremos ver más sencillamente con este ejemplo:

Los posibles resultados a obtener son los siguientes:

Bien de 0 a 100 milisegundos
Necesita mejorar de 100 a 300 milisegundos
Mal a partir de 300 milisegundos

Largest Contentful Paint (LCP)

Para saber qué es el LCP necesitamos saber qué significa Above the fold, es decir, lo que es visible en la pantalla sin que tengamos que llegar a hacer scroll. Por lo tanto: Esta métrica medirá lo que tarda el elemento visible más grande que aparezca above the fold.

Para mejorarlo, es importante optimizar y comprimir nuestras imágenes ya que suelen ser los elementos más pesados.

Los posibles resultados a obtener son los siguientes:

Bien de 0 a 2.5 segundos
Necesita mejorar de 2.5 a 4 segundos
Mal a partir de 4 segundos

Cumulative Layout Shift (CLS)

El CLS, o en español, cambios de diseño acumulados mide la inestabilidad visual de la página web. Seguramente nos haya pasado que estamos visitando una página web cuando nos aparece un popup que desplaza el contenido de la página y, finalmente terminamos haciendo clic en algún otro lugar que no deseamos. Es bastante molesto.

No necesariamente tenemos que hacer clic en un elemento no deseado. Por ejemplo, también suele ocurrir cuando añadimos algún anuncio asíncronamente con Google Adsense sin ir más lejos. Los anuncios cargarán independientemente del hilo de carga principal y simplemente se incrustarán a la página más tarde de que haya cargado, desplazando el contenido al incrustar los anuncios. Eso es el CLS.

Seguramente lo veremos más claro con un ejemplo:

Esta métrica nos devolverá un número que calcula la cantidad de desplazamientos y no calculará tiempo como tal.

Los posibles resultados a obtener son los siguientes:

Bien de 0 a 0.1
Necesita mejorar de 0.1 a 0.25
Mal a partir de 0.25

¿Cómo afectan las Core Vitals al SEO?

Las Core Vitals afectan a páginas individuales y no al propio sitio web. Si tenemos varias páginas, y una de ellas contiene una imagen excesivamente grande por ejemplo, en igualdad de condiciones esta hipotética página tendrá peor puntuación.

Tendremos que prestar especial atención en cumplir estos requisitos, ya que de hecho menos del 15% de las páginas web en Internet cumplen las métricas según Search Engine Journal y si finalmente afectan al posicionamiento SEO supondrá una ventaja competitiva con respecto al resto de webs.

Cumple con las Core Vitals de Google

Posiciona mejor tu web cumpliendo todas estas métricas sencillamente con Seven SERP Theme

¿Dónde puedo ver las Core Vitals de mi web?

Para poder ver las Core Vitals de tu web tienes varias opciones:

  • Si no utilizas Seven SERP Theme:
    • Haz una prueba de tu web con PageSpeed Insights.
    • Haz una prueba con GTMetrix.
    • Utiliza esta extensión para Google Chrome.
    • Utilizando Lighthouse. Si tenemos Chrome, basta con hacer clic en cualquier parte de la pantalla, presionar "Inspeccionar", clic en la pestaña "Lighthouse" y clic en "Generar informe".
  • Si utilizas Seven SERP Theme:
    • Accede a cualquier página y haz clic en Herramientas SEO > Prueba de velocidad.
    • O bien, en el siguiente apartado te explicamos como hacer para que te aparezcan en la barra de administrador.

Ver las Core Vitals en Seven SERP Theme

Con Seven SERP Theme, al igual que en el módulos de los que hemos hablado siempre tenemos una opción preparada de forma que no necesites usar plugins y que no nos moleste si no queremos ver esta información.

En este caso, dado a que se trata de datos que probablemente no necesitaremos ver continuamente, hay que hacer dos pequeños pasos para activarlo:

En primer lugar, accedemos a las opciones del tema y ponemos en el buscador 'Core Vitals':

Habilitamos el apartado correspondiente:

Finalmente, podemos acceder a cualquier página y se nos mostrará la siguiente información:

Debes de tener en cuenta que en las páginas de administrador no aparecerá, y que obviamente, es necesario estar conectado con una cuenta de administrador a tu blog. En dispositivos móviles, dado a que no se puede desplegar el menú, aparece en el pie de página.

Algunas de las métricas, como "CLS" o "FID" puede que varien dependiendo de la página en la que estemos, que no aparezcan, o que haya que interactuar con la página para obtener los datos.

Recursos adicionales: web.dev

Si queremos continuar indagando, siempre podemos acceder a la web oficial de Google que trata todos estos temas y nos ofrece recursos e información adicional: https://web.dev/. También la tenemos disponible en castellano. Se tratan además temas adicionales como las aplicaciones web progresivas, información para mantener nuestros datos y los de nuestros visitantes seguros, entre otros.

Por último, debemos de recordaros que es posible que aparezcan algunas otras métricas en Lighthouse, Pagespeed Insights, o incluso en el propio Seven SERP Theme, de las que hablaremos más adelante como el TTFB (Time To First Byte) o el TBT (Total Blocking Time).

Deja una respuesta

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