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 26 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é 6393 fois – 505,00 o

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.

Autres articles sur ce thème...

Google et la vitesse de chargement des pages web (PageSpeed)

Google confirme qu’il n’utilise pas la bande passante comme critère de ranking

25 avril 2016
Vitesse de chargement, Pagespeed Google avec HTTP, HTTP/2 ou HTTPS

HTTPS serait-il plus efficace que le protocole HTTP en réalité ?

11 août 2017
Lazy Loading avec l'API Intersection Observer

Faire du Lazy Loading avec l’API Intersection Observer (Javascript)

19 novembre 2018

26 commentaires

  • Manu dit :
    7 janvier 2016 à 16:06

    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 !!!

    Répondre
    • Mathieu Chartier dit :
      7 janvier 2016 à 17:35

      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...

      Répondre
  • virlouvet dit :
    1 octobre 2016 à 11:48

    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

    Répondre
    • Mathieu Chartier dit :
      1 octobre 2016 à 20:44

      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

      Répondre
  • Hélène dit :
    3 octobre 2016 à 16:58

    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 :)

    Répondre
    • Mathieu Chartier dit :
      3 octobre 2016 à 18:44

      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. ;-)

      Répondre
  • E-design dit :
    13 janvier 2017 à 23:20

    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 ^^

    Répondre
    • Mathieu Chartier dit :
      14 janvier 2017 à 10:29

      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...). ;-)

      Répondre
  • bestnextway dit :
    19 janvier 2017 à 03:21

    salut

    est ce que je peux ajouter ce code dans mon site

    merci

    Répondre
    • Mathieu Chartier dit :
      19 janvier 2017 à 07:55

      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).

      Répondre
  • Louis dit :
    27 février 2017 à 11:45

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

    Répondre
    • Mathieu Chartier dit :
      27 février 2017 à 12:23

      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');

      Répondre
  • Sylvain dit :
    30 octobre 2017 à 17:54

    Bonjour Mathieu et merci pour cet article très utile.
    Je suis débutant avec wordpress et j'ai une petite question concernant le code à placer dans le fichier functions.php
    J'ai créé un thème enfant grâce à un tuto et celui-ci contient déjà un fichier functions.php avec ce code:

    Ma question est: dois-je placer le code que tu fournis avant ou après celui qui est déjà dans mon fichier ou cela n'a pas d'importance?
    De plus je voulais savoir, un plugin tel que "Autoptimize" devient-il obsolète ou est-il complémentaire après avoir éditer functions.php?

    Merci!

    Répondre
    • Mathieu Chartier dit :
      31 octobre 2017 à 09:08

      Salut Sylvain,
      Si tu as créé un thème enfant, tu peux avoir deux fichiers functions.php en effet (un dans le thème parent, un dans le thème enfant). En revanche, c'est le seul fichier qui "n'écrase" pas celui du thème parent, il ne fait qu'ajouter de nouvelles fonctions. Dans ton cas, mes codes devraient donc être placés dans le functions.php du thème enfant, car tu ne dois en aucun cas modifier le thème parent (c'est l'objectif à l'origine).
      Concernant Autoptimize, il fait d'autres choses que mon code, donc les deux sont bien complémentaires, j'utilise toujours un plugin de ce type pour nettoyer la base de données parfois, etc. ;-)

      Répondre
      • Sylvain dit :
        31 octobre 2017 à 11:04

        Bonjour Mathieu et merci beaucoup d'avoir répondu aussi vite.
        Le code que j'ai écrit dans mon premier commentaire n'est pas passé mais c'est pas grave. J'ai mis le code que tu fournis dans ton article avant le code "activation theme" déjà présent dans functions.php du thème enfant et tout semble marcher correctement. :)

  • Charles dit :
    3 février 2018 à 00:31

    bonjour,
    J'ai tenté d'utiliser la technique et en effet au niveau du pagespeed insignt, ça améliore pas mal mais j'ai un souci niveau visuel sur mon site ... La barre d'en haut ne se met plus en rouge (navbar), les liens non plus et au début du chargement j'ai un gros fond rouge avec mon logo, du coup c'est pas top top ... :/
    Mon site : http://www.charlestech.fr
    Merci en tout cas pour ce tuto, peut-être y aurait-il une autre manip à faire ?

    Répondre
    • Mathieu Chartier dit :
      5 février 2018 à 14:47

      Bonjour,
      C'est normal, il peut y avoir quelques bugs de temps en temps selon ce que tu affiches via Javascript. Il s'agit d'une méthode qui fonctionne dans l'absolu, mais j'ai bien précisé qu'il peut y avoir des effets non désirés. Moi-même je n'utilise pas la méthode dans son ensemble car ça faisait déconner un slider par exemple. L'idéal est de charger les scripts en asynchrones avec des scripts comme LabJS ou équivalents (j'en ai sorti un moi-même mais comme il sera publié dans mon prochain livre, je ne peux pas le donner ici...). Là, le but est de gagner du temps et de tout ranger au même endroit en gros, mais parfois, ça peut rendre l'affichage déconnant... :(

      Répondre
  • jerome dit :
    17 février 2018 à 06:25

    bonjour Mathieu,
    Je viens de regarder à de nombreuses reprises votre vidéo concernant éliminer les codes Javascript et les styles CSS qui bloquent l’affichage.
    Je voudrais bien m'assurer qu'il suffit de recopier le morceau de code que vous fournissez dans le fichier function.php du thème enfant et d'enregistrer le tout? je ne voudrais pas tout cassé mon site
    merci de votre retour

    Répondre
    • Mathieu Chartier dit :
      19 février 2018 à 16:09

      Attention, mon code va tout décaler automatiquement en pied de page, mais cela peut avoir une incidence désagréable par moment. Il peut être conseillé de ne décaler que certains codes par exemple, ou de ne pas appliquer la méthode si ça "casse" le rendu du site. Là, c'est du cas par cas donc il faut tester, il n'y a malheureusement pas de solution miracle... :(

      Répondre
  • jo dit :
    20 septembre 2018 à 17:37

    Ce qui se conçoit bien s'énonce clairement
    Et les mots pour le dire arrivent aisément
    Très intéressant et encore mieux : très clair, ce qui n'est pas si répandu dans cette toile !
    Ces astuces sont encore valables fin 2018?
    Bravo et merci, y compris pour les précautions à prendre.
    A quand cette sortie de livre qui promet d'être intéressant?

    Répondre
    • Mathieu Chartier dit :
      26 septembre 2018 à 08:47

      Et bien merci ! ^^
      Le livre est sorti en début d'année, vous pouvez accéder au lien direct dans la colonne de droite de ce blog (le livre avec la couverture violette). J'y traite beaucoup de la vitesse de chargement, et bien mieux que dans cette vidéo. :-)
      La technique de la vidéo fonctionne toujours et permet d'accélérer le site en peu d'efforts. J'ai déjà en tête la volonté de faire un code beaucoup plus adapté et puissant pour répondre aux demandes de Google, mais il faut que je trouve du temps pour le mettre en oeuvre. ;-)

      Répondre
  • Huet de Froberville dit :
    5 août 2019 à 17:33

    Bonjour, merci pour ce post ! J'ai testé une extension (WP Deferred Javascripts) pour cette technique qui m'empêche finalement d'activer les Visual Builder de Divi : thème que je suis obligée de garder pour la personne en charge de la maintenance du site. Je vais donc le faire à la main seulement je ne comprends pas où est-ce que je peux récupérer la liste des sources JS ? dans la console Google? Merci !

    Répondre
    • Mathieu Chartier dit :
      6 août 2019 à 07:31

      Bonjour,
      L'extension WP Deferred Javascripts est un peu différente de cette technique car son but est de charger les scripts de manière asynchrone, à l'aide de LABjs. C'est une excellente technique pour accélérer le chargement des pages mais ça peut faire planter certains codes sur WordPress, comme vous l'avez malheureusement vécu (c'est un problème d'ordre de chargement en général qui cause ce genre de souci, et on ne peut pas y faire grand chose...).
      La technique que je donne est différente ici, elle ne sert qu'à décaler le chargement en pied de page, et il n'est pas nécessaire d'avoir toute la liste des scripts JS. La meilleure méthode serait de tout décaler puis de tout charger en asynchrone, mais techniquement, c'est très poussé sur WordPress (pour être honnête, je dois finir un code "concurrent" de WP Deferred Javascripts depuis quelques mois, et je n'ai pas pris le temps tellement c'est galère). Pour obtenir tous les scripts, je crois qu'il faut passer par "global $wp_scripts;" et analyser ce qui est en "queue" dans la variable.

      Répondre

    • Déposer un commentaire

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