Récemment, un de nos lecteurs nous a demandé comment ils pouvaient déplacer les JavaScripts vers le bas dans WordPress pour augmenter leur score de vitesse de page Google. Nous sommes heureux qu’ils aient demandé, car honnêtement, nous voulions écrire à ce sujet. Auparavant, nous avons expliqué comment ajouter correctement des styles JavaScript et CSS dans WordPress. Dans cet article, nous allons vous montrer comment déplacer les JavaScripts vers le 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 de déplacer les JavaScripts vers le bas
JavaScript est un langage de programmation côté client. Il est exécuté et exécuté par le navigateur Web d’un utilisateur et non par votre serveur Web. Lorsque vous mettez JavaScript en haut, les navigateurs peuvent exécuter ou traiter le JavaScript avant de charger le reste de votre page. Lorsque les JavaScripts sont déplacés vers le bas, votre serveur Web affichera rapidement la page, puis le navigateur de l’utilisateur exécutera les JavaScripts. Étant donné que tout le rendu côté serveur est déjà effectué, le JavaScript se chargera en arrière-plan, ce qui accélérera le chargement global.
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 des pages 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 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 considérablement améliorer la vitesse de chargement de votre page.
Pour vous montrer un exemple basique, nous allons ajouter un peu de JavaScript dans un thème WordPress. Enregistrez votre JavaScript dans un .js classer et placer ça .js fichier dans votre thème js annuaire. 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, éditez votre thème functions.php fichier 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 $in_footer paramètre à true.
Nous avons également utilisé une autre fonction get_template_directory_uri() qui renvoie l’URL du répertoire de modèles. Cette fonction doit être utilisée pour mettre en file d’attente et enregistrer des scripts et des styles dans les 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 de
ou à l’intérieur du corps de la page. Afin de déplacer ces scripts vers le bas, vous devez éditer vos fichiers de plug-in et déplacer correctement les scripts vers le bas.Trouver la source JavaScript
Ouvrez votre site dans le navigateur Web et affichez la 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 se trouve dans le js
annuaire.
Parfois, vous verrez 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. Actualisez 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, alors 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 à savoir où le plugin a un appel pour le fichier. Dans l’un des fichiers PHP de votre thème ou plugin, vous verrez un appel à ce particulier .js déposer.
Si le plugin ou le thème utilise déjà la mise en file d’attente pour ajouter un fichier JavaScript, il vous suffit de modifier la fonction wp_register_script dans votre plugin ou 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 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 .js déposer. Utilisez ensuite wp_register_script() fonction comme indiqué ci-dessus, pour déplacer JavaScript vers le bas.
Note de l’éditeur : Il est important de comprendre que lorsque vous apportez des modifications aux fichiers principaux et mettez à jour le plug-in, vos modifications ne seront pas annulé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 vers le pied de page, vous devriez également envisager d’utiliser un plugin de médias sociaux plus rapide et des images de chargement paresseux. Parallèlement à cela, 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 les JavaScripts vers le bas dans WordPress et à améliorer la vitesse de votre page. Pour des questions et des commentaires, veuillez laisser un commentaire ci-dessous.
