Core Web Vitals: Todo lo que debes saber

A la hora de optimizar nuestro SEO On Page nos fijamos en muchas cosas, pero, a veces, se nos olvida atender a lo más básico… ¡A lo que dice Google! Y Google ha dicho muy claramente en varias ocasiones que las Core Web Vitals son fundamentales en el SEO On Page.

Por supuesto, no son el único aspecto importante en el SEO On Page. Hay muchos otros. Pero, a nivel técnico, las Core Web Vitals son aquello en lo que más deberíamos centrarnos si queremos que Google ame nuestra web.

¿Cómo? ¿Que no sabes que son las Core Web Vitals?

¡Tranquilo! Hoy, te cuento todo lo que debes saber sobre ellas.

¿Qué son las Core Web Vitals?

Las Core Web Vitals son unas métricas que han sido creadas por Google para determinar la calidad de un sitio web a nivel técnico. Es decir, en lo que a su diseño y desarrollo web se refiere.

Estas Core Web Vitals se basan en diferentes factores, los cuales son comunes y no una invención de Google. Pero el hecho de juntarlos y, a esos conjuntos, ponerles un nombre (hay tres Core Web Vitals –LCP, FID y CLS) sí es una ocurrencia de Google.

Ahora, la verdad es que tiene sentido que los hayan aglutinado de esta forma y hayan creado estas tres grandes métricas. Y, ahora que Google las ha creado y explicitado, a nosotros nos resulta mucho más fácil trabajarlas.

DICCIONARIO DE MARKETING DIGITAL

Descargalo ahora

En estos momentos con MÁS de 300 términos, que te ayudarán a entender hasta el mas técnico de los textos.

Me apunto!!

Pero no nos despistemos.

Lo que hacen las Core Web Vitals, como decimos, es medir aspectos técnicos de nuestra web que afectan directamente al usuario. En concreto, a la experiencia del usuario durante los primeros momentos en que está en nuestra web.

Pero… ¡Un momento! ¡Aquí pasa algo raro!

¿Cómo va a saber Google cómo es la experiencia de los usuarios en una web? Google sólo puede saber cómo es su experiencia particular a través de su bot, ¿no?

¡¿NO?!

Pues no.

Google es dueño de Google Chrome, y más del 70% del tráfico utiliza este navegador. Y Google lo aprovecha para recoger datos de experiencia del usuario. Así que tiene una cantidad ENORME de datos para determinar si tu web cumple o no cumple con los Core Web Vitals.

Y, además, como utiliza sus propios datos obtenidos a través del navegador, no podemos engañarle. Así que hay que optimizar la web para que los usuarios tengan una buena experiencia y Google vea en los reportes de Google Chrome que su experiencia es, efectivamente, buena.

Cosa que está bastante bien y no debería alarmarnos mucho, por otro lado, porque debería interesarnos que nuestros usuarios tengan una buena experiencia en nuestra web.

La cuestión es que Google ha anunciado que va a dar mucha importancia a estas métricas. Así que conviene ponerse las pilas y optimizar estas métricas, porque ya vamos tarde.

También ha dicho que estas métricas irán cambiando con el tiempo. No serán siempre las mismas ni igual de importantes, así que habrá que estar atentos.

Por cierto, en el momento en que escribo estas líneas ha habido un buen update (bueno, a principios de julio y que complementa al de Junio). Sabemos poco de momento, pero quizá tenga que ver con esto. Las fechas, más o menos, cuadran.

Habrá que ver. Investigaremos.

Pero, de momento, ahora que hemos visto qué son las Core Web Vitals y cuál es su importancia, vamos a ver cuáles son en concreto y qué significa cada una de ellas.

Las métricas clave de tu web

A continuación, te presento las diferentes Core Web Vitals y qué significa cada una de ellas:

LCP (Largest Contentful Paint)

El LCP mide cuánto tarda la página en mostrar hasta el último elemento más pesado útil y funcional para el usuario.

¡Ojo!

