Core Web Vitals y Velocidad de Página: La Guía 2026

¿Qué Son los Core Web Vitals?

Los Core Web Vitals son las tres métricas clave que Google utiliza para medir la experiencia de usuario real en páginas web.

Se convirtieron en factor de posicionamiento en 2021. En 2026 importan más que nunca: Google sigue dando más peso a la experiencia de usuario con cada actualización.

Estas métricas no son solo una preocupación de "SEO técnico". Afectan directamente a las tasas de conversión. Una página lenta envía a los clientes potenciales directamente a la competencia.

Las Tres Métricas Principales

LCP — Largest Contentful Paint

Tiempo que tarda en hacerse visible el contenido principal de la página.

Cuando un usuario llega a tu página, ¿con qué rapidez se renderiza el elemento de contenido más grande — normalmente la imagen hero, un bloque de texto grande o un vídeo?

Factores que perjudican el LCP:

• Tiempo de respuesta del servidor lento (TTFB)
• CSS y JavaScript que bloquean el renderizado
• Imágenes y vídeos que cargan despacio
• Retrasos en el renderizado del lado del cliente

INP — Interaction to Next Paint

Mide la rapidez con la que la página responde a las interacciones del usuario.

INP sustituyó a FID (First Input Delay) en 2024. Mientras que FID solo capturaba la primera interacción, INP cubre todas las interacciones: clics, toques y entradas de teclado.

Factores que perjudican el INP:

• Tareas de JavaScript de larga duración
• Scripts de terceros pesados
• Operaciones que bloquean el hilo principal
• Tamaño de DOM excesivamente grande

CLS — Cumulative Layout Shift

Mide los desplazamientos inesperados del diseño mientras la página carga.

Lo has vivido: vas a hacer clic en un botón y la página salta, enviando tu clic a otro lugar. Eso es un problema de CLS.

Factores que perjudican el CLS:

• Imágenes y vídeos sin dimensiones explícitas
• Contenido insertado dinámicamente (anuncios, banners)
• Fuentes web que cargan tarde
• iframes sin tamaño definido

Cómo Medir los Core Web Vitals

Datos de Laboratorio (Simulados)

• Google PageSpeed Insights: Proporciona datos de laboratorio y de campo
• Lighthouse: Integrado en Chrome DevTools
• WebPageTest: Análisis detallado en cascada

Los datos de laboratorio se miden en un entorno controlado. Puede que no reflejen perfectamente la experiencia real de los usuarios, pero son ideales para identificar problemas.

Datos de Campo (Usuarios Reales)

• Google Search Console: El informe de CWV se basa en datos de usuarios reales
• Chrome UX Report (CrUX): Datos anónimos recopilados de usuarios de Chrome
• PageSpeed Insights: La sección "Datos de campo para esta URL"

Google utiliza los datos de campo para el posicionamiento. Aunque tus puntuaciones de laboratorio sean buenas, unos malos datos de campo seguirán perjudicando tu posición.

Optimización del LCP

Reducir el Tiempo de Respuesta del Servidor (TTFB)

El tiempo de respuesta del servidor es la base del LCP.

• Usa una CDN: Sirve contenido desde el servidor más cercano a tu usuario
• Caché del lado del servidor: Almacena en caché las consultas a la base de datos y la salida de la página
• Usa HTTP/2 o HTTP/3: Permite la carga paralela de recursos
• Objetivo TTFB: Por debajo de 800 ms

Optimizar Imágenes

Las imágenes son el elemento LCP en la mayoría de páginas.

• Usa WebP o AVIF — 25–50% más pequeñas que JPEG
• Imágenes responsivas: Usa los atributos srcset y sizes para servir el tamaño adecuado a cada dispositivo
• Carga diferida: Añade loading="lazy" a las imágenes que estén fuera del pliegue
• Precarga tu imagen LCP: <link rel="preload" as="image" href="hero.webp">
• Sírvelas desde una CDN: Imgix, Cloudinary o Cloudflare Images

Eliminar Recursos que Bloquean el Renderizado

Los archivos CSS y JavaScript pueden impedir que la página se renderice.

• Inserta el CSS crítico en línea: Coloca los estilos above-the-fold directamente en una etiqueta <style>
• Carga el CSS de forma asíncrona: media="print" onload="this.media='all'"
• Aplaza o carga JavaScript de forma asíncrona: <script defer>
• Elimina el CSS no utilizado: Usa PurgeCSS o una herramienta similar

Optimización de Fuentes

Las fuentes web pueden ralentizar seriamente el LCP.

• Usa font-display: swap — la fuente del sistema se muestra hasta que carga tu fuente web
• Precarga los archivos de fuentes: <link rel="preload" as="font" type="font/woff2">
• Carga solo los subconjuntos de caracteres que realmente uses
• Considera las fuentes del sistema cuando sea posible

Optimización del INP

Divide las Tareas de JavaScript Largas

Si el hilo principal del navegador está ocupado con tareas de más de 50 ms, no puede responder a las interacciones del usuario.

• Divide los grandes paquetes de JavaScript en partes más pequeñas
• Fragmenta las tareas largas usando requestIdleCallback o scheduler.yield()
• Mueve el trabajo a Web Workers: Procesamiento en segundo plano que se ejecuta independientemente del hilo principal

Audita los Scripts de Terceros

Analíticas, anuncios, widgets de chat en vivo, incrustaciones de redes sociales — cada uno compite por el tiempo del hilo principal.

• Mide el impacto de cada script
• Elimina todo lo que no sea esencial
• Carga los scripts restantes con defer o importaciones dinámicas
• Usa el patrón facade — por ejemplo, muestra una miniatura de marcador de posición en lugar de cargar un embed de YouTube inmediatamente

