Récemment, l'un de nos lecteurs nous a demandé comment déplacer les scripts JavaScript en bas dans WordPress pour augmenter leur score de vitesse de page Google. Nous sommes heureux qu'ils aient posé la question, car honnêtement, nous voulions écrire à ce sujet. Auparavant, nous avons parlé de la façon de ajouter correctement des scripts JavaScript et des styles CSS dans WordPress. Dans cet article, nous vous montrerons comment déplacer les scripts JavaScript en bas dans WordPress, afin que vous puissiez améliorer le temps de chargement de votre site et votre score de vitesse de page Google.
Avantages du déplacement des scripts JavaScript en bas
JavaScript est un langage de programmation côté client. Il est exécuté et lancé par le navigateur Web d'un utilisateur et non par votre serveur Web. Lorsque vous placez JavaScript en haut, les navigateurs peuvent exécuter ou traiter le JavaScript avant de charger le reste de votre page. Lorsque les scripts JavaScript sont déplacés vers le bas, votre serveur Web rendra rapidement la page, puis le navigateur de l'utilisateur exécutera les scripts JavaScript. Comme tout le rendu côté serveur est déjà terminé, le JavaScript se chargera en arrière-plan, rendant le chargement global plus rapide.
Cela améliorera votre score de vitesse lors des tests avec Google Page Speed ou Yslow. Google et d'autres moteurs de recherche considèrent désormais la vitesse de la page comme l'une des métriques de performance lors de l'affichage des résultats de recherche. Cela signifie que les sites Web qui se chargent plus rapidement apparaîtront plus en évidence dans les résultats de recherche.
La bonne façon d'ajouter des scripts dans WordPress
WordPress dispose d'un puissant système de mise en file d'attente qui permet aux développeurs de thèmes et de plugins d'ajouter leurs scripts en file d'attente et de les charger au besoin. La mise en file d'attente correcte des scripts et des styles peut améliorer considérablement la vitesse de chargement de vos pages.
Pour vous montrer un exemple simple, nous allons ajouter un petit JavaScript à un thème WordPress. Enregistrez votre JavaScript dans un fichier .js et placez ce fichier .js dans le répertoire js de votre thème. Si votre thème n'a pas de répertoire pour les JavaScripts, créez-en un. Après avoir placé votre fichier de script, modifiez le fichier functions.php de votre thème et ajoutez ce code :
function wpb_adding_scripts() {
wp_register_script('my-amazing-script', get_template_directory_uri() . '/js/my-amazing-script.js','','1.1', true);
wp_enqueue_script('my-amazing-script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
Dans ce code, nous avons utilisé la fonction wp_register_script(). Cette fonction a les paramètres suivants :
<?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?>
Pour ajouter le script dans le pied de page ou en bas d'une page WordPress, il vous suffit de définir le paramètre $in_footer sur true.
Nous avons également utilisé une autre fonction get_template_directory_uri() qui renvoie l'URL du répertoire du modèle. Cette fonction doit être utilisée pour la mise en file d'attente et l'enregistrement des scripts et des styles dans les thèmes WordPress. Pour les plugins, nous utiliserons la fonction plugins_url().
Le problème :
Le problème est que parfois les plugins WordPress ajoutent leur propre JavaScript aux pages dans <head> ou dans le corps de la page. Pour déplacer ces scripts en bas, vous devez modifier vos fichiers de plugin et déplacer correctement les scripts en bas.
Trouver la source du JavaScript
Ouvrez votre site dans le navigateur web et affichez le code source de la page. Vous verrez le lien vers le fichier JavaScript indiquant l'emplacement et l'origine du fichier. Par exemple, la capture d'écran ci-dessous nous indique que notre script appartient à un plugin appelé 'test-plugin101'. Le fichier de script est situé dans le répertoire js.
Parfois, vous verrez du JavaScript ajouté directement dans la page et non lié via un fichier .js séparé. Dans ce cas, vous devrez désactiver tous vos plugins un par un. Rafraîchissez la page après avoir désactivé chaque plugin jusqu'à ce que vous trouviez celui qui ajoute le script à vos pages. Si le JavaScript ne disparaît pas même après avoir désactivé tous les plugins, essayez de passer à un autre thème pour voir si le JavaScript est ajouté par votre thème.
Enregistrer et mettre en file d'attente les scripts
Une fois que vous avez trouvé le plugin ou le thème qui ajoute du JavaScript dans la section d'en-tête, l'étape suivante consiste à découvrir où le plugin appelle le fichier. Dans l'un des fichiers PHP de votre thème ou plugin, vous verrez un appel à ce fichier .js particulier.
Si le plugin ou le thème utilise déjà la mise en file d'attente pour ajouter un fichier JavaScript, tout ce que vous avez à faire est de modifier la fonction wp_register_script dans votre plugin ou thème et d'ajouter true pour le paramètre $in_footer. Comme ceci :
wp_register_script('script-handle', plugins_url('js/script.js' , __FILE__ ),'','1.0',true);
Supposons que votre plugin ou thème ajoute du JavaScript brut dans l'en-tête ou entre le contenu. Trouvez le code JavaScript brut dans les fichiers du plugin ou du thème, copiez le JavaScript et enregistrez-le dans un fichier .js. Utilisez ensuite la fonction wp_register_script() comme indiqué ci-dessus, pour déplacer le JavaScript vers le bas.
Note de l'éditeur : Il est important de comprendre que lorsque vous apportez des modifications aux fichiers principaux et que vous mettez à jour le plugin, vos modifications ne seront pas écrasées. Une meilleure façon de procéder serait de désenregistrer le script et de le réenregistrer à partir du fichier functions.php de votre thème. Voir ce tutoriel.
En plus de déplacer les scripts dans le pied de page, vous devriez également envisager d'utiliser un plugin de médias sociaux plus rapide et de charger les images en différé. En plus de cela, vous devriez également utiliser W3 Total Cache et MaxCDN pour améliorer la vitesse de votre site.
Nous espérons que cet article vous a aidé à déplacer les scripts JavaScript en bas dans WordPress et à améliorer la vitesse de votre page. Pour toute question ou commentaire, veuillez laisser un commentaire ci-dessous.
Ravi
Mes plugins se mettront-ils à jour normalement lorsque je déplacerai leurs js dans un seul fichier ? Je suis un débutant.
L'équipe de WPBeginner
Il existe plusieurs façons de le faire. L'une des plus courantes consiste à coller les fichiers JavaScript chargés par différentes sources dans un seul fichier JS, puis à l'enfiler.
Catharine
Super, merci !
Catharine
Salut Syed, merci pour le tutoriel. Cependant, je suis un débutant complet et j'ai une question très basique. Pour ce morceau de code que vous avez posté (la fonction entière, etc.), devons-nous l'ajouter dans le fichier functions.php pour chaque petit bout de javascript que nous voulons mettre en file d'attente ? Je suppose que ce que je demande, c'est comment formateriez-vous ce code s'il y avait plus d'un morceau de javascript qui était chargé dans les en-têtes de plus d'une page ? Votre aide serait grandement appréciée !
Marc Jacobs
Salut, excellent tutoriel. J'ai cependant une question. J'ai fait passer mon site web par Google Page Speed Insights et j'ai reçu l'avertissement que je devais éliminer le Javascript (et le CSS) bloquant le rendu pour améliorer la vitesse de ma page. J'ai lu les informations sur ce site (excellente lecture !), mais je n'arrive pas à trouver les fichiers php où le plugin « appelle » les fichiers js qui ralentissent mon site. J'ai identifié le plugin qui cause la majeure partie du retard (Google-maps-ready), mais je ne sais pas comment procéder à partir de là. J'ai cherché dans tous les fichiers php du dossier du plugin, mais je ne trouve aucun fichier js nommé de manière similaire aux fichiers mentionnés dans le test de vitesse de Google :
…
Comment puis-je trouver quel fichier php modifier ? Votre aide serait très appréciée !
Salutations,
Marc.
Support WPBeginner
Un plugin sur votre site, Google Maps Ready, ajoute ces fichiers.
Admin
Basavaraj Tonagatti
Bonjour, j'ai récemment migré vers Genesis Framework + Eleven 40 Child Theme. Je rencontre également le même problème lorsque j'exécute le test de vitesse de Google. Mais comme je ne connais pas la méthode exacte pour le faire, j'ai du mal à apporter des modifications. Quelqu'un peut-il me guider sur la cause exacte sur mon site et comment supprimer ce problème de Javascript ? (Je ne connais aucune langue de style et je suis totalement ignorant de ces langages de code.)
Joseph Stanley-Hunt
Merci beaucoup, je me demandais comment faire cela et quelques autres astuces (que j'ai également trouvées ici).
Une question cependant, je vois qu'il n'y a pas de in-head dans les paramètres. est-ce que cela signifie que si in_footer est défini sur false, il est automatiquement enregistré dans le head ?
Support WPBeginner
Oui, la valeur par défaut de in_footer est false. Vous devez donc explicitement ajouter in_footer à true, sinon il apparaîtra dans le head.
Admin
Mike
La mise à jour du plugin m'est immédiatement venue à l'esprit aussi. J'attends d'autres conseils à ce sujet.
Jason
Excellent article ! Je me pose cette question depuis longtemps car de nombreux thèmes sont pénalisés dans le test de vitesse de Google en raison du chargement des scripts java en premier. Peut-être que d'autres savent comment placer ces scripts dans le pied de page.
Encore merci et je vais essayer cela et vous dirai comment ça marche.
Jeremy Myers
Super tutoriel.
Mais une fois que nous aurons mis à jour le plugin, nous devrons refaire cela, n'est-ce pas ? Et à chaque mise à jour du plugin ?
Est-il possible de désenregistrer le js dans functions.php et de le réenregistrer simplement dans le pied de page d'une manière ou d'une autre ?
adam
Salut, merci pour ces conseils utiles. Mais, comment déplacer le .js de la minification de W3 Total Cache dans l'en-tête ?
C'est l'emplacement du js dans le cache dans wp content, pas dans le plugin wp.
Lucca
Merci pour ces connaissances précieuses – continuez votre excellent travail.
Raj
Nice and Simple guide. Thanks for posting this article to increase the speed of WordPress
Danyel Perales
Bonne astuce. Merci de partager !