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 :
- Diminuer les requêtes serveur.
- Afficher le contenu plus rapidement.
- Baisser la consommation d'énergie.
- Sécuriser le site.
- Réduire l'impact carbone.
- Obtenir un site durable.
L'Optimisation
➜ Ligne conductrice du projet
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 :
➜ en backend :
– Hébergeurs ‘verts’ : Ikoula, Infomaniak, EX2, GreenGeeks, DreamHost
– Serveur : Apache/Nginx
– Environnement PHP : version, mémoire, Opcache, Redis, memcached.
– Caches serveur : Varnish/LiteSpeed.
– via htaccess : GZip (ou Brotli), LazyLoad, HTTP ETags, Expire Headers, DNS Lookups, Keep-Alive.
– via functions.php : Blocage des librairies inutiles, DNS Prefetching des ressources tiers, Defer Parsing of JavaScript.
➜ en frontend :
– Sémantique HTML correcte des éléments affichés.
– Structure DOM allégée (Document Object Model + d’infos).
– Header/Footer : Inlining des éléments dans leur container.
– Focus sur l’optimisation au-dessus de la ligne de flottaison.
– Fontes : en locale via @font-face (subsetting & 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.
➜ Plugins complémentaires :
– Autoptimize, Asset CleanUp Pro, Perfmatters, Performance Lab.
➜ Plugins de cache :
– WP Rocket, LiteSpeed Cache, NitroPack, W3 Total Cache.
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 (FCP, LCP, TTI, TBT) 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 (WP Rocket) 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.
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 *:
- Serveur (WAF, ModSecurity, etc...)
- Base de données sécurisée.
- SSL (Let's Encrypt™ ou DV, EV, SAN, etc...)
- En-têtes de sécurité HTML**
- Protections racine + dossiers via htaccess.
- Déport page de connexion admin.
- Accès backoffice via 2FA.
* : Par sécurité, toutes les mesures appliquées sur ce site ne sont pas été indiquées ici.
** : 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’obtenir un bilan carbone réduit et selon le test en ligne réalisé via le site WebsiteCarbon.com, il est actuellement inférieur à ½g de CO₂ par visite sur cette page.
Test Website Carbon (au 09.02.2021)
En chargeant cette vidéo, vous acceptez la politique de confidentialité de Vimeo.
En savoir plus