Diferir jQuery en WordPress

¿Por qué diferir jQuery?

jQuery todavía se incluye con cada instalación de WordPress y la mayoría de los temas lo cargan sin diferirlo. Eso significa que bloquea el análisis de HTML en cada carga de página. Aquí le mostramos cómo solucionarlo.

Última revisión por Arjen Karel en marzo de 2026

jQuery aparece en el 74% de todas las páginas web según el 2024 Web Almanac, impulsado en gran medida por WordPress. Sin embargo, solo el 47% de las páginas móviles utilizan el atributo defer en algún script. Eso significa que la mayoría de los sitios de WordPress todavía cargan jQuery de forma sincrónica, bloqueando el análisis de HTML y retrasando cada métrica de renderizado en la página, especialmente el Largest Contentful Paint.

Eche un vistazo a la imagen a continuación. Muestra la diferencia en el análisis de HTML entre scripts normales, diferidos y asíncronos. Si jQuery no se difiere, el navegador bloqueará el análisis de HTML hasta que se haya ejecutado el script. Si jQuery se difiere, el navegador no tiene que bloquear el analizador. Y esto le ahorrará mucho tiempo. Para una comparación completa, consulte async vs defer y cómo esto afecta a las Core Web Vitals.

La razón por la que los creadores de temas no difieren jQuery de forma predeterminada es por herencia. Algunos plugins agregan scripts (en línea) que dependen de jQuery. Si jQuery se carga de forma diferida pero el script que necesita jQuery no se difiere, habrá un conflicto (y un error).

Método 1: Diferir jQuery manualmente

Paso 1: Encontrar dónde se encola jQuery

Primero, encuentre dónde se incluye jQuery en su tema de WordPress. Por lo general, se encuentra en el archivo functions.php del tema o directamente en el archivo header.php. Busque líneas como:

wp_enqueue_script('jquery');    

Ahora sabemos que el handle para jQuery se llama 'jquery'.

Paso 2: Utilizar un tema hijo

Si está modificando un tema padre, primero cree un tema hijo. De lo contrario, sus cambios se sobrescribirán en la próxima actualización del tema.

Paso 3: Encolar jQuery con el atributo 'defer'

En el archivo functions.php de su tema hijo, agregue el siguiente código y modifíquelo para que coincida con la ubicación y el handle de su archivo jQuery. Estamos utilizando la estrategia defer de WordPress 6.3:

function defer_jquery() {
  if (!is_admin()) {
    wp_deregister_script('jquery');
    wp_register_script('jquery', '/js/jquery/jquery.js', [], null, [ 'strategy'  => 'defer']);
    wp_enqueue_script('jquery');
  }
}
add_action('wp_enqueue_scripts', 'defer_jquery',100);

Desglosémoslo:

• wp_deregister_script('jquery'): Anula el registro del script predeterminado de jQuery.
• wp_register_script('jquery', '/js/jquery/jquery.js', [], null, [ 'strategy' => 'defer']);: Registra jQuery con la estrategia 'defer'.
• wp_enqueue_script('jquery'): Encola el script de jQuery modificado.

Et voila: ahora ha diferido jQuery con éxito en su sitio de WordPress. ¡Y como beneficio adicional, ahora sabe cómo diferir cualquier script porque el proceso es exactamente el mismo! Para más técnicas de diferimiento más allá de WordPress, consulte 16 métodos para diferir JavaScript.

Cuidado con los scripts en línea. WordPress 6.3 eliminará silenciosamente la estrategia defer si su script tiene scripts en línea adjuntos en la posición after a través de wp_add_inline_script(). Si difiere jQuery pero aún se carga de forma sincrónica, verifique si algún plugin está agregando scripts en línea al handle de jQuery.

Método 2: usar un plugin

