Core Web Vitals: Guía Completa de Optimización para 2026

¿Qué son los Core Web Vitals?

Los Core Web Vitals (CWV) son un subconjunto de las Web Vitals de Google: métricas objetivas que cuantifican la experiencia real de los usuarios al cargar e interactuar con una página web. Google los introdujo oficialmente como factor de posicionamiento a mediados de 2021 dentro de la actualización Page Experience. Desde entonces han evolucionado: en marzo de 2024 FID fue reemplazado definitivamente por INP, según el anuncio de Google en web.dev. El informe de Search Console se basa en datos de campo del CrUX (Chrome UX Report), no en pruebas de laboratorio de Lighthouse.

En esencia, los CWV responden a tres preguntas sobre la experiencia de usuario:

• ¿Qué tan rápido se carga el contenido principal? — LCP
• ¿Qué tan rápido responde la página a las interacciones? — INP
• ¿Cuánto se mueve el contenido mientras carga? — CLS

Lo que distingue a los CWV de otras métricas de rendimiento es que están basados en datos reales de usuarios de Chrome (datos de campo), no solo en simulaciones de laboratorio. Esto los hace más representativos de lo que tus visitantes realmente experimentan, y por lo mismo más difíciles de manipular artificialmente.

Para una estrategia SEO sólida que vaya más allá del rendimiento técnico, consulta nuestra guía completa de SEO técnico donde abordamos desde rastreo e indexación hasta datos estructurados.

LCP: Largest Contentful Paint — Qué es, umbrales y cómo mejorarlo

¿Qué mide el LCP?

El Largest Contentful Paint mide el tiempo que tarda en renderizarse el elemento de contenido más grande visible en el viewport inicial. Ese elemento puede ser una imagen, un bloque de texto, un video con poster, o un elemento de fondo CSS. Google considera que el LCP es el proxy más confiable para la percepción subjetiva de "la página ya cargó".

Umbrales de LCP

• Bueno: 2.5 segundos o menos
• Necesita mejora: Entre 2.5 y 4.0 segundos
• Deficiente: Más de 4.0 segundos

Causas más comunes de LCP lento

1. Imágenes sin optimizar (formatos legacy como JPEG/PNG sin conversión a WebP o AVIF)
2. Imagen hero sin atributo fetchpriority="high" ni preload
3. JavaScript bloqueante en el <head> que retrasa el renderizado
4. Time to First Byte (TTFB) alto por hosting lento o ausencia de CDN
5. CSS no crítico que bloquea el render path

Cómo mejorar el LCP

Prioriza el recurso LCP. Agrega <link rel="preload" as="image"> para la imagen hero y añade el atributo fetchpriority="high" directamente en la etiqueta <img>. Esto le indica al navegador que descargue ese recurso antes que cualquier otro.

Convierte imágenes a formatos modernos. Según Google, las imágenes WebP con pérdida pesan entre 25 y 34 % menos que un JPEG comparable. AVIF suele comprimir todavía más, aunque su soporte en navegadores antiguos es parcial.

Elimina el render-blocking. Mueve los scripts no críticos al final del <body> o usa defer/async. Inlinea el CSS crítico (above the fold) y carga el resto de forma asíncrona.

Mejora el TTFB. Usa un CDN con PoPs cerca de tu audiencia principal. Si tu sitio está en WordPress, LiteSpeed Cache o WP Rocket con object caching reducen el TTFB dramáticamente en hosting compartido.

Si el problema de fondo es la plataforma, vale la pena rehacer el sitio con el rendimiento como requisito: así planteo el desarrollo web orientado a velocidad.

INP: Interaction to Next Paint — El reemplazo de FID

Por qué INP reemplazó a FID

First Input Delay (FID) medía únicamente el retraso del primer evento de entrada, ignorando todos los clics, taps y pulsaciones de teclado posteriores. En la práctica, una página podía tener un FID excelente pero ser completamente insensible a interacciones durante el scroll o después de cargar contenido dinámico. INP corrige ese punto ciego midiendo la latencia de todas las interacciones a lo largo de la sesión del usuario y reportando el percentil 98 de ellas.

¿Qué mide exactamente el INP?

INP captura el tiempo total desde que el usuario realiza una interacción (click, tap, keypress) hasta que el navegador pinta el siguiente frame que refleja esa interacción. Incluye tres fases: input delay (tiempo de espera antes de que el manejador de eventos se ejecute), processing time (tiempo de ejecución del evento) y presentation delay (tiempo de renderizado del siguiente frame).

Umbrales de INP

• Bueno: 200 milisegundos o menos
• Necesita mejora: Entre 200 y 500 milisegundos
• Deficiente: Más de 500 milisegundos

Cómo mejorar el INP

Divide las tareas largas (Long Tasks). El navegador no puede responder a eventos mientras ejecuta una tarea JavaScript de más de 50ms. Usa scheduler.yield() (en los navegadores que lo soportan) o setTimeout(fn, 0) para ceder el control al navegador entre bloques de trabajo.

