Core Web Vitals: las 3 métricas que deciden tu ranking en Google

Desde 2021, Google mide la experiencia del usuario de tu sitio usando 3 métricas específicas llamadas Core Web Vitals. Si tus números son malos, Google te posiciona más abajo — incluso si tu contenido es excelente.

Este post explica las 3 métricas sin jerga técnica, cómo medirlas gratis, y qué hacer si tu sitio falla.

Qué son los Core Web Vitals

Google quiere mostrar sitios que son rápidos, estables y responsivos. En vez de pedirles a los diseñadores que adivinen qué significa eso, definió 3 métricas medibles:

1. LCP — Largest Contentful Paint (velocidad de carga)
2. CLS — Cumulative Layout Shift (estabilidad visual)
3. INP — Interaction to Next Paint (responsividad)

Cada métrica tiene un rango "bueno", "aceptable" y "malo". Google recompensa a los sitios con todos los 3 verdes.

LCP — velocidad de carga

Qué mide: cuánto tarda en aparecer el elemento más grande visible de la página (usualmente la imagen del hero o el título principal).

Rangos:

• 🟢 Bueno: menos de 2.5 segundos
• 🟡 Aceptable: 2.5 – 4.0 segundos
• 🔴 Malo: más de 4.0 segundos

Por qué importa: si tu página tarda 6 segundos en mostrar algo, el 53% de usuarios ya se fue. Google ve esa señal y asume que tu sitio es malo.

Causas comunes de LCP malo:

• Imágenes enormes sin optimizar (fotos de 4MB directamente del móvil)
• Hosting lento (shared hosting barato en servidor saturado)
• JavaScript bloqueante que impide el render
• Demasiados plugins cargando al mismo tiempo

Cómo arreglarlo:

• Optimizar imágenes (WebP/AVIF, next/image, tamaños apropiados)
• Lazy-load imágenes debajo del fold
• Quitar plugins innecesarios
• Migrar a un framework moderno (Next.js) que pre-renderiza estáticamente

CLS — estabilidad visual

Qué mide: cuánto se "mueven" los elementos de la página mientras carga. Si la página salta porque una imagen tardó en cargar y empujó el texto hacia abajo, eso es CLS alto.

Rangos:

• 🟢 Bueno: menos de 0.1
• 🟡 Aceptable: 0.1 – 0.25
• 🔴 Malo: más de 0.25

Por qué importa: ¿alguna vez has ido a hacer clic en un botón y de repente salta a otra posición porque un banner apareció arriba? Eso es CLS malo. Es frustrante y Google lo sabe.

Causas comunes:

• Imágenes sin width y height especificados (el navegador no sabe cuánto espacio reservar)
• Fuentes web que cargan después y cambian el tamaño del texto (FOIT/FOUT)
• Anuncios que aparecen e insertan contenido dinámico
• Pop-ups que empujan el contenido

Cómo arreglarlo:

• Siempre especificar width + height en todas las imágenes
• Usar font-display: swap con precarga de fuentes
• Reservar espacio para anuncios con contenedores de tamaño fijo
• Evitar inserciones dinámicas arriba del contenido

INP — responsividad

Qué mide: cuánto tarda tu sitio en responder cuando el usuario hace clic, toca o escribe algo. INP reemplazó a FID (First Input Delay) como métrica oficial en marzo de 2024.

Rangos:

• 🟢 Bueno: menos de 200ms
• 🟡 Aceptable: 200 – 500ms
• 🔴 Malo: más de 500ms

Por qué importa: un sitio que tarda medio segundo en responder a un clic se siente "roto" aunque técnicamente funcione.

Causas comunes:

• JavaScript pesado bloqueando el hilo principal
• Event handlers que hacen trabajo sincrónico pesado
• Animaciones corriendo en el hilo principal en vez de GPU
• Bundles JS enormes (300KB+ en la página inicial)

Cómo arreglarlo:

• Code splitting (cargar JS bajo demanda)
• Mover trabajo pesado a Web Workers
• Usar requestIdleCallback para tareas no críticas
• Revisar bundles con herramientas como @next/bundle-analyzer

Cómo medir tus Core Web Vitals (gratis)

Tres herramientas gratuitas:

1. PageSpeed Insights

Ve a pagespeed.web.dev. Ingresa tu URL. Te da:

• Score general (0–100)
• LCP, CLS, INP específicos
• Sugerencias concretas para mejorar

Haz esto primero. Es la herramienta que Google usa para ranquear, así que sus números son los que importan.

2. Google Search Console

Search Console → "Core Web Vitals" en el menú lateral. Te muestra:

• Qué URLs están fallando
• Cuántas veces fallaron en los últimos 28 días
• Tendencia histórica

Esta es la fuente definitiva de cómo Google realmente ve tu sitio en usuarios reales (no en un test sintético).

3. Chrome DevTools Lighthouse

En Chrome, abre DevTools (F12) → pestaña "Lighthouse" → Generate report. Es útil para debugear mejoras específicas antes de desplegar a producción.

Qué hacer si tus números son malos

Prioridad:

1. Primero LCP. Tiene el mayor impacto en percepción de usuario. Si tu LCP es 8 segundos, arregla eso antes que nada.
2. Después CLS. Relativamente fácil de arreglar (añadir dimensiones a imágenes, precargar fuentes).
3. Finalmente INP. Más difícil — requiere analizar tu JavaScript.

Para un sitio WordPress promedio, la mejora de Core Web Vitals puede tomar 20–40 horas de trabajo técnico. Para un sitio Next.js bien construido desde el principio, los 3 están verdes por defecto.

Nuestro estándar

Cada sitio que construimos en SoftInWeb debe tener 90+ en PageSpeed Insights en móvil antes de lanzar. No es opcional — es parte del entregable. Si no llega ahí, no lo entregamos.

Si tu sitio actual tiene Core Web Vitals en rojo, escríbenos para una auditoría gratis — te damos los 3 cambios de mayor impacto que puedes hacer esta semana.