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

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

Los Core Web Vitals son un conjunto de métricas que el Sr. Google utiliza para evaluar la experiencia de usuario en una web. Estas métricas afectan directamente al SEO y a la satisfacción de los visitantes.y del propio Sr Google (¿por qué negarlo?)

Índice

CWV  WordPress

¿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

6 herrmientas para medir la velocidad de carga de tu web

6 herrmientas para medir la velocidad de carga de tu web

La velocidad de un sitio web es esencial para evitar perder clientes / usuarios incluso antes de que hayan entrado en nuestra web.  Optimizar los tiempos de carga de una web, ya sea desde un dispositivo móvil como de sobremesa o portatil,  sirven para ofrecer una buena experiencia de usuario y además ayuda a mejorar tu posicionamiento en Google y el resto de buscadores.

Aquí tienes una lista de 6 utilidades para medir la velocidad de carga de una web:

1. Google PageSpeed Insights (https://developers.google.com/speed/pagespeed/insights)

  • No requiere registro.
  • Versión gratuita.
  • Proporciona una puntuación de velocidad de carga, tanto para dispositivos móviles como para escritorio, junto con una lista de mejoras sugeridas. También muestra información sobre el rendimiento, la optimización móvil y la usabilidad.

2. GTmetrix (https://gtmetrix.com/)

  • Registro opcional (proporciona funciones adicionales al registrarse).
  • Versión gratuita con opciones de actualización a planes de pago. La versión gratuita te permite monitorizar hasta 10 páginas las últimas 24 horas y guardar lel último escaneo que hayas hecho de cada página.
  • Proporciona una puntuación de velocidad de carga, junto con información detallada sobre el rendimiento de la página, como el tiempo de carga, el tamaño de la página, el número de solicitudes HTTP, entre otros. También ofrece consejos específicos para mejorar el rendimiento.

3. Pingdom Website Speed Test (https://tools.pingdom.com/)

  • No requiere registro.
  • Versión gratuita con opciones de actualización a planes de pago.
  • Muestra el tiempo de carga de la página, el tamaño total de la página y el número de solicitudes realizadas. También proporciona un desglose detallado de cada solicitud HTTP, así como sugerencias para mejorar el rendimiento.

4. WebPageTest (https://www.webpagetest.org/)

  • No requiere registro.
  • Versión gratuita con opciones avanzadas disponibles al registrarse.
  • Permite realizar pruebas de velocidad de carga desde diferentes ubicaciones y navegadores. Proporciona información detallada sobre el rendimiento, como el tiempo de carga, el tamaño de la página, el tiempo hasta el primer byte, entre otros. También ofrece un informe de rendimiento con sugerencias para mejorar.

5. Dareboost (https://www.dareboost.com/)

  • Registro opcional (proporciona funciones adicionales al registrarse).
  • Versión gratuita con opciones de actualización a planes de pago.
  • Proporciona una puntuación de velocidad de carga y un análisis detallado del rendimiento de la página. Además, ofrece consejos para mejorar el tiempo de carga, la optimización de imágenes, la caché y otros aspectos relacionados con el rendimiento.

6. YSlow (https://yslow.org/)

  • No requiere registro.
  • Versión gratuita.
  • Es una extensión del navegador web que analiza el rendimiento de una página y proporciona una puntuación de velocidad junto con recomendaciones específicas para mejorar el rendimiento, como la reducción del número de solicitudes HTTP, la habilitación de la compresión GZIP, entre otros.

Estas herramientas te ayudarán a evaluar la velocidad de carga de tu sitio web y te proporcionarán información valiosa para optimizar su rendimiento.

foto: Businessman working at computer with light arrow.123rf.com 46605564 Foto de stock