Guia Completa de Core Web Vitals 2026

"El sitio era demasiado lento, asi que me fui"

El 53% de los usuarios abandonan la pagina si la carga toma mas de 3 segundos. Google introdujo Core Web Vitals para reflejar esta experiencia de usuario en los rankings.

En 2026, Core Web Vitals es un factor de ranking clave para SEO movil.

Que son Core Web Vitals?

Core Web Vitals son 3 metricas clave que miden la experiencia del usuario.

Metricas 2026

Metrica	Mide	Bueno	Necesita Mejora	Pobre
LCP	Velocidad de carga	≤2.5s	≤4s	>4s
INP	Respuesta de interaccion	≤200ms	≤500ms	>500ms
CLS	Estabilidad visual	≤0.1	≤0.25	>0.25

Cambio de Metrica (2024)

FID (First Input Delay) → INP (Interaction to Next Paint)

FID: Solo media la primera entrada
INP: Mide la capacidad de respuesta de todas las interacciones (mas completo)

LCP (Largest Contentful Paint)

Definicion

El tiempo que tarda el elemento de contenido mas grande de la pagina en renderizarse en pantalla

Elementos Medidos

Elemento	Ejemplo
`<img>`	Imagen hero
poster de `<video>`	Miniatura de video
CSS `background-image`	Imagen de fondo
Bloques de texto	`<h1>`, `<p>`, etc.

Metodos de Optimizacion

1. Optimizacion de Imagenes

<!-- ❌ Lento -->
<img src="hero.png" alt="Hero">

<!-- ✅ Optimizado -->
<img
  src="hero.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Hero"
  loading="eager"
  fetchpriority="high"
>

2. Tiempo de Respuesta del Servidor (TTFB)

Objetivo: TTFB < 200ms

Metodos de mejora:
- Usar CDN
- Caching del lado del servidor
- Optimizacion de consultas de base de datos
- HTTP/2 o HTTP/3

3. Eliminar Recursos que Bloquean el Renderizado

<!-- ❌ Bloquea renderizado -->
<link rel="stylesheet" href="styles.css">
<script src="app.js"></script>

<!-- ✅ Optimizado -->
<link rel="stylesheet" href="critical.css">
<link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
<script src="app.js" defer></script>

4. CSS Critico en Linea

<head>
  <style>
    /* Solo CSS necesario para la primera pantalla */
    .hero { ... }
    .header { ... }
  </style>
  <link rel="preload" href="full.css" as="style">
</head>

5. Sugerencias de Precarga

<head>
  <!-- Precargar imagen LCP -->
  <link rel="preload" href="hero.webp" as="image" fetchpriority="high">

  <!-- Precargar fuentes web -->
  <link rel="preload" href="font.woff2" as="font" crossorigin>
</head>

INP (Interaction to Next Paint)

Definicion

El tiempo desde la interaccion del usuario (clic, toque, pulsacion de tecla) hasta la siguiente actualizacion de pantalla

Diferencia con FID

FID	INP
Solo primera entrada	Todas las interacciones
Solo retraso de entrada	Tiempo total de respuesta
Obsoleto 2024	Reemplazo Marzo 2024

Que se Mide

Clics (raton, tactil)
Pulsaciones de teclas
Toques (movil)

Metodos de Optimizacion

1. Prevenir Bloqueo del Hilo Principal

// ❌ Bloquea hilo principal
function heavyTask() {
  for (let i = 0; i < 1000000; i++) {
    // Calculo pesado
  }
}

// ✅ Dividir en chunks
async function heavyTaskChunked() {
  const chunks = splitIntoChunks(data, 1000);
  for (const chunk of chunks) {
    processChunk(chunk);
    await new Promise(r => setTimeout(r, 0)); // Ceder
  }
}

2. Debounce/Throttle

// ❌ Ejecutar cada vez
input.addEventListener('input', search);

// ✅ Debounce
input.addEventListener('input', debounce(search, 300));

3. Usar Web Workers

// Hilo principal
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (e) => updateUI(e.data);

// worker.js
self.onmessage = (e) => {
  const result = heavyComputation(e.data);
  self.postMessage(result);
};

4. Optimizar Manejadores de Eventos

// ❌ Manejador pesado
button.onclick = () => {
  computeData();      // Pesado
  updateDOM();        // Manipulacion DOM
  sendAnalytics();    // Red
};

