¿Qué es Core Web Vitals y cómo afectará a mi página web?
Core Web Vitals es el nombre de un conjunto de métricas creadas por Google especialmente para medir la experiencia de uso (UX) de los usuarios de una página web.
Core Web Vitals es el nombre de un conjunto de métricas creadas por Google especialmente para medir la experiencia de uso (UX) de los usuarios de una página web. Cada una de las métricas dispone además de unos baremos que definirán si la experiencia es buena, mejorable o pobre.
¿Qué métricas componen Core Web Vitals?
Las métricas que componen Core Web Vitals y sus baremos son los siguientes:
| Buena | Pobre | |
|---|---|---|
| Largest Contentful Paint (LCP) | ≤ 2500ms | > 400ms |
| First Input Delay (FID) | ≤ 100ms | > 300ms |
| Cumulative Layout Shift (CLS) | ≤ 0.1 | > 0.25 |
Largest Contentful Paint (LCP)
Es la métrica utilizada para clasificar la carga de la página y mide el tiempo que tarda el elemento más grande de la pantalla en hacerse visible. Se puede utilizar para identificar el tiempo que tarda el contenido principal en renderizarse.
Las causas más comunes para un LCP alto son:
- El servidor responde muy lento
- Algunos recursos CSS o JS están bloqueando el renderizado
- Descarga lenta de recursos
- Tiempos de renderizado muy altos
First Input Delay (FID)
El FID se encarga de medir la impresión del usuario sobre la interactividad y la respuesta de una página. Lo hace midiendo el tiempo que transcurre desde que un usuario interacciona con la web hasta que el navegador puede procesar la petición.
La causa más común para un FID alto es la ejecución simultánea de grandes cantidades de código JavaScript. Para evitar este problema podemos:
- Dividir el código JS en ficheros más pequeños
- Implementar Server Side Rendering
- Utilizar Web Workers
- Implementar la carga progresiva de código únicamente cuando se necesite
Cumulative Layout Shift (CLS)
¿Sabéis ese momento en el que estáis entrando en una página web, vas a hacer click en un botón y de repente se mueve todo porque se ha cargado una imagen? Precisamente ese es el problema de uso que pretende atacar Google con CLS, midiendo tanto el porcentaje de contenido visible que se ha movido como la distancia que lo ha hecho.
Las causas más comunes para un CLS alto son:
- Imágenes sin el tamaño predefinido
- Anuncios, embeds y iframes
- Contenido dinámico
- Fuentes externas que tardan en cargar
- Acciones que se realizan cuando finaliza una petición AJAX