Comparatif WordPress, WordPress optimisé et GatsbyJS

retour
24/06/2021
GreenITGatsbyJSPerformanceWordPress

Voilà, ça devait arriver, j'ai déçu un client.

Il voulait un site éco-conçu, optimisé, administrable et respectueux de l'environnement. Il l'a eu, mais ce n'était pas assez !

J'ai tapé le plafond de verre technique de WordPress et autres modules le composant.

Ça m'a fait chier, ça m'a fait me remettre en question !

Donc j'ai regardé pour faire autrement, sous d'autres technos tout en gardant la possibilité d'en administrer le contenu.

Après avoir regardé, testé... je suis parti sur une refonte de mon site en `React` avec `GatsbyJS` et avec un gestionnaire de contenu et de certaines images, `DatoCMS`. A cela s'ajoute `styled-components` pour gérer le design modulaire et `MDX` (des pages écrites en Markdown) pour les références et certaines pages.

Après m'être auto-formé (comme toujours), j'ai finalisé mon site, quasi iso-fonctionnel, je n'ai juste pas mis de formulaire de contact partout et j'ai activé le blog que j'avais supprimé.

Dans un deuxième temps, je vais refondre ma home page, mais je voulais la garder telle quelle pour pouvoir mesurer !

Mesurer pour avoir un vrai comparatif entre ces deux façons de faire, pour moi, dans le but de vous en parler, pour en parler à mes clients.

Comment ai-je mesuré ?

Je n'ai pas de parcours fonctionnel sur mon site, ce que préconise de mesurer les bonnes pratiques de l'éco-conception, donc j'ai donc simplement mesuré plusieurs pages :

  • La page d'accueil, forcement et surtout une des plus "complexes"

  • La page des références, une des plus "complexes"

  • La page à propos

  • Le formulaire de contact

J'ai fait passer ces tests ainsi :

  • Sur le site WordPress, avec toutes les optimisations habituellement mis en place.

  • Sur le site WordPress, sans optimisation

  • Sur le site en Gatsby, avec quelques optimisations, si besoin et suivant l'hébergeur.

Pour faire ces tests, j'ai utilisé :

  • Eco-index/extension GreenIT-Analysis, outils de la communauté GreenIT http://www.ecoindex.fr/quest-ce-que-ecoindex/, voici les indicateurs :

    • Eco-index, sa performance environnementale relative à l’aide d’une note de A à G ;

    • l’empreinte environnementale associée (gaz à effet de serre et eau).

  • GTMetrix, outils de mesure reconnue qui se base maintenant sur PageSpeed de Google, une des références et surtout l'une des briques utilisées par Google pour vous positionner dans ses résultats de recherche, voici les indicateurs remontés

    • Les indicateurs spécifiques de GTMetrix :

      • Note Global de A à G, Votre note GTmetrix est une évaluation de la performance globale de votre page. Il reflète à la fois la rapidité de chargement de votre page pour les utilisateurs et la qualité de sa construction pour les performances.

      • Votre score de performance est essentiellement votre score de performance Lighthouse, tel que capturé par GTmetrix, avec nos audits personnalisés, nos options d'analyse et nos spécifications de navigateur et de matériel.

      • Votre score de structure est notre évaluation exclusive des audits Lighthouse et GTmetrix personnalisés. Il représente la qualité de la structure de votre page pour des performances optimales.

    • Indicateur de PageSpeed remontés au travers de GTMetrix

      • Le LCP mesure le temps nécessaire pour que l'élément de contenu le plus important (par exemple, une image de héros ou un texte d'en-tête) de votre page devienne visible dans la fenêtre d'affichage de vos visiteurs. Pour une bonne expérience utilisateur, visez un LCP de 1,2 seconde ou moins.

      • Le TBT vous indique combien de temps est bloqué par les scripts pendant le processus de chargement de votre page. Pour une bonne expérience utilisateur, visez un TBT de 150 millisecondes ou moins.

      • CLS indique le degré de changement de mise en page ressenti par les visiteurs lors du chargement de votre page. Pour une bonne expérience utilisateur, visez un score CLS de 0,1 ou moins.

Avant tout, qu'est-ce que l'optimisation technique WordPress ?