// ✅ Separacion asincrona
button.onclick = async () => {
  requestAnimationFrame(() => {
    updateDOM();      // Actualizacion rapida de UI primero
  });

  await computeDataAsync();
  sendAnalytics();    // Despues
};

5. Reducir Tamano de Scripts

// Code splitting
const Modal = React.lazy(() => import('./Modal'));

// Tree shaking
import { specific } from 'library'; // Evitar import completo

CLS (Cumulative Layout Shift)

Definicion

Puntuacion acumulativa de cambios de diseno inesperados durante la carga de la pagina

Escenario del Problema

Usuario: A punto de hacer clic en un boton
Carga anuncio: El diseno cambia
Resultado: Hace clic en el boton equivocado

Metodos de Optimizacion

1. Especificar Dimensiones de Imagen/Video

<!-- ❌ Sin dimensiones (causa CLS) -->
<img src="photo.jpg" alt="Photo">

<!-- ✅ Especificar dimensiones -->
<img src="photo.jpg" alt="Photo" width="800" height="600">

<!-- ✅ Usar aspect-ratio -->
<img src="photo.jpg" alt="Photo" style="aspect-ratio: 4/3; width: 100%;">

2. Reservar Espacio para Anuncios/Embeds

/* Pre-reservar espacio para anuncios */
.ad-slot {
  min-height: 250px;
  background: #f0f0f0;
}

/* O usar aspect-ratio */
.video-embed {
  aspect-ratio: 16/9;
  width: 100%;
}

3. Optimizacion de Fuentes Web

/* ❌ Causa FOUT/FOIT */
@font-face {
  font-family: 'Custom';
  src: url('font.woff2');
}

/* ✅ Usar font-display */
@font-face {
  font-family: 'Custom';
  src: url('font.woff2');
  font-display: swap; /* u optional */
}

<!-- Precargar fuentes -->
<link rel="preload" href="font.woff2" as="font" crossorigin>

4. Manejar Contenido Dinamico

// ❌ Insercion repentina
container.innerHTML = newContent;

// ✅ Reservar espacio antes de insertar
container.style.minHeight = '200px';
container.innerHTML = newContent;

/* O establecer min-height en CSS */
.dynamic-content {
  min-height: 200px;
}

5. Usar Animaciones Transform

/* ❌ Dispara layout */
.element {
  animation: slide 0.3s;
}
@keyframes slide {
  from { top: -100px; }
  to { top: 0; }
}

/* ✅ Usar transform (sin cambio de layout) */
@keyframes slide {
  from { transform: translateY(-100px); }
  to { transform: translateY(0); }
}

Herramientas de Medicion

Datos de Campo (Usuarios Reales)

Herramienta	Fuente de Datos	Caracteristicas
Chrome UX Report	Usuarios de Chrome	Agregacion de 28 dias
Search Console	Basado en CrUX	Oficial de Google
PageSpeed Insights	CrUX + Lighthouse	Analisis en tiempo real

Datos de Laboratorio (Simulacion)

Herramienta	Proposito
Lighthouse	Integrado en Chrome DevTools
WebPageTest	Analisis detallado, pruebas comparativas
GTmetrix	Informes visuales

Chrome DevTools

1. F12 (Herramientas de Desarrollo)
2. Pestana Performance
3. Record → Actualizar pagina
4. Verificar seccion Web Vitals

Optimizacion por Framework

Next.js

// next.config.js
module.exports = {
  images: {
    formats: ['image/avif', 'image/webp'],
  },
  experimental: {
    optimizeCss: true,
  },
};

// Componente
import Image from 'next/image';

export default function Hero() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero"
      width={1200}
      height={600}
      priority // Imagen LCP
      placeholder="blur"
    />
  );
}

React

// Code splitting
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

// Suspense
<Suspense fallback={<Skeleton />}>
  <HeavyComponent />
</Suspense>

JavaScript Vanilla

<!-- Carga de scripts -->
<script src="critical.js"></script>
<script src="app.js" defer></script>
<script src="analytics.js" async></script>

<!-- Carga diferida de imagenes -->
<img src="below-fold.jpg" loading="lazy" alt="Below fold">

Prioridad de Mejora

Por Impacto

