Core Web Vitals en 2026: Qué son, cómo medirlos y cómo mejorarlos para rankear mejor en Google
Guía completa sobre Core Web Vitals: qué mide Google, cómo afectan tu posicionamiento, herramientas para auditarlos y técnicas concretas para optimizarlos.
En 2021, Google hizo algo que cambió las reglas del SEO técnico: convirtió la velocidad y la experiencia de usuario en factores oficiales de ranking. No como una promesa vaga de “los sitios rápidos rankeán mejor”, sino como métricas concretas, medibles y públicas que ahora determinan en parte tu posición en los resultados de búsqueda.
A esas métricas las llamó Core Web Vitals.
Si tienes un sitio web y no sabes qué son o cuál es tu score actual, probablemente estás perdiendo posiciones frente a competidores que sí lo saben. Esta guía te explica todo lo que necesitas entender y hacer.
¿Qué son los Core Web Vitals?
Los Core Web Vitals son un conjunto de métricas que Google usa para medir la experiencia real del usuario al cargar y usar un sitio web. No miden solo la velocidad bruta, sino aspectos específicos de cómo se siente la interacción.
En 2026, las tres métricas principales son:
LCP — Largest Contentful Paint
Mide cuánto tiempo tarda en aparecer el elemento visual más grande de la página. Generalmente es una imagen hero, un banner o un bloque de texto principal.
¿Por qué importa? Porque es el momento en que el usuario percibe que la página “ya cargó”. Si ese elemento tarda mucho, la percepción de lentitud es inmediata aunque el resto de la página esté cargando en el fondo.
| Score | Tiempo |
|---|---|
| Bueno | Menos de 2.5 segundos |
| Necesita mejora | 2.5 a 4 segundos |
| Malo | Más de 4 segundos |
INP — Interaction to Next Paint
Reemplazó al FID (First Input Delay) en 2024. Mide cuánto tarda la página en responder visualmente cuando el usuario hace algo: hace clic en un botón, escribe en un campo, selecciona un menú.
¿Por qué importa? Porque una página puede cargar rápido pero sentirse “pesada” o “laggy” cuando el usuario intenta interactuar. Esa sensación destruye la confianza.
| Score | Tiempo |
|---|---|
| Bueno | Menos de 200ms |
| Necesita mejora | 200 a 500ms |
| Malo | Más de 500ms |
CLS — Cumulative Layout Shift
Mide cuánto se “mueve” el contenido mientras la página termina de cargar. Todos hemos experimentado esto: estás a punto de hacer clic en algo y de repente un banner carga encima y haces clic en lo incorrecto.
¿Por qué importa? Porque un CLS alto genera errores de clic accidentales y una experiencia frustrante, especialmente en mobile.
| Score | Valor |
|---|---|
| Bueno | Menos de 0.1 |
| Necesita mejora | 0.1 a 0.25 |
| Malo | Más de 0.25 |
¿Cómo afectan los Core Web Vitals a tu posicionamiento en Google?
Google usa los Core Web Vitals como uno de los factores en su algoritmo de ranking. Esto significa que dos páginas con contenido de calidad similar pueden terminar en posiciones diferentes si una tiene mejores métricas de experiencia de usuario que la otra.
El impacto no es el más grande dentro de los factores de ranking (el contenido relevante y los backlinks siguen siendo más determinantes), pero sí es un factor de desempate significativo. En nichos competitivos, donde varios sitios tienen contenido de calidad similar, los Core Web Vitals pueden ser la diferencia entre aparecer en el top 3 o en la segunda página.
Además, el impacto indirecto puede ser mayor que el directo: un sitio con malos Core Web Vitals tiene mayor tasa de rebote, menor tiempo en página y menos páginas por sesión. Google interpreta esas señales de comportamiento como indicios de que el sitio no satisface la búsqueda del usuario, y baja su posicionamiento.
Herramientas para medir tus Core Web Vitals
Antes de optimizar, necesitas saber exactamente en qué estás fallando. Estas son las herramientas que usamos:
Google PageSpeed Insights
La herramienta oficial de Google. Ingresa la URL de tu página y te da el score separado por desktop y mobile, junto con los valores exactos de cada métrica y diagnósticos específicos de los problemas encontrados.
Lo más valioso: Muestra tanto datos de laboratorio (simulación) como datos de campo reales (basados en usuarios reales que visitaron tu sitio), cuando hay suficiente tráfico para generar esa data.
Google Search Console
Si tienes tu sitio verificado en Search Console, en la sección “Experiencia” > “Core Web Vitals” puedes ver cómo están tus páginas clasificadas según los datos reales de tus usuarios, con historial de evolución en el tiempo.
Lo más valioso: Es la única fuente que te dice cómo están tus páginas según datos reales de campo, no simulaciones.
GTmetrix
Complementa a PageSpeed Insights con una cascada de carga detallada que muestra exactamente qué recurso (imagen, script, fuente, CSS) está tardando más en cargar y por qué.
Lo más valioso: La cascada de carga (waterfall) es insustituible para diagnósticos técnicos profundos.
Lighthouse (en Chrome DevTools)
Disponible directamente en el navegador Chrome (F12 > pestaña Lighthouse). Permite hacer auditorías locales sin depender de conexión a una herramienta externa.
Lo más valioso: Puedes simular condiciones de red lentas y dispositivos móviles para ver exactamente cómo se comporta tu sitio en condiciones adversas.
Técnicas concretas para mejorar cada métrica
Cómo mejorar el LCP
1. Optimizar la imagen hero
El elemento LCP más común es una imagen grande al inicio de la página. Para optimizarla:
- Convierte a WebP o AVIF. Son formatos modernos que pesan 30-50% menos que JPG con la misma calidad visual.
- Agrega el atributo
fetchpriority="high"a la imagen hero. Le dice al navegador que cargue esa imagen con prioridad máxima. - Nunca uses lazy loading en la imagen hero. Lazy loading es para imágenes que están debajo del fold.
<img
src="/hero.webp"
alt="descripción"
fetchpriority="high"
width="1200"
height="600"
>2. Precargar recursos críticos
El navegador necesita saber de antemano qué recursos son críticos para la carga inicial:
<link rel="preload" as="image" href="/hero.webp">
<link rel="preload" as="font" href="/fonts/principal.woff2" crossorigin>3. Eliminar CSS que bloquea el render
Si cargas hojas de estilo grandes que el navegador debe procesar antes de mostrar cualquier contenido, el LCP sufre. La solución es identificar el CSS crítico (el necesario para el contenido visible sin scroll) y cargarlo inline, dejando el resto para después.
Cómo mejorar el INP
El INP alto generalmente indica demasiado JavaScript ejecutándose en el hilo principal del navegador.
1. Reducir JavaScript innecesario
Cada framework, librería y plugin que agregas a un sitio suma código que el navegador debe parsear y ejecutar. En 2026, el estándar debería ser: si no es estrictamente necesario, no va.
Herramientas como Astro permiten enviar cero JavaScript al navegador por defecto, hidratando solo los componentes que realmente necesitan interactividad. El resultado es un INP naturalmente bajo porque hay menos código compitiendo por el hilo principal.
2. Diferir scripts de terceros
Los scripts de analytics, chat, publicidad y redes sociales son notoriamente pesados y bloquean el hilo principal. Cárgalos con defer o async para que no interfieran con la interacción inicial:
<script src="analytics.js" defer></script>3. Dividir tareas largas
Si tienes código JavaScript que ejecuta operaciones largas (más de 50ms en el hilo principal), el navegador no puede responder a interacciones del usuario mientras tanto. La solución es dividir esas tareas en partes más pequeñas usando técnicas como requestIdleCallback o setTimeout para ceder el control al navegador entre operaciones.
Cómo mejorar el CLS
El CLS alto casi siempre tiene causas identificables:
1. Definir dimensiones en imágenes y videos
El problema más común: el navegador no sabe cuánto espacio reservar para una imagen hasta que termina de cargarla. Cuando carga, empuja el contenido de abajo.
La solución es siempre definir width y height en cada imagen:
<img src="producto.webp" width="400" height="300" alt="descripción">O usar aspect-ratio en CSS para reservar el espacio correcto aunque la imagen aún no haya cargado.
2. Evitar contenido que se inserta dinámicamente sobre contenido existente
Banners de cookies, pop-ups, barras de notificación que aparecen después de la carga inicial y desplazan el contenido. Si necesitas mostrar ese tipo de elementos, resérvales espacio desde el inicio o muéstralos en una posición fija que no desplace el contenido.
3. Cargar fuentes con font-display: swap
Cuando una fuente personalizada tarda en cargar, el navegador puede mostrar un texto invisible hasta que llega (FOIT) o cambiarlo desde una fuente de sistema (FOUT). Ambos casos generan CLS.
@font-face {
font-family: 'MiFuente';
src: url('/fonts/mifuente.woff2') format('woff2');
font-display: swap;
}Edge Computing: la ventaja estructural de velocidad
Más allá de optimizaciones puntuales, la arquitectura de despliegue afecta fundamentalmente la velocidad.
Un servidor tradicional en un datacenter en Miami responde más lento a un usuario en San José que un servidor en un datacenter regional. La latencia física es real.
Las plataformas de Edge Computing como Cloudflare Pages, Vercel Edge o Netlify Edge distribuyen tu sitio en decenas de servidores alrededor del mundo y sirven el contenido desde el nodo más cercano al usuario. Para un visitante en Costa Rica, eso puede significar la diferencia entre 400ms y 50ms de latencia de red.
Es una de las optimizaciones de mayor impacto con menor complejidad de implementación, especialmente para sitios con tráfico geográficamente distribuido.
La arquitectura que usamos en NmSoftwareLab
En NmSoftwareLab, hemos desarrollado una metodología para construir sitios que dominan las Core Web Vitals desde el primer día:
Framework base: Astro — Genera HTML estático por defecto, enviando cero JavaScript al navegador excepto donde es estrictamente necesario. Es estructuralmente más rápido que React, Next.js o Vue para contenido mayormente estático.
Imágenes: AVIF + WebP con fallback — Pipeline automatizado de optimización de imágenes con formatos de última generación, lazy loading inteligente y dimensiones siempre definidas.
Fuentes: Variable fonts + preload — Una sola fuente variable reemplaza múltiples archivos de fuentes estáticas, reduciendo el número de requests y el peso total.
CSS: Critical CSS inline — El CSS necesario para el contenido visible sin scroll se carga inline en el HTML. El resto se carga de forma diferida para no bloquear el render.
Despliegue: Edge global — Todos nuestros proyectos se despliegan en redes de edge computing con presencia global, garantizando baja latencia para usuarios en cualquier ubicación.
El resultado son scores de 95-100 en PageSpeed Insights de forma consistente, no como logro puntual sino como estándar de entrega.
¿Vale la pena invertir en esto?
La respuesta corta: sí, siempre que tengas una estrategia de SEO activa o pagues por publicidad para traer tráfico.
Si estás invirtiendo en anuncios para traer visitantes a tu sitio y esos visitantes tienen una mala experiencia por lentitud, estás pagando para llevar gente a una tienda con mala atención. Es dinero tirado.
Si estás tratando de posicionarte orgánicamente en Google, ignorar los Core Web Vitals significa competir con una mano atada a la espalda frente a competidores que sí los tienen optimizados.
¿Quieres saber cómo están los Core Web Vitals de tu sitio y qué impacto tienen en tu negocio? Hablemos. Hacemos auditorías de rendimiento completas donde analizamos cada métrica, identificamos los cuellos de botella y te damos un plan de acción concreto y priorizado.
¿Listo para escalar tu producto?
Diseñamos y desarrollamos soluciones digitales que convierten usuarios en clientes leales.