¡Llegan las Core Web Vitals de Google a 2021!

Los Web Vitals y los Core Web Vitals son los mejores indicadores con los que contamos, actualmente, para medir la calidad de la experiencia que proporciona una web. Es por ello que tenemos que estar atentos a ellas, ya que cualquier cambio puede traer un gran impacto.

¡En esta ocasión venimos a hablar concretamente de las Core Web Vitals, las que han llegado este año 2021! ¿Estás liso/a? 👇🏻

CONTENIDO

¿Qué son las Core Web Vitals?

En mayo de este 2021 han comenzado a tenerse en cuenta nuevos indicadores de experiencia junto con las métricas web principales que ya se utilizaban en la actualidad:

  • Compatibilidad con dispositivos móviles (mobile friendly)
  • Navegación segura (Safe browsing)
  • Seguridad HTTPS
  • Directrices intersticiales no intrusivas (No intrusive interstitials)

Los nuevos indicadores de los que hablamos son los que conforman las tan nombradas Core Web Vitals, que se centrarán en estos tres aspectos fundamentales:

  1. La rapidez con que se carga la página.
  2. El tiempo que lleva interactuar con la página.
  3. La estabilidad de la página mientras se carga y el usuario interactúa con ella.
Core Web Vitals de Google

Los tres nuevos aspectos, junto a los que ya se usaban, dan forma a las llamadas Search signals for page experience y se han incorporado ya al algoritmo de Google en su nuevo Update.

Ahora bien, ¿cómo podemos interpretar estos nuevos valores? Pues aquí entran las tres métricas que se han establecido para medir las Core Web Vitals:

  • LCP (Largest Contentful Paint): tiempo que tarda en cargar el contenido de una página. Un LCP ideal es de 2,5 sg o más rápida.
  • First Imput Delay (FID): tiempo que tarda una página en volverse interactiva. Una medición acorde a un buen rendimiento sería menos de 100 ms.
  • Cumulative Layout Shift (CLS): mide la estabilidad visual de los elementos que aparecen en pantalla mientras se va cargando el contenido. Una medida ideal de Cumulative Layout Shift está por debajo de 0,1.

¡Vamos a verlas en detalle una por una!

LCP o Largest Contentful Paint

El LCP toma como referencia el tiempo de carga del elemento más grande del contenido de tu sitio web, siempre y cuando este elemento sea visible, es decir, que no haya necesidad de hacer scroll, basta con cargar el sitio.

Hay que tener en cuenta que el LCP no mide el tiempo de carga del sitio, sino cuánto tiempo tarda en aparecer el elemento más grande de tu contenido. Es decir, mide el tiempo desde que la página comienza a cargarse hasta que el elemento más grande aparece en pantalla. ¿Queda clara la diferencia?

¿Cuáles son los valores LCP óptimos para Google?

Los valores en los que se basa esta métrica y los que tiene en cuenta Google para saber si el LCP de tu sitio es óptimo o no son:

Largest Contentful Paint de Core Web Vitals
  • LCP bueno: 2 segundos o menos de carga.
  • LCP que necesita mejorar: entre los 2,5 segundos y los 4 segundos de carga.
  • LCP malo: más de 4 segundos de carga.

Para saber más sobre esta métrica LCP y cómo optimizarla, sigue leyendo el siguiente artículo: ¿Qué es el LCP?

FID o First Input Delay

La métrica FID mide el tiempo de retraso que transcurre desde que un usuario interactúa por primera vez con un elemento de la página hasta que el navegador comienza a procesar eventos en respuesta a dicha interacción. Un ejemplo de esta interacción puede ser el simple hecho de hacer clic sobre un enlace o sobre un botón.

Es importante destacar que esta métrica solo mide el “retraso” en el procesamiento de eventos, no mide el tiempo de procesamiento de eventos como tal, ni tampoco mide el tiempo que tarda el navegador en actualizar la interfaz.

Haciendo más hincapié sobre por qué se produce este retraso o lantecia, cabe destacar que ocurre porque el hilo principal del navegador está ocupado haciendo otra cosa distinta. Es decir, que mientras hace eso otro, no puede ejecutar ningún detector de eventos. De ahí que se produzca dicho retraso, ya que no podrá responder al usuario todavía.

¿Cuáles son los valores FID óptimos para Google?

Par que la experiencia de usuario no se vea afectada, los sitios deben tener como mucho un retraso en la primera entrada de 100 milisegundos o menos. ¿Cuáles son los valores adecuados a partir de esto?

  • FID bueno: menor o igual a 100ms.
  • FID que necesita mejorar: entre 100ms y 300ms.
  • FID malo: mayor de 300ms.
FID en las Core Web Vitals

Para saber más sobre esta métrica FID y cómo optimizarla, sigue leyendo el siguiente artículo: ¿Qué es el FID?

CLS o Cumulative Layout Shift

Los Cambios de diseño acumulados o CLS son cualquier cambio de posición en los elementos visibles de una página. Gracias a esta métrica, se pretende medir la estabilidad visual de la página. ¿Qué es lo que se tiene en cuenta exactamente para hacer esta medición? La frecuencia y magnitud con la que se dan estos cambios en la página.

