Webvert

Idée Reçue #2 - Un site écologique doit-il être moche?

Rédigé le 15/11/2021 par Youen Chéné

Idées Reçues Sensibilisation

Un site eco-conçu est-il forcément moche?

J’entends souvent ici et là que pour aller vers un site éco-conçu, un site web doit être austère, avec des images limite monochromes. En gros, il doit être encore moins beau que craiglist ou le boncoin. C’est une idée que j’essaye de déconstruire le plus possible et du mieux que je peux.

Des agences web savent sortir de très beaux sites avec un très bon niveau de performance énergétique. C’est souvent la qualité du designer et de l’intégrateur web qui fait la différence, pas le choix des couleurs et des images.

Bien sûr, certains designs pensés en amont permettent d’être meilleur structurellement. Par exemple sur ce site, avec les designers, nous avons choisi des illustrations plutôt que des photos pour avoir un bon compromis esthétique et sobriété.

Et là, courant octobre, PATATRA! Dalkia sort son nouveau site !

A la sortie de la nouvelle version du site dalkia.fr, on tombait sur cette popup :

Pop Up Dalkia.fr : Non, votre écran n’est pas cassé, et nos graphistes ne sot pas en vacances.
Figure 1. Popup à l’arrivée sur le site dalkia.fr

Si je traduis, "désolé notre site est moche, mais c’est pas notre faute, on est obligé sinon notre site il n’est pas écologique". Quand je pense aux heures que j’ai passé à expliquer le contraire, avouez que c’est un peu déprimant.

Pop Up Dalkia.fr : De même vous ne verrez que deux nuances de couleur sur notre site. Toutes ces actions font verdir l’empreinte carbone
Figure 2. 2ème popup à l’arrivée sur le site dalkia.fr

Euh…​ non, si on veut chercher la petite bête, c’est le taux de blanc et la luminosité de notre écran qui fait consommer plus, pas le nombre de couleurs affichées à l’écran, plutôt le mode sombre/dark mode. Le mieux que tu peux faire, c’est gagner sur la taille en ko des images avec la réduction des palettes de couleurs.

Les gros avantages de la transformation du site

Avant de crier au greenwashing, on va déjà saluer les efforts du côté des équipes de dalkia.fr. Un post partagé sur linkedin explique bien les progrès.

-64% de CO2 émis.
Figure 3. Post Linkedin : Gain CO2.

C’est le résultat du travail de refonte des développeurs, designers et intégrateurs du site. Beau travail! Chez Webvert, on arrive peu fréquemment à ce type de gain (on conserve le même rendu pour le site web et on ne touche pas au moteur - exemple wordpress).

2, Dalkia a limité le nombre de serveurs (2 au lieu de 7) et le volume de sauvegarde sur son site internet.
Figure 4. Post Linkedin : Gain Serveur.

Les gros gain est là : diminuer le matériel nécessaire pour faire tourner un logiciel équivalent, içi, un site web équivalent. La fabrication du matériel c’est 2/3 de l’impact du numérique sur notre planète (Gaz à effet de serre, eau, matières premières). Par contre, 7 serveurs pour faire tourner un site vitrine, je comprends pourquoi ils ont lancé le chantier.

4.8, Dalkia a divisé par 4.8 le nombre de posts sur l’ensemble de ses comptes sur les réseaux sociaux.
Figure 5. Post Linkedin : Politique des réseaux sociaux.

C’est connexe à notre sujet, mais ajuster la politique de publications dans les réseaux sociaux est aussi une bonne idée. Il faudrait juste que les algorithmes de facebook et instagram arrêtent de privilégier la fréquence de publication.

Gimmick et limite de l’exercice

Si vous vous baladez sur le site de dalkia vous verrez ce type d’effet.

Effet de tramage sur une image du site dalkia.fr
Figure 6. Le gimmick de l’éco-conception, le dithering.

C’est un effet de dithering, que l’on peut traduire par tramage ou diffusion d’erreurs en français. C’est un gimmick facile de l'éco conception. En effet, il est connu pour permettre à des images de prendre moins de place que l’image originale. Surtout, il est reconnaissable facilement et est un symbole des sites éco-conçus et des sites low tech.

Vous trouverez ce type d’effet sur l’ensemble des pages du nouveau site de dalkia.fr. Bonne nouvelle, cela prend moins de place …​ ou presque.

La page de collectivité de dalkia.fr, une jolie mairie avec un effet de dithering à droite.
Figure 7. La page Collectivité du site

Cette image à pour taille 360 Ko (et encore elle est en webp donc le format est super optimisé par rapport à un png ou du jpg). Sur le slack de Techologie, un des membres a fait remarquer que l’image originale fait 35 ko en jpg.

Extrait slack : Photo d’origine 35ko. Source de l’image : istockphoto
Figure 8. Extrait slack : Oups…​ l’original est 10x moins gros.

Ah bah si, il y avait bien des graphistes. Mais une partie du travail a été gâché en leur forçant le gimmick du dithering dans le brief. Être visuellement éco-conçu est passé devant l’éco-conception tout court.

Le gimmick avant le gain réel.

Au tour de la performance énergétique

Passons maintenant le site au crible du diagnostic de Webvert pour en voir la performance énergétique. Pour rappel, en complément de l’écoindex, chez Webvert on mesure la bande passante inutile pour un même rendu tout en gardant le même moteur de site web. Pour faire la métaphore avec le batiment, là où écoindex va mesurer la consommation totale d’une habitation, notre diagnostic va mesurer la qualité d’isolation, soit la performance énergétique.