Reduce el trabajo en los manejadores de eventos. El manejador del evento debe hacer lo mínimo indispensable. Pospón actualizaciones no críticas al DOM con requestAnimationFrame o requestIdleCallback.

Minimiza el re-layout forzado. Evita leer propiedades de layout (offsetWidth, getBoundingClientRect) inmediatamente después de escribir en el DOM dentro del mismo evento. Eso fuerza un recalculo sincrónico costoso.

Optimiza los scripts de terceros. Los scripts de analítica, chat en vivo y publicidad suelen ser las fuentes más importantes de Long Tasks. Cárgalos con type="module", defer, o mediante un facade que difiera la carga hasta la primera interacción del usuario.

CLS: Cumulative Layout Shift — Estabilidad visual

¿Qué mide el CLS?

Cumulative Layout Shift cuantifica el movimiento inesperado de elementos durante la carga de una página. Cada vez que un elemento visible se mueve sin que el usuario lo haya provocado (un anuncio que empuja el texto hacia abajo, una imagen que aparece sin dimensiones reservadas), se genera una puntuación de layout shift. El CLS acumula todas esas puntuaciones usando una ventana deslizante de 5 segundos, reportando la ventana con mayor suma.

Umbrales de CLS

• Bueno: 0.1 o menos
• Necesita mejora: Entre 0.1 y 0.25
• Deficiente: Más de 0.25

Causas frecuentes de CLS alto

• Imágenes sin atributos width y height definidos en el HTML
• Anuncios, embeds y iframes sin dimensiones reservadas
• Fuentes web que producen FOUT (Flash of Unstyled Text) severo
• Contenido dinámico insertado sobre contenido existente (banners, notificaciones)
• Animaciones CSS que modifican propiedades que afectan el layout (top, left, margin)

Cómo mejorar el CLS

Define siempre width y height en las imágenes. El navegador moderno usa esas dimensiones para reservar el espacio antes de que la imagen cargue, eliminando el desplazamiento. Si usas CSS responsive (max-width: 100%), el ratio de aspecto se preserva automáticamente.

Reserva espacio para anuncios. Establece un contenedor con altura mínima fija para cada slot publicitario, especialmente en posiciones above-the-fold. Un anuncio que no carga no debe colapsar el espacio; uno que sí carga no debe empujar el contenido.

Usa font-display: optional o swap con cuidado. optional evita el FOUT completamente (si la fuente no está lista al primer render, usa el fallback permanentemente). swap reduce el CLS si calibras el fallback font con métricas similares usando la propiedad size-adjust.

Prefiere transform y opacity para animaciones. Estas propiedades se ejecutan en el compositor del navegador sin disparar recalculos de layout, eliminando shifts involuntarios.

Tabla de umbrales de Core Web Vitals 2026

Nota importante: Google evalúa el estado de una URL usando el percentil 75 de sus datos de campo. Esto significa que el 75% de tus usuarios deben experimentar la métrica dentro del umbral "Bueno" para que la URL sea calificada como tal. No basta con que el promedio sea bueno.

Cómo medir tus Core Web Vitals: PSI, GSC, Lighthouse y CrUX

PageSpeed Insights (PSI)

PageSpeed Insights combina datos de laboratorio de Lighthouse con datos de campo del CrUX en una sola interfaz. Es el punto de partida ideal para diagnosticar una URL específica. Ingresa la URL en pagespeed.web.dev y presta atención primero a la sección "Datos de campo" (si hay suficientes visitas reales) y luego usa los diagnósticos de laboratorio para identificar los recursos problemáticos.

Google Search Console — Informe de Core Web Vitals

El informe de Core Web Vitals de GSC muestra el estado de CWV a nivel de dominio, agrupando las URLs por estado (Bueno / Necesita mejora / Deficiente) tanto en móvil como en escritorio. Es la vista más útil para SEO porque usa datos de campo de usuarios reales. Revísala semanalmente y filtra por "Móvil" ya que Google indexa mobile-first.

Lighthouse (modo local)

Lighthouse corre en tu navegador (DevTools > Lighthouse) o como CLI (npm install -g lighthouse). Proporciona datos de laboratorio controlados: útiles para debugging porque puedes reproducirlos en condiciones idénticas. No reemplaza a los datos de campo pero es indispensable para ciclos de desarrollo rápido, ya que no depende de tráfico real.

CrUX (Chrome UX Report)

CrUX es la fuente primaria de datos de campo de Google. Puedes consultarlo directamente a través de BigQuery (para análisis a escala), la CrUX API (gratuita, con un límite de 150 consultas por minuto por proyecto de Google Cloud) o el CrUX Dashboard en Looker Studio. La ventaja de CrUX es que puedes monitorear tendencias históricas y comparar tu dominio contra competidores del mismo sector.

Web Vitals Extension

La extensión oficial de Chrome "Web Vitals" muestra LCP, INP y CLS en tiempo real mientras navegas cualquier página. Es útil para una verificación rápida en campo sin abrir DevTools.

Impacto real de los Core Web Vitals en el posicionamiento