Un ejemplo, para que veas claro de qué se trata, es algo por lo que habrás pasado muchas veces. ¿Te suena querer pinchar sobre un enlace y que te aparece de sorpresa otro elemento en esa misma posición y acabques dándole por error a lo nuevo en lugar de a lo que querías darle en un principio? ¡Es horrible!

Pues bien, es esto lo que se pretende medir con el CLS. Una buena puntuación indicará que estos cambios de diseño no se están produciendo o, en el caso de que sí se están produciendo, no son lo suficientemente perjudiciales para la experiencia de usuario (porque sí, coincidirás conmigo en que situaciones como esta hacen que quieras salir el sitio).

¿Cuáles son las puntuaciones para un buen CLS?

Cada vez que ocurre un cambio de este tipo, se añade un valor de puntuación. Una vez la carga está completa, se suma todo y da como resultado la puntuación de CLS. Los valores de hasta 0,1 son umbrales CLS buenos, mientras que un CLS de 0.25 o mayor es considerado malo. De esta forma, sabemos que:

  • CLS bueno: menor o igual a 0.1
  • CLS que necesita mejorar: entre 0.1 y 0.25
  • CLS malo: mayor 0.25
cls en core web vitals

Para saber más sobre esta métrica CLS y cómo optimizarla, sigue leyendo el siguiente artículo: ¿Qué es el CLS?

Cómo medir las Core Web Vitals con Javascript

La forma más sencilla de medir todos los Core Web Vitals es mediante la biblioteca de JavaScript de web-vitals. Sólo necesitas llamar a una sola función y está lista para medir e informar de la misma forma en la que lo hacen las herramientas de Google. (No olvides que para más dellate sobre ella, puedes consultar la documentación de la API).

Cuando ya hayas configurado tu sitio para usar la biblioteca para medir y enviar datos, lo siguiente que puedes hacer es realizar un informe sobre esos datos para comprobar si tus páginas páginas cumplen con los umbrales recomendados (los indicados anteriormente para cada métrica) para al menos el 75% de las visitas a la página.

Para terminar, te dejamos con una guía oficial sobre la implementación de cada una de la métricas por separado:

Otras herramientas para medir las core web vitals

Las herramientas como Lighthouse que cargan páginas en un entorno simulado sin un usuario no pueden medir bien el FID, ya que no hay entrada de usuario. Y, aunque bien es cierto que la métrica Total Blocking Time (TBT) sí se puede medir, es clave saber que el rendimiento de un sitio puede variar drásticamente según variantes propias del usuario: capacidades del dispositivo, condiciones de su red, otros procesos que pueden estar ejecutándose en el dispositivo y cómo interactúan con la página.

De hecho, la puntuación de cada una de las métricas de Core Web Vitals puede verse afectada por la interacción del usuario. Es por eso que la TBT no termina de ser 100% fiable para sacar una conclusión que sea real.

  • PageSpeed Insights. Una herramienta bastante conocida por todos con la que puedes analizar el contenido de una página web. Tiene su apartado específico para estas métricas y podrás ver si los valores están o no dentro de lo óptimo. Además, te dará sugerencias para mejorar estos aspectos.
  • Lighthouse. Lighthouse es una herramienta automatizada open-source con la que podrás realizar auditorías de sitios web, conocer los problemas que tiene tu web a nivel de desarrollo e identificar mejoras para la misma.
  • GTMetrix. Funciona básicamente igual que PageSpeed, analiza la velocidad del contenido de tu web distinguiendo entre distintas métricas y aportándote consejos para mejorarlas. Puedes ver un mapa de velocidad para saber en qué segundo se ha medido cada uno de los valores.
  • Measure de web.dev. Otra herramienta de Google con la que podrás ver el rendimiento de su sitio web, así como obtener sugerencias para mejorar la velocidad y, con ello, la experiencia de usuario.
  • Google Search Console. A través de Google Search Console también puedes obtener un informe donde podrás ver el rendimiento de tus páginas. Puedes complementar el uso de esta herramienta con alguna otra para obtener sugerencias sobre cómo mejorar los errores que veas en el informe.

Antes de acabar con las Core Web Vitals, ¡te dejamos este vídeo por parte de web.dev para que sigas aprendiendo sobre ellas! 👇🏻

Otros Web Vitals 

Ahora sí, ¡ya hemos acabado con las Core Web Vitals! Pero antes de terminar, queremos echar un vistazo a otras web vitals, por si no las conocías tanto. Las otras web vitals suelen servir como métricas suplementarias para los Core Web Vitals. Pueden ayudar a capturar parte de la experiencia de usuario y a diagnosticar un problema en específico.

Un ejemplo de ello son las métricas Time to First Byte (TTFB) y First Contentful Paint (FCP). Ambas se tratan de métricas que miden aspectos vitales en la experiencia de carga, por lo que ambas son útiles para diagnosticar problemas con LCP.

De otra manera, métricas como Total Blocking Time (TBT) y Time to Interactive (TTI) son vitales para detectar y diagnosticar problemas de interactividad que afectarán al FID.

¿Qué es el CLS o Cumulative Layout Shift?
Copy link
Powered by Social Snap