Avoir un site internet plus écologique : éco-conception web et éco-design

Éco-conception web : Avoir un site internet plus écologique ?

On recense actuellement 1,8 milliards de sites internet sur toute la toile. Pour les 4 milliards d’internautes dans le monde, ces sites sont devenus en quelques années des produits virtuels incontournables (1). Sites d’e-commerce, sites vitrines, blogs et réseaux sociaux font parties de notre consommation quotidienne. Mais comme tout produit, les sites internet ont aussi une empreinte écologique. Dans une optique de développement durable, le secteur du web peut lui aussi jouer un rôle. On parle alors d’éco-conception web et d’éco-design.

(1) – Source Netcraft janvier 2018 et Internet World Stats 2017

 

Pourquoi votre site internet à un impact sur l’environnement ?


Votre site internet est juste un point parmi tant d’autres. Peu importe sa taille, son fonctionnement dépend de l’ensemble des réseaux que forme Internet. Du coup, ce sont des millions de kilomètres de câbles et des millions de machines qui rendent votre site web disponible en ligne. Il faut donc décortiquer les éléments qui constituent la toile Internet pour comprendre l’impact environnemental d’un site internet. Car l’impact de celui-ci est directement lié à l’impact environnemental d’Internet. A la suite de cette analyse, on pourra définir l’éco-conception web et mieux comprendre ses principes.

 

Analyse de l'impact environnemental de Stratégie Marketing Web. L'éco-conception web de notre site est à travailler.

La note environnemental de Stratégie Marketing Web sur ecoindex.com Nous sommes situés sur la médiane.

 

Quelles sont les composants qui constituent la toile Internet ?


Les centres de données ou data center :

Comme chacun sait, les données qui constituent Internet sont stockées dans des serveurs. Ces serveurs sont souvent réunis dans des immenses salles appelées « data center » ou « centre de données partagées ». On compte actuellement 4314 centres de données partagées (2) ce qui représentent environ 2,3 millions mètres carrés de bâtiments. A ces mètres carrés , il faut rajouter ceux des centres de données privés des entreprises qui sont cent fois plus nombreux. Et il faut aussi compter ceux des « méga data center » des géants du web tels que Google, Amazon, Facebook etc… Au total, on obtient un minimum de 44 millions de serveurs qui stockent et traitent les données d’Internet. (3)

(2) Source data center map. (3) Source « éco-conception web / les 115 bonnes pratiques » de Frédéric Bordage.

 

Ces centres de données sont des gouffres énergétiques :

Un centre de données ou data center, l'efficience énergétique augmente son cycle de vie

Un centre de données

Il faut non seulement alimenter toutes ces machines 24 heures sur 24 et sept jours sur sept, mais il faut aussi les refroidir ! Car des serveurs en marche peuvent produire tellement de chaleur qu’il existe des immeubles où chaque chauffage cache un serveur. Alors imaginez cent chauffages dans la même pièce parce qu’une salle de serveurs c’est un peu ça. Et sans système de refroidissement, le matériel se détériore jusqu’à la casse.

 

Les infrastructures réseaux et appareils connectés : 

Mais Internet, c’est aussi 4 milliards d’internautes qui surfent en ligne via des milliards d’objets et terminaux connectés (smartphones , tablettes, ordinateurs). De plus, il faut compter les infrastructures du réseaux : des millions de kilomètres de câbles ainsi que plus de 800 millions d’éléments actifs tel que des commutateurs, des routeurs, des répartiteurs et surtout, des box ADSL. Puis on peut rajouter un nombre grandissant d’antennes relais suite à l’évolution constante des connexions sans fils et de la mise en place de la 4G au niveau mondial.

 

Quelle est l’empreinte énergétique d’Internet à l’échelle mondiale ?


 

Avec tous ces équipements qui tournent sans relâche, Internet c’est :

  • 1037 Twh d’énergie primaire par an, soit 40 à 50 centrales nucléaires. L’équivalent de 608 millions de tonnes de gaz à effet de serre et 8,8 milliards de mètres cubes d’eau.
  • 342 kWh d’énergie primaire par internaute, soit 203 kg de gaz à effet de serre et 3000 litres d’eau.

