Core Web Vitals: Guía práctica para LCP, INP y CLS en 2026

La velocidad de carga dejó de ser solo una cuestión de experiencia de usuario para convertirse en un factor oficial de posicionamiento de Google. Desde 2021, los Core Web Vitals forman parte del algoritmo, y en marzo de 2024 Google sustituyó el FID (First Input Delay) por el INP (Interaction to Next Paint). En 2026, estas tres métricas —LCP, INP y CLS— definen, en la práctica, la calidad percibida de tu página, tanto para el ranking como para la conversión.

Si tu página tarda más de 2,5 segundos en cargar el contenido principal, se bloquea al recibir clics o "salta" mientras el usuario lee, estás perdiendo posiciones y ventas. Esta guía muestra exactamente cómo medir, diagnosticar y corregir cada una de las tres métricas, con ejemplos de código HTML, CSS y JavaScript aplicables en la práctica.

¿Qué son los Core Web Vitals?

Los Core Web Vitals son un conjunto de métricas definidas por Google para medir la experiencia real de carga, interactividad y estabilidad visual de las páginas. Son tres, y cada una mide un aspecto diferente:

<script src="https://unpkg.com/web-vitals@4/dist/web-vitals.iife.js"></script>
<script>
  const vitals = {};

  function reportVital(metric) {
    vitals[metric.name] = metric.value;
    console.log(`${metric.name}: ${metric.value}`);
  }

  webVitals.onCLS(reportVital);
  webVitals.onLCP(reportVital);
  webVitals.onINP(reportVital);
</script>

En producción, enviarías esos valores a tu herramienta de análisis para crear un panel de control del rendimiento real.

LCP: optimizando el Largest Contentful Paint

El LCP mide el tiempo que tarda en cargarse el elemento visible más grande de la ventana de visualización. En la mayoría de los casos, ese elemento es una imagen principal, un vídeo o un bloque grande de texto. Un LCP deficiente significa que el usuario está viendo una pantalla en blanco o parcialmente cargada.

Principales causas de LCP malo

• Servidor lento — TTFB elevado (por encima de 800 ms)
• Imagen principal pesada — no optimizada, en formato obsoleto
• Renderizado bloqueado por CSS — hojas de estilo voluminosas y no críticas
• JavaScript que bloquea la renderización — scripts en el encabezado que impiden que el navegador muestre el contenido
• Precarga/renderización sin priorización — el navegador descarga elementos sin importancia antes que el contenido principal

Cómo corregir: HTML y CSS

1. Optimiza y prioriza la imagen principal

<!-- Antes: JPEG pesado, sin dimensiones, cargado al final -->
<img src="hero.jpg" alt="Banner">

<!-- Después: WebP, con dimensiones y preload -->
<link rel="preload" as="image" href="/img

> *Traducción completa próximamente — contenido original en portugués a continuación.*
/hero-1200.webp">
<img
  src="/img/hero-1200.webp"
  alt="Banner principal"
  width="1200"
  height="675"
  fetchpriority="high"
>

El atributo fetchpriority="high" indica al navegador que dé prioridad a la descarga de esa imagen. Los atributos width y height evitan el CLS. El atributo preload inicia la descarga lo antes posible.

2. Carga de CSS crítico en línea

En lugar de bloquear la renderización con todo el CSS, envía solo el CSS imprescindible para la primera visualización:

<style>
  /* CSS crítico: header, hero, primera pantalla */
  .hero { display: grid; place-items: center; min-height: 60vh; }
  .hero-title { font-size: clamp(1.8rem, 4vw, 3.5rem); }
</style>
<!-- Resto del CSS cargado de forma asíncrona -->
<link rel="preload" href="/css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/main.css"></noscript>

Este patrón (CSS crítico en línea + CSS asíncrono) reduce drásticamente el tiempo de primera pintura sin sacrificar el diseño completo.

3. Mejora el TTFB en el servidor

• Activa la caché en las respuestas HTTP.
• Utiliza una CDN para servir contenido estático desde puntos cercanos al usuario.
• En Node.js/Next.js, ten en cuenta el edge rendering y el streaming.
• En Apache o Nginx, activa gzip o Brotli:

# Nginx: compresión Brotli
brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css application/json application/javascript text/xml application/xml image/svg+xml;

4. Carga diferida solo de lo que hay debajo del pliegue

<img
  src="producto-a.jpg"
  alt="Producto A"
  loading="lazy"
  decoding="async"
  width="600"
  height="400"
>

Atención: Nunca utilices loading="lazy" en la imagen principal. Debe cargarse primero.

INP: haciendo la página receptiva a interacciones

El INP mide la latencia de todas las interacciones: el tiempo que transcurre entre que el usuario hace clic y la página responde visualmente. El culpable del INP suele ser casi siempre el **JavaScript extenso y bloqueante en el