Plugins como WP Core Web Vitals hacen que sea súper fácil diferir jQuery y muchos plugins incluso pueden manejar las complicaciones que puedan surgir al diferir también las dependencias y realizar algunos otros trucos como almacenar en caché los eventos de jQuery hasta que jQuery se haya ejecutado.

Método 3: CloudFlare

Otra forma súper sencilla de diferir jQuery es utilizar el Rocket Loader de CloudFlare. Rocket Loader funciona desactivando todos sus scripts durante la carga de la página y luego volviéndolos a activar rápidamente. Este truco imita el diferimiento de scripts pero tiene algunos inconvenientes:

• CloudFlare Rocket Loader rompe una característica del navegador llamada escáner de precarga (preload scanner). Con Rocket Loader, los scripts no se precargan y podría tardar un poco más en descargarse y ejecutarse.
• CloudFlare Rocket Loader es un instrumento bastante contundente. No discrimina entre scripts importantes, menos importantes y agradables de tener. Simplemente difiere todo sin ninguna consideración y le deja sin control sobre el tiempo del script.

Los sitios de WordPress tienen una tasa de aprobación de Core Web Vitals del 45% en dispositivos móviles según el 2025 Web Almanac, siendo LCP la métrica más débil con solo un 53%. El bloqueo de renderizado de jQuery es una de las causas más comunes. Diferirlo no arreglará todo, pero elimina uno de los mayores obstáculos que se interponen entre su sitio y una puntuación LCP aprobatoria.

Pruebe sus cambios

Después de diferir jQuery, revise su sitio. Abra la consola del navegador y busque errores. Haga clic en sus menús, controles deslizantes, formularios y cualquier cosa que utilice JavaScript. Si algo se rompe, la sección de solución de problemas a continuación le ayudará a solucionarlo.

Solución de problemas

Si tiene algún problema, probablemente caerá en una de 3 categorías. La mayoría de los problemas se pueden encontrar abriendo el inspector y navegando a la pestaña de la consola. Si hay algún problema, probablemente encontrará advertencias que se parecen a esto y dicen 'Uncaught ReferenceError: jQuery is not defined':

Solucionarlos no es tan difícil de hacer. Junto al error hay una referencia al origen del error. Si es (index), lo más probable es que se origine de un script en línea. Si es otro archivo, o bien es un problema de tiempo o se olvidó de diferir ese archivo también.

Scripts dependientes

Scripts en línea

$(function(){
 // do something
})

• Utilice el truco type="module". El nuevo <script type="module"> también diferirá el JavaScript en línea.
• Coloque los scripts en línea en un archivo externo. Si necesita variables, puede agregarlas en un script en línea directamente en la página, pero las funciones principales dependientes de jQuery deben estar en un archivo externo que también esté diferido.

Problemas de tiempo

Otro problema menos común se origina en el tiempo. Si jQuery no se difiere, se ejecutará antes del evento DOMContentLoaded y load. Usted puede depender de esto. Si se difiere, un script podría ejecutarse después del evento DOMContentLoaded. Esto significa que si ha adjuntado un manejador de eventos en el evento DOMContentLoaded, no se ejecutará de manera confiable. Si se encuentra con problemas como estos, intente cambiar el disparador o envolver la función en jQuery().

En los sitios de WordPress monitoreados por CoreDash, los sitios que difieren todos los scripts, incluido jQuery, tienen un LCP p75 de 2.1 segundos en comparación con 3.4 segundos en los sitios que cargan jQuery sincrónicamente. Esa es una mejora del 38% por un solo cambio de configuración. Después de implementar sus cambios, verifique la mejora con Real User Monitoring. Las puntuaciones de Lighthouse le indican si el atributo defer está funcionando, pero los datos de campo de visitantes reales le indican si su LCP realmente mejoró. Para obtener más información sobre cómo la ubicación del script afecta a las Core Web Vitals, consulte la guía de WordPress sobre Core Web Vitals. Y como siempre, si está atascado, ¡no dude en contactarme!