C’est comme si dix ordinateurs portables tournaient chez vous non-stop pendant un an et que ces derniers utilisaient 60 fois votre douche. Cela peut paraître rocambolesque mais c’est pourtant ce qui se passe !

De plus, il existe des impacts environnementaux à chaque étapes du cycles de vie d’un équipement électronique comme lors de la fabrication ou le recyclage… Quand ce dernier a la chance de l’être et de ne pas finir lui-même comme un polluant dans une décharge à ciel ouvert.

 

Comment réduire l’impact environnemental de votre site web ?


 

Chaque donnée sur le net a un poids calculé en octet. Plus votre site pèse lourd, plus il faut de place pour le stocker sur un serveur. Maintenant, imaginez que vous réduisez le poids de votre site. Puis imaginez que tout le monde vous suit. Il faudra donc moins de serveurs pour stocker le même nombres de sites internet. L’impact environnemental du web sur la planète sera donc réduit !

Baisser le poids de mon site web : oui, mais pas ses performances !

Personne ne souhaite baisser les performances de son site web pour en baisser le poids. La démarche se situe ailleurs. Il s’agit d’optimiser les ressources pour rendre le site web plus efficace : consommer moins de ressources pour les même fonctionnalités. On parle alors d’efficience énergétique. Ce concept est la base de l’éco-conception web.

 

Résultat d'efficience énergétique obtenu par l'éco-design et l'éco-conception web des sites stockés sur un serveur

 

L’impact environnemental est plus important du côté du consommateur à cause de l’obsolescence programmée et l’obsolescence logicielle.

Dus à ces phénomènes, les tablettes et les smartphones ont un cycle de vie plus court (18 à 24 mois) qu’un serveur qui peut tenir entre 4 et 6 ans . Les internautes sont obligés de changer plus souvent d’ordinateur ou de smartphone afin d’afficher à la même vitesse qu’avant des pages web toujours plus lourdes et mal conçues.

Le poids moyen d’une page web a été multiplié par 115 en 20 ans

 

Mais les plus à même de lutter contre « l’obésité » des pages Internet sont les créateurs de sites web et de services en ligne.

En optimisant les ressources nécessaires à l’affichage d’un site web en faisant de l’éco-design et de l’éco-conception web :

  • On permet aux internautes de conserver plus longtemps leurs matériels
  • On augmente la durée de vie des serveurs.

 

Développement durable : Stratégie Marketing Web contrôle le poids de son site internet avec l'éco-design

Extrait de la console web de Firefox sur la page d’accueil de Stratégie Marketing Web : la page web pèse 2.07 Mo et elle se charge en 1.82 s

 

Faire un site internet plus écologique ne s’improvise donc pas. On doit réfléchir à comment faire de l’efficience énergétique dès la phrase de conception, c’est à dire dès le cahier des charges ! 

Le travail de conception fait en amont aura un impact bien supérieur à une optimisation minutieuse après la mise en ligne du site. Il faut donc faire de l’éco-conception web et de l’éco-design dès le cahier des charges.

 

Comment faire de l’éco-conception web pour avoir un site internet plus écologique ?


Voici une liste de 8 bonnes pratiques en éco-design et en éco-conception web faciles à mettre en place pour un résultat immédiat :

 

1. Opter pour un hébergement vert qui contribue au développement durable :

Un hébergeur écologique fait tourner ses serveurs à l’énergie renouvelable. Mais certains sont encore plus engagés et appliquent une logique de développement durable à toutes leurs activités : achat de serveurs écologiques, recyclage des consommables de bureaux, éclairage éco-responsable des bâtiments, mise à disposition de voitures électriques aux collaborateurs…

 

2. Choisir la solution web la mieux adaptée à vos besoins :

