Comment réduire l’impact environnemental d’un site web (conférence Web2day)

Retour sur la conférence du Web2Day 2019 : Comment réduire l’impact environnemental d’un site web – Retour d’expérience

Comment réduire l’impact environnemental d’un site web (conférence Web2day)

Comment réduire l’impact environnemental d’un site web (conférence Web2day)

Article du Blog du modérateur : https://www.blogdumoderateur.com/eco-conception-site-web/

L’impact du numérique sur l’environnement est un vrai sujet aujourd’hui. Le bilan environnemental du numérique est en effet des plus inquiétants : il émet 3,7% des gaz à effet de serre globaux sur la planète, soit autant que l’industrie de l’aviation. D’ici 2025, il atteindra les 8%, soit le niveau de pollution de l’industrie automobile. Changer ses habitudes vis-à-vis de la consommation numérique est donc primordial.

Quelles sont les principales sources de ces émissions de gaz ? Pour Romain Petiot, elles sont multiples : les data centers avec les fermes de serveurs, les systèmes réseaux comme la connexion internet, le réseau mobile, les routeurs, les satellites ou encore les terminaux et les objets connectés sont extrêmement gourmands en ressources.

Les appareils électroniques sont en effet fabriqués avec des matériaux issus de l’extraction de terre rare, extrêmement polluants.

Que faire pour endiguer le phénomène ?

Une première réponse à ces enjeux environnementaux est d’allonger la durée de vie du matériel. Un cycle de production et de commercialisation moins frénétique que celui d’aujourd’hui sera d’autant plus bénéfique pour la planète. En tant qu’acteurs du numérique, il faut pouvoir permettre cet allongement de durée de vie dans la conception des logiciels. « Par exemple, tous mes projets sont compatibles avec un iPhone 4 », confie Romain Petiot.

Une autre solution est la sobriété fonctionnelle. Ce concept consiste à ne pas surcharger les solutions, services ou logiciels en fonctionnalités inutiles. « Beaucoup de professionnels du numérique utilisent Google Analytics aujourd’hui, pointe Romain Petiot, mais très peu utilisent le service dans son intégralité. Certains vont peut-être l’utiliser seulement à 20%, histoire de voir le nombre de visiteurs, la provenance… C’est du gâchis numérique. »

Retour d’expérience – La sape Connectée

Romain Petiot prend l’exemple de son expérience avec le site la Sape Connectée, qui organise des afterworks dans la région nantaise pour des professionnels du digital.

La page du site La Sape Connectée.

Dans ce cas précis, il s’agit d’un site WordPress avec thème Event Star, très standard, hébergé chez OVH. La première étape consiste à mesurer le poids des pages, le nombre de requêtes et la vitesses d’affichage. « On va essayer d’obtenir le meilleur rendement avec un minimum de ressources ». Pour cela, Romain Petiot utilise des outils comme GTMetrixWebPageTest ou Lighthouse pour mesurer ces trois indicateurs.

Vient ensuite la mesure du nombre d’éléments HTML dans la page, le nombre de balises. Romain Petiot effectue également une estimation du GES (gaz à effet de serre) sur ecoindex.fr, ainsi que la consommation d’électricité avec greenspector. Cela permet notamment de connaître l’impact sur la batterie des appareils.

Avec ces analyses, Romain Petiot a obtenu le diagnostic suivant :

  • Poids de la page : 5,76 Mo
  • Nombre d’éléments du DOM : 793
  • Nombre de requêtes : 127
  • Vitesse d’affichage : 8 secondes
  • Estimation GES : 2,48gCO2/page
  • Consommation d’électricité : 6,12 mAh

Audit technique et améliorations apportées

Niveau fonctionnalités, la page d’accueil du site est composée d’un slider avec une seule image, un gâchis numérique pour Romain Petiot. L’expert décide toutefois de garder une image en full-screen : malgré les risques de poids et donc d’un chargement légèrement plus long de la page, cette photo permet au visiteur de se projeter dans le site, une simple optimisation devrait donc suffire.

Le texte est quant à lui affiché avec des animations qui deviennent lourdes visuellement et vont réquisitionner des ressources. L’idée est donc de réduire le nombre d’animations. La page d’accueil affiche également la liste de tous les participants de l’événement passé, avec des photos de chacun. Petit bémol, ils sont plus de 70. Il faudra donc drastiquement réduire l’affichage pour ne pas charger plus de 70 photos sur la page. Il faudra soit créer une autre page pour tous les faire figurer ou seulement en afficher 5 sur cette page d’accueil.

Romain Petiot remarque également l’iframe d’inscription d’EventBrite et une carte GoogleMaps. Les affichages des services tiers peuvent s’avérer très lourds : 1,5 Mo pour EventBrite. Concernant la carte GoogleMaps, il n’est pas nécessaire d’intégrer l’ensemble du service de Google si l’on souhaite simplement afficher un emplacement. Une image avec le plan peut suffire, mais vous perdez l’interactivité.

Pour afficher un emplacement, pas besoin de Google Maps, une image d’un plan peut suffire.

Au niveau technique, Romain Petiot ne note pas de problème avec le site WordPress. « Les problèmes liés à WordPress viennent bien plus souvent du thème que de la plateforme », indique le développeur. Du point de vue du code, l’expert tient à préciser que le jQuery n’est pas automatique « tout le monde peut travailler en javascript natif ».

Romain Petiot note grâce à GTMetrix que les images du site ne sont pas optimisées et fait appel à l’outil Unused CSS pour repérer les lignes de code inutiles. Ici, 95% du code CSS n’est jamais utilisé. Concernant l’hébergeur, le développeur utilise l’outil the green web fondation afin de vérifier si l’hébergeur est green ou non.

Arbitrage et implémentation

Après cet audit et la validation des équipes de la Sape Connectée, Romain décide d’intégrer le thème Twenty-Nineteen de WordPress, remplaçant ainsi event-star. Il choisit ensuite d’alléger la page d’accueil en affichant que les 5 participants du dernier événement et propose au visiteur de cliquer pour voir tous les autres participants.

Pour les iframes d’inscriptions EventBrite, Romain Petiot a pris le parti d’insérer un gros bouton « s’inscrire » et générer l’iframe en javascript. Pour la carte, l’expert a fait appel à Open Street Map pour générer une image afin de l’afficher directement sur la page et l’entourer d’un lien vers le site Open Street Map si le visiteur souhaite faire son itinéraire.

Une fois les intégrations faites, Romain Petiot mesure à nouveau les performances :

  • Poids de la page : 0,65 Mo (-88%)
  • Nombre d’éléments du Dom : 225 (-71%)
  • Nombre de requêtes : 9 (-93%)
  • Vitesse d’affichage : 0,4 secondes (-95%)
  • Estimation GES : 1,1gCO2/page (-55%)
  • Consommation d’électricité : 3,91 mAh (-36%)

On peut constater que les changements sont radicaux, tout comme les performances. « Un site éco-conçu est un site performant », rappelle Romain Petiot. Et un site performant entraîne une meilleure expérience utilisateurs mais apporte aussi beaucoup en termes de SEO. Un site éco-conçu est en effet apprécié par Google, qui mettra moins de temps à explorer les pages et qui sera donc plus enclin à mieux positionner le site. Il suppose également moins de ressources, un critère recherché par les clients.

id ipsum Aliquam eleifend ut commodo elit.