La question des indicateurs de performance est centrale en matière d’efficience énergétique lorsque l’on cherche à réduire l’empreinte du numérique sur notre planète. Ceci étant dit, en matère de création de services numériques, ces indicateurs ne sont pas encore clairement définis :

  • soit nous disposons d’une analyse de cycle de vie multicritères utilisée dans l’industrie mais encore difficilement applicables aux services numériques,
  • soit l’essentiel des indicateurs reposent sur le navigateur web, ce qui est clairement insuffisant pour comprendre l’impact global sur l’ensemble de la durée de vie des services.

— Quelques mots de méthodologie

La migration effectuée en février 2022 a permis de passer d’un blog Wordpress 4.8 (hébergé chez OVH) vers le générateur de pages statiques HUGO 0.87 (hébergé chez Infomaniak). Cet article vise donc à poser quelques indicateurs que nous remettons certainement en question et qui n’ont d’autres valeurs que de proposer une comparaison avant/après. L’analyse est menée en mobile et en desktop.

J’ai d’abord mesuré les données liées aux fichiers : poids total et nombre de fichiers, à l’origine & à l’arrivée.

Ensuite, je me suis attaché à exploiter les outils de mesure les plus courants, certes limités & contestables, toujours dans une simple approche comparatiste. Pour plus de justesse, j’ai systématiquement réalisé ces mesures pour la HomePage, 1 page représentative & 1 article type.

Enfin j’ai tenté de collecter des informations sur les datacenters afin d’évaluer le gain de performance de mon nouvel hébergement.

— Performance liée aux fichiers

Wordpress était installé avec 10 extensions actives :

  • Akismet anti-spam = 275Ko / 30 fichiers
  • Disable XML-RPC = 8,9Ko / 3 fichiers
  • Google Analytics Dashboard for WP = 14,1Mo / 417 fichiers
  • Mailchimp for WP = 1,7Mo / 245 fichiers
  • Monarch Plugin (share buttons) = 275Ko / 30 fichiers
  • New Google Plus Badge Widget = 275Ko / 30 fichiers
  • SocialFans Counter = 11,1Mo / 203 fichiers
  • Wordfence Security = 15,5Mo / 832 fichiers
  • WP Social Stream = 8,6Mo / 467 fichiers
  • Yoast SEO = 12,1Mo / 1458 fichiers

Le poids des fichiers pour Wordpress = 92,5Mo (WP site & extensions) + 23Mo (SQL, hors poids MySQL) + 1,8Mo (export données WP hors images) + 11,6Mo (images) = 128,9Mo / 5357 fichiers

Le poids des fichiers pour HUGO = 32,1Mo (site) + 1,1Mo (images) = 33,2Mo / 900 fichiers

  WORDPRESS HUGO Gain
Poids des fichiers 128,9Mo 33,2Mo 74,2%
Nombre de fichiers 5 357 900 83,2%
Mouchards* 4 1 75%
Temps de chargement > Home Page 5,36s 0,24s 95,5%
Temps de chargement > Page 1,22s 0,51s 58%
Temps de chargement > Article 3,10s 0,69s 77,7%
  • Mouchards WP = Gravatar, Twitter Button, Twitter Syndication, Google Analytics / HUGO = Matomo

Grâce à HUGO, j’ai donc pu réduire le poids global du site de 74,2% et diminuer le nombre de fichiers sur le serveur web de 83,2% !

— Performance d’affichage

Données extraites via Google Speed Insight . Autre outil exploitable : Web Page Test .

MOBILE WP HomePage WP Page WP Article HUGO HomePage HUGO Page HUGO Article
Performance 63 36  43  97  76  96
First Contentful Paint (s)  3,4  4,3  4,4  0,9  1,3  0,9
Time to Interactive (s)  8  9,5  9,6  2,3  3,8  2,8
Speed Index (s)  4,3  6,4  6,4  0,9  1,3  0,9
Total Blocking Time (ms)  390  1110  670  30  220  10
Largest Contentful Paint (s)  4,2  5,5  5,2  2,6  4,5  2,5
Cumulative Layout Shift  0  0  0  0,009  0,152  0,077

Le passage à HUGO a permis d’augmenter la performance mobile de la HomePage de 54%, des pages de 111% et des articles de 123% !

DESKTOP WP HomePage WP Page WP Article HUGO HomePage HUGO Page HUGO Article
Performance 81 61 25 99 97 98
First Contentful Paint (s) 0,8 1,3 1,4 0,5 0,4 0,4
Time to Interactive (s) 0,8 4,1 9,4 0,6 0,9 0,5
Speed Index (s) 1,6 3 4,1 0,5 0,4 0,4
Total Blocking Time (ms) 0 80 2190 10 0 0
Largest Contentful Paint (s) 3 5,2 4,6 0,7 0,9 0,5
Cumulative Layout Shift 0,001 0,002 0,084 0,058 0,106 0,117

Le passage à HUGO a permis d’augmenter la performance desktop de la HomePage de 22%, des pages de 59% et des articles de 292% !

Ajoutons à cela le fait que sous Wordpress le site est “généré” à chaque visite (appel de la base de données, scripts…), alors que pour HUGO le site est généré 1 fois pour toutes (dès lors que les fichiers statiques sont déposés sur le serveur web).

— Performance écologique

