Core Web Vitals ¿Cuáles son y cómo mejorarlas?

Hola miembros de la resistencia, hoy toca los famosos Core Web Vitals, este tema está candente en la comunidad SEO en estos momentos, el pasado mes de mayo Google anunció que iba a empezar a tener en cuenta indicadores de la experiencia de las páginas a la hora de posicionar resultados en la Búsqueda de Google, otra cosita de qué preocuparnos ….,

Core Web Vitals son 3 nuevas métricas de rendimiento que según Google en poco tiempo tendrán un alto impacto en nuestras clasificaciones SEO.

SEO Y MARKETING DIGITALAVISO YODA
Google ha anunciado que la actualización de Page Experience estará disponible en mayo de 2021!

Si quieres aprobar este pequeño examen debes obtener una puntuación «BUENA» en los 3 Core Web Vitals.

¿Cómo se mide actualmente la experiencia de usuario?

Estos son los factores que mide Google actualmente en nuestras páginas web.

  • Mobile Friedly: Si nuestra página web es compatible con el móvil.
  • Safe Browsing: Ofrecemos navegación segura
  • HTTPS: Hemos implementado https
  • No intrusive Interstitials: Libre de elementos intrusivos

Pero ahora nos van a añadir uno más:

  • Core Web Vitals

core web vitals

¿Son realmente importantes las Core Web Vitals?

Distintas razones nos enseña que sí deberíamos tener en cuenta estos factores:

  • Páginas rápidas: Esto ya se sabe desde hace tiempo, a nadie le gusta las páginas lentas, hay informes que lo demuestran, en resumen, más rápido más dinero ganas.
  • Cuando el rio suena agua lleva: Google lleva con las Core Web Vitals tiempo, si bien no espero cambios importantes a corto plazo si creo que a largo plazo crecerá en importancia.
  • Insignia de Google: Google ha insinuado que podrían mostrar una insignia de buena experiencia, más o menos como hacen ahora con el candadito si utilizas una pagina segura, es posible que al final no se muestre nada o puede que si, pero dar una buena experiencia de usuario a nuestros visitantes debería de ser una de nuestras prioridades.

¿Qué son las Core Web Vitals?

Es un grupo de métricas de Google, que están orientadas a la experiencia de usuario cuando visitamos una página web, hay varios factores determinantes, la velocidad de carga, la capacidad de respuesta y estabilidad visual.

estos son los factores mas relevantes:

  • Largest Contentful Paint (LCP)
  • Input Delay (FID)
  • Cumulative Layout Shift (CLS)

 

factores core web vitals

 

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP) mide el tiempo en segundos desde que la página empieza a cargarse hasta que el elemento más grande de la parte superior del above the fold (lo que se ve sin necesidad de hacer scroll hacia abajo) se muestra en pantalla, este elemento podría ser una imagen, un bloque de texto o un video.

Al cargarse un página puede pasar que el bloque principal sea texto o imagen pueda cambiar, se utiliza el bloque más reciente para medir el LCP.

Imaginemos que tenemos un H1 muy grande, pero al rato se carga una imagen más grande que el H1. Entonces la imagen más grande es el bloque principal al medir el LCP

Ejemplo:

lcp

Un LCP rápido asegura a los usuarios que una página es útil, porque es una métrica que mide la velocidad de carga percibida.

SEO Y MARKETING DIGITALAYUDA YODA
Su objetivo es medir cuándo han terminado de cargarse los contenidos principales de la página.

¿Cómo podemos saber si tenemos un LCP bueno?

Te indico como interpretar su puntuación:

  • Bueno : <= 2.5s(2,5 segundos o menos)
  • Necesita mejorar : > 2.5s <= 4s(entre 2,5 y 4 segundos)
  • Pobre : > 4s(más de 4 segundos)

¿Por que podemos tener un LCP bajo?

Hay una gran cantidad de causas que pueden estar afectando que tengas un LCP bajo, que tu servidor sea lento, JavaScript y CSS que bloquean el servicio, o que tus imágenes o videos sean muy grandes y tarden mucho en cargar.

¿Qué podemos hacer para mejorar nuestro LCP?

Para mejorar nuestro LCP podemos hacer una gran cantidad de acciones, por ejemplo optimizar las rutas de Javascript y CSS críticos, bajar la resolución de nuestras imágenes. Todas ellas están definidas en este recurso de web.dev.

Input Delay (FID)

First Input Delay (FID) mide el tiempo en milisegundos desde que un usuario hace una interacción hasta que el navegador responde a ese clic. Por ejemplo si cargamos la página podría ser cuando hacemos clic en un enlace o presionamos un botón.

Podemos decir que el FID es la primera impresión del usuario que tiene sobre la interactividad y la capacidad de respuesta de nuestra web.

¿Cómo podemos saber si tenemos un FID bueno?

Te indico como interpretar su puntuación:

  • Bueno : <= 100ms
  • Necesita mejorar : > 100ms and <= 300ms
  • Pobre : > 300ms

¿Por que podemos tener un FID bajo?

La causa principal podría ser que se está ejecutando JavaScript durante la navegación, al estar ocupado no puede responder óptimamente al usuario y eso deteriora la experiencia de usuario.

¿Qué podemos hacer para mejorar nuestro FID?

Pongamos que queremos mejorar el FID y mejorar el rendimiento visual, estas son las opciones que tenemos:

  • Retrasar o eliminar a terceros
  • Aplazar scripts no críticos
  • Mejorar el rendimiento de JS

