100/100 Google PageSpeed avec WordPress

En juin 2017 à l’occasion de quelques tests sur WPFormation, je me suis amusé à aller chercher ce que certains considèrent comme le Graal de l’optimisation, la note de 100/100 sur Google PageSpeed avec WordPress !

Cet article est donc le compte rendu des optimisations et des réglages que j’ai effectué pour obtenir ce résultat.

Nota : Ces optimisations sont propres à WPFormation et ne pourront pas toutes s’appliquer à vos WordPress respectifs, tout dépend en effet de votre thème, vos plugins, votre hébergement, et de l’utilisation ou pas d’un CDN.

Google PageSpeed c’est quoi ?

L’outil Page Speed Insights mesure les performances d’une page sur les appareils mobiles et les appareils de bureau. Il explore deux fois l’URL, une fois avec un user-agent mobile et une fois avec un user-agent de bureau.

Le score PageSpeed va de 0 à 100 points. Plus haut est le score, meilleures sont les performances, et un score de 85 ou plus indique que la page s’exécute bien.

PageSpeed Insights mesure la façon dont les performances de la page peuvent être améliorées en matière de :

• Temps de chargement du contenu au-dessus de la ligne de flottaison : temps écoulé entre le moment où un internaute envoie une requête pour une nouvelle page et le moment où le contenu au-dessus de la ligne de flottaison est affiché par le navigateur.
• Temps de chargement de la page complète : temps écoulé entre le moment où un internaute envoie une requête pour une nouvelle page et le moment où la page est affichée dans son intégralité par le navigateur.

Vous pouvez aussi mesurer la dimension "mobile friendly" en essayant le nouvel outil mis à disposition par Google : https://testmysite.thinkwithgoogle.com/

 

Les recommandations de Google PageSpeed

Voici ce que vous devez mettre en oeuvre pour tous vos sites Web :

• Affichage du contenu prioritaire
• Activation de la compression
• Recommandations relatives à la mise en cache du navigateur
• Optimisation des images
• Réduction de la taille des ressources CSS
• Réduction de la taille des ressources HTML
• Réduction de la taille des ressources JavaScript
• Optimisation du temps de réponse du serveur
• Suppression des ressources qui bloquent l’affichage
• Suppression des redirections sur la page de destination

Un indicateur de priorité est affecté à chaque suggestion pour indiquer son importance :

 

Tests additionnels de vitesse

Au delà de la note Google PageSpeed, le site a aussi été testé avec les outils suivants pour mesurer la vitesse de chargement moyenne du site :

• http://speed.devs.mx/
• https://tools.pingdom.com/
• https://gtmetrix.com/wpformation.com/

 

Descriptif de l’environnement WPFormation

Avant de démarrer, voyons sur quel environnement tourne le site WPFormation :

Le serveur dédié et sa gestion, l’utilisation d’un CDN ont un coût non négligeable. Les certificat SSL, eux, peuvent être gratuits grâce à let’s Encrypt et la plupart des hébergeurs le proposent aujourd’hui.

Techniquement, les bonnes pratiques peuvent être mises en place quel que soit votre hébergement, Google PageSpeed prenant en compte les optimisations et pas la performance intrinsèque du serveur.

La seule valeur importante pour PageSpeed côté serveur est le temps de réponse de ce dernier (vous pouvez le mesurer ici) et il peut parfois être assez long. Dans ce cas et si cela se répète trop souvent, vous obtiendrez le message d’avertissement ci-dessus, pour optimiser il faudra envisager de changer de serveur.

Le temps de réponse de votre serveur ne devrait pas dépasser 200 ms. Il existe des dizaines de facteurs potentiels qui peuvent ralentir la réponse de votre serveur, comme la lenteur d’une logique d’application, des requêtes de base de données, du routage, des frameworks, des bibliothèques, ou une insuffisance des ressources processeur ou de la mémoire.

 

Au commencement !

Avant de chercher le 100, j’accordais une importance modérée à la vitesse de chargement et aux bonnes pratiques imposées recommandées par Google PageSpeed Insights, à savoir que tant que je ne dépassais pas une seconde au chargement de la home, tout allait bien !

Voici les axes d’amélioration que me donnait PageSpeed :

Éliminer les codes JavaScript et CSS qui bloquent l'affichage du contenu au-dessus de la ligne de flottaison
Votre page contient 10 ressources de script et 4 ressources CSS qui bloquent l'affichage de votre page, et donc le retardent.
Aucune partie du contenu situé au-dessus de la ligne de flottaison sur votre page n'a pu être affichée avant que le chargement des ressources suivantes n'ait été terminé. Essayez de différer le chargement des ressources qui bloquent votre page, de les charger de manière asynchrone, ou d'intégrer les parties essentielles de ces ressources directement dans le code HTML.