La definición es medio rara, pero lo es por un motivo: LCP no mide cuánto tarda la página en cargar, sino que mide, digamos, la percepción que tiene el usuario de cuánto tarda la página en cargar.

Si has leído alguna guía sobre WPO, sabrás que tanto o más importante que cuánto tarde en cargar una web completamente, es cómo presentamos los diferentes elementos al usuario para que éste no se encuentre una web vacía durante 2 segundos.

Por ejemplo: Es mejor una web que tarda 2.5 segundos en cargar, pero que muestra algo funcional al usuario en el segundo 0.5 que una web que tarda 1.5 segundos en cargar pero que se muestra en blanco hasta que está completamente cargada.

Pues bien, eso mide el LCP, cuánto tarda el usuario en recibir una página funcional, a pesar de que, por detrás, se sigan cargando elementos (javascripts, por ejemplo). De hecho, los scripts no entran en el análisis que hace Google del LCP.

Lo cierto es que, si eres mínimamente bueno a nivel técnico, no tendrás problemas con esta métrica. Y es que, para que nuestras páginas estén “bien” en cuanto a LCP, basta con que esta carga se produzca en menos de 2,5 segundos… ¡Que son bastantes!

Y, además, no tendremos una puntuación “mala” si no superamos los 4 segundos. Entre 2,5 segundos y 4 segundos, lo que tendremos es un “necesita mejorar”.

¡Por cierto! El LCP se basa en la aparición del contenido en el above the fold. Es decir, si lo que hay más abajo (al hacer scroll) tarda más en aparecer, da igual, eso no se tiene en cuenta. Lo importante es lo que tarda el usuario en ver algo. Lo primero.

FID (First Input Delay)

El First Input Delay mide el tiempo de respuesta que tiene la página para la primera acción que el usuario lleva a cabo en ella. Es el tiempo que tarda la web en responder al primer clic, al primer “tap” o a la primera tecla pulsada por el usuario en la web (siempre que, con ello, se deba obtener una respuesta, claro).

En general, este tiempo es muy reducido, pero, a la mínima que se hace un poco más largo de la cuenta, empieza a ser muy molesto para el usuario. Por lo tanto, Google quiere que lo reduzcamos al mínimo posible.

En general, se considera que un FID por debajo de 100ms está bien, siempre y cuando este FID se mantenga bajo ese valor en, al menos, un 75% de las veces que se carga la página (recuerda, estos datos Google los obtiene “sobre el terreno”, desde Google Chrome).

Es importante trabajar el FID, porque tiene que ver con la primera impresión que tiene el usuario con tu web. Y, además, Google quiere que lo trabajes. Así que no hay “tu tía”. Hay que ponerlo a punto.

CLS (Cumulative Layout Shift)

Por último, tenemos el CLS o Cumulative Layout Shift, que puede ser el que, de primeras, más te extrañe. Al fin y al cabo, los anteriores tienen bastante que ver con la velocidad de carga y de respuesta de la página, pero esto es un poquito más raro.

Por Cumulative Layout Shift nos referimos al movimiento de los elementos de la página en el proceso de carga de ésta.

Te pongo un ejemplo que seguro que te resulta familiar: ¿Alguna vez has accedido a una web, has ido a hacer clic en un botón mientras ésta cargaba, y has acabado haciendo clic en otro sitio porque, al cargar otro nuevo elemento, el botón se ha desplazado?

Pues eso es el Cumulative Layout Shift. Ese movimiento tan molesto.

Y, si te paras a pensarlo es curioso porque, hasta que Google no nos ha dicho “oye, revisad esto”, no nos hemos preocupado por optimizarlo. A pesar de saber que es muy molesto y sufrirlo a diario. Simplemente, lo dábamos por hecho.

Pues bien. Ya no.

Ahora hay que arreglarlo.

Y, si no lo arreglamos, Google no nos va a amar tanto como podría y nuestro SEO On Page no será tan bueno.

