Los Core Web Vitals son el marco de Google para medir la experiencia real de página, y son un factor de posicionamiento confirmado. Next.js te da una ventaja inicial significativa frente a la mayoría de frameworks, pero una web Next.js mal configurada aún puede fallar en estas métricas. Aquí tienes una guía práctica para diagnosticar y corregir cada una.
Paso 1: Mide Antes de Corregir
Antes de cambiar nada, consigue mediciones base precisas. Hay dos tipos de datos de CWV:
Datos de campo (mediciones de usuarios reales) — Disponibles en Google Search Console bajo "Core Web Vitals" y en PageSpeed Insights como "Descubre lo que experimentan tus usuarios reales". Esto es lo que Google usa para posicionar. Requiere suficiente tráfico para generar significancia estadística.
Datos de laboratorio — Disponibles en Lighthouse (Chrome DevTools → pestaña Lighthouse) y PageSpeed Insights. Útiles para el desarrollo, pero Google no los usa para decisiones de posicionamiento.
Corrige siempre basándote en datos de campo cuando estén disponibles. Las puntuaciones de laboratorio pueden ser engañosas — una página puede sacar 100 en Lighthouse y aun así tener un INP de campo deficiente si hay mucho JavaScript en el cliente.
Paso 2: Corregir el LCP (Largest Contentful Paint)
El LCP debería estar por debajo de 2,5 segundos. Las causas más comunes en webs Next.js:
Imágenes de cabecera que cargan demasiado tarde. Cada imagen de cabecera debería usar la prop priority en next/image. Esto le dice a Next.js que precargue la imagen y no la cargue de forma diferida:
<Image src="/hero.webp" alt="Hero" width={1200} height={600} priority />
Formato de imagen incorrecto. next/image sirve WebP y AVIF automáticamente, pero solo si estás usando el componente. Si tienes etiquetas <img> en cualquier sitio — revisa tus renderizadores de Markdown y componentes de terceros — esas imágenes no estarán optimizadas.
Respuesta de servidor lenta (TTFB). En Vercel, el TTFB debería estar por debajo de 200 ms. Si es más alto, comprueba si estás haciendo llamadas lentas a la base de datos en generateStaticParams o componentes de layout. Prefiere la generación estática frente al renderizado en servidor para páginas cuyo contenido cambia poco.
Fuentes que bloquean el renderizado. Añade display: "swap" a todas las importaciones de Google Fonts en Next.js:
const inter = Inter({ subsets: ["latin"], display: "swap" });
Paso 3: Corregir el CLS (Cumulative Layout Shift)
El CLS debería estar por debajo de 0,1. Las causas más comunes en webs Next.js:
Imágenes sin dimensiones explícitas. Proporciona siempre width y height a next/image. El componente los usa para reservar espacio antes de que la imagen cargue, evitando el desplazamiento de contenido.
Fuentes web que causan FOUT. Usa font-display: swap (gestionado automáticamente por next/font/google) y precarga las conexiones a los orígenes de las fuentes. Evita cargar fuentes desde CDN que no estén precargadas.
Banners o avisos de cookies inyectados dinámicamente. Si un banner de cookies o una notificación aparece encima del contenido después de que la página cargue, empuja el contenido hacia abajo y genera CLS. Reserva el espacio en tu layout, o usa posicionamiento fijo para que se superponga en lugar de desplazar el contenido.
Paso 4: Corregir el INP (Interaction to Next Paint)
El INP debería estar por debajo de 200 ms. Sustituyó al FID en 2024 y es el CWV más difícil de corregir porque mide la interactividad durante todo el ciclo de vida de la página, no solo en la carga.
Componentes de cliente pesados. En el App Router de Next.js, los componentes que no necesitan interactividad deberían ser componentes de servidor. "use client" debería aparecer solo cuando realmente necesitas APIs del navegador, manejadores de eventos o hooks. Los componentes de cliente innecesarios aumentan el bundle de JavaScript que debe analizarse y ejecutarse.
Bloquear el hilo principal. Los bundles de JavaScript grandes que se ejecutan de forma síncrona bloquean las interacciones del usuario. Usa importaciones dinámicas para componentes pesados:
const HeavyComponent = dynamic(() => import("./HeavyComponent"), { ssr: false });
Scripts de terceros. Analítica, widgets de chat y scripts publicitarios son una fuente frecuente de problemas de INP. Cárgalos con next/script usando strategy="afterInteractive" o strategy="lazyOnload" para diferir su ejecución hasta después de que la página sea interactiva.
Paso 5: Monitorización Tras la Corrección
Las correcciones no aparecen en los datos de campo inmediatamente. Los datos CrUX de Google (que alimentan Search Console y los datos de campo de PageSpeed Insights) tienen una ventana móvil de 28 días. Espera 4–6 semanas tras desplegar las correcciones antes de ver mejorar los datos de campo.
Durante esa ventana, sigue las puntuaciones de laboratorio para confirmar que las correcciones funcionan. Configura Vercel Analytics para monitorizar continuamente los Core Web Vitals de usuarios reales — saca a la luz problemas de INP que las herramientas de laboratorio pasan por alto.
Una vez que los datos de campo se pongan al día, deberías ver mejoras correlacionadas en el posicionamiento orgánico, especialmente en páginas que antes estaban en el rango "necesita mejora" o "deficiente". Combina este trabajo con el resto de puntos de nuestro checklist técnico de SEO — los Core Web Vitals son uno de los 20 factores que determinan tu posicionamiento.
El Atajo: Constrúyelo Bien desde el Principio
Cada paso de esta guía existe porque la web no se construyó con estas consideraciones desde el principio. El enfoque más rentable es construir sobre una base Next.js correctamente configurada que empiece con Core Web Vitals en verde. Estas mejoras también tienen un impacto directo en el negocio más allá del posicionamiento — los datos sobre velocidad web y tasa de conversión muestran exactamente cuán medible es eso.
Nuestro servicio de diseño y desarrollo web incluye SEO técnico y optimización de Core Web Vitals de serie en cada proyecto. Si quieres saber en qué punto está tu web actual, una auditoría gratuita te mostrará exactamente qué métricas están afectando a tu posicionamiento.
¿Listo para hacer crecer tu negocio online? Consigue tu auditoría gratuita →