Exploiter la mise en cache du navigateur
Si vous définissez une date d'expiration ou une durée de validité maximale pour les ressources statiques dans les en-têtes HTTP, vous indiquez au navigateur d'aller chercher les ressources déjà téléchargées sur le disque local plutôt que sur le réseau.

Optimiser les images
En choisissant un format approprié pour vos images et en les compressant, vous pouvez libérer de nombreux octets de données.

Voilà quelques éléments qui doivent parler à beaucoup d’entre-vous ;)

Mon indice Google PageSpeed oscillait donc tranquillement entre 80 & 90 pour les ordinateurs et 60 & 70 pour les mobiles, selon les plugins que j’installais ou désinstallais.

 

On optimise les images

La première des choses et la plus simple à mettre en oeuvre, c’est l’optimisation des images : Taille, poids, compression.

Le poids d’une image c’est en fait la taille du fichier image en octets (ou kilo octets ou Méga octets), on calcule comme suit: Le Poids d’une image en octets est égal au nombre de pixels qui composent l’image multiplié par le nombre d’octets que composent un pixel.

Poids et tailles ne sont pas forcément indissociables, il faudra tenir compte de la résolution. Ainsi je peux parfaitement mettre en place une image d’arrière plan de très grande largeur avec un poids somme toute très modeste.

Quel intérêt également de mettre des images à une largeur supérieure à 3000px ? Aucun ! La majorité des écrans de vos visiteurs tourne en 15, 17 et 19", sans parler des utilisateurs tablettes, téléphones.

Pour optimiser vos images sous WordPress, je vous conseille la lecture des articles suivants:

• Optimiser et alléger ses images sous WordPress
• Les plugins Imagify, Kraken.io ou Optimus.io

 

Exploiter la mise en cache

De ce côté là, seuls Analytics et quelques rares ressources extérieures me posaient problème.

https://connect.facebook.net/fr_FR/sdk.js (20 minutes) P'tain 20mn j'y crois pas !
https://api.optnmstr.com/v1/optin/ (délai d'expiration non spécifié) Arghhhhh quelle horreur ce truc ^^
https://www.google-analytics.com/analytics.js (2 heures)

Sachant que nous n’avons pas la main sur des sources qui ne sont pas sur notre domaine, j’ai opté pour une solution radicale : Soit je pouvais télécharger sur mon serveur le script Js concerné, soit je le supprimais purement et simplement.

Pour Analytics, le problème se produit parce que leur script a une durée de vie de cache de seulement 2 heures. Google a déjà déclaré qu’ils ne changerait pas cela, ce qui nous laisse avec un avertissement qu’on ne peut pas réparer.

Vous pouvez donc mettre le fichier Js de Google Analytics sur votre serveur assorti d’un script pour sa mise à jour avec tâche CRON, sinon il existe un plugin WordPress gratuit appelé Host Analytics.js Local qui peut faire le job (à tester).

 

Éliminer les codes JavaScript et CSS qui bloquent

Le problème est le suivant : Puisque les fichiers JavaScript peuvent modifier le HTML de la page, le navigateur doit donc attendre leurs chargements complets, avant d'afficher quoique ce soit à l'utilisateur. Les fichiers en question peuvent être liés à des plugins ou même à votre thème.

Encore une fois, j’ai du faire des choix et des tests. Je me suis par exemple rendu compte que mon plugin de partage Social Warfare (version pro) n’était pas optimisé (pourtant /social-warfare/css/style.min.css et min.js ?). Bref, j’ai donc testé un autre plugin de partage, à savoir Monarch, et là comme par hasard plus de problème de CSS non optimisé !

J’ai décidé de supprimer le diaporama d’articles de la home qui réclamait trop de Js pour une UX négligeable. Ce slider a été avantageusement remplacé par une simple box affichant les 8 derniers articles et les offres de formations WordPress.

J’ai aussi remarqué que si je plaçais la sidebar de la page d’accueil sur la gauche, j’obtenais un message d’avertissement "mobile" concernant les allers/retours supplémentaires sur le réseau afin que la partie au-dessus de la ligne de flottaison s’affiche. Ceci étant purement lié à mon thème, j’ai simplement placé cette barre latérale à droite permettant ainsi au crawler de commencer par la colonne principale. Problème résolu ;)

J’ai procédé ainsi pour chaque élément bloquant. Au final, j’ai seulement remplacé 2 plugins avantageusement et je n’en ai supprimé qu’un seul (devinez lequel;) !

A noter également que le thème premium que j’utilise, à savoir Voice, ne m’a pas posé de problème majeur. Il va sans dire que j’ai bien soigné ma page d’accueil et les éléments apparaissant sur cette dernière.

 

Le CDN pour répartir la charge et plus encore !

J’utilise un CDN pour WPFormation. A vrai dire, j’utilise même 2 zones CDN, l’une pour les images et l’autre pour le CSS et le Js. J’ai donc créé deux zones en "pull" avec deux alias vers mes sous-domaines CDN et CDN2.