En realidad, lo que molesta no es tanto el layout shift, sino el layout shift inesperado. Por ejemplo, si vas a una barra de búsqueda y ésta se extiende para que puedas escribir más cómodamente, eso es un layout shift, pero es un layout shift que te esperas.

El problema es cuando no te lo esperas y acabas no haciendo la acción que querías hacer o haciendo una diferente.

¿Qué causa estos layout shifts inesperados?

Pues bastantes cosas, la verdad, todas ellas relativas al desarrollo de la web. Las más habituales son las siguientes:

• Imágenes sin dimensionar
• Mal uso de fuentes
• Anuncios, iframes y embebidos sin dimensionar
• Contenido inyectado dinámicamente

Hay otras posibles causas, pero estas son las más habituales.

El CLS es una métrica un poco extraña. Al fin y al cabo, en los casos anteriores, medías milisegundos. Pero, aquí, ¿qué mides?

Pues lo cierto es que para determinar la métrica del CLS influyen diferentes factores y es una ecuación un tanto complicada en la que no nos vamos a meter. Lo que te interesa saber es que deberías estar por debajo de 0.1, aunque tienes cierto margen hasta 0.25.

A partir de ahí, mal. Tienes trabajo que hacer.

¿Cómo mejorar mis Core Web Vitals?

Ahora que sabemos qué es cada cosa y cuál es su importancia relativa, podemos pasar a hablar de cómo mejorar estas métricas de Core Web Vitals:

Mejorando el LCP

Para mejorar el LCP tenemos, básicamente, que optimizar la velocidad de carga. Si optimizamos la velocidad de carga y nuestro WPO en general, optimizaremos el LCP en particular.

Tengo una buena guía sobre WPO y optimización de la velocidad de carga de las imágenes que te recomiendo visitar para saber más al respecto. En cualquier caso, te menciono aquí, también, algunos trucos y consejos para optimizar el LCP:

Optimiza tamaño de las imágenes

En primer lugar, deberías optimizar el tamaño y el peso de tus imágenes. Al final, lo que más pesa en casi cualquier página es el conjunto de imágenes que se utilizan en ella. Así que, si quieres que se muestren rápidamente al usuario, tienes que reducir su peso.

Tu theme te recomendará las mejores dimensiones para tus imágenes y, además, puedes recurrir a diferentes herramientas y plugins para reducir su peso.

Usa un CDN de imágenes

Utilizar un CDN siempre es una buena idea, pero, en el caso de las imágenes, lo es especialmente. Los CDNs de imágenes permiten obtener velocidades de carga sustancialmente mayores.

Esto lo consiguen sirviendo las imágenes apropiadas en función de la localización del usuario, el dispositivo que está utilizando, etc. De esta forma, la carga de imágenes es aún más rápida, incluso si el usuario te está visitando desde la otra punta del mundo.

Evita la carga de imágenes vía JavaScript

Como bien sabes, JavaScript es un poco porculero a la hora de cargarse. Si cargas tus imágenes vía JavaScript, es muy probable que se ralentice la velocidad de carga total. Por tanto, conviene evitar este tipo de carga.

Usa un buen hosting

No hace falta decir que algo que influye de forma muy importante en la velocidad de carga de cualquier elemento de tu web es el hosting que tengas. Te lo digo ya: Cambia de hosting a uno que sea bueno.

Puedes ganar fácilmente 0.3-0.6 segundos de velocidad de carga si apuestas por un hosting de calidad correctamente configurado. Quizá para un micronicho no te haga falta. Pero, si tienes una web seria, conviene hacerlo.

Cachea y minifica

Por último, minifica y cachéalo todo.

Cachear todos los recursos de tu web y minificarlos te permitirá obtener una velocidad de carga mucho más rápida, tanto de aspectos relativos al LCP como de aspectos no relativos al mismo.

Y es tan fácil como instalar un par de plugins y configurarlos.

Mejorando el FID

