Core Web Vitals: cómo conseguir un 100 en PageSpeed

Google mide la experiencia real de tus usuarios con tres métricas: LCP, CLS e INP. Mejorarlas no solo sube tu puntuación en PageSpeed, también mejora conversión y posicionamiento. Vamos al grano.

LCP — Largest Contentful Paint

Mide cuánto tarda en pintarse el elemento más grande visible (normalmente la imagen del hero o el titular). Objetivo: menos de 2,5 s.

• Sirve imágenes en formato moderno (WebP / AVIF) y con el tamaño correcto.
• Precarga la imagen del hero con <link rel="preload">.
• Evita fuentes que bloqueen el render: usa font-display: swap.

<link rel="preload" as="image"
      href="hero.webp" fetchpriority="high">

CLS — Cumulative Layout Shift

Penaliza los saltos de contenido mientras carga la página. Objetivo: menos de 0,1.

• Define siempre width y height en imágenes y vídeos.
• Reserva espacio para anuncios, embeds e iframes.
• Evita insertar contenido por encima de lo ya visible.

El 90% de los CLS que veo vienen de imágenes sin dimensiones declaradas.

INP — Interaction to Next Paint

Sustituye al antiguo FID y mide la respuesta a las interacciones del usuario. Objetivo: menos de 200 ms.

• Reduce y divide el JavaScript que se ejecuta al cargar.
• Quita librerías que no usas (jQuery, sliders pesados...).
• Difiere scripts no críticos con defer.

Checklist rápido para llegar a 100

1. Imágenes optimizadas y con dimensiones.
2. CSS y JS mínimos, sin dependencias innecesarias.
3. Caché y compresión (gzip/brotli) activadas en el servidor.
4. Fuentes locales o con preconnect + swap.
5. Lazy-loading en imágenes fuera de pantalla.

---

La clave no es perseguir el número, sino la experiencia real: una web rápida se siente mejor y vende más. El 100 llega como consecuencia.