Vous avez probablement essayer l’outil PageSpeed Insights de Google, comme moi vous aurez bien sur la suggestion suivante : « Éliminer les codes JavaScript qui bloquent l’affichage du contenu au-dessus de la ligne de flottaison ». Pour éliminer ces codes qui retardent le chargement du blog, il y a deux solutions: Une manuelle, l’autre automatique à l’aide d’un plugin.
Si vos codes JavaScript sont insérés dans l’entête de votre blog (au-dessus de la ligne de flottaison), ils vont retarder le chargement du blog, le contenu ne sera alors affiché qu’ après chargement de ces codes, ce qui est négatif même pour le Seo car les sites qui se chargent plus vite seront bien placés dans les résultats de recherche.
La bonne façon d’ajouter des scripts sous WordPress
Pour vous montrez un exemple, on va mettre un petit code JavaScript dans notre thème. Sauvegardez votre code JavaScript sous l’extension .js ,ensuite placez ce fichier .js dans le dossier js de votre thème.Si votre thème ne dispose pas d’un dossier JavaScripts, il faut le créer.
Après avoir placé ce fichier dans le dossier concerné, modifiez le fichier « functions.php » de votre thème et y 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 on a utilisé la fonction wp_register_script(). Voici les paramètres de cette fonction:
<?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?>
Pour ajouter ce code au footer ou en bas de page, vous devez définir le paramètre $in_footer à true.
Nous avons également utilisé une autre fonction get_template_directory_uri() qui retourne l’URL pour le dossier du thème. Pour les plugins, nous utiliserons la fonction plugins_url().
Le problème c’est que des fois des plugins WordPress ajoutent leur propre JavaScript aux pages à l’intérieur de la section <head> ou à l’intérieur du corps de la page. Pour déplacer ces scripts vers le bas du blog, il faut modifier les fichiers de vos plugins .
Comment trouver les fichiers JavaScript qui bloquent l’affichage de votre site?
C’est simple, faite un clic droit avec le bouton de la souris, puis afficher le code source de la page. Vous allez voir quelque chose semblable à :
Par exemple, la capture d’écran ci-dessus montre que notre script appartient à un plugin appelé ‘test-plugin101′. Le fichier de script se trouve dans le dossier js .
Parfois, vous verrez vos codes JavaScript ajoutés directement dans vos page et non liés par un Fichier .js séparé. Dans ce cas, vous devez désactiver tous les plugins un par un. Actualisez la page, jusqu’à ce que vous trouverez celui qui a ajouté le script dans vos pages. Si le code JavaScript ne disparaît pas, même après la désactivation de tous les plugins, essayez de changer votre thème pour voir si ce code JavaScript a été ajouté par votre thème.
Une fois que vous avez trouvé le plugin ou le thème qui a ajouté le code JavaScript dans la section « head », la prochaine étape est de savoir où ce plugin fait appel pour le fichier .js. Si le plugin ou le thème utilise déjà « enqueue » pour ajouter un fichier JavaScript, tout ce que vous devez faire est de changer la fonction « wp_register_script » dans votre plugin ou votre thème et ajouter « true » pour le paramètre $in_footer. Comme ceci:
<pre>wp_register_script('script-handle', plugins_url('js/script.js' , __FILE__ ),'','1.0',true);
Résumant : Supposant que votre thème ou plugin ont insérés un code .js dans l’entête du blog ou à l’intérieur de vos pages. Trouvez le code, copiez-le et enregistrez-le sous .js , après utilisez la fonction wp_register_script()pour déplacer le code en bas de votre blog.
Déplacer les codes JavaScript dans le footer automatiquement
Pour cela on va utiliser le plugin « JavaScript to Footer » , vous pouvez l’installer via le menu Extensions de votre administration ou en le téléchargeant via le lien précédent.
Pour l’utiliser c’est simple: il suffit de l’activer et vous script seront déplacés au footer.
Utilisation du plugin W3 Total Cache
Pour les utilisateurs du fameux plugin de cache « W3 Total Cache » , vous pouvez déplacer les code javascript de la section “head”, “body”, et “body end” dans l’endroit souhaité de votre thème en y insérant l’un des tags suivants:
<!-- W3TC-include-js-head --> <!-- W3TC-include-js-body-start --> <!-- W3TC-include-js-body-end -->
Pour déplacer les .js de l’entête dans le footer, il suffit de placer <!– W3TC-include-js-head –> dans le footer de votre blog.
Laisser un commentaire