Tu Sitio Está Lento. Google Lo Sabe. Así Lo Arreglas.

Google usa los Core Web Vitals como factor de ranking. Si tu sitio es lento, estás perdiendo posiciones y clientes. Te explicamos cada métrica y cómo mejorarla.

LCP: Largest Contentful Paint#

Mide cuánto tarda en cargar el elemento más grande visible. Generalmente es la imagen hero o el título principal.

• ✅ Bueno: < 2.5 segundos
• ⚠️ Necesita mejora: 2.5 - 4 segundos
• ❌ Malo: > 4 segundos

Cómo Mejorar LCP#

// Optimizar imagen hero con Next.js
import Image from 'next/image';

export function Hero() {
  return (
    <Image
      src="/hero.webp"
      alt="Hero"
      width={1920}
      height={1080}
      priority // Precarga la imagen
      sizes="100vw"
      quality={85}
    />
  );
}

INP: Interaction to Next Paint#

Mide la latencia de las interacciones del usuario. Reemplazó a FID en marzo 2024.

Cómo Mejorar INP#

• Divide tareas largas — Usa requestIdleCallback o scheduler.yield()
• Optimiza event handlers — Debounce y throttle donde aplique
• Reduce JavaScript — Code splitting y lazy loading
• Web Workers — Mueve cálculos pesados fuera del main thread

CLS: Cumulative Layout Shift#

Mide cuánto se mueve el contenido mientras carga. Esos saltos molestos cuando intentas hacer clic y el botón se mueve.

/* Reservar espacio para imágenes */
.image-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

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

/* Fuentes: usar font-display */
@font-face {
  font-family: 'Custom';
  src: url('/font.woff2');
  font-display: swap;
}

Herramientas de Diagnóstico#

No optimices para el score de Lighthouse. Optimiza para la experiencia real de tus usuarios. Los números son una guía, no el objetivo.