Core Web Vitals en 2026: guía completa para pasar LCP, INP y CLS a verde

Los Core Web Vitals son, desde 2021, factor oficial de ranking en Google. En 2026 son más determinantes que nunca: Google los usa tanto en la evaluación de "Page Experience" como para decidir qué contenido priorizar en AI Overviews. Esta guía explica cada métrica, sus umbrales, cómo medirlas bien y las técnicas concretas para pasar cada una a verde.

¿Qué son Core Web Vitals?

Son tres métricas centradas en la experiencia real del usuario:

Google mide el percentil 75 de todos tus usuarios reales (datos CrUX — Chrome User Experience Report). Para aprobar Core Web Vitals, los tres deben estar en verde en el P75.

LCP — Largest Contentful Paint

LCP mide cuánto tarda en renderizarse el elemento más grande visible en viewport (imagen, vídeo, bloque de texto). Es un proxy de "cuándo se siente cargada la página" para el usuario.

Causas habituales de LCP malo

• Imagen hero sin optimizar (JPG pesado, sin WebP/AVIF).
• Imagen hero con lazy-loading (loading="lazy").
• Server lento: TTFB > 600ms.
• CSS que bloquea el render.
• Fonts que retrasan el paint (FOIT).
• Redirects en cadena antes de servir el HTML.

Cómo optimizar LCP en Next.js

import Image from "next/image";

export default function Home() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero"
      width={1920}
      height={1080}
      priority           // NUNCA usar loading="lazy" en el hero
      fetchPriority="high"
      sizes="(max-width: 768px) 100vw, 1920px"
    />
  );
}

Optimizaciones generales (cualquier stack)

• Convierte imágenes a WebP o AVIF (reducen el peso 30-60%).
• Sirve CDN cercano al usuario. Vercel, Cloudflare o Fastly.
• Preload del recurso LCP: <link rel="preload" as="image" href="/hero.webp" />
• Elimina CSS no usado. Herramientas: PurgeCSS, Tailwind JIT.
• Fuentes con font-display: swap (o optional).

INP — Interaction to Next Paint

INP reemplazó a FID en marzo 2024. Mide el tiempo total desde que el usuario interactúa (click, tap, key) hasta que el navegador pinta la respuesta. Incluye el input delay, el procesamiento del handler y el paint final.

Causas habituales de INP malo

• Handlers de eventos que bloquean el main thread > 200ms.
• Librerías JS pesadas que cargan en el evento (lazy bundles grandes).
• Re-renders masivos de React sin memoización.
• Uso excesivo de setTimeout(fn, 0) que inunda la tarea.

Técnicas para optimizar INP

// Trocear tareas pesadas con scheduler.yield() o setTimeout
async function heavyTask() {
  await processChunk1();
  await yieldToMain();  // cede al navegador para pintar
  await processChunk2();
}

function yieldToMain() {
  return new Promise((resolve) => setTimeout(resolve, 0));
}

// API moderna (Chrome 129+)
if ("scheduler" in window && "yield" in window.scheduler) {
  await window.scheduler.yield();
}

// Memoiza componentes costosos
import { memo, useMemo } from "react";

export default memo(function ExpensiveList({ items }) {
  const sorted = useMemo(
    () => items.slice().sort((a, b) => a.score - b.score),
    [items]
  );
  return sorted.map((i) => <Row key={i.id} data={i} />);
});

Decálogo anti-INP

• Divide bundles grandes en chunks (dynamic import).
• Carga librerías de terceros con defer o en requestIdleCallback.
• Evita librerías JS pesadas (considera CSS puro en animaciones).
• No hagas setState múltiples en cada pulsación: agrupa actualizaciones.
• Usa React 19+ (Concurrent features automáticos reducen INP).

CLS — Cumulative Layout Shift

CLS mide cuánto "saltan" los elementos de la página durante la carga. Cada salto tiene un peso (distancia × fracción del viewport afectada) y CLS es la suma.

Causas habituales de CLS malo

• Imágenes sin width/height.
• Fuentes web que cambian métricas al cargar (FOUT).
• Anuncios que se insertan dinámicamente empujando contenido.
• Iframes sin dimensión reservada.
• Banners de cookies que desplazan el layout.
• Animaciones con top/left en vez de transform.

Técnicas para CLS = 0

// Imágenes: SIEMPRE con width y height
<Image src="/foto.jpg" alt="..." width={800} height={600} />

