Comment déplacer des scripts Java vers le bas ou le pied de page dans WordPress

Récemment, un de nos lecteurs nous a demandé comment ils pouvaient déplacer les scripts Java au bas de WordPress pour augmenter leur score de vitesse de page Google. Nous sommes heureux qu'ils aient demandé, parce que honnêtement nous voulions écrire à ce sujet. Auparavant, nous avons expliqué comment ajouter correctement des scripts JavaScript et CSS dans WordPress. Dans cet article, nous allons vous montrer comment déplacer JavaScripts vers le bas dans WordPress afin d'améliorer le temps de chargement de votre site et votre score de vitesse de page Google..

Avantages du déplacement des scripts Java vers le bas

JavaScript est un langage de programmation côté client. Il est exécuté et exécuté par le navigateur Web de l'utilisateur et non par votre serveur Web. Lorsque vous placez JavaScript en haut, les navigateurs peuvent l'exécuter ou le traiter avant de charger le reste de votre page. Lorsque les scripts Java sont déplacés vers le bas, votre serveur Web rend rapidement le rendu de la page, puis le navigateur de l'utilisateur exécute les scripts Java. Étant donné que tout le rendu côté serveur est déjà effectué, le code JavaScript se charge en arrière-plan, ce qui accélère la charge globale..

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 matrices 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 clairement dans les résultats de recherche..

La bonne façon d'ajouter des scripts dans WordPress

WordPress possède un système de mise en file d'attente puissant qui permet aux développeurs de thèmes et de plug-ins d'ajouter leurs scripts en file d'attente et de les charger au besoin. Mettre correctement en place les scripts et les styles peut considérablement améliorer la vitesse de chargement de votre page.

Pour vous montrer un exemple de base, nous allons ajouter un peu de JavaScript dans un thème WordPress. Enregistrez votre JavaScript dans un .js déposer et placer ce .js déposer dans votre thème js annuaire. Si votre thème ne dispose pas d'un répertoire pour JavaScripts, créez-en un. Après avoir placé votre fichier script, éditez celui de votre thème. functions.php déposer et ajouter ce code:

 function wpb_adding_scripts () wp_register_script ('mon-script-étonnant', get_template_directory_uri (). '/js/my-amazing-script.js', '' '1.1', true); wp_enqueue_script ('mon-script-incroyable' ' ); 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:

Pour ajouter le script au bas de la page ou au bas d’une page WordPress, il suffit de définir la $ in_footer paramètre à vrai.

Nous avons également utilisé une autre fonction get_template_directory_uri () qui renvoie l'URL du répertoire de modèles. Cette fonction devrait être utilisée pour mettre en file d'attente et enregistrer des scripts et des styles dans des thèmes WordPress. Pour les plugins, nous utiliserons plugins_url () une fonction.

Le problème:

Le problème est que parfois les plugins WordPress ajoutent leur propre JavaScript aux pages à l'intérieur ou à l'intérieur du corps de la page. Pour déplacer ces scripts vers le bas, vous devez éditer vos fichiers de plug-in et les déplacer correctement vers le bas..

Trouver la source JavaScript

Ouvrez votre site dans le navigateur Web et affichez le 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 js annuaire.

Parfois, vous verrez JavaScript ajouté directement dans la page et non lié à un fichier .js séparé. Dans ce cas, vous devrez désactiver tous vos plugins un par un. Actualisez la page après avoir désactivé chaque plug-in jusqu'à trouver celui qui ajoute le script à vos pages. Si le JavaScript ne disparaît pas même après la désactivation de tous les plugins, essayez de changer de thème pour voir si le JavaScript est ajouté par votre thème..

Scripts d'inscription et de mise en file d'attente

Une fois que vous avez trouvé le plug-in ou le thème qui ajoute du JavaScript dans la section d'en-tête, l'étape suivante consiste à déterminer où le plug-in appelle le fichier. Dans l’un des fichiers PHP de votre thème ou de votre plug-in, vous verrez un appel de celui-ci. .js fichier.

Si le plugin ou le thème utilise déjà la mise en file d'attente pour ajouter un fichier JavaScript, il vous suffit alors de modifier la fonction wp_register_script dans votre plugin ou votre thème et d'ajouter true pour le paramètre $ in_footer. Comme ça:

 wp_register_script ('script-handle', plugins_url ('js / script.js', __FILE__), "," 1.0 ", true); 

Supposons que votre plugin ou votre thème ajoute du code 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 fichier. Puis utiliser wp_register_script () fonctionne comme indiqué ci-dessus, pour déplacer JavaScript vers le bas.

Note de la rédaction: Il est important de comprendre que lorsque vous modifiez les fichiers principaux et mettez à jour le plug-in, vos modifications ne sont pas remplacées. Une meilleure façon de procéder consiste à désenregistrer le script et à le réenregistrer à partir du fichier functions.php de votre thème. Voir ce tutoriel.

En plus de déplacer les scripts vers le pied de page, vous devez également envisager d’utiliser un plug-in de réseau social plus rapide et des images à chargement paresseux. Parallèlement, vous devez é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 JavaScripts vers le bas dans WordPress et à améliorer la vitesse de votre page. Pour des questions et des commentaires s'il vous plaît laissez un commentaire ci-dessous.