Pour des questions de temps de chargement et de référencement, il est aujourd'hui régulièrement conseillé de passer tout le JavaScript (ou le maximum) dans le footer des pages. Les codes JavaScripts sont connus pour bloquer l'affichage de certaines pages, le code de la page se chargeant de haut en bas, les déplacer dans le footer peut contribuer à afficher les éléments plus rapidement, même si tout n'est pas encore chargé, et ainsi garder les visiteurs sur votre site.
En résumé, cela permet de charger le contenu, le visuel en premier pour que le visiteur puisse tout voir, puis les fonctions JavaScript.
Mais tous les CMS et extensions ne suivent pas encore cette pratique. Malheureusement, de nombreuses extensions font des appels JavaScript dans la balise <head> ou le contenu de la page, donc avant le contenu à proprement parler en bloquant son chargement.
On va voir ici comment procéder avec WordPress. Le but est d'améliorer les temps de chargement, ce qui sera appréciable autant côté visiteurs que Google via votre score PageSpeed.
La première méthode consiste à tout bouger en bloc dans la balise <footer> de votre site. Elle ne s'applique pas forcément à tout le monde, en fonction du thème, des extensions qu'on a installées et/ou des fonctions qu'on a pu ajouter, elle pourrait nuire au bon fonctionnement de l'ensemble. Il faut donc bien tout tester après l'avoir appliquée. On va ici désinscrire le chargement des JavaScripts dans la balise <head> pour les ré-inscrire dans la balise <footer>.
Pour cela, il faut modifier le fichier functions.php qui se trouve à la racine du dossier du thème utilisé (/wp-content/themes/theme).
On va ajouter les lignes suivantes en fin de fichier (si le fichier se termine par une balise de fermeture de code php ?>, on inscrit le code juste avant cette balise) :
// Script pour déplacer les JS dans le footer
function remove_head_scripts() {
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action( 'wp_enqueue_scripts', 'remove_head_scripts' );
// Script pour déplacer les JS dans le footer
Après cette modification, on teste bien le fonctionnement du site avec plusieurs appareils (ordinateurs, tablettes, téléphones...), plusieurs OS (Mac OS, Windows...) et plusieurs navigateurs (Chrome, Safari, Firefox, Internet Explorer, Microsoft Edge...). Si tout fonctionne, c'est parfait, si ce n'est pas le cas, on supprime ces lignes et il va falloir envisager une seconde méthode, qui sera plus longue et compliquée, bouger les scripts un par en dans le footer afin de déterminer celui ou ceux qui ne peuvent pas être déplacé pour le bon fonctionnement du site..
ATTENTION, ces opérations pourraient nuire au bon fonctionnement de votre site en fonction de l'environnement, des plugins installés, et de la manière dont les changements ont été faits. Si la tâche vous paraît compliquée, mieux vaut faire appel à un développeur. Il est également très fortement conseillé de faire un backup avant de se lancer dans ces modifications.
BLOG COMMENTS POWERED BY DISQUS
