PageSpeed WordPress (SEO) : éliminer les codes Javascript et les styles CSS qui bloquent l’affichage

Mathieu Chartier 24 août 2015 à 19:11 Tutoriels vidéo 12 commentaires

Découvrons une petite astuce simple pour optimiser le PageSpeed Google dans un site WordPress à l'aide d'un petit tutoriel vidéo et codé (voir conclusion de ce tutoriel sous la vidéo pour le télécharger).

Le PageSpeed de Google est l'un des critères de positionnement les plus techniques à appliquer

Le PageSpeed de Google est l'un des critères de positionnement les plus techniques à appliquer puisque sa batterie de facteurs n'est pas toujours simple à appliquer (voire certains points sont quasiment impossibles à atteindre dans bien des cas). Notre objectif est souvent de tendre vers la meilleure note possible et l'astuce suivante vous aidera sûrement dans cette quête... :D

L'astuce suivante vise à régler le souci du critère appelé "Éliminer les codes JavaScript et CSS qui bloquent l'affichage du contenu au-dessus de la ligne de flottaison" dans un site web construit avec le CMS WordPress. Souvent, les extensions voire les thèmes injectent n'importe comment et n'importe où les fichiers Javascript (ou jQuery) et les feuilles de styles CSS, il est de rigueur de nettoyer tout cela et de réorganiser l'ensemble de ces ressources pour les insérer dans le pied de page (footer.php dans WordPress via la fonction WP_footer).

Tutoriel vidéo - PageSpeed WordPress (SEO) : éliminer les codes Javascript et les styles CSS qui bloquent l’affichage

Conclusion

Pour ceux que ça intéresse, le code peut être téléchargé ci-dessous, cela vous évitera de tout recopier à partir de la vidéo. ^^

Télécharger “Fonctions d'optimisation du PageSpeed WordPress”dequeue_enqueue_styles_scripts.zip – Téléchargé 1573 fois – 505 B

Comme je l'indique dans le tutoriel vidéo, il existe une variante possible pour injecter les styles CSS à l'endroit où vous le voulez (dans le pied de page idéalement bien entendu) grâce aux "dépendances" de la fonction wp_enqueue_style (3e argument de la fonction). Il suffit d'appliquer une premier style CSS "enqueue" dans le pied de page puis d'ajouter automatiquement une dépendance aux autres feuilles de style. C'est plus technique mais ça peut fonctionner...

Notez tout de même que ces deux techniques, aussi fonctionnelles soient-elles, provoquent des erreurs W3C. Il est notamment interdit de placer une balise <link/> hors de la section <head>...</head> en théorie... Comme souvent avec Google, il nous est conseillé de mettre en place des techniques qui sont invalides au W3C, à vous de faire le choix entre code ou PageSpeed... :-)

