Los Core Web Vitals son tres métricas oficiales de Google que cuantifican la experiencia real que un visitante tiene al cargar y usar tu página. Desde 2021 forman parte del algoritmo de ranking, lo que significa que mejorarlos tiene impacto directo en tu posición en Google.
¿Qué mide cada Core Web Vital?
Google definió tres señales que cubren los aspectos más críticos de la experiencia de carga:
LCP — Largest Contentful Paint (carga)
Mide cuánto tarda en aparecer el elemento visible más grande de la pantalla: habitualmente una imagen de portada, un bloque de texto principal o un vídeo.
- Bueno: menos de 2.5 segundos
- Necesita mejorar: 2.5 – 4.0 segundos
- Malo: más de 4.0 segundos
INP — Interaction to Next Paint (interactividad)
Reemplazó a FID en marzo de 2024. Mide la latencia de todas las interacciones del usuario (clics, toques, pulsaciones de teclado) durante toda la sesión, no solo la primera.
- Bueno: menos de 200 ms
- Necesita mejorar: 200 – 500 ms
- Malo: más de 500 ms
CLS — Cumulative Layout Shift (estabilidad visual)
Cuantifica cuánto se mueven los elementos de la pantalla de forma inesperada mientras la página carga. Un banner que empuja el texto hacia abajo justo cuando vas a pulsar un enlace es un ejemplo típico.
- Bueno: menos de 0.1
- Necesita mejorar: 0.1 – 0.25
- Malo: más de 0.25
Cómo consultar tus métricas actuales
Antes de optimizar conviene saber en qué punto estás. Estas herramientas son gratuitas y cubren casos de uso distintos:
| Herramienta | Datos | Ideal para |
|---|---|---|
| PageSpeed Insights | Laboratorio + campo real (CrUX) | Diagnóstico rápido por URL |
| Google Search Console → Experiencia | Campo real (CrUX) | Ver todo el sitio de un vistazo |
| Chrome DevTools → Performance | Laboratorio local | Depuración detallada |
| web.dev/measure | Laboratorio (Lighthouse) | Informe combinado + sugerencias |
Prioriza siempre los datos de campo (CrUX) sobre los de laboratorio: reflejan lo que tus visitantes reales experimentan, no una simulación.
Cómo mejorar el LCP
El LCP suele ser el vital más difícil de optimizar porque depende de varios factores encadenados.
Precarga la imagen hero
Agrega <link rel="preload" as="image" href="hero.webp"> en el <head> para que el navegador descargue la imagen antes de procesar el CSS.
Sirve imágenes en formatos modernos
Convierte tus JPEG y PNG a WebP o AVIF. Una imagen que pesa 200 KB en JPEG puede bajar a 80 KB en WebP con la misma calidad percibida.
Reduce el TTFB
El servidor lento es la causa raíz más subestimada de un LCP alto. Activa caché de página completa (por ejemplo, con un plugin como WP Rocket en WordPress o con mod_cache en Apache) y considera un servicio de alojamiento web optimizado con tiempos de respuesta de servidor menores a 200 ms.
Elimina el render-blocking
Los archivos CSS y JS que bloquean el renderizado retrasan todo lo que viene después. Carga los scripts no críticos con defer o async y mueve las hojas de estilo no esenciales fuera del <head>.
Cómo mejorar el INP
Un INP alto casi siempre apunta a JavaScript que monopoliza el hilo principal durante demasiado tiempo.
- Divide las tareas largas usando
setTimeoutoscheduler.yield()para ceder el hilo al navegador entre bloques de trabajo. - Audita tus scripts de terceros: analytics, chatbots y widgets de redes sociales son los principales culpables. Cárgalos después del evento
load. - Reduce el JavaScript innecesario: usa tree-shaking y carga solo el código que la página realmente necesita (code splitting).
- Usa Web Workers para operaciones pesadas que no requieren acceso al DOM.
Cómo mejorar el CLS
El CLS se corrige reservando espacio para el contenido que tarda en cargar:
- Especifica siempre
widthyheighten las etiquetas<img>y<video>. El navegador reserva el espacio exacto antes de descargar el recurso. - Define dimensiones fijas para anuncios y banners incrustados. Si el espacio es variable, reserva el tamaño máximo esperado.
- Evita insertar contenido dinámico (banners de cookies, notificaciones) encima del contenido visible sin reservar el espacio de antemano.
- Usa
font-display: swapen tus fuentes web para evitar saltos de texto cuando carga la tipografía personalizada.
Si tu sitio está en WordPress, plugins como los que gestiona un equipo especializado en rendimiento web pueden automatizar muchas de estas correcciones. También puedes revisar más guías prácticas en nuestra sección de rendimiento web.
Conclusiones clave
- Los Core Web Vitals son LCP (carga), INP (interactividad) y CLS (estabilidad visual), y son factores oficiales del ranking de Google.
- Consulta primero los datos de campo en Search Console o PageSpeed Insights antes de optimizar.
- El LCP mejora con precargas, imágenes modernas, servidor rápido y eliminación de render-blocking.
- El INP mejora reduciendo y dividiendo el trabajo de JavaScript en el hilo principal.
- El CLS se corrige declarando dimensiones explícitas en imágenes, anuncios y fuentes web.
- Una mejora sostenida requiere monitoreo continuo, no un arreglo único.
¿Quieres saber exactamente qué está frenando tu sitio? En elenlace.com realizamos auditorías de Core Web Vitals y aplicamos las correcciones necesarias para que tu sitio cargue rápido y suba posiciones en Google.
Preguntas frecuentes
¿Los Core Web Vitals afectan directamente mi ranking en Google?
Sí. Desde mayo de 2021 forman parte de las señales de experiencia de página que Google usa como factor de ranking. No son el único factor, pero pueden marcar la diferencia entre dos páginas con contenido similar.
¿Con qué frecuencia debo revisar mis Core Web Vitals?
Al menos una vez al mes en Search Console y cada vez que hagas cambios significativos en el sitio. Los datos de campo de CrUX se actualizan con una ventana deslizante de 28 días.
¿Qué pasa si mi sitio tiene pocos visitantes y no aparece en CrUX?
Google no muestra datos de campo para URLs con poco tráfico. En ese caso, usa exclusivamente datos de laboratorio (PageSpeed Insights, Lighthouse) como referencia, y enfócate en alcanzar las puntuaciones recomendadas.
¿WordPress puede tener buenos Core Web Vitals?
Absolutamente. WordPress puede alcanzar puntuaciones excelentes con la combinación correcta: hosting rápido, tema liviano, imágenes optimizadas y un buen plugin de rendimiento. Los desafíos principales son los plugins de terceros y temas pesados con mucho JavaScript.
Compara proveedores
Otros proveedores y guías que vale la pena comparar:
