Green Web : comment concevoir un site plus propre ?

On voit de plus en plus le terme “Green Web” apparaître sur internet, mais de quoi s’agit-il exactement ?

Que signifie “Green” ?

Plus qu’un terme à la mode, Green c’est le raccourci utilisé pour parler de tout ce qu’il est possible de faire en vue d’un objectif majeur : la diminution des émissions de gaz à effet de serre. Avant de continuer, un petit rappel : on parle de gaz à effet de serre pour englober toutes les émissions de gaz (peu importe le type) qui accélèrent le réchauffement climatique. Le plus commun étant le dioxyde de carbone (CO2). Pour simplifier et permettre d’exprimer les impacts climatiques avec la même unité, toutes les mesures d’émissions de gaz sont ramenées à l’échelle du CO2.

En quoi le domaine du web est-il concerné par le réchauffement climatique ?

Peu importe notre métier dans le web, nous avons tous besoin d'électricité. En 2020, 7 à 10% de l’électricité mondiale serait consommée par Internet seul. Selon les prévisions, ce chiffre devrait s’élever à 20% en 2025.

La consommation électrique étant responsable d’environ la moitié des émissions de carbone mondiales, l’enjeu principal est de devenir économe : tirer le meilleur parti de chaque émission de carbone pour en consommer le moins possible. En d’autres termes : optimiser sa consommation de ressources pour gagner en efficacité. Finalement, avant même de parler de Green Web, ne peut-on pas dire que c’est déjà le but premier en informatique ?

Aujourd’hui, voici comment se découpe la consommation électrique d’Internet :

• 48% par les Data Center (hébergement des sites)
• 38% par le périphérique utilisateur (consultation des sites)
• 14% Transport (distance et quantité de données transportées entre le serveur et le client)

Pour plus de détails sur la pollution numérique, vous pouvez consulter notre article "Pollution numérique : pourquoi nous sommes tous concernés".  

Comment concevoir un site plus propre ?

En tant qu’acteur du web, nous avons tous un rôle à jouer dans la transition de nos sites vers un web plus propre. C’est pourquoi nous avons rassemblé ici une liste de conseils pour améliorer l’éco conception d’un site web : du design au SEO en passant par le développement, il y en a pour tous les métiers !

Simplifier le site et l’interface

Penser interface sobre, épurée, et simplifier autant que possible l’arborescence. Au-delà d’être bénéfique à l’ergonomie (et donc à l'expérience utilisateur), cela vous permettra d’avoir un site plus léger.

• Selon le Rapport Chaos 2015 de l’institut Standish Group, 45% des fonctionnalités demandées d’un site web ne sont pas utilisées.

La refonte d’un site web peut être une bonne opportunité de s’interroger sur la pertinence et l’utilité d’une fonctionnalité ou d’une page web.

Améliorer son référencement

Chaque requête sur Google a un coût énergétique. Un site bien référencé = moins de requêtes pour y parvenir !

Optimiser l’utilisation des images

Diminuer le nombre d’images (pas plus que nécessaire) et en réduire le poids. Pour cela, plusieurs techniques :

• utiliser des images au format adapté au web (jpg, png, svg) et au périphérique (chargement d’images responsives)
• recycler et transformer les images à l’aide du CSS (filter, background-blend, mix-blend, clip-path…), cela permet notamment d’éviter de stocker une icône dans chaque variation de couleur ou une même image déclinée en noir et blanc / couleur

Diminuer l’utilisation de vidéo

Alléger les vidéos en fonction du contexte, éviter les videos purement “décoratives” (en arrière plan par exemple) ou en limiter la qualité

Limiter le nombre de police différente

Restreindre le nombre de polices chargées améliorera les performances et donc l’impact énergétique de votre site. C’est par ailleurs une bonne pratique en web design !

Adapter le site en fonction du périphérique

Un site doit s’adapter en responsive : que ce soit au niveau des ressources chargées ou de la page en elle-même. Il n’est pas nécessaire de charger autant d'éléments et d'animation sur mobile qu’en desktop par exemple.

Eviter les animations inutiles

Souvent peu nécessaires, alléger les animations ne rendra votre site que plus fluide et ergonomique. Lorsque c’est possible, privilégier l’utilisation des transitions et animations CSS.

Optimiser les interactions serveurs

Limiter le nombre d'interactions et le volume de données nécessaire au bon fonctionnement de votre site. Cela passe par plusieurs recommandations :

• implémenter une bonne gestion du cache

• minifier les scripts et fichiers de style
• réduire les redirections

Limiter le recours aux plugins externes

Face à un nouveau besoin, on peut parfois tomber dans le réflexe de chercher un plugin qui répondrait parfaitement à la demande. Pourtant, le temps pris pour adapter le plugin au besoin spécifique est souvent le même que si on avait pris le temps de développer la fonctionnalité nous même (+ les 500 lignes de codes du plugin, car c’est rare que 100% des fonctionnalités livrées avec soit exploitées dans ce genre de cas).

Quelques outils pour aller plus loin :

• le collectif GreenIT a mis au point une check list de recommandations pour un site éco-conçu : Checklist
• Outils en ligne permettant de mesurer l’impact environnemental d’un site web :
  • Ecograder
• Guide pour réduire le poids d’une vidéo 

A l’image des produits de consommation du quotidien, peut-être que bientôt nous verrons apparaître la création d’un label officiel “Green Web” pour les sites internet ?