Core Web Vitals en 2025: La guía definitiva para no perder rankings

¿Qué son los Core Web Vitals y por qué importan más que nunca?

Los Core Web Vitals son un conjunto de métricas definidas por Google para medir la experiencia del usuario en términos de carga, interactividad y estabilidad visual. En 2025, con la consolidación del ranking basado en experiencia, ignorarlos ya no es una opción.

Las tres métricas principales son:

LCP (Largest Contentful Paint): Mide el tiempo de carga del elemento más grande visible en la pantalla. Objetivo: menos de 2.5 segundos.
INP (Interaction to Next Paint): Reemplazó al FID y mide la respuesta a las interacciones del usuario. Objetivo: menos de 200ms.
CLS (Cumulative Layout Shift): Mide la estabilidad visual. Objetivo: menos de 0.1.

Cómo diagnosticar tus Core Web Vitals

Antes de optimizar, necesitas medir. Estas son las herramientas indispensables:

Google Search Console

La sección "Experiencia de página" en Search Console te muestra datos reales de usuarios (field data), segmentados por dispositivo. Prioriza siempre los datos de campo sobre los de laboratorio.

PageSpeed Insights

Combina datos de laboratorio (Lighthouse) con datos de campo reales del CrUX (Chrome User Experience Report). Úsalo para diagnósticos rápidos.

Web Vitals Extension

La extensión de Chrome te permite ver los CWV en tiempo real mientras navegas por cualquier sitio. Ideal para análisis competitivo.

Estrategias avanzadas para mejorar el LCP

El LCP es generalmente el más difícil de optimizar porque depende de múltiples factores de la cadena de carga.

Prioriza el recurso LCP

Usa fetchpriority="high" en tu imagen LCP y asegúrate de que esté en el HTML original (no cargada con JavaScript):

<img src="/hero.webp" alt="Hero" fetchpriority="high" loading="eager" />

Implementa un CDN con edge caching

Para sitios con audiencia geográficamente distribuida, la latencia del servidor puede ser el cuello de botella principal. Un CDN como Cloudflare o Vercel Edge Network puede reducir el TTFB en 60-70%.

Optimiza y convierte imágenes a AVIF/WebP

AVIF ofrece comprensión superior a WebP con calidad visual equivalente. Implementa ambos formatos con el elemento <picture>:

<picture>
  <source srcset="/imagen.avif" type="image/avif" />
  <source srcset="/imagen.webp" type="image/webp" />
  <img src="/imagen.jpg" alt="Descripción" />
</picture>

Cómo reducir el CLS sin arruinar el diseño

El CLS es particularmente molesto porque afecta directamente la experiencia del usuario con saltos de contenido inesperados.

Define dimensiones en imágenes y videos

Siempre especifica width y height en tus elementos multimedia. El navegador reservará el espacio antes de cargar el recurso:

<img src="/foto.jpg" width="800" height="450" alt="Descripción" />

Evita insertar contenido dinámico por encima del contenido existente

Los banners de cookies, anuncios y widgets de chat que aparecen sobre el contenido son las causas más comunes de CLS alto. Reserva espacio para ellos desde el inicio.

El INP: La métrica más ignorada y la más importante

Desde marzo de 2024, el INP reemplazó definitivamente al FID. Es una métrica más exigente porque mide todas las interacciones durante la sesión, no solo la primera.

Identifica las interacciones problemáticas

Usa el panel de Performance de Chrome DevTools con la opción "Long Animation Frames" para detectar qué interacciones están bloqueando el hilo principal.

Divide las tareas largas de JavaScript

El JavaScript que bloquea el hilo principal durante más de 50ms es el principal culpable del INP alto. Técnicas como scheduler.yield() o setTimeout() permiten ceder el control al navegador entre tareas:

async function processLargeArray(items) {
  for (const item of items) {
    processItem(item)
    await scheduler.yield() // Cede el control al navegador
  }
}

Mi checklist de CWV para 2025

Antes de publicar cualquier cambio en producción, revisa:

✅ Imagen LCP identificada y con fetchpriority="high"
✅ TTFB menor a 800ms (verifica con WebPageTest)
✅ Todas las imágenes con dimensiones definidas
✅ Fuentes con font-display: swap o optional
✅ Sin JavaScript que bloquee el render (o diferido con defer/async)
✅ Preconnect a dominios críticos de terceros
✅ Prueba en dispositivos móviles reales (no solo emulación)

Conclusión

Los Core Web Vitals son, a estas alturas, higiene básica del SEO técnico. Un sitio lento no solo pierde rankings pierde usuarios y conversiones. La buena noticia es que las optimizaciones de CWV suelen tener un impacto positivo en todas las métricas del negocio, no solo en el posicionamiento.

Si necesitas una auditoría detallada de los Core Web Vitals de tu sitio, contáctame y trabajamos juntos para llevarlos a verde.