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
- Passer à HUGO #1 : migration depuis Wordpress
- Passer à HUGO #2 : traitements Low Tech des images, audios et vidéos
- Enquête 2021 sur le secteur des data centers (Uptime Institute) ↗
- HUGO : générateur de pages web statiques ↗
Article sous licence CC BY-SA 4.0
Cet article est diffusé sous licence Creative Commons BY-SA 4.0 Attribution - Partage dans les mêmes conditions
→ Vous êtes autorisé·e à :
Partager — copier, distribuer et communiquer cet article par tous moyens et sous tous formats
Adapter — remixer, transformer et créer à partir de cet article pour toute utilisation, y compris commerciale.
→ Selon les conditions suivantes :
Partage dans les mêmes conditions — Dans le cas où vous effectuez un remix, que vous transformez, ou créez à partir de cet article original, vous devez diffuser l'Œuvre modifiée dans les mêmes conditions, c'est-à-dire avec la même licence CC BY-SA 4.0
Attribution — Vous devez créditer le titre de l'article et son auteur, intégrer un lien vers cet article ainsi qu'un lien vers la licence CC BY-SA 4.0 et indiquer si des modifications ont été effectuées
Pour créditer cet article :
« Passer à HUGO #3 : Low Tech et bénéfices de performance, Guillaume Rouan, CC BY-SA 4.0 »
🔗 https://grouan.fr/2022/06/01/passer-a-hugo-3-low-tech-et-benefices-de-performance/
🔗 https://creativecommons.org/licenses/by-sa/4.0/deed.fr
Permalien
https://grouan.fr/2022/06/01/passer-a-hugo-3-low-tech-et-benefices-de-performance/