Préférez un site internet statique si votre contenu n’est pas amené à changer régulièrement comme par exemple un site vitrine. Utiliser des pages internet dynamiques que lorsque cela est nécessaire comme pour un site de e-commerce. Un site dynamique enverra plus de requêtes aux serveurs qu’un site statique puisqu’il doit chercher les informations à afficher dans une base de données situés sur un serveur.

 

3. Concevoir un site internet épuré et responsive en faisant de l’éco-design :

L’affichage doit s’adapter aux différents supports (ordinateur, tablette, smartphone) pour afficher si nécessaires des contenus plus légers en fonction des appareils. Un design épuré allège le poids d’un site : supprimez les graphismes superflus. Le mieux est de concevoir en amont le zoning de votre site (la maquette de votre site) en fonction de vos besoins et de vos contraintes.

 

5. Éliminer les fonctionnalités non essentielles :

45% des fonctionnalités demandées par les internautes ne sont jamais utilisées. Évitez aussi les animations coûteuses et les effets de survole d’images. Un effet de neige sur l’écran au moment de Noël  sera marrant deux minutes mais ne fera pas augmenter les ventes de votre site d’e-commerce, alors autant sauvegarder la planète en évitant cette animation coûteuse en ressources informatiques.

 

5. Fluidifier le processus :

Il faut veiller à supprimer les pages et étapes inutiles. D’un côté, la satisfaction de votre visiteur augmentera. Il appréciera l’efficacité de votre site web. De l’autre côté, le visiteur passera moins de temps à trouver ce qu’il cherchait sur votre site web. L’impact environnemental de sa visite est donc réduit en évitant le téléchargement de données inutiles. Attention à toutefois ne pas créer d’écrans trop riches et complexes, ce qui serait contre-productif.

 

6. Choisir le bon format et la bonne taille pour vos images :

Il est conseillé de redimensionner les images avec un logiciel (Photoshop ou un logiciel gratuit comme Gimp) au préalable. On évite ainsi de charger des images trop lourdes et d’utiliser des ressources informatiques pour calculer les nouvelles tailles. Par exemple, on évite d’utiliser le fichier issu de l’appareil photo si on souhaite réduire l’image en vignette produit pour un site de e-commerce.

Le choix des formats d’image est tout aussi important. Le format le plus adapté est celui qui rend le fichier image moins lourd pour une perte de qualité d’image acceptable, voir quasi nulle. JPEG, GIF, PNG : faites des testes ! Pour information, la plupart des navigateurs affichent maintenant les images vectorielles en format standard SVG. Cela peut être intéressant pour des logos. Mais la création d’images vectorielles reste complexe pour un débutant en graphisme.

7. Favoriser les polices standards pour un éco-design :

L’utilisation de polices standards évite le téléchargement de fichiers supplémentaires. Ses polices standard sont déjà présentes dans l’ordinateur de l’internautes : Courier New, Georgia, Arial, Impact, Times New Roman, Verdana… On économise donc de la bande passante et on accélère l’affichage du site Internet.

 

8. Limiter le recours à Flash et aux extensions pour les CMS tel que WordPress :

Pour animer des éléments d’une page, il est conseillé d’utiliser des animations créées avec de l’HTML 5 et du CSS 3 ou de l’HTML5 et du Javascript plutôt que celles créées par le plugin Flash Player. Par exemple, le plugin flash player d’adobe a de nombreuses failles de sécurité et il consomme en plus beaucoup de ressources informatiques. Par conséquence, il est par défaut désactivé sur la plupart des navigateurs web.

Quant au choix des extensions activées pour un CMS, on en revient à la bonne pratique n°5. Il faut bien cibler ses besoins et ses contraintes pour ne pas installer d’extensions inutiles.

 

Si vous ne concevez pas vous-même votre site Internet, vous pouvez ajouter l’éco-conception web au cahier des charges que vous présentez à vos prestataires.

N’hésitez pas à communiquer à vos prestataires votre désire d’avoir un site internet plus écologique. De plus, si votre site internet est au cœur d’une activité de services ou de commerce liée à l’écologie, vous pouvez communiquer sur votre démarche de développement durable dans le cadre d’un marketing éthique.

 

