Optimización de Core Web Vitals en WordPress sin plugins extra

Índice

• ¿Qué son los Core Web Vitals?
• Optimizar LCP
• Optimizar INP
• Optimizar CLS
• Cómo detectar scripts innecesarios
• Conclusión

¿Qué son los Core Web Vitals?

• LCP (Largest Contentful Paint): mide el tiempo que tarda en mostrarse el contenido principal.
• FID (First Input Delay) → ahora INP (Interaction to Next Paint): mide la rapidez de respuesta a la primera interacción del usuario.
• CLS (Cumulative Layout Shift): mide la estabilidad visual (evitar que los elementos “salten” mientras carga la página).

Optimizar LCP

• Optimiza imágenes (WebP, AVIF, tamaños adecuados).
• Usa loading="lazy" en imágenes no críticas.
• Elimina o combina CSS que no uses para reducir peso (con cuidado que la puedes liar).

En WordPress: puedes quitar CSS innecesario en el functions.php de tu tema hijo con wp_dequeue_style():

// functions.php en tu tema hijo
function remove_unused_styles() {
    if ( ! is_page('contacto') ) {
        wp_dequeue_style('contact-form-7'); 
    }
}
add_action('wp_enqueue_scripts', 'remove_unused_styles', 20);

—

Optimizar INP

• Reduce JavaScript pesado y elimina lo que no uses con wp_dequeue_script(). (Si algo deja de funcionar vuelve a dejarlo como estaba)
• Mueve scripts al footer para que no bloqueen el renderizado inicial.

Ejemplo en functions.php de tu tema hijo:

// functions.php en tu tema hijo
function move_scripts_footer() {
    if (is_admin()) return;

    remove_action('wp_head', 'wp_print_scripts');
    remove_action('wp_head', 'wp_print_head_scripts', 9);
    add_action('wp_footer', 'wp_print_scripts', 5);
    add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action('wp_enqueue_scripts', 'move_scripts_footer', 20);

—

Optimizar CLS

• Reserva espacio en CSS para imágenes y banners (usa width y height o aspect-ratio).
• Evita cargar fuentes de Google sin display=swap.

En tu functions.php del tema hijo añade:

function cargar_fuentes_google() {
  echo '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>' . "\n";
  wp_enqueue_style(
    'google-fonts-roboto',
    'https://fonts.googleapis.com/css2?family=Roboto&display=swap',
    false
  );
}
add_action('wp_head', 'cargar_fuentes_google', 5);

—

Cómo detectar scripts innecesarios

1. Ver código fuente: busca todos los <script src="...js">.
2. DevTools > Network > JS: revisa el peso y el origen de cada archivo.
3. Query Monitor plugin (solo para auditar): te lista qué plugin o tema añadió cada script y estilo.

Una vez identifiques un script que no necesitas en todas las páginas, puedes desactivarlo con algo como:

// functions.php en tu tema hijo
function optimizar_scripts() {
    // Quitar Contact Form 7 excepto en su página
    if ( ! is_page('contacto') ) {
        wp_dequeue_script('contact-form-7'); 
        wp_dequeue_style('contact-form-7');
    }
}
add_action('wp_enqueue_scripts', 'optimizar_scripts', 20);

⚠️ Siempre revisa la web después de quitar un script. Si algo deja de funcionar (un slider, un menú, un formulario), vuelve a activarlo: significa que sí era necesario.

—

Conclusión

Para mejorar los Core Web Vitals, no basta con pegar código: hay que auditar qué se carga y eliminar lo innecesario de forma segura. Hazlo siempre en el functions.php de tu tema hijo, prueba los cambios en un entorno de staging si puedes, y mide después con PageSpeed Insights o Lighthouse para confirmar las mejoras. (si no las notas tampoco te extrañes, el Sr.Google si lo va a notar)

¿A qué esperas?. Ponte Manos a la web para optimizar tu site