Sous ce titre générique, je propose d’étudier les éléments liés à la page web en elle-même, sur la base de l’outil GreenIT Analysis (EcoIndex) . Autre outil disponible : WebsiteCarbon .

  WP HomePage WP Page WP Article HUGO HomePage HUGO Page HUGO Article
EcoIndex D D E A A A
EcoIndex niveau 43,83 37,8 29,8 83,98 84,69 78,59
Eau (cl) 3,19 3,37 3,61 1,98 1,96 2,14
GES (gCO2e) 2,12 2,24 2,4 1,32 1,31 1,43
Nombre de requêtes 28 41 64 4 6 5
Taille de la page (Ko) 1036 3247 1577 23 49 142
Poids du DOM* 1190 999 1495 178 143 303
Temps de chargement (s) 5,36 1,22 3,1 0,24 0,51 0,69
  • DOM = Document Object Model, représentation structurée du document sous forme d’un arbre, définit la façon dont la structure peut être manipulée par les programmes, en termes de style et de contenu (source : Mozilla)

En passant à HUGO le nombre de requêtes a été réduit de 88% en moyenne, le poids du DOM de 83 % et le temps de chargement moyen de 77% (96% pour la HomePage) !

La taille des pages chute de 96%, ce qui correspond à un gain de 99,8% par rapport à la moyenne des sites web ! (évalué à 1,9Mo en mobile et 2Mo en desktop)

— Performance d’accessibilité

Outil exploité : Web Accessibility Evaluation (WAVE / WebAIM)

  WP HomePage WP Page WP Article HUGO HomePage HUGO Page HUGO Article
Erreurs 35 31 47 0 0 0
Erreurs de contraste 136 67 135 0 0 0
Alertes 79 54 77 9 10 6
Fonctionnalités 18 17 27 10 3 10
Eléments structurels 77 74 99 15 13 20
Aria 47 46 50 9 12 15

Le passage à HUGO a permis de régler 100% des erreurs (textes alternatifs, labels, liens vides, contraste…) & 88% des alertes !

— Performance des datacenters

Pour mémoire, Wordpress était hébergé chez OVH, tandis que le site actuel sous HUGO est hébergé chez Infomaniak. Nous avons donc tenté de regroupé ici les données relatives à ces deux hébergeurs, en fonction des indicateurs suivants :

  • PUE = Power Usage Effectiveness : mesure l’efficience du datacenter (norme internationale ISO CEI 30134-2). Calculé en divisant le total de l’énergie consommée par le datacenter par le total de l’énergie utilisée par les équipements informatiques (serveur, stockage, réseau) : plus le site est performant, plus le résultat tend vers 1.
  • WUE = Water Usage Effectiveness : évalue la quantité d’eau consommée par le datacenter.
  • CUE = Carbon Usage Effectiveness : mesure la quantité de GES générés par le datacenter.
  • REF = Renewable Energy Factor : mesure de la part d’énergie renouvelable consommée un data center (norme internationale ISO/IEC 30134-3).
  • Ratio de composants réutilisés : indique le taux de pièces reconditionnées utilisées pour 100 composants.
  • TIER = niveau de disponibilité des serveurs (de 1 à 4).

Les hébergeurs ne révèlent que rarement encore les mesures relatives à leurs datacenters, pour des raisons évidentes de stratégies & d’image de marque. Voici donc les données que j’ai pu récolter sur la base des publications des hébergeurs : n’hésitez pas à m’indiquer les éléments manquants si vous avez pu les obtenir…

  OVH Infomaniak
PUE 1,10 à 1,30 1,087
WUE (L / kWh IT) 0,17 à 0,20 ?
CUE (TCO2e / MWh) 0,15 à 0,18 ?
REF 0,78 ?
TIER ? ?
Ratio de composants réutilisés 0,34 ?
Emissions carbone d’un serveur durant sa vie (kgCO2/an) 520 ?
Consommation infrastructure (W / 100W) ? 8,7
Compensation carbone 100% 200%
Localisation France Suisse
Electricité d’origine renouvelable 100% 100%

Le passage chez Infomaniak a permis d’améliorer l’efficacité énergétique globale (PUE) de 1 à 16%.

— Bilan

  Bénéfices HUGO
Poids des fichiers ⬊ 74,2%
Nombre de fichiers ⬊ 83,2%
Affichage HomePage ⬈ 54% mobile
⬈ 22% desktop
Affichage Page ⬈ 111% mobile
⬈ 59% desktop
Affichage Article ⬈ 123% mobile
⬈ 292% desktop
Nombre de requêtes ⬊ 88%
Taille des pages ⬊ 96%
Poids du DOM ⬊ 83%
Temps de chargement ⬊ 77%
Erreurs d’accessibilité ⬊ 100%
Alertes d’accessibilité ⬊ 88%
PUE datacenter ⬈ 1-16%

Nul doute donc que le passage d’un CMS mille-feuilles de type Wordpress à un site statique sous HUGO, couplé à une plus grande maîtrise des images & à un hébergement chez Infomaniak, permet de réduire drastiquement bon nombre d’indicateurs. Pour nous en assurer, et surtout pour poser une stratégie, il nous faudrait porter une analyse approfondie du cycle de vie, mais ça c’est l’histoire d’une prochaine publication ^^


␥ Pour aller + loin


Permalien

https://grouan.fr/2022/06/01/passer-a-hugo-3-low-tech-et-benefices-de-performance/