La pregunta que recibo con mayor frecuencia de clientes es directa: ¿cuántos lugares pierdo si mis CWV están en rojo? La respuesta honesta es que los CWV son un desempate, no el factor dominante. Google ha confirmado repetidamente que el contenido relevante con autoridad suficiente puede superar a contenido de menor calidad con CWV perfectos. Sin embargo, ese escenario aplica principalmente en búsquedas competitivas donde la relevancia ya está equiparada.

Donde el impacto es más tangible es en tres áreas concretas:

1. Desempate en búsquedas reñidas. Cuando varias páginas responden igual de bien, la experiencia de página es una de las señales que Google considera para ordenarlas.
2. Conversión. Una página que tarda en mostrar el contenido o que mueve los botones mientras carga pierde visitas y contactos, aunque mantenga la posición.
3. Base técnica para la IA. Los buscadores con IA necesitan descargar y leer la página; un sitio ligero, estable y con HTML completo facilita que lo rastreen y lo citen. Lo explico en la guía de SEO para IA.

Si necesitas una auditoría integral que evalúe CWV en el contexto de tu estrategia de posicionamiento completa, visita nuestros servicios de consultoría SEO o contáctame directamente para una evaluación inicial sin costo.

Checklist de optimización de Core Web Vitals para 2026

LCP — Lista de verificación

• Identifica el elemento LCP de cada plantilla principal (home, artículo, producto) con Lighthouse o WebPageTest
• Agrega <link rel="preload" as="image"> para la imagen hero en el <head>
• Añade fetchpriority="high" en el <img> del elemento LCP
• Convierte imágenes a WebP (mínimo) o AVIF con fallback JPEG
• Configura CDN con caché de assets estáticos (mínimo 1 año de TTL)
• Mide TTFB: debe ser idealmente 0.8 s o menos, según web.dev, desde los principales mercados objetivo
• Elimina o difiere scripts de terceros bloqueantes en el head
• Inlinea el CSS crítico (above the fold) en el HTML

INP — Lista de verificación

• Audita Long Tasks con el panel Performance de DevTools (filtra por tareas > 50ms)
• Usa scheduler.yield() para dividir trabajo pesado en chunks
• Mueve lógica no crítica de manejadores de eventos a requestIdleCallback
• Carga scripts de terceros (analytics, ads, chat) con defer o facade pattern
• Evita lecturas de layout forzadas sincrónicas en manejadores de eventos
• Valida INP en móvil de gama media (no solo en tu laptop de desarrollo)

CLS — Lista de verificación

• Todos los elementos <img> tienen atributos width y height explícitos
• Los slots de publicidad tienen altura mínima reservada con CSS (min-height)
• Las fuentes web usan font-display: optional o fallback con size-adjust calibrado
• Los embeds de video (YouTube, Vimeo) tienen contenedor con ratio de aspecto (aspect-ratio: 16/9)
• Las animaciones CSS solo modifican transform y opacity
• Banners de cookies y notificaciones se insertan debajo del fold, nunca encima del contenido principal

Monitoreo continuo

• Configura alertas en GSC para caídas en el informe de Core Web Vitals
• Integra la CrUX API en tu dashboard de métricas (Looker Studio o similar)
• Ejecuta Lighthouse CI en tu pipeline de CI/CD para detectar regresiones antes de deploy
• Revisa CWV después de cada actualización mayor de plugins, temas o frameworks

Herramientas esenciales para Core Web Vitals en 2026

• PageSpeed Insights — pagespeed.web.dev. Diagnóstico rápido de campo + laboratorio por URL. Gratuito.
• Google Search Console — Informe de Core Web Vitals con datos de campo a nivel dominio. Requiere propiedad verificada.
• Lighthouse CLI — Auditorías automatizadas de laboratorio integrables en CI/CD. npm install -g lighthouse.
• WebPageTest — webpagetest.org. Filmstrip de carga, waterfall avanzado, pruebas desde múltiples ubicaciones. La versión Pro ofrece comparativas y scripting avanzado.
• CrUX API — Datos de campo por URL u origen, agregados sobre los últimos 28 días. Clave gratuita en Google Cloud Console.
• web-vitals.js — Librería oficial de Google, muy ligera, para capturar CWV en producción y enviarlos a tu analytics. npm install web-vitals.
• Lighthouse CI (LHCI) — Servidor para almacenar histórico de auditorías de laboratorio y detectar regresiones en PRs. Open source.
• Treo Site Speed — Dashboard de CrUX con comparativas históricas y benchmarks por industria. Plan gratuito disponible.
• DebugBear — Monitoreo de CWV de campo + laboratorio con alertas por email/Slack. Especialmente útil para agencias con múltiples clientes.
• Chrome DevTools — Panel Performance — Para debugging granular de Long Tasks, layout shifts y waterfall de recursos. Sin costo, integrado en Chrome.

Comentarios

Los comentarios son moderados antes de publicarse.

¿Necesitas ayuda con el SEO de tu negocio?

Auditoría SEO gratuita + plan estratégico personalizado. Respuesta en menos de 24 h.