Tabla de contenido
Si estás leyendo esto puedo apostar que estabas analizando tu sitio en PageSpeed Insights o Lighthouse y te salió el tan odiado mensaje ‘Elimina los recursos que bloqueen el renderizado’.
¿Qué es y porqué se usa jQuery en WordPress?
jQuery es una biblioteca Javascript que se utiliza para distintas tareas en el Front-end (lo que ven tus usuarios): manipular el DOM, hacer peticiones asíncronas, administrar animaciones y manejar eventos, entre otras cosas.
jQuery se usa en WordPress desde 2006. En ese entonces Javascript Vainilla (el Javascript normal y nativo, sin biblioteca), tenía problemas de compatibilidad entre navegadores, además de que se necesitaba escribir mucho código para lograr efectos visuales y animaciones.
jQuery apareció para solucionar eso, proveyendo una capa de abstracción que solucionaba todos esos problemas de compatibilidad, y dando facilidades a los programadores de crear animaciones con muy pocas líneas de código, lo que resultó en webs más atractivas y entregadas en menor tiempo.
Sin embargo, hoy, 17 años después, Javascript ha evolucionado bastante, tanto que muchos se preguntan porqué WordPress sigue usando jQuery cuando todas las funciones ya pueden lograrse de forma nativa.
De todas maneras, aún no hay planes para que WordPress abandone el uso de JQuery.
Así que, por lo visto, al uso de jQuery en WordPress aún le quedan unos años más, suficientes para que siga siendo un mal necesario y siga perjudicando las métricas web.
Comportamiento predeterminado de jQuery en WordPress
jQuery se aloja de forma predeterminada en ./wp-includes/js/jquery/ y es necesario cargar 2 archivos: jquery.min.js?ver=3.7.0 y jquery-migrate.min.js?ver=3.4.1. Las versiones pueden variar.
Al cargar cualquier página, WordPress crea dos etiquetas <script> y las inserta en la parte baja del <head> . El atributo src de cada etiqueta es la URL de los archivos en tu hosting.
De forma predeterminada, la descarga y ejecución de ambos scripts se realizan de forma secuencial, deteniendo el análisis del HTML y creando una demora en la carga de tu sitio web. De ahí viene la alerta de recursos que bloquean el renderizado.
Esta demora provoca una peor experiencia de usuario, empeora tus métricas y perjudica tu SEO.
Algunos tutoriales te enseñan a agregar los atributos async o defer a la etiqueta <script>. Esto es una buena opción, ya que permite que no exista tanto bloqueo del análisis HTML mientras se descarga jQuery.
Sin embargo, tiene el inconveniente que aún se carga en todas las páginas de tu web.
¿Frustrado por ir de una herramienta a otra para escribir tus publicaciones?
¡Basta de eso! Con watafak.io podés investigar palabras clave, organizarlas según el ciclo de vida de tu cliente, crear tu keyword clúster y escribir tus publicaciones ganadoras, todo en un sólo lugar.
Registrate en la lista de espera para conseguir tu acceso anticipado.
¿Es posible cargar jQuery de forma condicional?
Sí, y es algo que descubrí haciendo algunas pruebas. jQuery sólo es necesario para unas pocas páginas en mi web (páginas de pago y con animaciones como lista desplegable y mostrar contraseña), por lo que ejecutarlo en todas es un desperdicio de recursos.
Es por eso que implementé un código para que sólo se descargue jQuery en páginas específicas.
Es tu responsabilidad revisar en cuáles páginas es necesario y en cuáles no. Todo depende de qué plugins externos y qué theme está usando tu instalación.
¿Cómo cargar jQuery condicionalmente en WordPress sin plugin externo?
Como siempre, antes de realizar cualquier cambio, hacé una copia de seguridad de tu instalación.
Vamos a hacer cambios en tu plugin personalizado. Si aún no lo tenés, aquí podes ver como crear un plugin para controlar mejor tus funciones personalizadas. Esta opción es mejor y más segura que modificar el archivo functions.php.
En caso que ya tengas tu plugin personalizado, editalo y pegá el siguiente código:
/**
* Desactiva la carga de jquery en todas las páginas, excepto en las que
* sea explícitamente necesario.
* */
function cargar_script_jquery_condicionalmente() {
// Aquí se registran los post_id de las páginas en donde se debe cargar jQuery:
$target_page_ids = array(3716, 3280, 3288, 4086);
if (!is_page($target_page_ids)) {
// Desregistrando los scripts de jQuery y jQuery Migrate actuales
wp_deregister_script('jquery');
wp_deregister_script('jquery-migrate');
}
}
add_action('wp_enqueue_scripts', 'cargar_script_jquery_condicionalmente');Aquí sigue la explicación del código (cortesía de ChatGPT):
- Se define una función llamada
cargar_script_jquery_condicionalmenteque se encargará de manejar la carga condicional del script de jQuery. - Se establece un array llamado
$target_page_idsque contiene los ID de página en los cuales se considera necesario cargar el script de jQuery. Estos ID de página corresponden a las páginas donde deseas mantener la carga de jQuery. - El condicional
if (!is_page($target_page_ids))verifica si la página actual no coincide con ninguna de las páginas listadas en$target_page_ids. Si la página actual no está en la lista de páginas objetivo, el bloque de código dentro de este condicional se ejecuta. - Dentro del bloque condicional, se utilizan las funciones
wp_deregister_scriptpara desregistrar los scripts de jQuery y jQuery Migrate. Esto evita que estos scripts se carguen en la página actual. - Finalmente, se utiliza
add_actionpara vincular la funcióncargar_script_jquery_condicionalmentea la acciónwp_enqueue_scripts. Esto asegura que la función se ejecute en el momento adecuado durante el proceso de encolado de scripts en WordPress.
Comparación entre página con carga vs sin carga de jQuery
Estoy usando PageSpeed Insights para medir las métricas.
- Página principal de watafak.io con la carga de jQuery habilitada:
- Página principal de watafak.io con la carga de jQuery bloqueada:
Podés ver que hay un ligero aumento en la métrica de rendimiento que se consigue gracias a la mejora del Speed Index, que indica la rapidez con la que se puede ver el contenido de una página.
¿Qué otras alternativas hay?
Una de las pruebas que hice fue cargar jQuery desde su CDN, sin embargo noté que las métricas empeoraban comparado con cargar jQuery desde mi hosting.
No tengo certeza del motivo. Podría ser porque estoy físicamente ubicado más cerca de mi hosting que del CDN en donde está cacheado jQuery, o tal vez por una sobrecarga de solicitudes a sus servidores.
Tal vez sería distinto si alojo el código en mi propio bucket S3 de AWS y lo cacheo con Cloudfront. Aún no hago esa prueba.
Por otro lado, si usás de origen el CDN de jQuery, es más probable que, cuando el usuario visite tu página por primera vez, el script ya esté cacheado en su navegador, por lo que no sería necesario descargarlo, ahorrando así tiempo de bloqueo del renderizado.
De todas formas, si querés probar, aquí te dejo el código que estaba usando para que jQuery se cargue desde su CDN en vez de tu hosting:
/**
* Desactiva la carga de jquery en todas las páginas, excepto en las que
* sea explcitamente necesario.
* En ese caso, carga los scripts desde el CDN de jquery y no desde el
* propio servidor.
* Los scripts se insertan en el head.
* */
function desactivar_y_reemplazar_jquery_scripts() {
// Desregistrando los scripts de jQuery y jQuery Migrate actuales
wp_deregister_script('jquery');
wp_deregister_script('jquery-migrate');
$target_page_ids = array(3716, 3280, 3288, 4086);
if (is_page($target_page_ids)) {
// Registrando e incluyendo los nuevos scripts desde el CDN de jQuery
wp_register_script(
'jquery',
'https://code.jquery.com/jquery-3.7.0.min.js',
array(),
'3.7.0',
array(
'in_footer' => false,
//'strategy' => 'async', // 'async' o 'defer'
)
);
wp_register_script(
'jquery-migrate',
'https://code.jquery.com/jquery-migrate-3.4.1.min.js',
array('jquery'),
'3.4.1',
array(
'in_footer' => false,
//'strategy' => 'async', // 'async' o 'defer'
)
);
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-migrate');
}
}
add_action('wp_enqueue_scripts', 'desactivar_y_reemplazar_jquery_scripts');¿jQuery se guarda en caché?
Sí, una vez descargado, jQuery se guarda en caché del navegador por 7 días (cache-control: public, max-age=604800), por lo que la descarga se realizará la primera vez y se mantendrá accesible inmediatamente por 1 semana.
Entonces, todas las optimizaciones que realizamos aplican para la primera vez que un usuario entra a tu página o para cuando vuelve después de que venció el caché.
Tener una política eficaz de cacheo de estos recursos es una buena práctica para mejorar el SEO y la experiencia de usuario.
Conclusiones
Hemos visto que evitar que cargue jQuery en las páginas de WordPress en las que no es necesario ayuda a mejorar la métrica de Rendimiento.
Esta mejora aumenta la probabilidad de que tu página sea elegida para ser mostrada lo más arriba posible de la página de resultados de Google.
Por otro lado, la carga desde el CDN proporcionado por jQuery es más lenta, sin embargo, ya que muchos sitios web lo usan, es más probable que el script ya esté cacheado en el navegador de tu usuario cuando ingrese por primera vez a tu página, por lo que la descarga ya no sería necesaria y no habría tiempo de bloqueo.