Puedes ver más sobre como optimizar el FID en este recurso de web.dev.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift (CLS) mide la estabilidad del interfaz de usuario, es  la suma de cambios de diseño inesperados durante el ciclo de vida de una página.

Cumulative Layout Shift (CLS) es un Core Web Vital que mide la puntuación acumulada de todos los cambios de diseño inesperados dentro de la ventana gráfica que se producen durante todo el ciclo de vida de una página. Imaginemos que un baner se carga y empuja el contenido principal de la página.

CRUX Chrome UX Report (CRUX) mide CLS a lo largo del ciclo de vida de una página, desde el inicio de la navegación hasta el momento en que el usuario abandona la página, esto hace que sea una métrica difícil de medir.

Aquí encontrarás ejemplos que describen como es el CLS web.dev.

¿Cómo podemos saber si tenemos un CLS bueno?

Te indico como interpretar su puntuación:

  • Bueno :<= 0.1
  • Necesita mejorar :> 0.1 <= 0.25
  • Pobre :> 0.25

¿Por que podemos tener un CLS bajo?

Los problemas pueden deberse a imágenes con dimensiones no definidas, otro de los motivos podría ser la carga asíncrona de algunos recursos u otras situaciones dinámicas con elementos del DOM, nuestras fuentes, anuncios que no cargar correctamente.

¿Qué podemos hacer para mejorar nuestro FID?

Para mejorar nuestro FID podemos incluir tamaño y altura en nuestras imágenes y videos como hacíamos antiguamente para evitar cambios de diseño inesperados,  establecer también tamaños en los anuncios que son los principales causantes de los cambios de diseño. Todas ellas están definidas en este recurso de web.dev.

SEO Y MARKETING DIGITALAYUDA YODA
Si te surgen más dudas sobre las Core Web Vitals puedes ver este recurso que te puede ayudar a comprender mejor : Preguntas sobre Core Web Vitals.

Otros Vitales

Si bien como hemos comentado antes la actualización del Page Experience define LCP, FID y CLS como elementos básicos de la web….. que estos pueden cambiar con el tiempo, hay otras variables que nos dan un valor esencial que vale la pena comentarlas.

Tiempo total de bloqueo (TBT)

Podemos decir que el tiempo de bloqueo TBT mide el tiempo total en milisegundos, de cómo de ocupada estaba la CPU del navegador mientras cargaba la página web.

Esta métrica normalmente se relaciona con el tiempo de retardo de la primera entrada FID.

Si la tarea que está haciendo ocupa más de 50 ms se considera largo, reducir este tiempo probablemente mejorará la experiencia del usuario y también puede ayudar a mejorar el rendimiento percibido.

Cualquier tarea que tarde más de 50 ms en ejecutarse se considera una tarea larga, y el tiempo superior a los 50 ms se considera el «tiempo de bloqueo».

El cálculo del TBT se hace cogiendo la suma de la proporción de bloque de todas las tareas largas.

  • Tarea 1: tarda 65 ms (15 ms más que 50 ms)
  • Tarea 2: tarda 78 ms (28 ms más que 50 ms)
  • Tarea 3: tarda 90 ms (40 ms más que 50 ms)

TBT es igual: 83ms

Busca tareas grandes y largas en sus perfiles de JavaScript y tenemos que intentar reducirlas, eliminarlas o retrasarlas.

Tiempo total de bloqueo (TTI)

Podemos decir que el tiempo de TTI mide el tiempo de cuando la página empieza a cargarse hasta que está completamente interactiva.

¿Qué es que la página sea interactiva? Podemos decir que es cuando se muestra el contenido útil para el usuario, cuando la mayoría de elementos están renderizados.

Obtener esta métrica lo más baja posible garantizará que sus usuarios tengan una gran experiencia cuando intenten interactuar con sus páginas. Podemos utilizar TTI con TBT para tener una idea general de lo ocupado que está el navegador al cargar nuestras páginas.

Si es menor de 3,8s se considera buena, por encima de 7s necesita mejorar.

First Contentful Paint (FCP)

Sabemos que el LCP mide el bloque más grande pitado en pantalla, el FCP mide el tiempo que tarda cuando cualquier parte del contenido en pantalla aparece.

Esta métrica es importante por varias razones, la principal es que dice al usuario que su navegador está funcionando correctamente, le dice al usuario que algo está sucediendo.

Le damos como bueno si es menor que 1s, mayor de 3 necesita mejorar.

Herramientas para medir tu Core Web Vitals

Estas son las herramientas mas conocidas para medir tu Core Web Vitals:

Google PageSpeed ​​Insights  (Podrás medir las Core Web Vitals página por página)

web vitals

Google Search Console (Podemos analizar la CWV de forma masiva)

core web vitals

 

Chrome DevTools (Podemos analizar más profundamente nuestra página web)

devtools

 

Lighthouse (muy bueno para hacer pruebas)

lighthouse

 

WebPageTest (otra herramienta para analizar más en profundidad)

webpagetest

 

Conclusión

Los Core Web Vitals son tres nuevas métricas de rendimiento que, según Google, pronto tendrán un alto impacto en nuestros rankings de SEO… Bueno llegaron pero no ha habido una hecatombe, como consultor seo freelance he visto muchas páginas y he visto de todo. A si que tendremos que esperar para ver si Google decide implementar más cambios..

 

 

About the author

Ayudo a profesionales a aumentar sus ventas, utilizo la mejor estrategia digital para optimizar y hacer crecer su negocio. Consultor SEO Freelace .

Leave a Reply