Core Web Vitals
Desde mayo 2021, Google usa LCP, INP y CLS como señal de ranking explícita dentro del Page Experience Update. No son métricas de vanidad: son la forma en que Google cuantifica si tu página respeta el tiempo y la atención del usuario.
LCP, INP y CLS — definición y umbrales
Largest Contentful Paint
Mide: Tiempo de carga percibida — el elemento visible más grande tarda en aparecer
Mide cuándo el contenido principal de la página —normalmente la imagen hero o el bloque de texto más grande— es visible para el usuario. Un LCP lento indica servidor lento, imágenes pesadas o render-blocking resources.
Interaction to Next Paint
Mide: Respuesta de la página a las interacciones del usuario (clicks, taps, teclas)
Reemplazó a FID en marzo 2024. Mide el percentil 75 de todas las interacciones durante la sesión, no solo la primera. Un INP alto indica long tasks en el main thread, hydration síncrona pesada o event handlers bloqueantes.
Cumulative Layout Shift
Mide: Estabilidad visual — cuánto se mueven los elementos en pantalla de forma inesperada
Suma ponderada de todos los shifts de layout inesperados. Los culpables más frecuentes: imágenes sin dimensiones, ads sin espacio reservado, fuentes web que cambian el texto al cargarse.
Por qué los CWV siguen importando en 2026
Page Experience como señal consolidada
Google consolida CWV dentro del Page Experience Update junto con HTTPS, mobile-friendliness y safe browsing. No es el factor de ranking más pesado, pero en mercados competitivos puede ser el desempate entre páginas con contenido similar.
AI Overviews y resultados enriquecidos
Las páginas que aparecen en AI Overviews y rich results en 2026 tienden a tener mejores métricas de experiencia. Google prioriza fuentes que combinan autoridad de contenido con experiencia técnica sólida para sus respuestas generativas.
Conversión orgánica directa
Un LCP lento y un CLS alto no solo afectan el ranking — destruyen la conversión. El impacto de los CWV en revenue no pasa solo por Google: pasa por la experiencia del usuario que llega orgánicamente y decide si se queda o rebota.
Cómo medir los Core Web Vitals
Hay dos tipos de datos: campo (usuarios reales) y laboratorio (entorno controlado). Los datos de campo son los que Google usa para ranking. Los de laboratorio son los que usas para diagnosticar y corregir.
Google Search Console
CampoInforme Core Web Vitals con datos de campo reales (CrUX) agrupados por URL. La fuente más importante porque usa datos reales de usuarios.
PageSpeed Insights
Campo + LabCombina datos de campo (CrUX) y datos de laboratorio (Lighthouse) en una sola vista. Esencial para diagnóstico por URL individual.
Lighthouse
LabAuditoría de laboratorio integrada en Chrome DevTools. Reproducible y detallada, pero no refleja condiciones reales de usuarios.
Chrome User Experience Report (CrUX)
CampoDataset público de Google con métricas reales de millones de usuarios. Base de los datos de campo en GSC y PSI.
Web Vitals Extension
LabExtensión de Chrome que muestra LCP, INP y CLS en tiempo real mientras navegas. Útil para diagnóstico rápido.
Los 5 errores más comunes que arruinan los CWV
Lazy load en la imagen hero
Colocar loading='lazy' en la imagen principal retrasa su carga porque el navegador espera al scroll. La imagen hero siempre debe cargarse con preload explícito.
Fix: Agregar <link rel='preload' as='image'> en el head para la imagen hero. Eliminar loading='lazy' del elemento LCP.
Fuentes web sin font-display: swap
Sin font-display: swap, el navegador espera la fuente web antes de mostrar texto. Cuando la fuente llega, el texto cambia de tamaño y desplaza el layout.
Fix: Agregar font-display: swap en todas las declaraciones @font-face. Usar size-adjust para reducir el shift entre fuente de sistema y fuente web.
Ads e iframes sin espacio reservado
Los bloques de publicidad que se insertan dinámicamente sin contenedor de tamaño fijo empujan el contenido existente hacia abajo.
Fix: Reservar espacio con min-height fijo o aspect-ratio en el contenedor del ad antes de que cargue.
Hidratación síncrona pesada
En aplicaciones React/Next.js, la hidratación síncrona bloquea el main thread durante segundos. Las interacciones durante ese período tienen INP muy alto.
Fix: Implementar selective hydration, usar React.lazy para componentes no críticos, o migrar a Partial Prerendering.
Imágenes sin dimensiones declaradas
Imágenes sin width y height en el HTML hacen que el navegador no sepa cuánto espacio reservar. Cuando carga la imagen, empuja el contenido.
Fix: Siempre declarar width y height en el elemento img. En Next.js, el componente Image lo hace automáticamente.
Guías detalladas por métrica
Largest Contentful Paint
Tiempo de carga percibida — el elemento visible más grande tarda en aparecer
Ver guía LCP →INPInteraction to Next Paint
Respuesta de la página a las interacciones del usuario (clicks, taps, teclas)
Ver guía INP →CLSCumulative Layout Shift
Estabilidad visual — cuánto se mueven los elementos en pantalla de forma inesperada
Ver guía CLS →¿Tus Core Web Vitals están en rojo en Google Search Console?
Un diagnóstico CWV Hipersigno identifica exactamente qué URLs tienen problemas, cuál es la causa raíz y qué fix tiene mayor impacto en LCP, INP o CLS. Sin reportes genéricos.
Última actualización: 2026-06-22 · Sistema: ATLAS D01-SEO · Autor: Andrés Castrejón