La raison est toute simple, il suffit de regarder l’image ci-dessous pour comprendre. La charge globale du site est ainsi répartie sur 3 domaines :

Chez KeyCdn, je peux appliquer les options suivantes sur chacune de mes zones :

• GZip et HTTP/2
• Expires & Max Expire
• SSL (partagé ou let’s encrypt)
• Ignore Query String
• Cache Cookies & Strip Cookies
• et bien d’autres…

Cela me facilite grandement l’optimisation car je peux ainsi travailler et agir sur 3 zones distinctes :

1. mon site,
2. le CDN en charge des images,
3. le CDN2 en charge du CSS et du JS.

 

Ma configuration de WP-Rocket

Une fois que je me suis occupé des images, du CDN, vient ensuite le temps de s’occuper du paramétrage du cache. Je peux utiliser conjointement un cache serveur (le cas de wpserveur) et un plugin de cache (WPRocket, W3Total Cache, Super Cache etc…) afin de gérer le defer Js, le lazyLoad, la minification, concaténation…

WP-Rocket est un plugin de cache premium, il existe des alternatives gratuites mais j’utilise  prioritairement WPRocket pour 4 raisons : C’est un plugin made in France, il est assez simple à configurer, c’est l’un des plus performants et il est 100% compatible avec WPServeur.

• Options de base : je n’ai pas coché le LazyLoad (car j’ai un CDN) ni le cache utilisateur (pour les utilisateurs connectés), en revanche tout le reste est activé. Le délai de nettoyage du cache est fixé à 0 (soit illimité).
• Fichiers statiques : j’ai tout minifié et j’ai combiné uniquement le CSS. J’ai exclu 2 fichiers Js qui se chargent en différé. J’ai supprimé les query strings des ressources statiques. Pour le CSS et JS bloquant le rendu, j’ai tout coché et désactivé le mode sécurisé (attention ici de bien vérifier).
• CDN : j’ai déclaré mes deux CNAME(s), l’un pour les images, l’autre pour Js & CSS et je n’ai rien exclu en dehors du logo.
• Options avancées : j’ai exclu ma page de connexion et quelques pages, j’ai forcé la purge de ma catégorie WordPress.
• Base de données : je ne me sers pas de cet outil.
• Préchargement : activé en auto à 2s via mon sitemaps de Yoast. Préchargement des requêtes DNS pour les CDN, Gravatar, stats WP, fonts Google.

Nota 1: Dans les fichiers statiques j’ai du déclarer le Critical Path CSS, car en désactivant le mode sécurisé j’avais un effet de chargement très désagréable (+ d’infos ici).

Nota 2: Attention, minifier et combiner CSS & JS peut parfois casser la mise en forme de votre site (+ d’infos ici).

Nota 3: J’ai également remarqué que si j’essaie de mettre en place le LazyLoad pour les images (options de base), la note PageSpeed se dégrade.

J’ai ensuite testé le site de long en large pour vérifier que tout était OK et qu’il s’affichait bien en toutes circonstances, j’ai ensuite refait mes tests de mesure, corrigé 2 ou 3 petites choses et le tour était joué. Je suis intervenu sur mon thème (via mon thème enfant bien sûr), pour des corrections mais au final pas grand chose.

Conclusion et mot de la fin ;)

C’est long et fastidieux ! Je me suis juste amusé et il suffira que je rajoute un plugin bancal ou que je change de thème pour devoir recommencer ^^ Atteindre la note maximale, c’est jouable mais cela implique des choix, entre l’UX, les fonctions additionnelles, les Js externes… Vous devrez passer Maître en l’art du compromis !

Bref, si vous ne devez retenir qu’une chose, c’est que si votre note Google PageSpeed est supérieure à 85/100 alors vous êtes déjà tout bon ! Faites attention toutefois à la note sous mobile, Google a déjà déclaré lui accorder plus d’importance dans l’avenir avec un bonus SEO et cela reste la note la plus difficile à améliorer.

Ne négligez jamais le ressenti sur site et l’expérience utilisateur, le temps de chargement reste toujours aussi important, servez-vous de Pingdom et de GTmetrix pour le vérifier. Par exemple, le site ci-après (testé sur Pingdom) qui a pourtant un PageSpeed de 93/100, charge en moyenne en 2,28 secondes. C’est trop long !

 

J’espère que ce retour d’expérience vous sera utile, je veux terminer ce billet en remerciant tout particulièrement Benoit de WPServeur pour son aide précieuse à la mise en place et Jonathan de WPRocket pour le support à mes questions débiles, merci les amis !

Info : Pour celles et ceux qui veulent apprendre et aller plus loin, j’aborderais l’optimisation de WordPress et sa vitesse plus en détail dans ma formation WordPress en ligne (disponible courant 2018).

Voici quelques ressources complémentaires utiles :

• https://www.keycdn.com/
• https://developers.google.com/insights/