¿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.
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:
- Primer despliegue de contenido (FCP): Lapso sucedido entre el principio de la carga hasta que cualquier elemento se ve en pantalla.
- Tiempo para interactuar (TTI): Intervalo entre que empieza la carga hasta que están disponibles los recursos secundarios, y se puede contestar adecuadamente.
- Tiempo total de bloqueo (TBT): Cantidad de tiempo entre el FCP y el TTI.
Estos son los posibles valores:
- Buena: Menos de 100 milisegundos.
- Mejorable: Menos de 300 milisegundos.
- Lento: Más de 300 milisegundos.
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.
¿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%).
- Calculadora Lighthouse: Con esta herramienta puedes conocer la puntuación que obtendrías en función de los valores que introduzcas.
- 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.
- Y muchas más.
Top comments (1)
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