1. Introducción

Desde marzo de 2024 Google evalúa la INP (Interaction to Next Paint) como métrica de Core Web Vitals, reemplazando al obsoleto FID. Para 2025, los sitios B2B que superen los valores recomendados (LCP < 2.5 s, INP < 200 ms, CLS < 0.1) ganarán visibilidad y cimientos de conversión sólidos. En esta guía condensamos el qué, el por qué y, sobre todo, el cómo optimizar tu front-end.

Fuente: developers.google.com

2. Cómo medir tus Core Web Vitals

1. Field Data
   • Chrome User Experience Report (CrUX).
   • PageSpeed Insights (pestaña Field).
2. Lab Data
   • Lighthouse v11 (Desktop & Mobile).
   • WebPageTest (TTFB + CPU throttle).
3. Monitorización continua
   • web-vitals.js + Google Analytics 4.

TIP: configura sampling rate al 10 % para evitar sobrecargar GA4.

3. Optimizar Largest Contentful Paint (LCP)

3.1 Priorizar recursos críticos

• Carga diferida de fuentes (font-display: optional).
• CSS crítico inline; resto mediante preload + media="print".

3.2 Servir imágenes responsive

• Formatos AVIF / WebP.
• Atributo fetchpriority="high" en el hero.

3.3 Estrategia de caché

• Page rules en CDN (Cloudflare/AWS CloudFront).
• Cache First para imágenes y fuentes.

4. Reducir Interaction to Next Paint (INP)

4.1 División de lote React/Vue

import { unstable_batchedUpdates } from 'react-dom';

4.2 Web workers & Off-Main-Thread

• Delegar parsing de JSON pesado.
• useWorker() en Vite/Next.js.

4.3 Evitar long tasks

• Rompe bucles >50 ms (Performance Long Tasks API).
• Carga diferida de librerías analytics.

5. Controlar Cumulative Layout Shift (CLS)

• Reserva espacio con aspect-ratio en imágenes y iframes.
• Usa CSS Grid en lugar de float/position absolute para cards dinámicas.
• Animaciones con transform y opacity (no top/left).

6. INP audit paso a paso (ejemplo práctico)

1. Abre Chrome DevTools → Performance.
2. Graba una interacción (click en CTA).
3. Filtro Longest Interactions → identifica tareas >200 ms.
4. Optimiza (memoization, defer scripts) y repite.

‍

Conclusión

Los Core Web Vitals son hoy una fuente de ventaja competitiva: repercuten en SEO, experiencia de usuario y conversiones. Sigue este checklist, monitoriza de forma continua y verás mejoras medibles en menos de 30 días.

¿Necesitas ayuda para optimizar tu LCP o INP? Contáctanos y solicita una auditoría de rendimiento gratuita.

Recursos adicionales

• Web Vitals Chrome Extension.
• GitHub: awesome-core-web-vitals.
• Herramienta npm nitropack-cli para auditorías CI.