Core Web Vitals son métricas que Google usa para medir experiencia de usuario y son ranking factor confirmado desde 2021. Un sitio con Core Web Vitals en rojo puede perder posiciones aunque tenga el mejor contenido. Esta guía te explica las 3 métricas críticas y cómo optimizarlas.
1. LCP (Largest Contentful Paint)
Qué mide: tiempo en que carga el elemento visual más grande (típicamente hero image o título).
Threshold: bueno < 2.5s · necesita mejora 2.5-4s · pobre > 4s
Cómo optimizar LCP
- Preload de la imagen LCP con <link rel=”preload”>
- fetchpriority=”high” en la imagen LCP
- Image format moderno (WebP o AVIF)
- Image dimensions correctas (no scale down)
- CDN para assets estáticos
- Reduce server response time (TTFB < 200ms)
- Critical CSS inline
2. INP (Interaction to Next Paint)
Qué mide: latencia entre acción del usuario (click, tap, key) y respuesta visual.
Threshold: bueno < 200ms · necesita mejora 200-500ms · pobre > 500ms
Cómo optimizar INP
- Reduce JavaScript ejecutado en main thread
- Code splitting (cargar solo JS necesario por página)
- Defer scripts no críticos
- Avoid long tasks (> 50ms)
- Use Web Workers para procesamiento pesado
- Optimize event handlers
3. CLS (Cumulative Layout Shift)
Qué mide: cuánto se mueve el contenido visualmente durante carga.
Threshold: bueno < 0.1 · necesita mejora 0.1-0.25 · pobre > 0.25
Cómo optimizar CLS
- Width + height en TODAS las imágenes
- Reservar espacio para ads/embeds antes de carga
- Avoid inserting content above existing content
- font-display: optional o swap con fallback de tamaño similar
- Animaciones con transform en vez de top/left/width/height
4. Herramientas para Medir
- PageSpeed Insights (Google)
- Search Console → Core Web Vitals report
- Lighthouse CI
- WebPageTest
- Chrome DevTools Performance tab
5. Setup Recomendado WordPress + Elementor
- WP Rocket: caching + critical CSS + lazy loading
- Smush Pro: image compression + WebP
- Cloudflare: CDN + image optimization
- WP Engine hosting con NGINX optimizado
