Core Web Vitals 2025: guía práctica y checklist

En 2025, las Core Web Vitals (CWV) ya no son una recomendación, sino un pilar fundamental de la experiencia de usuario y un factor clave para el posicionamiento en buscadores. Un sitio que no cumple con estas métricas no solo se siente lento y frustrante, sino que activamente pierde conversiones y visibilidad. Poner tus métricas en verde es sinónimo de un negocio saludable.

Esta guía te dará un plan de acción claro para entender, medir y optimizar cada una de las Core Web Vitals, con un foco especial en la nueva métrica INP.

1. LCP (Largest Contentful Paint) - La Percepción de Carga

¿Qué es? Mide el tiempo que tarda en renderizarse el elemento de contenido más grande visible en la pantalla (una imagen, un video o un bloque de texto). Un buen LCP (menos de 2.5 segundos) le dice al usuario: “Sí, esta página está cargando correctamente”.

Causas Comunes de un LCP lento:

• Tiempos de respuesta lentos del servidor.
• JavaScript y CSS que bloquean el renderizado.
• Imágenes y otros recursos pesados.
• Carga incorrecta de fuentes.

Cómo Optimizar el LCP:

• Imágenes Optimizadas: Es la victoria más rápida. Usá los componentes nativos de los frameworks modernos.
  • Next.js: <Image /> gestiona automáticamente la optimización, el lazy loading y los formatos modernos (WebP, AVIF).
  • Astro: Usá <Image /> de @astrojs/image para un control similar.
  • HTML: Siempre definí width y height para evitar saltos de layout.
• Priorizá Recursos Críticos: Usá rel="preload" para cargar antes las imágenes o fuentes clave para el LCP.
• Reducí el CSS Bloqueante: Eliminá CSS que no se usa y considerá cargar el CSS crítico inline para la primera carga.
• Utilizá un CDN: Acercá tus contenidos a los usuarios para reducir la latencia de red.

2. CLS (Cumulative Layout Shift) - La Estabilidad Visual

¿Qué es? Mide la suma de todos los saltos de layout inesperados que ocurren durante la vida de la página. Un CLS bajo (menos de 0.1) asegura una experiencia visual estable y predecible.

Causas Comunes de un CLS alto:

• Imágenes o iframes sin dimensiones definidas.
• Anuncios, embeds o banners que se cargan y empujan el contenido.
• Contenido inyectado dinámicamente sobre el contenido existente.
• Fuentes que al cargar cambian el tamaño del texto (FOIT/FOUT).

Cómo Optimizar el CLS:

• Reservá Espacio: La regla de oro. Siempre especificá el tamaño de imágenes y videos.

  <img src="/logo.png" width="200" height="50" alt="Logo de la empresa">

• CSS aspect-ratio: Para elementos responsivos, aspect-ratio es tu mejor amigo. Permite que el navegador reserve el espacio correcto antes de que el contenido cargue.

  .video-container {
    aspect-ratio: 16 / 9;
  }

• Gestioná las Fuentes: Usá font-display: swap; para evitar texto invisible, pero combinalo con la precarga de la fuente para minimizar el cambio de layout.
• Cuidado con los Banners: Si insertás banners (ej: de cookies), no los pongas en la parte superior de la página. Usá overlays o colocalos en la parte inferior.

3. INP (Interaction to Next Paint) - La Capacidad de Respuesta

¿Qué es? Es la métrica que reemplazó a FID (First Input Delay). INP es más completa: mide la latencia de todas las interacciones del usuario con la página (clics, taps, escritura) y no solo la primera. Registra el tiempo desde la interacción hasta que el siguiente frame es pintado en pantalla. Un INP bajo (menos de 200ms) significa que la página se siente ágil y reactiva.

Causas Comunes de un INP alto:

• JavaScript de Larga Duración: Tareas pesadas que bloquean el hilo principal e impiden que el navegador responda a las interacciones.
• Manejo de Eventos Complejo: Demasiado código ejecutándose dentro de un event listener.
• Actualizaciones de DOM Excesivas: Manipular el DOM es costoso y puede retrasar el renderizado.

Cómo Optimizar el INP:

• Dividí las Tareas Largas: La estrategia más efectiva. Si una función tarda más de 50ms, es candidata a ser dividida. Usá setTimeout para ceder el control al hilo principal.

  function miTareaLarga() {
    // ...hace una parte del trabajo...
    if (hayMasTrabajo) {
      setTimeout(miTareaLarga, 0); // Cede el control y continúa después
    }
  }

• Optimizá los Event Listeners: Mantené el código dentro de los manejadores de eventos al mínimo. Para tareas más pesadas, iniciálas pero no las ejecutes sincrónicamente dentro del listener.
• Usá requestIdleCallback: Para trabajo de fondo no crítico, dejá que el navegador lo ejecute cuando esté libre.
• Web Workers: Para cálculos realmente pesados (ej: procesar datos, aplicar filtros complejos), movelos a un Web Worker para que se ejecuten en un hilo separado sin bloquear la UI.
• En Astro: Aprovechá la hidratación parcial. Un componente client:idle o client:visible no ejecutará su JavaScript hasta que sea necesario, liberando el hilo principal durante la carga inicial.

Herramientas para Medir y Monitorear

No podés mejorar lo que no medís. Combiná datos de laboratorio y de campo:

• Datos de Laboratorio (Lab Data):
  • Lighthouse en Chrome DevTools: Tu primera línea de defensa. Ejecutalo en modo incógnito para resultados limpios.
  • WebPageTest: Para un análisis más profundo y condiciones de red personalizadas.
• Datos de Campo (Field Data - RUM):
  • PageSpeed Insights: Te da datos de CrUX (Chrome User Experience Report) de usuarios reales, además de los resultados de Lighthouse.
  • Vercel Analytics / Google Analytics 4: Implementá monitoreo de usuarios reales para entender cómo se comportan las métricas en el mundo real y poder reaccionar a tiempo.

Conclusión

Optimizar las Core Web Vitals es un proceso continuo, no un proyecto de una sola vez. Empezá por las victorias fáciles como la optimización de imágenes y la reserva de espacio, y luego profundizá en la optimización de JavaScript para mejorar el INP. Un sitio rápido y estable no solo te posiciona mejor en Google, sino que crea usuarios más felices y aumenta tus conversiones.

Si querés que nuestro equipo revise tu sitio y te entregue un plan de acción concreto en una semana, escribinos. Nos enfocamos en generar un impacto rápido y medible.