Los Core Web Vitals en WordPress son ahora factor crítico de ranking. Aprende a optimizar LCP, FID y CLS para tener todas las métricas en verde y mejorar tu posicionamiento.
Qué son Core Web Vitals
Métricas de Google que miden experiencia real de usuario:
- LCP (Largest Contentful Paint): Velocidad de carga contenido principal
- FID (First Input Delay) / INP: Interactividad y respuesta
- CLS (Cumulative Layout Shift): Estabilidad visual
Desde 2021 son factor de ranking oficial de Google.
LCP: Largest Contentful Paint
Qué Mide LCP
Tiempo hasta que el contenido principal más grande se carga visualmente:
- Imagen hero grande
- Video en header
- Bloque de texto principal
- Imagen de fondo con texto
Objetivos
- Bueno: <2.5 segundos (verde)
- Necesita mejora: 2.5-4 segundos (amarillo)
- Pobre: >4 segundos (rojo)
Causas Comunes de LCP Lento
- Imágenes hero sin optimizar (5MB+)
- Hosting lento con TTFB alto
- Sin caché configurado
- Render-blocking JavaScript/CSS
- Fuentes web bloqueando renderizado
- No preload de recursos críticos
Cómo Mejorar LCP en WordPress
1. Optimizar Imagen Hero
- Comprimir agresivamente (TinyPNG, ShortPixel)
- Formato WebP (30% más ligero)
- Dimensiones correctas (no 4000px si se muestra a 1200px)
- Preload imagen hero:
<link rel="preload" as="image" href="hero.webp"> - No lazy load en hero (carga inmediata)
2. Mejorar TTFB (Time To First Byte)
- Hosting premium: VPS o managed WordPress
- CDN: Cloudflare, BunnyCDN, StackPath
- Server-side caching: Varnish, Redis
- PHP 8.1+: Versión más reciente
- Objetivo TTFB: <600ms
3. Caché Agresivo
- Page cache: WP Rocket, W3 Total Cache
- Object cache: Redis o Memcached
- Browser cache: Leverage browser caching
- CDN cache: Recursos estáticos en edge
4. Eliminar Render-Blocking
- CSS crítico inline en
<head> - Resto de CSS loadasíncronamente
- JavaScript defer o async
- Minificar CSS y JS
- WP Rocket hace esto automáticamente
5. Optimizar Fuentes Web
- Preconnect a Google Fonts
- Font-display: swap
- Limitar a 2-3 familias y pesos
- Considerar hospedar localmente
FID/INP: First Input Delay / Interaction to Next Paint
Qué Mide FID/INP
Tiempo desde que usuario interactúa (click, tap) hasta que navegador responde:
- Click en botón
- Tap en enlace móvil
- Interacción con menú
- Escribir en formulario
Nota: Google está reemplazando FID con INP (Interaction to Next Paint) en 2024.
Objetivos
- Bueno (FID): <100ms
- Bueno (INP): <200ms
- Pobre: >300ms
Causas de FID/INP Alto
- JavaScript pesado bloqueando main thread
- Third-party scripts (ads, analytics)
- Page builders con JS excesivo
- Plugins mal codificados
- No code splitting
Cómo Mejorar FID/INP
1. Reducir JavaScript
- Auditar plugins y eliminar innecesarios
- Cada plugin añade JS = impacto performance
- Objetivo: <20 plugins activos
- Evitar page builders pesados si no necesario
2. Defer y Async de JS
- Defer: Descarga en paralelo, ejecuta después de HTML parsea
- Async: Descarga y ejecuta asíncronamente
- Critical JS inline, resto defer
- WP Rocket: «Load JS Deferred»
3. Code Splitting
- Cargar solo JS necesario por página
- No cargar todo JS en todas las páginas
- Conditional loading de scripts
- Plugin Asset CleanUp ayuda
4. Web Workers
- Mover tareas pesadas a background threads
- Libera main thread para interacciones
- Avanzado pero efectivo
5. Lazy Load Third-Party Scripts
- Chat widgets: Cargar solo después de 3-5 segundos
- Social media embeds: Lazy load
- Analytics: Async obligatorio
- Ads: Defer cuando posible
CLS: Cumulative Layout Shift
Qué Mide CLS
Estabilidad visual – cuánto «salta» el contenido mientras carga:
- Imagen sin dimensiones definidas carga y empuja contenido
- Ads sin espacio reservado aparecen y mueven página
- Fuentes web cargan y cambian tamaño texto
- Banner dinámico aparece y empuja contenido
Objetivos
- Bueno: <0.1 (verde)
- Necesita mejora: 0.1-0.25 (amarillo)
- Pobre: >0.25 (rojo)
Causas de CLS Alto
- Imágenes sin width/height definidos
- Ads sin espacio reservado
- Fuentes web con FOIT (Flash of Invisible Text)
- Elementos inyectados dinámicamente
- Animaciones que empujan contenido
Cómo Mejorar CLS
1. Dimensiones de Imágenes
SIEMPRE define width y height:
<img src="imagen.jpg" width="800" height="600" alt="...">
WordPress hace esto automáticamente desde versión 5.5+ si subes vía Media Library.
2. Reservar Espacio para Ads
- Define height mínimo del contenedor de ad
- Ad no debe empujar contenido al cargar
- Considera ad sizes consistentes
.ad-container {
min-height: 250px; /* 300x250 ad */
}
3. Font Display Swap
- Muestra texto inmediatamente con fallback font
- Cambia a custom font cuando carga
- Evita FOIT (texto invisible)
@font-face {
font-family: 'CustomFont';
font-display: swap;
src: url('font.woff2');
}
4. Aspect Ratio Boxes
Para contenido dinámico que se carga después:
.video-container {
aspect-ratio: 16 / 9;
width: 100%;
}
5. No Insertar Contenido Above the Fold
- Banners/avisos que aparecen arriba empujan todo
- Si es necesario, usar posición fixed/sticky
- O cargar before any content renders
6. Preload Fuentes Críticas
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
Testing y Monitoreo
Herramientas de Medición
- PageSpeed Insights: Oficial Google, datos reales
- Search Console: Report Core Web Vitals por URL
- Lighthouse: En Chrome DevTools
- Web Vitals Extension: Chrome extension
- GTmetrix: Incluye Web Vitals
Lab Data vs Field Data
- Lab (Sintético): Testing en condiciones controladas
- Field (Real User): Experiencia de usuarios reales
- Google usa Field Data para ranking
- Necesitas 75% de visitas pasar threshold
Monitoreo Continuo
- Revisar Search Console semanalmente
- Testing después de cada actualización
- Diferentes dispositivos y conexiones
- Alertas si métricas caen
Configuración WP Rocket para Core Web Vitals
Settings Óptimos
Cache Tab:
- ✓ Enable Caching
- ✓ Mobile Caching
- ✓ Separate Cache for Mobile
File Optimization:
- ✓ Minify CSS
- ✓ Minify JavaScript
- ✓ Defer JavaScript Loading
- ✓ Delay JavaScript execution (mejora FID/INP)
Media:
- ✓ LazyLoad Images
- ✓ LazyLoad Iframes/Videos
- ✓ Add missing image dimensions (mejora CLS)
- ✓ WebP Compatibility
Preload:
- ✓ Preload Cache
- ✓ Preload Links (mejora navegación)
Advanced Rules:
- Preload hero image si no lo hace automáticamente
- Defer third-party scripts cuando posible
Plugins Complementarios
Optimización de Imágenes
- ShortPixel: Compresión+WebP automático
- Imagify: Alternativa excelente
- EWWW: Opción gratuita sólida
- Todos añaden width/height si falta
Limpieza de Código
- Asset CleanUp: Desactiva CSS/JS innecesarios por página
- Perfmatters: Optimizaciones micro múltiples
- WP Disable: Deshabilita features WordPress innecesarias
Casos de Éxito
Blog Tech (Antes)
- LCP: 4.8s (rojo)
- FID: 215ms (amarillo)
- CLS: 0.32 (rojo)
Blog Tech (Después)
- LCP: 2.1s (verde) ✓
- FID: 45ms (verde) ✓
- CLS: 0.05 (verde) ✓
Cambios implementados:
- Upgrade hosting a VPS
- WP Rocket + Cloudflare CDN
- ShortPixel compresión imágenes
- Eliminación 12 plugins innecesarios
- Añadidas dimensiones a todas las imágenes
- Font-display: swap en fuentes
Resultado SEO: +23% tráfico orgánico en 2 meses
Checklist Core Web Vitals
LCP Optimization
- Imágenes hero optimizadas y preloaded
- Hosting con TTFB <600ms
- CDN configurado
- Page cache activo
- CSS/JS minificados
- Render-blocking eliminado
FID/INP Optimization
- Plugins minimizados (<20)
- JavaScript defer/async
- Third-party scripts lazy loaded
- Code splitting implementado
- Main thread libre para interacciones
CLS Optimization
- Todas imágenes con width/height
- Ads con espacio reservado
- Font-display: swap activo
- No content insertado above fold
- Aspect-ratio definido donde necesario
Errores Comunes
1. Optimizar Solo Desktop
Google usa mobile-first indexing. Testea y optimiza móvil prioritariamente.
2. Confiar Solo en Lab Data
Field Data (usuarios reales) es lo que cuenta para ranking. Monitorea Search Console.
3. Ignorar CLS
Es la métrica más ignorada pero crítica. CLS alto arruina UX.
4. Demasiados Plugins
40 plugins = imposible tener FID/INP bueno. Minimiza siempre.
5. No Medir After Updates
Actualizar tema/plugins puede romper Core Web Vitals. Testea siempre después.
Conclusión: Core Web Vitals No Son Opcionales
Core Web Vitals en WordPress afectan directamente tu ranking desde 2021. Con las herramientas y técnicas correctas, cualquier sitio WordPress puede pasar a verde en las tres métricas.
Prioriza:
- Hosting de calidad (TTFB bajo)
- Imágenes optimizadas (LCP)
- JavaScript mínimo (FID/INP)
- Dimensiones definidas (CLS)
- Monitoreo continuo
La inversión en Core Web Vitals paga dividendos en mejor ranking y conversiones más altas.