Récemment, un utilisateur nous a demandé des conseils pour optimiser les performances de son site WordPress. L’une de nos suggestions consistait à remplacer le script jQuery par défaut de WordPress par jQuery provenant des bibliothèques hébergées par Google.
WordPress inclut par défaut jQuery dans le logiciel de base. Cependant, nous avons constaté que le fait de le remplacer par la dernière version de jQuery issue de la bibliothèque de Google permet d’améliorer les performances.
Dans cet article, nous allons vous montrer comment remplacer facilement le script jQuery par défaut de WordPress par la bibliothèque Google afin d’améliorer les performances et la vitesse.
Pourquoi et quand remplacer la version par défaut de WordPress par jQuery ?
jQuery est une bibliothèque JavaScript populaire utilisée par les développeurs/développeuses pour créer de belles applications web. Elle est utilisée assez souvent dans WordPress pour ajouter des mis en avant comme les Diaporamas, les fenêtres surgissantes, et bien d’autres choses encore.
WordPress inclut une bibliothèque jQuery dans le logiciel de base de WordPress. La plupart des extensions WordPress et des thèmes WordPress les plus populaires s’appuient sur cette bibliothèque pour leurs fonctionnalités et leurs avant-postes.
Cependant, le chargement de jQuery sur un serveur d ‘hébergement mutualisé peut être gourmand en ressources et ralentir votre site, surtout si vous utilisez des thèmes WordPress mal codés ou des extensions qui ne respectent pas les meilleures pratiques de WordPress.
Un autre problème lié à l’utilisation de la version de jQuery incluse dans WordPress est qu’elle ne sera pas mise à jour tant que WordPress ne l’aura pas mise à jour. Il peut y avoir de nouvelles versions de jQuery avec des corrections de performance ou de sécurité, mais vous n’y aurez pas accès jusqu’à ce qu’elles soient incluses dans une mise à jour de WordPress.
Il existe quelques solutions pour corriger ce problème. Par exemple, vous pouvez charger jQuery via les serveurs de Google ou le CDN officiel de jQuery.
Google Hosted Libraries est un bon choix car leurs serveurs sont stables, mis à jour et hautement optimisés pour la vitesse, ce qui permet à jQuery de se charger beaucoup plus rapidement sur votre site WordPress.
Ceci étant dit, voyons comment remplacer facilement le jQuery par défaut de WordPress par la bibliothèque de Google.
Remplacer le jQuery par défaut de WordPress par la Bibliothèque Google
WordPress dispose d’une méthode intégrée permettant d’ajouter facilement des scripts et des feuilles de style. Cela vous permet également de retirer en toute sécurité les scripts et feuilles de style chargés à l’aide de la méthode intégrée.
Nous allons utiliser cette méthode pour d’abord désactiver le jQuery par défaut de WordPress. Ensuite, nous dirons à WordPress de charger jQuery via la bibliothèque Google.
Vous devrez ajouter le code suivant au fichier functions.php de votre thème, à un plugin spécifique au site ou à un plugin d’extraits de code.
function wpb_modify_jquery() {
//check if front-end is being viewed
if (!is_admin()) {
// Remove default WordPress jQuery
wp_deregister_script('jquery');
// Register new jQuery script via Google Library
wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', false, '3.6.0');
// Enqueue the script
wp_enqueue_script('jquery');
}
}
// Execute the action when WordPress is initialized
add_action('init', 'wpb_modify_jquery');
Nous vous recommandons d’utiliser l’extension d’extraits de code WPCode pour ajouter ce code dans WordPress. Il est gratuit, facile à utiliser et ne cassera pas votre site en cas de problème.
Note : Il existe également une version premium de WPCode qui offre des fonctionnalités avant comme les révisions de code, les pixels de conversion automatique, les extraits planifiés, une bibliothèque dans le cloud privé, et plus encore.
Pour Premiers pas, vous devrez installer et activer WPCode. Si vous avez besoin d’aide, consultez notre guide sur l’installation d’une extension WordPress.
Une fois l’extension activée, accédez à Code Snippets « Add Snippet depuis votre tableau de bord WordPress. De là, trouvez l’option » Add Your Custom Code (New Snippet) » et cliquez sur le bouton » Use snippet » situé en dessous.
À partir de là, vous devez sélectionner « Extrait de code PHP » dans la liste des types de code qui s’affiche à l’écran.
Ensuite, vous pouvez ajouter un titre à votre extrait de code. Il peut s’agir de n’importe quoi pour vous aider à vous souvenir de l’objet du code.
Ensuite, il suffit de coller le code ci-dessus dans la case « Aperçu du code ».
Dernier point, permutez le commutateur de « Inactif » à « Actif » et cliquez sur le bouton « Enregistrer l’extrait ».
C’est tout ! WordPress va maintenant remplacer le jQuery par défaut et le charger via la bibliothèque Google à la place.
Note: Cette méthode continue de charger la version de jQuery mentionnée dans l’URL. À l’avenir, vous devrez peut-être modifier l’URL de la bibliothèque Google pour utiliser une version plus récente de jQuery.
Google ne mettra pas automatiquement à jour le numéro de version pour vous, car cela pourrait entraîner des problèmes de compatibilité si votre thème ou vos extensions s’appuient sur une version différente.
Vous trouverez la dernière URL en visitant le site des bibliothèques hébergées par Google.
Vous y trouverez également les URL des anciennes versions de jQuery que vous pourrez utiliser pour le dépannage si nécessaire.
Remplacement d’autres bibliothèques jQuery par défaut
En plus de la bibliothèque centrale jQuery, WordPress inclut également un certain nombre d’autres scripts jQuery. Certains de ces scripts, comme jQuery Mobile et jQuery UI, sont hébergés dans la bibliothèque de Google.
Pour les autres bibliothèques, vous pouvez utiliser les propres serveurs CDN de jQuery pour les charger beaucoup plus rapidement. Dans l’exemple abonné, nous avons remplacé le script WordPress jquery-ui-core par la version officielle de jquery-ui.
function wpb_modify_jquery_ui() {
if (!is_admin()) {
wp_deregister_script('jquery-ui-core');
wp_register_script('jquery-ui-core', 'https://code.jquery.com/ui/1.12.1/jquery-ui.min.js', false, '1.12.1');
wp_enqueue_script('jquery-ui-core');
}
}
add_action('init', 'wpb_modify_jquery_ui');
Tout comme les bibliothèques Google, vous devrez remplacer l’URL au bout d’un certain temps pour utiliser la dernière version du script.
Désactiver complètement jQuery dans WordPress
En raison de sa large utilisation, nous ne recommandons pas de désactiver complètement jQuery sur votre site WordPress. Même si votre thème WordPress n’utilise pas jQuery, de nombreuses extensions WordPress populaires en ont encore besoin.
Toutefois, si vous êtes certain que votre site web n’a pas besoin de jQuery, vous pouvez le désactiver en toute sécurité.
Il suffit d’ajouter le code suivant au fichier de fonctions de votre thème, à une extension spécifique au site ou à une extension d’extraits de code comme WPCode.
if ( !is_admin() ) wp_deregister_script('jquery');
C’est tout. Ce code empêche simplement le script jQuery de se charger sur l’interface publique de votre site WordPress.
Dépannage des problèmes liés à jQuery dans WordPress
Les nouvelles versions de jQuery peuvent parfois obsolète, ou retirer, d’anciennes méthodes et fonctions. Si une extension WordPress de votre site utilise une ancienne méthode, cela peut potentiellement entraîner des problèmes.
Il se peut que vous remarquiez des avertissements dans la zone Console de l’outil Inspecter, ou que certaines fonctionnalités aient avant tout cessé de fonctionner.
WordPress utilisait un script appelé jQuery-migrate pour assurer la compatibilité avec les anciennes versions de jQuery. Cependant, depuis WordPress 5.5, ce script a été retiré de WordPress.
Si vous souhaitez réintégrer le script jQuery-migrate ou dépanner entre différentes versions de jQuery, vous pouvez essayer la méthode suivante.
Il suffit d’installer et d’activer l’extension Contrôle de version pour jQuery. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.
Une fois activé, vous devez vous rendre sur la page Réglages » jQuery Version Control. À partir de là, vous pouvez choisir la version de jQuery que vous souhaitez utiliser.
L’extension chargera automatiquement cette version depuis le CDN officiel de jQuery.
L’extension chargera également le script jQuery migrate. Si vous le souhaitez, vous pouvez le désactiver lors du dépannage.
N’oubliez pas de cliquer sur le bouton « Enregistrer les modifications » pour enregistrer vos modifications.
Nous espérons que cet article vous a aidé à apprendre comment remplacer le jQuery par défaut de WordPress par la bibliothèque Google. Vous pouvez également consulter ces tutoriels jQuery utiles pour les utilisateurs/utilisatrices de WordPress ou voir notre guide complet d’optimisation des performances de WordPress.
Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
ALEX
Hello,
We have a server in China, and all of resource from Google are blocked by Chinese government firewall.
But, the Jquery and Fonts resources are loaded from Google on Wordpress by default now, and the site is caused seriously delay.
So, is there anyway to force Js or CSS resources to be loaded from local server please?
Thanks
WPBeginner Support
If you have a web address for the jquery files on a local server then you would change the url in the snippet to point toward where the jquery is located.
Administrateur
Wilbur
Hey, sorry for haling this post out of the grave… How relevant is this still? In Terms of the latest P Core versions?
Thanks
Jorge
Hi,
Here is a more advanced implementation:
add_action( ‘wp_enqueue_scripts’, ‘register_jquery’ );
function register_jquery() {
if (!is_admin()) {
wp_deregister_script(‘jquery-core’);
wp_register_script(‘jquery-core’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js’, true, ‘1.11.3’);
wp_enqueue_script(‘jquery-core’);
wp_deregister_script(‘jquery-migrate’);
wp_register_script(‘jquery-migrate’, ‘http://cdn.yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js’, true, ‘1.2.1’);
wp_enqueue_script(‘jquery-migrate’);
}
}
Where « cdn.yourdomain.com » it should be replaced by the file path, using a CDN for a better result.
Best Regards,
Jorge Ortiz
Simon
Both the post’s solution and this one break my site
Plato39
Jorge’s code worked for me – but the quotation marks must be replaced. Try this:
add_action( ‘wp_enqueue_scripts’, ‘register_jquery’ );
function register_jquery() {
if (!is_admin()) {
wp_deregister_script(‘jquery-core’);
wp_register_script(‘jquery-core’, ‘https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js’, true, ‘1.11.3’);
wp_enqueue_script(‘jquery-core’);
wp_deregister_script(‘jquery-migrate’);
wp_register_script(‘jquery-migrate’, ‘http://cdn.yourdomain.com/wp-includes/js/jquery/jquery-migrate.min.js’, true, ‘1.2.1’);
wp_enqueue_script(‘jquery-migrate’);
}
}
Plato39
OK – it’s this webpage that is adding the fancy quotes. Just do a ‘find and replace’ in your text editor (or manually replace the quotes with plain ones) and the code will work in your theme’s functions.php file.
Shaurya
what do i put in the url if I dont have a cdn ?
will
hi
thank you very much for your post, I tried to change it and do not know if I did well because my web now is 2 seconds slower
How do I check if I did well and I’m using the google libraries?
Ihsan
I tested code above and i replace the last line with this to make it work and better
add_action( ‘wp_print_scripts’, ‘modify_jquery’, 100 );
Alejandro
Hi, Thank you for your tips. I do not know Why when using this function, the jquery from Google is loading twice, I mean, I have two HTTP request instead of one, Here is the test: http://tools.pingdom.com/fpt/#!/dROQaF/http://elbauldelprogramador.com.
With jquery.easing the same happends, but this time with 3 HTTP request for the same file.
Any ideas? I’ve been looking into the code but didn’t find duplication of wp_enqueue_script( »);
Thank you in advance
Alejandro
Just notice that when I am logged in, jquery from google is only loaded once.
Mathieu
Thanx! The jQuery used to break up my admin functionality now that’s solved.
Mitch
Thanks much appreciated.
Joseph Chambers
What if I want to load either HTTP or HTTPS based on whatever the visitor is visiting our page on.
for most things we can change: http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js -> //ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js and it works. However; something in the wp_register_script() is throwing a error ( White page with the word: Error ) when I change that. thoughts, solutions?
Sajid Iqbal
Thanks Syed for this great post. Saved me a lot of time.
Matt Ogborne
Very helpful, Thank you!
Matt
Riversatile
Hi,
Here is the latest version of the googleapi jquery file.
When you copy/paste the code above, don’t forget to replace the jquery URl by this one :
http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
Then replace « 1.4.4 » by « 1.6.2 »
Like that :
//Making jQuery Google APIfunction modify_jquery() { if (!is_admin()) { // comment out the next two lines to load the local copy of jQuery wp_deregister_script(‘jquery’); wp_register_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js’, false, ‘1.6.2’); wp_enqueue_script(‘jquery’); }}add_action(‘init’, ‘modify_jquery’);
vnu
Could anyone tell me if I need to modify (!is_admin) to « minimum » capability if I use a plugin plugin like thethefly ‘s tabs and accordions . So the tabs created on pages are view-able by everyone?
Thanks !
Melissa Cleaver
Thanks so much for the code, but when I tried to use it in my functions.php file, I got a fatal error, no matter where in the code I put it. Am I doing something wrong here?
Editorial Staff
Try the new code that we just put out there.
Administrateur
swanie
Question: does Google Library do a good job at pulling in the alt tag info from the media library? … I have several professional themes that use a main page jQuery slider, but they don’t pull in the alt tag … thus, the source code look like: alt= » » … which of course, is an seo no-no. I’ve never used the Google Library script … I’d be curious how that works. What’s your experience?
Editorial Staff
Alt tag for what? This is only replacing the javascript….
Administrateur
swanie
OK … I guess I’m specifically talking about jQuery sliders … I have purchased several professional themes with a main page jQuery slider … here’s one of them: http://coloradospringsautomechanics.com … if you view source, it pulls in the images, but not the alt tags … the alt tag is empty.
I guess by reading this post, this Google Library approach could possibly resolve that.
Another solution could be to break open the plugin files and add to the alt tag so I should have:
img src= »file.jpg » alt= » » title= » »
Just wondering why these jQuery sliders don’t pull in the alt tags. That make sense? Am I off-subject?
You guys rock, by the way.
Aamir Rizwan
Your website is flagged « malware » by Google.
Geraldo
//Offtopic
@Swanie
Go and look here : http://sitecheck.sucuri.net/results/coloradospringsautomechanics.com/
Security report (Warnings found):
error Blacklisted: Yes
error Likely compromised: Yes
//Ontopic
We can’t : « bundle » all our JQuery scripts? Do we have to make a call for every script seperate?
WPBeginner Support
@Geraldo : you can resolve dependensies. For example if you are loading a jQuery script it would obviously need jQuery so you add that as dependency and WordPress would enqueue it for you.