Core Web Vitals en WordPress: Plugins y Configuración Paso a Paso

WordPress tiene fama de ser lento, pero con la configuración correcta puede superar los umbrales de Core Web Vitals sin problemas. El problema es que la mayoría de instalaciones de WordPress tienen plugins que añaden scripts innecesarios, imágenes sin optimizar y sin caché de página activa. Esta guía cubre las medidas de mayor impacto, ordenadas de mayor a menor efecto.

Diagnóstico previo: mide antes de cambiar nada

Antes de instalar ningún plugin ni cambiar configuración, mide el estado actual de tus Core Web Vitals con el Monitor de iRankly. Introduce las URLs más importantes de tu WordPress (portada, categorías principales, artículos con más tráfico) para tener una línea base con la que comparar el efecto de cada optimización.

Paso 1: Plugin de caché de página (impacto en LCP)

La caché de página es la optimización de mayor impacto para el LCP. Sin caché, WordPress ejecuta PHP y consulta la base de datos para cada petición — el TTFB puede ser de 1-3 segundos. Con caché de página, sirve HTML estático precompilado — el TTFB baja a 50-200ms.

Paso 2: Optimización de imágenes (impacto en LCP y CLS)

Las imágenes sin optimizar son la causa más frecuente de LCP alto en WordPress. El estándar actual es servir imágenes en formato WebP con compresión adaptativa y dimensiones correctas.

1. 1.Instala Imagify, ShortPixel o Smush para convertir automáticamente las imágenes a WebP al subirlas.
2. 2.Activa la compresión "agresiva" o "lossy" — la diferencia visual es imperceptible pero el tamaño se reduce un 50-70%.
3. 3.En los ajustes del plugin, activa "añadir width y height automáticamente" a las imágenes — elimina el CLS causado por imágenes sin dimensiones.
4. 4.Activa el lazy loading nativo para todas las imágenes excepto la imagen hero (la LCP) — esa debe cargarse con fetchpriority="high".

Paso 3: Preload de la imagen LCP

La imagen más grande visible en el viewport inicial — normalmente la imagen destacada del post o el banner del hero — debe cargarse con máxima prioridad. WordPress por defecto no hace preload de ninguna imagen.

WP Rocket tiene una opción "Preload LCP Image" que detecta automáticamente la imagen LCP y añade el preload. Si usas otro plugin, puedes añadirlo manualmente en functions.php:

// Añade preload para la imagen destacada en posts individuales
add_action('wp_head', function() {
    if (is_singular() && has_post_thumbnail()) {
        $thumbnail_url = get_the_post_thumbnail_url(null, 'large');
        if ($thumbnail_url) {
            echo '<link rel="preload" as="image" href="' . esc_url($thumbnail_url) . '" fetchpriority="high">';
        }
    }
}, 1);

Paso 4: Eliminar CSS y JavaScript no usado (impacto en LCP e INP)

Cada plugin de WordPress puede añadir sus propios archivos CSS y JS en todas las páginas, aunque solo sean necesarios en algunas. WP Rocket y LiteSpeed Cache tienen opciones para eliminar CSS y JS no usado y para cargar los scripts de forma diferida.

• •En WP Rocket: activa "Eliminar CSS no usado" y "Optimización de JavaScript" → "Aplazar ejecución de JavaScript".
• •En LiteSpeed Cache: activa "CSS/JS Minify" y "Load JS Deferred".
• •Comprueba después de activar estas opciones que el sitio funciona correctamente — pueden romper plugins que dependen de JS cargado de forma síncrona.
• •Usa el plugin "Asset CleanUp" para desactivar scripts y estilos de plugins específicos en páginas donde no son necesarios.

Paso 5: CDN para servir recursos estáticos

Un CDN (Content Delivery Network) sirve los archivos estáticos (imágenes, CSS, JS) desde servidores ubicados cerca del usuario. Reduce la latencia de descarga de recursos y mejora el LCP especialmente para usuarios geográficamente alejados del servidor principal.

• •Cloudflare (plan gratuito): protege el servidor y actúa como CDN. Activa "Speed → Optimization → Auto Minify" para CSS, JS y HTML.
• •Bunny.net o KeyCDN: CDNs de pago más baratos que AWS CloudFront, con buena cobertura en Europa y Latinoamérica.
• •WP Rocket + RocketCDN: integración nativa si ya usas WP Rocket.
• •Si usas Cloudflare, activa también "Rocket Loader" con precaución — puede mejorar el INP pero a veces rompe scripts de terceros.

Paso 6: Eliminar plugins innecesarios (impacto en INP)

Cada plugin activo puede añadir JavaScript al frontend que se ejecuta en el hilo principal y aumenta el INP. Haz una auditoría de plugins activos y desactiva los que no son imprescindibles para el funcionamiento del sitio.

1. 1.Usa el plugin "Query Monitor" para identificar qué plugins añaden scripts al frontend y cuánto pesan.
2. 2.Desactiva temporalmente los plugins de uno en uno y mide el impacto en PageSpeed Insights después de cada desactivación.
3. 3.Sustituye plugins que añaden mucho JS por alternativas más ligeras o por código personalizado en functions.php cuando sea posible.
4. 4.Los plugins de social sharing, sliders y chat en vivo son los que más peso añaden al frontend — evalúa si son imprescindibles.

Checklist de optimización CWV para WordPress

• •☐ Plugin de caché de página activo y configurado.
• •☐ Imágenes convertidas a WebP con dimensiones width/height definidas.
• •☐ Preload activo para la imagen LCP de cada tipo de página.
• •☐ Lazy loading activado para imágenes below-the-fold.
• •☐ CSS y JS minificados y cargados de forma diferida.
• •☐ CDN activo para archivos estáticos.
• •☐ Plugins innecesarios desactivados.
• •☐ Fuentes web con font-display: swap y preload.
• •☐ Resultados verificados con el Monitor Core Web Vitals de iRankly.

El detalle de cada métrica, para saber qué estás optimizando:

• Cómo mejorar el LCP
• Cómo mejorar el INP
• CLS: qué es y cómo eliminarlo
• Qué son los Core Web Vitals