DEV Community

Cover image for Core Web Vitals, ¿qué son y cómo mejorar tu web?
Mía Salazar
Mía Salazar

Posted on • Updated on

Core Web Vitals, ¿qué son y cómo mejorar tu web?

¿Core Web Vitals?
Las Core Web Vitals son una iniciativa de Google anunciada en 2020, que pretende mejorar las experiencias de usuario y los tiempos de carga. Establecen una serie de criterios unificados que deben de seguirse, y que Google empezó a tener en cuenta a la hora de posicionar nuestra web en su buscador a partir de febrero de 2022.

Estas Core Web Vitals son fáciles de seguir. Solamente son tres y cada una menciona un aspecto importante de la experiencia de usuario.

Largest Contentful Paint (LCP)
Hace referencia al contenido que ocupa un mayor espacio (vídeo, imagen, texto...) en la página sin hacer scroll. Esta métrica mide cuánto tiempo tarda en verse esta parte desde que la página empieza a cagar. En función de la cantidad de segundos que necesite para estar completamente visible existen tres posibles puntuaciones:

  • Buena: Menos de 2.5 segundos.
  • Mejorable: Hasta los 4 segundos.
  • Lenta: Más de 4 segundos.

Image description

First Input Delay (FID)
Mide la capacidad de respuesta e interactividad que tiene la página, es decir, cuánto tiempo pasa desde que la persona realiza algo hasta que se responde. Relacionada con esta métrica, debemos tener en consideración:

Estos son los posibles valores:

  • Buena: Menos de 100 milisegundos.
  • Mejorable: Menos de 300 milisegundos.
  • Lento: Más de 300 milisegundos.

Image description

Cumulative Layout Shift (CLS)
Indica el número de cambios inesperados que suceden en el diseño, su estabilidad visual. Esta medida nace para evitar las molestas situaciones en las que de repente, aparece un elemento provocando que las personas que navegan hagan click por error. Estas situaciones se deben a la carga asíncrona de algún dato o a elementos que se añaden de forma dinámica según ciertas circunstancias.

CLS se diferencia de las demás en que no mide el tiempo, sino la magnitud y la frecuencia de los cambios. En función de ellos muestra una puntuación. Con cada cambio va sumando y al final recoge en una valoración todo lo observado. Cuanto mayor es la calificación, peor. Sus posibles valores:

  • Buena: Menor de 0.1.
  • Mejorable: Menor de 0.25.
  • Lento: Mayor de 0.25.

Image description

¿Cómo medir nuestras Core Web Vitals?
Algunas herramientas que podemos usar son:

  • Lighthouse: Esta herramienta incluye auditorías que nos permite comprobar nuestras CWV y formas de arreglar los problemas diagnosticados. Dentro de Lighthouse el peso de cada una de estas métricas queda así: FCP (15%), LCP(25%), SI(15%), TTI(15%), CLS(5%) y TBT (25%).

Image description

  • Calculadora Lighthouse: Con esta herramienta puedes conocer la puntuación que obtendrías en función de los valores que introduzcas.

Image description

  • Search Console: Obtienen sus datos de usuarios reales. Si entramos en el detalle, podemos ver exactamente qué métrica incumplimos y qué páginas se ven afectadas.
  • Web Vitals Extension: Nos da los 3 valores principales que hemos cubierto en este artículo.

Image description

Top comments (1)

Collapse
 
ekqt profile image
Hector Sosa

Muy buen post! Súper detalldo! Es súper útil compartir screenshots del contenido. Yo hice una herramienta sencilla para ayudar con screenshots. Dale una ojeada y me contás qué tal te parece? Es open-source! github.com/ekqt/screenshot