Quelques exemples de bonnes pratiques si vous avez l’âme d’un développeur web : 

  • Externalisez les CSS et le Javascript dans des fichiers dédiés. Il faut préféré <link href= »css/styles.css » rel= »stylesheet »> plutôt que de voir du code css au milieu de votre code html.
  • Supprimez les balises images dont l’attribut SRC est vide sinon le navigateur va à chaque fois appeler une page d’index. Cette action va générer des requêtes http inutiles.
  • Valider les pages web auprès du W3C pour vérifier la forme de votre code HTML.

 

Les ressources pour aller plus loin :


Une check-list de 115 bonnes pratiques de l’éco-conception web issus du livre « éco-conception web / les 115 bonnes pratiques » de Frédéric Bordage.

Vous pouvez lire cet article de Green IT  qui nous incite à modifier nos habitudes quotidiennes concernant l’utilisation d’Internet afin de réduire notre impact environnemental… Car éteindre sa box adsl avant de se coucher, c’est aussi bien et facile que de jeter ses bouteilles de verres dans la bonne poubelle.

Vous pouvez aussi retrouver la liste des outils mis à disposition par le collectif Green IT dans une page consacrée à la conception responsable des services numériques. Dans cette page, vous pouvez retrouver l’outil d’évaluation de l’impact environnemental d’une URL que nous avons utilisé en début d’article.

Une liste d’hébergeurs verts qui contribuent au développement durable pour l’hébergement de votre futur site écologique.

4 Commentaires

  • Jean 28 juin 2018 at 16 h 11 min

    Article intéressant qui met le doigt sur quelque chose qu’on a du mal à appréhender au quotidien. Et l’on oublie que chaque recherche sur google a un coup énergétique, et que chaque vente sur un site en ligne génère des déchets d’emballages, de transports.

    A titre professionnel je suis conscient que mon activité génère de la consommation et des déchets et j’y suis sensible. Je recycle tout 98% de ma consommation de produit pour ma logistique ( carton réutilisé, bourrage, bordereau de livraison) il n’y a que le scotch usagé que je jette au final.

    Pour revenir au sujet principal a savoir la conception du site mettre en avant les avantages par exemple:
    réduire la poids des pages permet d’accélérer l’affichage du site et donc d’améliorer son référencement et l’expérience du visiteur. Apporter un avantage a une solution permet à celle ci d’être mieux comprise et acceptée et finalement mise en oeuvre

    Répondre
    • Valerie 6 juillet 2018 at 1 h 55 min

      Merci pour votre retour. Effectivement, une mise en avant des avantages de ces pratiques pourrait permettre une meilleure diffusion de ces dernières.

      Répondre
  • Frédéric Bordage 9 juillet 2018 at 9 h 08 min

    Bonjour,

    Merci pour votre article qui aide à prendre conscience.

    Il y a une petite erreur : ce ne sont pas 1037 TWh et 342 kWh d’électricité mais d’énergie primaire. Comme l’étude a été faite en cycle de vie complet, il s’agit autant de gazoil (pour extraire les minerais qui seront ensuite transformés en composants électroniques) que d’électricité sur la phase d’utilisation. Il faut donc remplacer le terme « électricité » par « énergie primaire ».

    Répondre
    • Valerie 9 juillet 2018 at 10 h 17 min

      Merci pour votre retour.
      Merci aussi pour votre ouvrage qui m’a permis de prendre encore plus conscience du phénomène. Je ne voyais que cela du point de vue de l’utilisatrice que je suis. Celle qui essaye de supprimer régulièrement les traces trop anciennes de ces 18 années passées sur le net. Je n’avais jamais pris conscience que je pouvais aussi participer à l’effort lorsque j’écris du code.
      Concernant votre remarque, je vais de ce pas modifier le texte. J’avais noté « électricité » car c’était le terme utilisé à la page 18 de la 2ième édition en ma possession.

      Répondre

Laisser un commentaire