Reduce el Tamaño del DOM

Un DOM sobredimensionado ralentiza cada interacción.

• Evita más de 1.500 elementos DOM
• Mantén la profundidad de anidamiento por debajo de 32 niveles
• Elimina los divs contenedores innecesarios
• Usa desplazamiento virtual para listas largas — renderiza solo los elementos visibles en la ventana gráfica

Optimización del CLS

Establece Dimensiones Explícitas en Imágenes y Vídeos

Añade los atributos width y height a cada elemento <img> y <video>.

<img src="foto.webp" width="800" height="600" alt="Descripción">

El navegador reserva el espacio antes de que cargue la imagen, por lo que el diseño nunca se desplaza.

Para un enfoque moderno, también puedes usar la propiedad CSS aspect-ratio.

Anuncios y Contenido Dinámico

Los anuncios son el mayor enemigo del CLS.

• Reserva espacio fijo para los slots de anuncios usando min-height
• Evita que el contenedor colapse cuando no hay anuncio
• Prefiere las posiciones de anuncio fijas

Prevenir el Desplazamiento por Fuentes

Cuando carga una fuente web, las dimensiones del texto pueden cambiar y provocar un desplazamiento del diseño.

• Usa font-display: swap u optional
• Ajusta las métricas de la fuente a tu fuente del sistema de respaldo usando size-adjust
• Precarga las fuentes en el <head>

Optimización General de la Velocidad de Página

Estrategia de Caché

Una configuración de caché sólida acelera drásticamente las visitas repetidas.

• Caché del navegador: Configura correctamente las cabeceras Cache-Control
• Service Worker: Permite el acceso sin conexión y un control de caché detallado
• Caché de CDN: Almacena en caché los archivos estáticos en servidores perimetrales

Usa caché de larga duración (1 año) para activos estáticos como CSS, JS e imágenes. Usa caché de corta duración o sin caché para el HTML.

Reducir las Solicitudes HTTP

Cada solicitud HTTP añade latencia.

• Empaqueta los archivos CSS y JavaScript
• Usa conjuntos de iconos SVG en lugar de imágenes individuales
• Elimina las solicitudes innecesarias a terceros
• Usa dns-prefetch y preconnect para acortar el tiempo de resolución DNS

Compresión

• Usa compresión Gzip o Brotli — reduce el tamaño de archivo entre un 60–80%
• Brotli comprime entre un 15–20% mejor que Gzip
• Activa la compresión en la configuración de tu servidor

Formatos de Imagen Modernos

Establece una estrategia de respaldo para cada formato de imagen.

Presupuesto de Rendimiento

La forma más fiable de proteger la velocidad de tu página es definir un presupuesto de rendimiento desde el principio.

Ejemplo de presupuesto de rendimiento:

• Tamaño total de la página: < 1,5 MB
• JavaScript: < 300 KB (comprimido)
• Imágenes: < 500 KB
• LCP: < 2 segundos
• INP: < 150 ms
• Solicitudes HTTP: < 50

Integra este presupuesto en tu pipeline CI/CD y bloquea los despliegues que lo superen.

Rendimiento en Móvil

Los dispositivos móviles tienen procesadores más lentos y conexiones de red más lentas que los ordenadores de escritorio.

Google utiliza la indexación mobile-first. Si tu rendimiento en móvil es deficiente, también sufren tus posiciones en escritorio.

• Prueba con una conexión 3G
• Prueba en dispositivos de gama baja usando la limitación de velocidad de Chrome DevTools
• Considera AMP o frameworks orientados al rendimiento

Core Web Vitals y SEO

Google usa los CWV como señal de posicionamiento — ¿pero qué significa eso en la práctica?

Los CWV por sí solos no te llevarán al puesto uno. Pero cuando dos páginas están igualadas en calidad de contenido y perfil de backlinks, los CWV pueden ser el factor decisivo.

Los efectos indirectos importan igual:

• Página rápida → menor tasa de rebote
• Gran UX → mayor engagement
• Mayor engagement → señales de usuario más fuertes
• Señales más fuertes → mejores posiciones

Este efecto dominó hace que los CWV sean aún más valiosos que un simple factor de posicionamiento.

E-Commerce y Velocidad de Página

En los sitios de e-commerce, la velocidad de página se traduce directamente en ingresos.

• Una mejora del 1% en velocidad → ~2% de aumento en conversiones (de media)
• Páginas más lentas de 3 segundos → el 53% de los visitantes abandona
• Las tasas de conversión en móvil ya son la mitad que en escritorio — mejorar la velocidad cierra esa brecha

Monitorización Continua de los CWV

Optimizar una vez no es suficiente. El nuevo contenido, los plugins y las actualizaciones pueden degradar el rendimiento.

Herramientas para el seguimiento continuo:

• Google Search Console — Informe de CWV
• PageSpeed Insights — Análisis a nivel de página
• Extensión de Chrome Web Vitals — Medición en tiempo real
• Lighthouse CI — Pruebas automatizadas en tu pipeline

Rastrear manualmente los problemas de SEO técnico es lento y propenso a errores. DexterGPT rastrea tu sitio automáticamente, detecta problemas de CWV y velocidad de página, y ofrece recomendaciones accionables.

Conclusión

Los Core Web Vitals y la velocidad de página forman la base técnica del SEO.

Optimizar LCP, INP y CLS mejora tanto la experiencia de usuario como las posiciones — y tiene un impacto directo y medible en las conversiones.

El rendimiento no es una tarea puntual. Es un proceso continuo. Mide, optimiza, vuelve a medir. Nunca rompas el ciclo.

Nuestro checklist de SEO técnico cubre en detalle todo lo que va más allá de la velocidad de página.