Diferir jQuery en WordPress

Una guía para diferir jQuery en WordPress

¡Saludos, compañeros aficionados al rendimiento! Estoy emocionado de compartir ideas sobre cómo optimizar su sitio de WordPress y mejorar los Core Web Vitals. Hoy les mostraré cómo diferir la carga de jQuery, mejorando la velocidad de su sitio web y, en consecuencia, la experiencia del usuario.

¿Por qué diferir jQuery?

jQuery, una robusta biblioteca de JavaScript, es indudablemente una herramienta poderosa, pero su carga síncrona a veces puede ralentizar la carga inicial de la página. Muchos temas disponibles en los diversos mercados dependen de jQuery. jQuery no está diseñado para ser diferido, pero desafortunadamente muchos temas no difieren jQuery. 

¿Entonces, cuál es la ventaja principal de diferir jQuery, te preguntarás? Bueno, echa un vistazo a esta imagen a continuación. Muestra la diferencia en el análisis HTML entre scripts normales, diferidos y asíncronos. Si jQuery no se difiere, el navegador bloqueará el análisis HTML hasta que el script se haya ejecutado. Si jQuery se difiere, el navegador no tendrá que bloquear el analizador. Y esto te ahorrará mucho tiempo, especialmente cuando se trata del Largest Contentful Paint. 

La razón por la que las compilaciones de temas no difieren jQuery por defecto es debido al legado. Algunos plugins añaden scripts (en línea) que dependen de jQuery. Si jQuery se carga diferido pero el script que necesita jQuery no se difiere, habrá un conflicto (y un error).

Método 1: Diferir jQuery manualmente

Paso 1: Identificar la inclusión de jQuery en tu tema

Para iniciar el proceso de optimización, necesitamos identificar dónde se incluye jQuery en tu tema de WordPress. Comúnmente encontrado en el archivo functions.php del tema o directamente en el archivo header.php, busca líneas parecidas a:

wp_enqueue_script('jquery');    

Ahora sabemos que el handle para jQuery se llama 'jquery'. Entender dónde se encola jQuery sienta las bases para nuestro viaje de optimización.

Paso 2: Crear un tema hijo para la estabilidad a largo plazo

Antes de realizar cualquier cambio, considera crear un tema hijo para salvaguardar tus modificaciones contra futuras actualizaciones. Esto asegura que tu arduo trabajo no sea sobrescrito cuando el tema padre reciba una actualización. Crear un tema hijo es un poco como añadir una capa extra de armadura a la estructura de tu sitio.

Paso 3: Encolar jQuery con el atributo 'defer'

Ahora, profundicemos en los detalles técnicos. En el archivo functions.php de tu tema hijo, añade el siguiente código y modifícalo para que coincida con la ubicación de tu archivo jQuery y el handle. Vamos a utilizar la nueva estrategia defer

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'): Deregistra el script jQuery predeterminado.
• wp_register_script('jquery', '/js/jquery/jquery.js', [], null, [ 'strategy'  => 'defer']);
: Registra jQuery con la estrategia 'defer'.
• wp_enqueue_script('jquery'): Encola el script jQuery modificado.

Et voila: ahora has diferido exitosamente jQuery en tu sitio de WordPress. ¡Y como bono, ahora sabes cómo diferir cualquier script porque el proceso es exactamente el mismo!

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 pueden surgir de ello 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 simple de diferir jQuery es usar Rocket Loader de CloudFlare. Rocket Loader funciona deshabilitando todos tus scripts durante la carga de la página y luego habilitándolos rápidamente de nuevo. Esto 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 tomar un poco más de tiempo descargar y ejecutar tus scripts.
• CloudFlare Rocket Loader es un instrumento bastante contundente. No discrimina entre scripts importantes, menos importantes y deseables. Simplemente difiere todo sin ninguna consideración y te deja sin control sobre el tiempo de los scripts.
  

¡Prueba, prueba, prueba!

Después de implementar estos cambios, prueba minuciosamente la funcionalidad de tu sitio web. Presta mucha atención a los elementos interactivos, animaciones y características que dependen de jQuery para asegurar que funcionen sin problemas. Las pruebas rigurosas garantizan que la optimización no introduzca inadvertidamente ningún contratiempo en tu interfaz de usuario.

Solución de problemas

Si te encuentras con 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 consola. Si hay algún problema, probablemente encontrarás advertencias que se parecen a esto y dicen 'Uncaught ReferenceError: jQuery is not defined'

Arreglarlos no es tan difícil. Al lado del 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, es un problema de tiempo o olvidaste diferir ese archivo también.

Scripts dependientes

Scripts en línea

$(function(){
 // hacer algo
})

• Usa el truco type="module". El nuevo <script type="module"> también diferirá el JavaScript en línea.
• Coloca los scripts en línea en un archivo externo. Si necesitas variables, puedes añadirlas en un script en línea directamente en la página, pero las funciones principales dependientes de jQuery deberían 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 de los eventos DOMContentLoaded y load. Puedes depender de esto. Si se difiere, un script podría ejecutarse después del evento DOMContentLoaded. Esto significa que si has adjuntado un manejador de eventos en el evento DOMContentLoaded, no se ejecutará de manera confiable. Si te encuentras con problemas como estos, intenta cambiar el disparador o envolver la función en jQuery(). 

Y como siempre, si te atascas, ¡no dudes en contratarme para una sesión de 2 horas!