J'espère que cette astuce vous servira à l'occasion mais retenez qu'elle m'a fait gagner quelques points de PageSpeed sur plusieurs sites WordPress. Voici le résultat de mon côté (il reste uniquement style.css que je n'ai pas voulu déplacer).

Optimiser le PageSpeed Google sur WordPress

N.B. : rien ne vous empêche de "bloquer" le déplacement de certains scripts en les nommant directement dans un "if($dequeue_style != "mon_handle") { ... }" ou en enregistrant dans un tableau (en remplacement de $all_enqueue_styles) uniquement les styles que vous souhaitez déplacer dans le footer.

12 commentaires

  • Manu dit :

    Merci pour le tuto ! Malheureusement cela ne marche pas bien sur mon site, je l'ai testé en locale (en copiant le code fourni et en le mettant au début de function.php de mon thème) :
    - le slider à la page Accueil ne fonctionne plus
    - il m'affiche la page sans style et petit à petit il charge les styles et corrige l'affichage de la page
    - A vue d'oeil, j'ai l'impression que cela ralenti l'affichage ...

    Est ce que c'est dû au fait que je n'ai pas mis manuellement en header le script principale (que je ne connais pas d’ailleurs) ??

    Remarque Subsidiaire : je ne comprend pas comment "Themeforest" arrive par exemple à accepter à la vente des thèmes écrites avec les pieds comme vous dites !!!

    • De rien. Cela fonctionne donc très bien si vous avez ces bugs. Vous vivez justement l'inconvénient d'avoir des styles en bas de page, c'est-à-dire que les scripts voire les styles se retrouvent à être chargés après coup ou mal chargés, ce qui génère des bugs, notamment avec les sliders.
      Pour ma part, je commente toujours la ligne "// remove_action('wp_head', 'wp_enqueue_scripts', 1);" (et son équivalent avec add_action) car ça me pose quelques problèmes.
      Donc en fait, l'astuce fonctionne chez vous, mais limite, c'est trop pour votre thème, cela signifie que vous devrez conserver des scripts au-dessus de la ligne de flottaison, n'en déplaise à Google et consorts...
      N.B. : concernant les thèmes comme ceux de ThemeForest ou autres, je me demande toujours comment on peut en arriver là. Certes, ils ont plein de fonctionnalités et de techniques intéressantes, mais les codes à l'intérieur piquent les yeux en général (et font ramer les sites d'ailleurs). Il en faut pour tous les goûts mais je n'aime pas ça...

  • virlouvet dit :

    Fonctionne parfaitement :)
    Un grand merci qui évite des plugins gourmand !
    Petite question, comment conserver ce code lors de la mise à jour du thème ?

    Cordialement

    • Bonjour,
      Malheureusement si vous travaillez directement sur un thème qui est mis à jour, vous perdrez le code à chaque fois. L'idéal est de travailler avec un thème enfant dans ce cas. C'est très facile à créer, la documentation pourra vous aider (tapez "thème enfant WordPress", vous trouverez tout de suite sur Google) et là, vous aurez tous les bénéfices de votre thème, sans les inconvénients des mises à jour. :D

  • Hélène dit :

    Merci Mathieu,

    J’ai gagné 7% en PageSpeed Score sur Gtmetrix en intégrant ton bout de code pour passer les styles CSS à la fin.
    Malheureusement cela me plante mon blog pour les JS… et je n'ai pas les compétences adéquates pour extraire le/ les fichiers.js liés au blog.
    Le site en question http://thalya-events.com/

    Un grand merci :)

    • Je suis conscient que ce code peut provoquer des erreurs, il est conseillé de ne pas forcément tester tous les codes pour Javascript selon le thèmes installés. Pour ce blog par exemple, voici ce que j'utilise :
      remove_action('wp_head', 'wp_print_scripts');
      remove_action('wp_head', 'wp_print_head_scripts', 9);
      // remove_action('wp_head', 'wp_enqueue_scripts', 1); // Code commenté car il fait planter certaines extensions
      add_action('wp_footer', 'wp_print_scripts');
      add_action('wp_footer', 'wp_print_head_scripts');
      // add_action('wp_footer', 'wp_enqueue_scripts'); // Code commenté car il fait planter certaines extensions

      Cela dépend de chaque code en réalité, mais dans l'absolu, il faudrait tout mettre pour gagner un maximum au niveau du PageSpeed. ;-)

  • E-design dit :

    Bonjour, je viens d'essayer votre code et je suis dégouté ! Je passe de 79/100 à 98/100 sur Google Speed version mobile mais par contre j'ai des problèmes d'affichages qui apparaissent du coup ! C'est vraiment dommage, 19 points de gagné !!! Mais je dois me résoudre à remettre comme avant ...Je en suis pas développeur et j'utilise un thème justement acheter sur Themeforest il y a quelques temps de cela. Pour info, j'ai réussi à monter le google speed à 98/100 pour la version ordinateur en partant d'un thème évalué à 25/100 pour mobile et 31/100 pour ordi :D
    Oui, c'est effectivement codé avec les pieds haha ...Si jamais vous voulez m'aider à rendre votre code compatible avec mon thème ça serait avec joie ^^

    • Bonjour,
      Le code que je présente ici est "théorique" et "brut", c'est-à-dire qu'il reprend bêtement et simplement un système de filtre classique de WordPress. Il est bien entendu possible de faire cela de manière plus précise avec les hooks, en ciblant les scripts qui vous gênent, etc. Vous pouvez également tenter de désactiver une partie seulement des codes que j'ai indiqués pour voir si vous avez toujours des bugs, ça améliorerait le PageSpeed sans avoir les blocages que vous avez ressentis (ça m'est arrivé aussi sur certains sites, rassurez-vous, ce sont les joies de Javascript ça...). ;-)

  • bestnextway dit :

    salut

    est ce que je peux ajouter ce code dans mon site

    merci

    • Bien entendu, c'est fait pour ça !
      En revanche, selon les sites, il arrive qu'il faille adapter le code (ça dépend des plugins utilisés, qui parfois n'acceptent pas le déplacement en pied de page).

  • Louis dit :

    Bonjour,
    Comment inverser cette action ? Car, mon slider ne fonctionne plus.

    • Très simple, il suffit la ou les ligne(s) de code qui posent problème. Par exemple, il peut arriver que le décalage de certaines actions du hook "wp_head" causent des soucis, c'est vraiment du cas par cas. Si cela arrive, il faut tenter d'activer ou désactiver le déplacement d'une première action, puis voir ce que ça fait, et ainsi de suite. Sur ce blog par exemple, voici mes réglages (on voit bien que deux lignes sont commentées avec "//" en début de ligne) :
      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');
      add_action('wp_footer', 'wp_print_head_scripts');
      // add_action('wp_footer', 'wp_enqueue_scripts');

  • Déposer un commentaire

    L'adresse de messagerie ne sera pas publiée.* Champs obligatoires