Optimizar el FID no es tan fácil como optimizar el LCP. Pero, por suerte, para usuarios de WordPress, no suele ser tan necesario optimizarlo. Lo normal es que la plantilla de WordPress que uses ya tenga un FID dentro de los límites aceptables.

En cualquier caso, si quieres mejorar el FID, debes saber que lo primero es tener una web con un buen UX. Cuanto más sencillo y ligero sea tu diseño, más probable será que tu FID esté por debajo de 100ms.

Eliminar los JavaScripts innecesarios también es una buena idea, puesto que el procesamiento de mucho JavaScript es la principal causa de un FID elevado. Esto se debe a que JavaScript sobrecarga el navegador, y el navegador lidia con ello pasando el problema al usuario, que ve aumentado el tiempo de respuesta a sus acciones.

Sin embargo, esto ya lo tienen en cuenta los desarrolladores de themes para WordPress (siempre que apuestes por un theme con un mínimo de calidad, claro), así que no tienes mucho de lo que preocuparte.

Mejorando el CLS

En el apartado en el que explicábamos qué es el CLS ya indiqué los principales causantes de un alto CLS. Para resolverlo, lógicamente, hay que tratar de evitar dichos causantes.

Para poder corregirlo necesitarás ciertos conocimientos de desarrollo web, aunque sea a un nivel amateur.

Lo que debes hacer es identificar los elementos que tienen un alto CLS (cosa que puedes hacer desde la herramienta DevTools de Chrome) y corregir los problemas que veas en ellos.

Generalmente, en webs como las que montamos los SEOs, la mayor parte de los problemas de CLS vienen por no haber marcado las dimensiones de imágenes o iframes o similares.

Si especificamos esas dimensiones, la página cargará directamente dejando el hueco adecuado para ellos y, cuando se carguen, no desplazarán otros elementos.

No obstante, dependiendo de tu diseño y desarrollo web, puede que tengas más trabajo que hacer.

Además, deberías mejorar tu velocidad de carga.

Piensa que el CLS ocurre porque se cargan unos elementos y después otros, y los segundos desplazan a los primeros en el tiempo en que el usuario está intentando interactuar con la página.

Si la web carga mucho más rápido, este problema se reduce.

¡Ojo!

Esto no es una solución, es una pequeña “trampita”. Lo que deberías hacer es arreglar el CLS haciendo que la web cargue de una forma más razonable y ordenada. Pero, si, además, aplicas este truquito, mejor que mejor.

¿Cómo medir la situación de mis Core Web Vitals?

Tienes varias herramientas para medir tus Core Web Vitals, pero debes entender una cosa: Estas métricas Google las obtiene a través de estudios de campo. Es decir, extrayendo datos en masa de Google Chrome. Tú no tienes esa posibilidad.

Así, en la mayoría de las herramientas (incluso las oficiales), lo que obtendrás es una aproximación.

La única forma de obtener los datos REALES tal y como los obtiene Google, es acudiendo a Search Console cuando tu web ya tenga suficiente tráfico como para que Google haya podido obtener datos de muestra.

Es por ello que, en algunas ocasiones, te encontrarás con que las métricas te dicen una cosa y Search Console te dice otra. Esto se debe a la discrepancia entre la simulación y los datos de campo reales.

Dicho esto, lo mejor que puedes utilizar es:

1. Google Search Console para saber los datos reales de campo de tus páginas.
2. Pagespeed la herramienta de Google para medir WPO
3. Chrome Devtools y Lighthouse para saber qué cosas arreglar y optimizar para mejorar tus métricas.
4. Otras herramientas, como GTMetrix, que te pueden servir para nuevas ideas de optimización, pero que no son oficiales.

Como puedes ver, las Core Web Vitals son fundamentales en el SEO On Page de cualquier web. Conviene que las trabajemos y consigamos pasar todos los tests que Google pone a nuestra disposición en sus diferentes herramientas.

¡Es la mejor forma de conseguir el mejor SEO On Page a nivel técnico!