Los Core Web Vitals (CWV) no son un “capricho técnico”: afectan a la experiencia de usuario y, en muchos proyectos, a la capacidad de posicionar y convertir. En WordPress el problema es clásico: se añaden plugins, constructores, scripts de marketing… y la web empieza a cargar lenta y “a saltos”.
En esta guía te explico qué tocar y qué NO tocar para mejorar LCP, INP y CLS con criterio, evitando cambios que rompen el diseño o las conversiones.
Si prefieres que lo revisemos y ejecutemos con seguridad, esto encaja con mantenimiento web y, si hay que optimizar estructura/código, con desarrollo web.
1) Qué miden LCP, INP y CLS (en lenguaje claro)
- LCP (Largest Contentful Paint): tiempo hasta que se renderiza el elemento de contenido elegible más grande visible en la ventana; no siempre coincide con el hero.
- INP (Interaction to Next Paint): qué rápido responde la web cuando el usuario interactúa (clic, menú, filtros, botones).
- CLS (Cumulative Layout Shift): inestabilidad visual por desplazamientos inesperados; también puede producirse después de la carga inicial.
Fuente oficial (Google): explicación de métricas en Web Vitals.
Los umbrales de experiencia buena son LCP ≤ 2,5 s, INP ≤ 200 ms y CLS ≤ 0,1, evaluados en el percentil 75 de las visitas y separando móvil/escritorio. Los tres deben cumplir su umbral; una puntuación global de Lighthouse no los sustituye.
2) Cómo medir bien (sin caer en la trampa de una sola herramienta)
Para tomar decisiones correctas, combina:
- Datos reales (campo): Chrome UX Report / Search Console (si tienes suficiente tráfico).
- Datos de laboratorio: Lighthouse, también integrado en PageSpeed Insights, para reproducir problemas en condiciones controladas. PageSpeed puede mostrar además datos de campo.
Compara la misma URL y tipo de dispositivo, y comprueba si los datos de campo corresponden a esa URL o al origen. Su ventana de 28 días tarda en reflejar por completo un cambio reciente. Si no hay muestra de campo, no lo interpretes como aprobado: utiliza pruebas repetibles y revisa las interacciones.
Fuente oficial: PageSpeed Insights.
3) Lo que más mejora el LCP (y suele ser lo que más duele)
3.1 Optimiza la imagen “hero” (la del primer pantallazo)
- Formato moderno (WebP/AVIF) y tamaño real (no subas 4000px si se ve a 1200px).
- Compresión correcta (sin destruir calidad).
- Identifica la imagen que realmente produce el LCP y evita cargarla de forma diferida. No apliques esa excepción a todas las imágenes de la página.
- Evita sliders pesados en la home: suelen empeorar LCP y conversión.
3.2 TTFB: diagnostica antes de cambiar de hosting
Si el primer byte tarda mucho (TTFB), la web va a sufrir en LCP. Señales típicas:
- Picos de carga en horas concretas
- Backoffice lento
- Caídas o “microcortes”
Separa latencia de red, trabajo de WordPress, consultas, caché y capacidad del servidor. La caché de página puede reducir trabajo de origen; una migración de hosting solo tiene sentido si el diagnóstico lo justifica. Integra las pruebas en el mantenimiento web.
3.3 Caché y recursos críticos
- Activa caché de página (y purgado correcto).
- Minimiza CSS/JS cuando tenga sentido.
- Evita cargar bibliotecas pesadas si no son necesarias.
Ojo: “optimizar” no es activar 25 checks del plugin. Es mejorar sin romper layout ni tracking.
4) Cómo mejorar el INP (la métrica que más se resiente por scripts y plugins)
4.1 Menos scripts de terceros (la mejora más directa)
Chat, mapas, widgets, popups, trackers… todo suma latencia. Prioriza:
- Lo imprescindible para negocio
- Lo que de verdad se usa
- Carga diferida (cuando aplique) y solo en páginas necesarias
4.2 Evita constructores “hipercargados” si tu web no lo necesita
No es una guerra contra los builders, pero sí una realidad: muchos añaden DOM enorme y JS. Si tu web necesita ajustes profundos, a veces el salto real pasa por diseño web a medida y mejoras a nivel de desarrollo web.
4.3 Formularios, popups y eventos mal implementados
Scripts que capturan eventos en exceso (scroll, click, timers) pueden dañar INP. Además, si mides mal, optimizas peor. Para medir sin liarla con consentimiento, revisa Google Consent Mode v2.
5) Cómo reducir CLS y los desplazamientos inesperados
5.1 Reserva espacio para imágenes, banners y embeds
- Define dimensiones o aspect ratio en imágenes.
- Evita que un banner de cookies empuje el contenido sin transición/espacio.
- Ojo con iframes (maps, vídeos, reseñas).
5.2 Tipografías: controla el “flash” de fuentes
Una fuente que carga tarde puede cambiar el tamaño del texto y desplazar todo. Soluciones habituales:
- Preload de fuentes críticas
- font-display bien configurado
Guía (MDN) sobre font-display.
6) Lo que NO debes hacer (aunque lo veas en tutoriales)
- No desactives scripts a ciegas: puedes romper formularios, carrito, conversiones o medición.
- No uses 3 plugins distintos “de rendimiento” a la vez: suelen solaparse y dar problemas.
- No cargues todo diferido si afecta a elementos críticos (menú, hero, CTA).
- No priorices un 100/100 en Lighthouse por encima de vender más: a veces una mejora “perfecta” baja conversión.
En CRO esto se ve mucho: una web puede ser rápida pero no convencer. Por eso rendimiento y conversión deben ir juntos: CRO + UX/UI.
7) Ejemplo de plan de cambios en 7 días
Es un calendario orientativo para un alcance acotado, no un plazo garantizado de aprobación. Comprueba cada cambio en laboratorio y tareas reales; evalúa después la evolución de los datos de campo.
Día 1: medición y diagnóstico
- PageSpeed en 3 URLs clave: home, servicio, contacto (y producto si ecommerce).
- Lista de scripts de terceros por página.
Días 2–3: LCP
- Optimizar imagen hero + caché
- Revisar servidor/TTFB si hay señales
Días 4–5: CLS
- Reservar espacio para imágenes/iframes/banners
- Revisar fuentes
Días 6–7: INP
- Reducir scripts de terceros
- Limpiar plugins innecesarios
- Optimizar interacciones críticas (menú, formularios, filtros)
Mejorar Core Web Vitals en WordPress no va de “activar opciones”, sino de atacar las causas reales: servidor, imagen hero, scripts, layout shifts y exceso de plugins.
Si quieres que lo revisemos y lo dejemos fino (sin romper diseño ni conversiones), lo abordamos con mantenimiento web, optimización de hosting cuando sea necesario y ajustes a nivel de desarrollo web para abordar las causas detectadas.