// Placeholders con aspect-ratio
<div style={{ aspectRatio: "16 / 9", background: "#111" }}>
  <video src="..." />
</div>

// Fuentes autohospedadas con next/font (métricas ajustadas automáticamente)
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"], display: "swap" });

/* Animar SIEMPRE con transform u opacity (no dispara reflow) */
.boton {
  transition: transform 0.2s ease;
}
.boton:hover {
  transform: translateY(-2px);
}

/* Reservar espacio para anuncios */
.ad-slot {
  min-height: 250px;
}

Cómo medir Core Web Vitals

1. Lab (sintético) — desarrollo y CI

• PageSpeed Insights (Lighthouse).
• Lighthouse CLI en CI:

npm install -g @lhci/cli

# Auditoría de URL única
lhci collect --url=https://www.thinkmadrid.com/
lhci assert --preset=lighthouse:recommended

# CI con umbrales custom (.lighthouserc.json)
lhci autorun

{
  "ci": {
    "collect": { "url": ["https://www.thinkmadrid.com/"] },
    "assert": {
      "assertions": {
        "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }],
        "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }],
        "interaction-to-next-paint": ["error", { "maxNumericValue": 200 }]
      }
    }
  }
}

2. Field (real) — producción

Los datos de laboratorio no siempre coinciden con la realidad. Usa web-vitals.js para medir usuarios reales y mandarlo a tu analítica:

npm install web-vitals

import { onCLS, onINP, onLCP, onFCP, onTTFB } from "web-vitals";

function sendToAnalytics(metric: {
  name: string; value: number; id: string; rating: string;
}) {
  if (window.gtag) {
    window.gtag("event", metric.name, {
      value: Math.round(metric.name === "CLS" ? metric.value * 1000 : metric.value),
      metric_id: metric.id,
      metric_value: metric.value,
      metric_rating: metric.rating,
    });
  }
}

export function initVitals() {
  onCLS(sendToAnalytics);
  onINP(sendToAnalytics);
  onLCP(sendToAnalytics);
  onFCP(sendToAnalytics);
  onTTFB(sendToAnalytics);
}

Y en Next.js App Router:

"use client";
import { useReportWebVitals } from "next/web-vitals";

export default function WebVitals() {
  useReportWebVitals((metric) => {
    if (window.gtag) {
      window.gtag("event", metric.name, {
        value: Math.round(metric.value),
        metric_id: metric.id,
        metric_rating: metric.rating,
      });
    }
  });
  return null;
}

3. CrUX — datos históricos públicos

CrUX Dashboard (gratis) y CrUX API te dan los datos de campo que Google realmente usa para rankear. Úsalos para hacer benchmarks frente a la competencia.

# Consulta CrUX API via curl
curl -X POST 'https://chromeuxreport.googleapis.com/v1/records:queryRecord?key=YOUR_API_KEY' \
  -H 'Content-Type: application/json' \
  -d '{
    "url": "https://www.thinkmadrid.com/",
    "formFactor": "PHONE",
    "metrics": ["largest_contentful_paint", "interaction_to_next_paint", "cumulative_layout_shift"]
  }'

Debugging con DevTools

Chrome DevTools tiene herramientas específicas para Web Vitals:

• Performance tab → "Web Vitals" checkbox al grabar: marca los eventos de LCP/CLS/INP.
• Performance Insights (tab nueva) → muestra causas automáticas de problemas.
• Lighthouse tab → auditoría one-click.
• Extensión Web Vitals → badge en vivo en cualquier página.

Herramientas y repos útiles

• github.com/GoogleChrome/web-vitals — librería oficial.
• Lighthouse CI — auditorías automáticas en cada PR.
• web.dev/measure — dashboard completo por URL.
• Treo.sh — monitorización de CWV en producción (de pago, muy completa).

Checklist para pasar Core Web Vitals

Conclusión

Pasar Core Web Vitals es un ejercicio de disciplina técnica: medir, diagnosticar, arreglar, re-medir. Next.js te pone la mayoría de umbrales en verde por defecto gracias a su optimización automática de imágenes, fuentes y bundles, pero hay que vigilarlo en cada release.

Para profundizar: nuestra guía SEO para Next.js cubre cómo aprovechar al máximo el framework, y la guía de SEO técnico complementa con el resto de factores que Google valora.

Si tu web tiene problemas de rendimiento, en Think! Madrid hacemos auditorías de performance con plan de acción priorizado. Escríbenos.