Score de performance énergétique webvert : C (échelle de A à G), 0.26 kWh/page pour 10.000 visites
Figure 9. Score de performance énergétique Webvert

La première surprise, on est sur un score de C à 0.26 kilowattheure par page pour 10.000 visites. En générale, un site éco-conçu est en A voire de temps en temps en B, si les besoins de traçabilité du marketing sont importants. Comprenons pourquoi.

Gain vitesse : 3% (gain commercial et SEO potentel). Score performance Google : Bureau: 89, Mobile : 48. Gain écologique : 39% de bande passante inutile soit 15.9 kg eq.CO2 potentiel pour 10.000 visites soit un trajet de 80 km en voiture.
Figure 10. Diagnostic global

Coté performance brut du site (vitesse d’affichage), on est dans les bons élèves. Par contre le score Google performance de 48 en mobile nous fait dire qu’il y a un problème quelque part.

De même le 89 en score Google performance bureau est dans les moyennes des sites wordpress. Avec de l’éco conception, il devrait être à plus de 95.

En regardant, la partie écologique, on est à 39% de bande passante inutile, soit la valeur moyenne mesurée cette semaine sur l’ensemble des sites diagnostiqués à ce jour par webvert (soit 390 sites).

Nous avons donc une équipe qui a travaillé dur pour éco-concevoir la nouvelle version de dalkia.fr et le résultat est juste dans la moyenne des sites internets.

Répartition des gains écologiques potentiels. Cache: 109 MiB. Images : 79 MiB. Javascript : 0 MiB. CSS : 0 MiB. Compression : 0 MiB.
Figure 11. Répartition des pertes par catégorie

Zoomons maintenant sur les sources de ces pertes : ✅ Optimisation du CSS. ✅ Optimisation du javascript. ✅ Configuration de la compression gzip (les techniques vous pouvez sourire, mais en 2021 il existe encore des sites qui ne l’ont même pas configurée).

Problème 1 : la configuration du cache ne suit même pas les recommandations de Google sur les ressources statiques (images, fonts, etc…​) 🤷‍♂️

Problème 2 : les images, c’est un grand classique, normalement c’est la chose la plus impactante quand on améliore l’éco performance d’un site. Comme quoi le gimmick du dithering quand les bases ne sont pas faites…​ 🤔

Répartition des gains écologiques potentiels liés aux images. Redimensionnement : 77 MiB. Animation: 1MiB. Optimisation : 0Mib.
Figure 12. Répartition des pertes par sous-catégorie images

Zoomons sur les images: ✅ Optimisation des images. Un peu d’optimisation à faire sur des animations mais cela reste minime. Le problème se trouve sur le non redimensionnement des images pour l’affichage web.

Oui c’est pénible à faire, mais le gros d’évitement des pertes se joue içi. C’est moins "intéressant" que d’optimiser du CSS ou du javascript mais on est souvent sur un rapport de 100 en terme d’impact sur la bande passante (et l’empreinte mémoire sur le terminal).

En résumé, le boulot a été fait sur les 20% (optimisation 19.99%, palette de couleurs <0.01%, dithering <0.01%), mais pas sur les 80% d’économie possible, le redimensionnement. Mais allo…​ quoi? C’est comme si vous alliez passer 4h à polir le devant de la voiture pour aller un peu plus vite et que vous gardiez le coffre ouvert.

Gain de performance potentiels. Images : 8 secondes. Javascript : 2 secondes. CSS : 0 seconde. Compression : 0 seconde.
Figure 13. Répartition des pertes de vitesse

Un dernier regard, coté vitesse d’affichage. L’impact des images non redimensionnées est encore visible. La partie javascript est impactée classiquement par les scripts marketing (hotjar, google tag manager, gestion RGPD).

Oui un site écologique peut être joli

Revenons maintenant à notre sujet initial, sommes-nous obligés de faire des sites moches (ou faussement low tech) pour faire un site éco-conçu? NON.

Un site joli et éco-conçu, est-ce que cela existe? OUI.

Voici une galerie de sites avec un score de A issus de notre base de données. Vous pouvez cliquer sur chaque image pour voir et apprécier l’esthétisme de chaque site.

Un site de pronostic avec une belle photo de rugby.
Figure 14. Site de paris sportif : Pronostic Games
Un site d’ecommerce avec de belles photos de vêtements.
Figure 15. Site e-commerce : Maison ABC
Un site de Saas classique avec des indicateurs.
Figure 16. Un SaaS de sécurité : Mantra
Un site de société de conseil mais avec de la couleur framboise et des photos.
Figure 17. Société de conseil : Zenika
3 enfants qui courts mains dans la mains : Mode enfantine Made in France.
Figure 18. Site e-commerce : Les petites épopées
Du design, des illustrations stylisées d’ours pour symboliser le studio.
Figure 19. Studio de développement : Bear Studio
Une femme en train de se faire maquillé avec les codes habituelles du secteur.
Figure 20. Site e-commerce : Les conseils de Karo

Cet article se conclura donc sur cette galerie garantie sans dithering et avec un score A en performance énergétique. L’objectif est de montrer qu’il est possible de faire un site éco-conçu (voulu ou non) tout en gardant un impact visuel important.

Une dernière note pour les équipes qui ont travaillé sur le site dalkia.fr, le gros du travail a été fait en réduisant le nombre de serveurs nécessaires pour faire tourner le site web. La frustration vient peut-être du fait que le temps de réunion qui a dû être dédié au dithering et aux nuances de couleurs aurait pu être dédié à des travaux de bon dimensionnement d’images et ainsi ne pas tomber dans la moyenne de performance énergétique des sites web français.