Optimisation de wordpress avec PageSpeed Insights
Je vais revenir dans cet article sur comment j'ai optimisé ce site pour avoir la meilleure note possible avec PageSpeed Inisights. La note de départ est de 50/100 en version mobile et de 59/100 en version ordinateur. En 5 minutes de configuration j'arrive à un score de 79/100 pour mobile et 93/100 pour desktop ! Bref je ne m'attendais pas à une telle progression. Idem sur les autres outils de test évoqués dans mon billet précédent.
Installer mod_pagespeed pour apache 2
Pour commencer j'ai installé le mod_pagespeed sur apache sur le serveur en question. Rien que l'installation va fournir ces premiers résultats, mais pas forcément ceux attendu...
On passe de 50/100 en mobile à 60/100 soit 10% de progression un 2 minutes juste énorme !
Sur la version ordinateur par contre je perds 2 points en passant de 59/100 à 57/100. Les réglages s'annoncent long et compliqués.
Problème avec le thème...
Rapidement le thème montre ces premiers défaut... Tout d'abord, le fait de charger une ressource de logo même si elle n'est pas utilisée... Mais ça c'est juste un point sur la version desktop de pénalité. L'autre soucis c'est l'utilisation de @import dans le css. Et là je me rends vite compte mod_pagespeed ne sait pas les gérer et du coup il ne charge que la feuille principale... J'ai donc été obligé de passer tous les imports dans l'ordre dans la feuille du thème enfant.
Une fois ce problème résolu, les performances sont impressionantes ! La note passe de 59 en desktop à 93 sur Pagespeed Insights ! La version mobile monte à 79 !
Reste à faire le plus compliqué le defer de javascript et les optmisations CSS...
De le long test pour essayer les options de mod_pagespeed
J'ai effectué beaucoup beaucoup de test avec les diverses options qu'offre mod_pagespeed. Mais au final je n'ai retenu que les premiers filtre que j'avais mis en place. Certain comme le defer de javascript consomme trop de ressource et fait chuter la note à moins de 50 sur mobile et desktop... Par contre, j'ai eu d'autres soucis que je n'ai pas pu corriger : l'incapacité de mod_pagespeed à combiner toutes les feuilles de style en une seule... Mais je ne lâche pas je trouverais bien le pourquoi, première piste la version d'apache ou le fait de ne pas avoir compilé mod_pagespeed sur le serveur...
Les règles actives
Voici donc les quelques filtres que j'ai activé pour arriver à ces performances :
<IfModule pagespeed_module>
ModPagespeed onModPagespeedEnableFilters rewrite_css,rewrite_javascript
ModPagespeedEnableFilters collapse_whitespace,elide_attributes
ModPagespeedEnableFilters extend_cache,convert_meta_tags</IfModule>
Conserver les performances
Voilà la première étape est franchie, reste maintenant à les conserver. Car j'ai quelques plugin à installer et fatalement cela va à mon avis forcément dégrader les performances. Ce maintient se fera par d'autres corrections et mod_pagespeed ne pourra à mon avis pas m'aider plus dans cette du 100/100.