De base, un site, lorsqu'on appelle une page, renvoi les éléments qui la composent. C’est-à-dire, le code, les images, polices de caractères et bibliothèques JavaScript dont elle a besoin pour "réagir" aux actions de l'utilisateur ou juste pour mettre en place des éléments.

Pour le cas d'un CMS, il y a une phase de "calcul", c’est-à-dire qu’à l'appel de la page, le CMS va chercher en base de donnée les informations nécessaires composant la page, mets en forme sous code HTML ces informations, les agrègent (si par exemple, on affiche une liste d'article en plus du contenu de la page) puis renvoie finalement le code entier au navigateur. C'est ce qui fait qu'un site utilisant un CMS est plus long pour afficher les pages.

Donc comment peut-on optimiser ça ?

Il y a plusieurs actions possibles a plusieurs niveaux :

  • Au niveau le plus haut, on peut utiliser Cloudflare qui optimise le chargement en mettant en cache certains contenus, ce qui fait que lui renvoie des éléments, sans avoir à les demander au site.

  • Au niveau du site, on peut aussi mettre en cache certains éléments, c’est-à-dire les pré-compiler, donc attendre moins longtemps les appels/agrégations de données venant du CMS.

  • Toujours au niveau du site, on peut optimiser les chargements en "minifiant" (suppression des blancs et retours à la ligne de certains fichiers pour qu'ils soient plus légers).

  • On peut aussi mettre en local les polices de caractères plutôt que d'aller les demander à Google Font par exemple.

  • On peut charger les éléments important en premier et les autres ensuite, pour les images, par exemple, on utilise la méthode du "lazy loading" qui ne charge les images que si l'utilisateur va sur la portion de la page qui les affiche. De même, pour éviter de bloquer/ralentir visuellement l'affichage de la page, on peut "remettre à plus tard", soit charger les éléments en fin de process. C'est notamment les bibliothèques JavaScript qui sont lourdes et qui de base dans certains plugins WordPress sont chargés au début de la page, qu'on essaie de charger en fin de la construction de la page.

Toutes ces optimisations doivent être faites de manière chirurgicale, car suivant les plugins/JavaScript/thème utilisé sur WordPress, par exemple, certains obligent à charger des éléments dès le début sinon ça "casse" le fonctionnement de la page. Il n'y à pas de configuration standard et il faut souvent faire des compromis qui affectent les performances et notations.

... Et l'optimisation technique pour Gatsby ?

Ben... il n'y en a quasiment pas besoin, car tout est déjà très bien optimisé. Donc ça va être plutôt de la configuration spécifique à l'hébergeur. Concrètement, Netlify que j'ai choisi mets un `Cache-Control` à 0, ce qui fait "hurler" GTMetrix et Ecoindex, donc il faut optimiser ça.

C'est tout !

Donc voici ces résultats !

Home page

La page la plus importante, car la plus consultée et le point de départ de la découverte du site.

1. WordPress optimisé :

  • Eco-index : D

    • EcoIndex 41

    • 3.27 Eau (cl)

    • 2.18 GES (gCO2e)

  • GTMetrix : C

    • Performance: 70 %

    • Structure : 91 %

    • Web Vitals LCP : 918 ms

    • TBT : 354 ms ← Pas bon du tout, merci les JavaScript

    • CLS : 0.01

Commentaire : page trop complexe, trop de JavaScript (venant des plugins et du builder de page) et le formulaire, ce n'est pas une bonne idée non plus

2. WordPress sans optimisation

  • Eco-index : E

    • EcoIndex 24

    • 3.78 Eau (cl)

    • 2.52 GES (gCO2e)

  • GTMetrix : E

    • Performance: 45 %

    • Structure : 89 %

    • Web Vitals LCP : 3.1 ms

    • TBT : 308 ms ← Pas bon du tout, merci les JavaScript

    • CLS : 0.01

3. GatsbyJS avec juste le `Cache-Control` optimisé

  • Eco-index : C

    • EcoIndex 58

    • 2.76 Eau (cl)

    • 1.84 GES (gCO2e)

  • GTMetrix : A

    • Performance: 91 %

    • Structure : 98 %

    • Web Vitals LCP : 806 ms

    • TBT : 74 ms

    • CLS : 0

Page Références

Une des plus lourdes avec images et textes + filtre.

1. WordPress optimisé :

  • Eco-index : D

    • EcoIndex 42

    • 3.24 Eau (cl)

    • 2.16 GES (gCO2e)

  • GTMetrix : B

    • Performance: 86 %

    • Structure : 94 %

    • Web Vitals LCP : 710 ms

    • TBT : 245 ms ← Pas bon du tout, merci les JavaScript

    • CLS : 0.01

Commentaire : page trop complexe, trop de JavaScript (venant des plugins et du builder de page) et surtout trop d'images !

2. WordPress sans optimisation

  • Eco-index : D

    • EcoIndex 43

    • 3.21 Eau (cl)

    • 2.14 GES (gCO2e)

  • GTMetrix : E

    • Performance: 36 %

    • Structure : 92 %

    • Web Vitals LCP : 2.9 ms

    • TBT : 415 ms ← Pas bon du tout, merci les JavaScript

    • CLS : 0.01

3. GatsbyJS avec juste le `Cache-Control` optimisé

  • Eco-index : C

    • EcoIndex 52

    • 2.94 Eau (cl)

    • 1.96 GES (gCO2e)

  • GTMetrix : B

    • Performance: 81 %

    • Structure : 98 %

    • Web Vitals LCP : 1.7 ms

    • TBT : 229 ms

    • CLS : 0

Page À propos

Une page simple pas trop chargée, la page moyenne !

1. WordPress optimisé :

  • Eco-index : C

    • EcoIndex 51

    • 2.97 Eau (cl)

    • 1.98 GES (gCO2e)

  • GTMetrix : A

    • Performance: 91 %

    • Structure : 94 %

    • Web Vitals LCP : 631 ms

    • TBT : 143 ms

    • CLS : 0.01

Commentaire : C'est le type de contenu simple qui devrait être en home !

2. WordPress sans optimisation

  • Eco-index : D

    • EcoIndex 47

    • 3.09 Eau (cl)

    • 2.06 GES (gCO2e)

  • GTMetrix : C

    • Performance: 69 %

    • Structure : 88 %

    • Web Vitals LCP : 2.0 ms

    • TBT : 146 ms ← Pas bon du tout, merci les JavaScript

    • CLS : 0.01

3. GatsbyJS avec juste le `Cache-Control` optimisé

  • Eco-index : A

    • EcoIndex 66

    • 2.52 Eau (cl)

    • 1.68 GES (gCO2e)

  • GTMetrix : A

    • Performance: 85 %

    • Structure : 100 %

    • Web Vitals LCP : 1.5 ms

    • TBT : 237 ms

    • CLS : 0

Page Contact

Une page standard sur un site, sans trop de champs à remplir, avec reCaptcha

1. WordPress optimisé :

  • Eco-index : C

    • EcoIndex 53

    • 2.91 Eau (cl)

    • 1.94 GES (gCO2e)

  • GTMetrix : B

    • Performance: 87 %

    • Structure : 92 %

    • Web Vitals LCP : 570 ms

    • TBT : 209 ms

    • CLS : 0.01

2. WordPress sans optimisation

  • Eco-index : D

    • EcoIndex 45

    • 3.15 Eau (cl)

    • 2.1 GES (gCO2e)

  • GTMetrix : C

    • Performance: 67 %

    • Structure : 98 %

    • Web Vitals LCP : 1.8 ms

    • TBT : 202 ms ← Pas bon du tout, merci les JavaScript

    • CLS : 0.01

3. GatsbyJS avec juste le `Cache-Control` optimisé

  • Eco-index : B

    • EcoIndex 68

    • 2.46 Eau (cl)

    • 1.64 GES (gCO2e)

  • GTMetrix : A

    • Performance: 93 %

    • Structure : 100 %

    • Web Vitals LCP : 1.4 ms

    • TBT : 54 ms

    • CLS : 0

Conclusion

L'optimisation technique de WordPress permet de faire des miracles ! On passe de C à D, voir à E en la désactivant !

Adossé à une bonne gestion de la taille des images et à un contenu raisonné, on peut faire un site très performant avec WordPress.

Les chiffres de Gatsby sont équivalents et souvent meilleurs que ceux de la version optimisée de WordPress, ce qui montre que c'est vers là qu'il faut aller.

Je pense que l'hébergement n'est pas le plus performant, je vais voir pour changer, mais... il va falloir que je change ma façon de gérer mes formulaires :(