Éco-Conception

Green web planet icon

Principes

➜ Pour un web plus responsable

Dans le domaine de l’informatique durable (ou Green IT), l’éco-conception web consiste à bâtir des sites Internet en obtenant le meilleur accord entre le design du site, sa rapidité d’affichage et la réduction de son impact sur l’environnement vis-à-vis de sa consommation électrique, induite par son fonctionnement.
Ce n’est pas forcément facile à imaginer, mais les sites web polluent. Pour y remédier et réduire leur impact environnemental, il est possible de créer des sites plus légers et moins énergivores en ayant recours aux grands principes de l’éco-conception web. Les intérêts sont :

L'Optimisation

➜ Ligne conductrice du projet 'eco-friendly'

Afin d’obtenir une expérience utilisateur optimale, un projet de conception web doit être mener dès sa pré-production par des actions techniques amenant à un temps de chargement accéléré. Celui-ci aura d’autres atouts, comme une expérience utilisateurs fluide; et indirectement, un référencement favorisé. Dans cet objectif, on peut citer :
➜ sur le serveur :
– Hébergeurs ‘verts’ : Ikoula, Infomaniak, EX2, GreenGeeks, DreamHost
– Serveur : Apache/Nginx
– Environnement PHP : version, mémoire, Opcache, Redis, memcached.
– Caches serveur : Varnish/LiteSpeed.
➜ en backend :
– via htaccess : GZip (ou Brotli), LazyLoad, HTTP ETags, Expire Headers, DNS Lookups.
– via functions.php : Preloading des web fonts, DNS Prefetching des sources externes, Defer Parsing of JavaScript.
➜ en frontend :
– Schéma HTML correct des éléments.
– Structure DOM (Document Object Model + d’infos) allégée.
– Fontes : @font-face (en swap via CSS) + system-fonts.
– Logo au format SVG (Lottie/JSON si animé).
– Animations ⇢ Lottie/JSON.
– Icônes ⇢ SVG ou F.A/Eicons.
– Images ⇢ WebP+JPG/PNG.

L’analyse des données suite aux résultats de tests ‘webperfs’ tels que WebPageTest, GTmetrix ou Yellow Lab Tools permettent ensuite de comprendre les ralentissements puis d’effectuer les correctifs afin de réduire le temps de chargement, d’améliorer les Core Web Vitals et l’expérience utilisateurs globale. Voire parfois de réviser la structure du site web et son design pour rétablir des performances optimales.

Les visuels ci-joints présentent les résultats GTmetrix et Lighthouse (sur la page d’accueil) des optimisations réalisées sur ce site avant puis après l’ajout d’un système de mise en cache avec minification des fichiers CSS/JS et exclusion du code inutile. La stratégie ayant été d’optimiser le site dès sa mise en place, puis tout au long du projet, afin de réduire au maximum la compression à effectuer par le système de cache; qui vient parfaire l’ensemble. Le faible écart entre les valeurs est le résultat du travail effectué en amont de cet ensemble.

Rapport de test GTMetrix Web Vitals 06.02.2022
Rapport de test GTMetrix Web Vitals 02.03.2022
Rapport de test GTMetrix Grade 06.02.2022
Rapport de test GTMetrix Grade 02.03.2022

Sécurisations

➜ Un site propre et sûr

Sécuriser un site web permet plusieurs effets et indirectement, d’en réduire son impact sur l’environnement. En offrant une navigation sûre aux visiteurs, elle réduit le risque d’une surcharge de consommation de son navigateur internet qui serait dû à un plugin défaillant, donc énergivore. Et à l’inverse d’éviter que le site ne soit l’objet d’une attaque permettant l’injection d’un code malveillant, générateur d’un impact sur l’efficience électrique du serveur sur lequel il est hébergé.
De plus, en sécurisant un site, on évite qu’il soit menacé par une intrusion informatique dont le résultat serait sa prise en main par des bots ou des pirates qui en ferait un site vérolé, voire une passerelle de redirection vers une page malveillante (phishing), engendrant une élévation de consommation énergétique.
Pour cela, il est important de mettre en place plusieurs points de sécurité tels que *:

* : Par sécurité, toutes les mesures n’ont pas été indiquées.
** : Recommandées par The Open Web Application Security Project® (OWASP) – owasp.org

Impact carbone

➜ Oui, ce site produit du CO₂

Les optimisations réalisées sur ce site permettent d’avoir un bilan carbone minime et grâce au test en ligne réalisé via le site WebsiteCarbon.com, il est actuellement de moins d’un gramme de CO₂ par visite.

Test Website Carbon (au 09.02.2021)

Vimeo

En chargeant cette vidéo, vous acceptez la politique de confidentialité de Vimeo.
En savoir plus

Charger la vidéo