Core Web Vitals: qué son, por qué importan y cómo mejorarlos paso a paso

Desde 2020 Google viene empujando con fuerza un mensaje claro: la experiencia de usuario es SEO. Para aterrizarlo creó los Core Web Vitals (CWV), un conjunto de métricas estandarizadas que miden velocidad de carga, capacidad de respuesta y estabilidad visual. En mayo de 2021 pasaron a ser señal de ranking y, desde marzo de 2024, Google sustituyó FID por INP como métrica oficial de interactividad.

En esta guía te explico qué mide cada CWV, umbrales “buenos”, herramientas de diagnóstico y acciones concretas (con prioridad) para mejorar tu puntuación sin perderte en tecnicismos.

Fórmate como Experto en SEO

Apúntate al Máster de SEO y aprende la metodología para hacer frente a cualquier tipo de proyecto SEO con seguridad y confianza.

¿Qué son las Core Web Vital?, ¿cómo diferenciarlas?

LCP (Largest Contentful Paint) – “Percepción de carga”
Objetivo: < 2,5 s (móvil)
Optimiza: servidor, imágenes, CSS crítico, fuentes, preloads.
INP (Interaction to Next Paint) – “Capacidad de respuesta real” (reemplaza a FID)
Objetivo: < 200 ms
Optimiza: JS (dividir, aplazar, eliminar), tareas largas, 3rd-parties, listeners.
CLS (Cumulative Layout Shift) – “Estabilidad visual”
Objetivo: < 0,1
Optimiza: reserva de espacio (imágenes/ads/embeds), fuentes, UI tardía.

Flujo de trabajo recomendado:

Search Console → Informe de Core Web Vitals (móvil primero).
PageSpeed Insights → diagnosticar URL representativas.
Lighthouse/DevTools → encontrar “culpables” (JS pesado, tareas >50 ms, recursos bloqueantes, imágenes).
Plan de sprints: primero INP y LCP en plantillas con más tráfico, luego CLS.

Las Core Web Vitals una a una y bien explicadas

LCP (Largest Contentful Paint)

Mide el tiempo hasta que se renderiza el elemento más grande en el viewport (imagen hero, bloque de texto, vídeo, fondo CSS…). Es un buen proxy de “la página ya está”.

Bueno: < 2,5 s
Necesita mejora: 2,5–4,0 s
Malo: > 4,0 s

Focos de mejora (de mayor a menor impacto):

TTFB bajo: usa HTTP/2 o HTTP/3, activa caché y CDN, comprime (Brotli), y revisa tiempos del backend.
CSS crítico inline y minimización; difiere el no crítico.
Imágenes: formatos modernos (AVIF/WebP), lazy-loading fuera de viewport, preload de la hero si realmente es la LCP, dimensionadas (sin oversizing).
Fuentes: preconnect/preload a orígenes de fonts, font-display: swap.
Preload selectivo: sólo lo que afecta la LCP (no abuses).

INP (Interaction to Next Paint) — remplaza a FID

INP mide el tiempo de respuesta percibido en todas las interacciones reales (click, tap, teclado) durante la visita y reporta un valor representativo (p95). Es mucho más exigente y realista que FID.

Bueno: < 200 ms
Necesita mejora: 200–500 ms
Malo: > 500 ms

Causas típicas de INP alto:

JS excesivo que bloquea el hilo principal.
Tareas largas (>50 ms) en el main thread.
Múltiples listeners o trabajo pesado en eventos (click, input).
3rd-party scripts (tags, widgets, A/B testing, chat, analytics duplicado).

Soluciones prácticas:

Code splitting + tree-shaking + minificación.
Carga defer para scripts no críticos; async cuando aplique.
Evita trabajo en listeners: delega, throttle/debounce y mueve cálculos a Web Workers.
Rompe tareas largas en trozos más pequeños (requestIdleCallback, setTimeout(0)).
Audita y limita 3rd-parties (o cárgalos on-demand/interacción).
Usa islas de interacción/hydration parcial (si usas frameworks).

CLS (Cumulative Layout Shift)

Mide cuánto “baila” la interfaz durante la carga y la interacción. No es tiempo, es una puntuación acumulada de desplazamientos inesperados.

Bueno: < 0,1
Necesita mejora: 0,1–0,25
Malo: > 0,25

Para bajarlo ya:

Reserva espacio para imágenes y vídeos con width/height o aspect-ratio.
Para ads/embeds/iframes, reserva un contenedor fijo; evita inyecciones tardías.
No insertes UI por encima del contenido ya visible; añade debajo o tras interacción.
Fuentes: font-display: swap y preload de la WOFF2 principal para evitar saltos por FOIT/FOUT.
Animaciones con transform/opacity (evita propiedades que reflujo).

Fórmate como Experto en SEO

Apúntate al Máster de SEO y aprende la metodología para hacer frente a cualquier tipo de proyecto SEO con seguridad y confianza.

Herramientas para medir (de campo y de laboratorio)

Existen múltiples herramientas para medir las Core Web Vitals, entre ellas destacan:

Google Search Console → Core Web Vitals: datos de campo (CrUX) segmentados por móvil y escritorio. Úsalo para priorizar plantillas/URLs.
PageSpeed Insights: combina campo + laboratorio (Lighthouse) con oportunidades y diagnósticos.
Lighthouse (DevTools): prueba controlada; útil para reproducir problemas y obtener “culpables” (tareas largas, recursos bloqueantes, pesos).
Chrome DevTools → Performance, Coverage, Network: perf timeline, Long Tasks, waterfalls, cobertura de código.
web-vitals JS (biblioteca oficial): mide CWV en producción y envía eventos a GA/BigQuery para ver métricas reales por plantilla, país, dispositivo.

Plan de acción priorizado (sprints de 1–2 semanas)

La optimización de las Core Web Vitals debe hacerse con orden y con sentido, os dejamos por aquí un plan de trabajo organizado para que no os salteis ningún paso y facil de ejecutar.

Sprint 1 — “Quick wins” que mueven aguja

CDN + compresión (Brotli) + HTTP/2/3
Imágenes: AVIF/WebP, tamaños correctos, loading=»lazy», preload de la hero (si es la LCP).
Eliminar JS y CSS no usados (Coverage), defer del no crítico.
Reserva de espacio para imágenes/ads/iframes (CLS↓).
Fuentes: preconnect + preload + font-display: swap.

Sprint 2 — Interactividad (INP)

Auditar tareas >50 ms; romperlas y mover cálculos a Web Workers.
Code-splitting por ruta/plantilla; carga diferida de componentes.
Gobernanza de 3rd-parties: quita, difiere, load on-interaction.
Reescribir listeners pesados (debounce/throttle; menos DOM sync).

Sprint 3 — Profundización y governance

CSS crítico inline + postcarga del resto.
Preloads selectivos (fuentes, hero, CSS crítico), evitando el “preload-itis”.
Observabilidad: integrar web-vitals → GA4/BigQuery/Data Studio (Looker Studio).
Budget de rendimiento por equipo/plantilla (peso total, JS budget, #requests).

⚠️Los Core Web Vitals no son cosmética: impactan directamente en SEO, conversión y retención. Con un plan por sprints y foco en INP y LCP primero, verás mejoras reales en semanas. Si quieres, te preparo una plantilla de trabajo (Kanban + checklist + queries de DevTools) para que tu equipo la ejecute tal cual.