Rango	Item de Optimizacion	Efecto
1	Optimizacion de imagen LCP	LCP ↓
2	Eliminar JS que bloquea renderizado	LCP, INP ↓
3	Especificar dimensiones imagen/embed	CLS ↓
4	Usar CDN	LCP ↓
5	Optimizacion de fuentes web	CLS ↓
6	Division de bundle JS	INP ↓

Victorias Rapidas

<!-- 1. Precargar imagen LCP -->
<link rel="preload" href="hero.webp" as="image">

<!-- 2. Especificar dimensiones de imagen -->
<img width="800" height="600" ...>

<!-- 3. JS defer -->
<script src="app.js" defer></script>

Preguntas Frecuentes

Q1: Cuanto afecta Core Web Vitals al ranking?

A: Es un factor de ranking directo, pero no mas importante que la calidad del contenido. Juega un papel decisivo cuando la calidad del contenido es similar entre paginas competidoras.

Q2: Por que los puntajes movil y escritorio son diferentes?

A: Google utiliza principalmente datos moviles. Priorice la optimizacion movil.

Q3: Por que muestra "Sin datos"?

A: No hay suficientes datos de trafico en Chrome UX Report. El sitio puede tener poco trafico o ser nuevo.

Q4: Que metrica deberia mejorar primero?

A: Generalmente:

LCP - Mejora mas notable
CLS - Reduce frustracion del usuario
INP - Importante para sitios con mucha interaccion

Q5: Que hacer si scripts de terceros son el problema?

Eliminar scripts innecesarios
Usar atributos async o defer
Usar bibliotecas Web Worker como Partytown

Lista de Verificacion

Optimizacion LCP

Precargar imagen LCP
Optimizacion de imagen (WebP/AVIF)
Eliminar recursos que bloquean renderizado
TTFB < 200ms
Usar CDN

Optimizacion INP

Dividir chunks JS pesados
Aplicar debounce/throttle
Eliminar JS innecesario
Limpiar scripts de terceros

Optimizacion CLS

Especificar dimensiones imagen/video
Reservar espacio para anuncios
Configurar font-display
Reservar espacio para contenido dinamico

Conclusion

Esenciales de Core Web Vitals:

LCP ≤ 2.5s: Renderizar contenido mas grande rapidamente
INP ≤ 200ms: Responder instantaneamente a interacciones
CLS ≤ 0.1: Sin cambios de diseno

La optimizacion movil es clave.

Herramientas Relacionadas

Herramienta	Proposito
Analizador PageSpeed	Medir Core Web Vitals
Optimizador de Imagenes	Conversion WebP
Generador de Meta Tags	Meta tags SEO

Guia Completa de Core Web Vitals 2026

Que son Core Web Vitals?

Metricas 2026

Cambio de Metrica (2024)

LCP (Largest Contentful Paint)

Definicion

Elementos Medidos

Metodos de Optimizacion

1. Optimizacion de Imagenes

2. Tiempo de Respuesta del Servidor (TTFB)

3. Eliminar Recursos que Bloquean el Renderizado

4. CSS Critico en Linea

5. Sugerencias de Precarga

INP (Interaction to Next Paint)

Definicion

Diferencia con FID

Que se Mide

Metodos de Optimizacion

1. Prevenir Bloqueo del Hilo Principal

2. Debounce/Throttle

3. Usar Web Workers

4. Optimizar Manejadores de Eventos

5. Reducir Tamano de Scripts

CLS (Cumulative Layout Shift)

Definicion

Escenario del Problema

Metodos de Optimizacion

1. Especificar Dimensiones de Imagen/Video

2. Reservar Espacio para Anuncios/Embeds

3. Optimizacion de Fuentes Web

4. Manejar Contenido Dinamico

5. Usar Animaciones Transform

Herramientas de Medicion

Datos de Campo (Usuarios Reales)

Datos de Laboratorio (Simulacion)

Chrome DevTools

Optimizacion por Framework

Next.js

React

JavaScript Vanilla

Prioridad de Mejora

Por Impacto

Victorias Rapidas

Preguntas Frecuentes

Q1: Cuanto afecta Core Web Vitals al ranking?

Q2: Por que los puntajes movil y escritorio son diferentes?

Q3: Por que muestra "Sin datos"?

Q4: Que metrica deberia mejorar primero?

Q5: Que hacer si scripts de terceros son el problema?

Lista de Verificacion

Optimizacion LCP

Optimizacion INP

Optimizacion CLS

Conclusion

Sobre el Autor

Toolypet Team