Core Web Vitals: LCP, INP, CLS Explicados

Core Web Vitals: Lo Que Google Mide

Google usa tres métricas para juzgar la experiencia del usuario en tu página. Afectan rankings de búsqueda y, más importante, afectan si los usuarios se quedan o se van.

Las Tres Métricas

LCP — Largest Contentful Paint

Cuánto tiempo hasta que el elemento visible más grande (imagen hero, título, video) se renderice completamente.

Cómo mejorar LCP:

<!-- Preload de la imagen LCP -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high" />

<!-- Usa formatos modernos -->
<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img src="hero.jpg" alt="Hero" width="1200" height="630" fetchpriority="high" />
</picture>

• Sirve imágenes en formato WebP/AVIF (40-60% más pequeñas)
• Usa fetchpriority="high" en el elemento LCP
• No hagas lazy-load de imágenes above-the-fold
• Usa CDN para assets estáticos
• Minimiza CSS y JS que bloquean renderizado

INP — Interaction to Next Paint

Mide qué tan rápido responde la página a interacciones del usuario (clics, toques, teclas). INP reemplazó a FID en marzo 2024.

Cómo mejorar INP:

// Rompe tareas largas
// MALO: bloquea main thread por 200ms
function processData(items) {
  items.forEach(item => heavyComputation(item));
}

// BUENO: cede al browser entre chunks
async function processData(items) {
  for (let i = 0; i < items.length; i++) {
    heavyComputation(items[i]);
    if (i % 100 === 0) {
      await new Promise(r => setTimeout(r, 0)); // yield
    }
  }
}

• Mantén tareas JavaScript debajo de 50ms
• Usa requestAnimationFrame para actualizaciones visuales
• Debounce interacciones rápidas (scroll, resize)
• Mueve computación pesada a Web Workers

CLS — Cumulative Layout Shift

Mide cambios inesperados de layout — cuando elementos se mueven mientras la página carga. Los peores ofensores:

• Imágenes sin dimensiones
• Ads/embeds inyectados dinámicamente
• Web fonts causando FOUT
• Contenido dinámico insertado encima del contenido existente

Cómo mejorar CLS:

<!-- Siempre define width y height en las imágenes -->
<img src="foto.jpg" width="800" height="600" alt="Foto" />

<!-- Reserva espacio para anuncios -->
<div style="min-height: 250px;"><!-- slot de ad --></div>

<!-- Preload fonts para prevenir layout shift -->
<link rel="preload" as="font" href="/fonts/inter.woff2"
      type="font/woff2" crossorigin />

Herramientas de Medición

Optimiza tus imágenes: Conversor de Imagen — convierte a WebP/AVIF para archivos más pequeños y mejor LCP.