Core Web Vitals: de métricas técnicas a factor de ranking
Desde 2021, Google usa las Core Web Vitals como señal de ranking. Esto convierte el rendimiento web de un tema puramente técnico a un factor directo de visibilidad en buscadores. Si tus Core Web Vitals son malos, estás perdiendo posiciones frente a competidores con mejor rendimiento, incluso si tu contenido es superior.
Las tres métricas que importan
LCP (Largest Contentful Paint): el tiempo hasta que el elemento más grande del viewport es visible. Suele ser la imagen hero o el título principal. Objetivo: menos de 2.5 segundos. INP (Interaction to Next Paint): reemplazó a FID en 2024. Mide la latencia de las interacciones del usuario durante toda la sesión. Objetivo: menos de 200ms. CLS (Cumulative Layout Shift): cuánto se mueve el contenido mientras carga. Objetivo: menos de 0.1.
Cómo medir correctamente
Hay dos tipos de datos: datos de laboratorio (Lighthouse, PageSpeed Insights en modo local) y datos de campo (CrUX report, Search Console). Google usa los datos de campo para ranking. Puede que tu Lighthouse score sea 90, pero si tus usuarios reales (con conexiones lentas y dispositivos modestos) tienen mala experiencia, tus datos de campo serán malos.
Optimizar LCP
Las causas más comunes de LCP lento: imagen hero sin optimizar (usa preload, fetchpriority=high, formatos modernos), CSS o JavaScript que bloquean el render (mueve JS al final, usa critical CSS inline), respuesta del servidor lenta (optimiza TTFB con caché, CDN, y un hosting adecuado). En el 80% de los casos, optimizar la imagen hero y el TTFB resuelve el problema de LCP.
Optimizar INP
INP mide la respuesta a las interacciones. Los problemas suelen venir de: JavaScript que bloquea el main thread (event handlers pesados, re-renders excesivos en frameworks JS), hydration lenta en SSR, y third-party scripts que compiten por el main thread. Usa Web Workers para cálculos pesados, optimiza los event handlers, y difiere la carga de scripts no esenciales.
Optimizar CLS
CLS se soluciona asegurando que cada elemento tiene dimensiones reservadas antes de cargar: atributos width/height en imágenes, min-height en contenedores de contenido dinámico, preload de fuentes con font-display:optional, y evitar insertar contenido encima del viewport después del render inicial.
Monitorización continua
Las Core Web Vitals cambian con cada despliegue, cada plugin nuevo y cada campaña de ads que añades. Implementa monitoring continuo: alertas de regresión en CI/CD (con Lighthouse CI), revisión mensual de datos de campo en Search Console, y pruebas de rendimiento antes de cada release mayor.
