Core Web Vitals: guía práctica para mejorar el rendimiento de tu web

Qué son los Core Web Vitals y por qué te importan

Los Core Web Vitals son tres métricas que Google usa para evaluar la experiencia de usuario de una página web. Desde 2021 son un factor de posicionamiento confirmado, y en 2024 Google actualizó una de las tres métricas (FID fue reemplazado por INP).

Pero más allá del SEO, estas métricas miden lo que los usuarios realmente sienten al usar tu sitio: ¿carga rápido? ¿Responde a mis clics? ¿Los elementos se mueven mientras cargo?

En mi experiencia trabajando con más de 50 proyectos, mejorar los Core Web Vitals no solo mejora el posicionamiento — también mejora la tasa de conversión. Un estudio de Google encontró que las páginas que cumplen los tres Core Web Vitals tienen un 24% menos de abandonos.

Las tres métricas explicadas

LCP — Largest Contentful Paint (Carga)

Mide cuánto tarda en renderizarse el elemento más grande visible en la pantalla. Suele ser una imagen hero, un vídeo o un bloque de texto grande.

• Bueno: ≤ 2.5 segundos
• Necesita mejora: 2.5 – 4.0 segundos
• Malo: > 4.0 segundos

Las causas más comunes de mal LCP:

• Imágenes sin optimizar (formato, tamaño, compresión)
• Fuentes web que bloquean el renderizado
• JavaScript que bloquea el hilo principal
• Servidor lento (Time to First Byte alto)

INP — Interaction to Next Paint (Interactividad)

Reemplazó a FID en marzo de 2024. Mide cuánto tarda la página en responder visualmente después de que el usuario interactúa (clic, toque, tecla).

• Bueno: ≤ 200 milisegundos
• Necesita mejora: 200 – 500 milisegundos
• Malo: > 500 milisegundos

Las causas más comunes de mal INP:

• JavaScript pesado ejecutándose en el hilo principal
• Event listeners que disparan operaciones costosas
• Librerías de terceros no optimizadas (analytics, chat widgets, ads)

CLS — Cumulative Layout Shift (Estabilidad visual)

Mide cuánto se mueven los elementos visibles de la página durante la carga. Esos saltos molestos cuando un anuncio empuja el contenido que estabas leyendo.

• Bueno: ≤ 0.1
• Necesita mejora: 0.1 – 0.25
• Malo: > 0.25

Las causas más comunes de mal CLS:

• Imágenes sin dimensiones width/height explícitas
• Anuncios o embeds sin espacio reservado
• Fuentes web que causan FOIT/FOUT con cambio de tamaño
• Contenido inyectado dinámicamente sobre contenido existente

Cómo medir tus Core Web Vitals

Datos de laboratorio (testing)

• Google Lighthouse (integrado en Chrome DevTools): análisis instantáneo con sugerencias
• PageSpeed Insights: combina datos de laboratorio y de campo
• WebPageTest: análisis detallado con waterfall de recursos

Datos de campo (usuarios reales)

• Google Search Console: sección “Core Web Vitals” con datos reales de los últimos 28 días
• Chrome UX Report (CrUX): datos agregados de usuarios de Chrome
• Web Vitals Extension: extensión de Chrome para ver métricas en tiempo real

Los datos de campo son los que Google usa para el ranking. Los datos de laboratorio son útiles para diagnosticar y testear mejoras.

Optimizaciones de mayor impacto

1. Optimizar imágenes (impacto en LCP y CLS)

Las imágenes son la causa número 1 de mal LCP en la mayoría de sitios:

• Usa formatos modernos: WebP o AVIF en lugar de JPEG/PNG (30-50% menos peso)
• Define width y height en todas las imágenes para evitar CLS
• Implementa lazy loading para imágenes below the fold
• Usa srcset para servir tamaños adecuados según el dispositivo
• Preload la imagen hero con <link rel="preload">

2. Optimizar fuentes (impacto en LCP y CLS)

• Usa font-display: swap para evitar bloqueo de renderizado
• Preconecta al servidor de fuentes: <link rel="preconnect">
• Considera self-hosting las fuentes para reducir peticiones
• Limita el número de variantes (pesos) que cargas

3. Reducir JavaScript (impacto en INP y LCP)

• Elimina JavaScript que no necesitas (¿realmente usas ese slider de jQuery?)
• Usa defer o async en scripts no críticos
• Divide tu código con code splitting y carga bajo demanda
• Audita scripts de terceros: cada analytics, chat widget o pixel añade peso

4. Servidor y hosting (impacto en LCP)

• Un CDN reduce la latencia sirviendo desde servidores cercanos al usuario
• La generación estática (SSG) con frameworks como Astro elimina el tiempo de procesamiento en el servidor
• HTTP/2 o HTTP/3 permite multiplexar peticiones en paralelo

Mi stack para rendimiento perfecto

En los proyectos que construyo con Astro, consistentemente obtengo 95-100 en Lighthouse sin optimización extra. La receta:

• Astro para generar HTML estático puro (zero JS por defecto)
• Google Fonts con preconnect y display swap
• Imágenes en WebP con dimensiones explícitas
• CSS en línea para el contenido above the fold
• Tailwind CSS que purga automáticamente los estilos no utilizados

El resultado: páginas que pesan menos de 100KB y cargan en menos de 1 segundo en conexiones 4G.

Error común: optimizar sin medir

El error más frecuente es aplicar “mejores prácticas” sin medir el impacto real. He visto sitios que implementan lazy loading agresivo en TODAS las imágenes (incluyendo la hero, que debería cargar inmediatamente) y empeoran su LCP.

Siempre mide antes, aplica un cambio, y mide después. Los Core Web Vitals son métricas, no opiniones — déjalas guiar tus decisiones.