Impact numérique : choisir l’éco-conception pour son site web Drupal

Photo @bluedrop.fr - une équipe de travail saisie par la fièvre de l'éco-conception, le réchauffement climatique n'a qu'à bien se tenir !
Le numérique représente près de 4 % des émissions de gaz à effet de serre mondiales. Trois sources sont à l’origine de ces émissions : les terminaux (ordinateurs, smartphones...), les datacenters et les réseaux. En tant que propriétaire de site internet ou comme c’est notre cas en tant qu’agence web, nous pouvons agir sur la deuxième source d’émissions : les datacenters. D’une part, en choisissant un datacenter durable et d’autre part, grâce à l’éco-conception.

Le numérique représente près de 4 % des émissions de gaz à effet de serre  mondiales et 2,5 % de l’empreinte carbone nationale. Plus inquiétant encore, selon les estimations, la croissance du numérique est telle qu’il pourrait représenter 6,7 % des émissions françaises d’ici 2040. Trois sources sont à l’origine de ces émissions.

Les trois sources d'émissions du numérique

Bonne nouvelle ! En tant que propriétaire de site internet ou comme c’est notre cas en tant qu’agence web, nous pouvons agir sur la deuxième source d’émissions : les datacenters. D’une part, en choisissant un datacenter durable et d’autre part, grâce à l’éco-conception.

Coup de froid sur les datacenters = coup de chaud sur la planète

Les datacenters sont des espaces dédiés au stockage de nos données informatiques (mails, vidéos, photos, jeux…) et celles de nos entreprises. Le plus souvent, ils prennent la forme de grands hangars composés d'un réseau, d'espaces de stockage et de serveurs de calculs.

Le hic ? Les serveurs sont gourmands en énergie ! Ils tournent 24h/24 et 7j/7. Pire encore, les serveurs dégagent de la chaleur. Pour éviter qu’ils ne se dégradent, il est indispensable de les refroidir en maintenant une température homogène d’environ 20 °C. A la consommation électrique s'ajoutent donc la climatisation et les systèmes de refroidissement.

Premier levier d’actions : le choix du datacenter

Conscients de ces enjeux, chez bluedrop.fr, nous avons sélectionné pour notre site et ceux de nos clients, un datacenter durable. Cette solution, nous l’avons trouvée tout près de chez nous, à Marseille : elle s’appelle Interxion !

Le datacenter d'Interxion à Marseille

Et si nous l’aimons autant, c’est parce qu’Interxion utilise 100% d’énergies renouvelables pour son refroidissement.

Le reverse cooling, un concept coolos 

Avec le soutien de l’Ademe et la Région Sud, Interxion a développé une solution innovante de refroidissement éco-responsable appelée le Reverse Cooling. Le concept est simple : il consiste à capter l’eau des mines de la ville de Gardanes, puis à la détourner vers le datacenter qui récupère la fraîcheur.

Dans une logique d’économie circulaire, le dispositif  permettra à terme de récupérer la chaleur dégagée par le datacenter et la redistribuer aux habitations et bureaux marseillais.

Schéma du reverse cooling

Résultat, c’est 30x fois moins d’énergie dépensée qu’une solution de refroidissement classique !

Deuxième levier d’actions : l’éco-conception !

En tant qu’agence web Drupal, nous pouvons également agir directement lors de la conception de nos projets web. Il s’agit pour nous de limiter le remplissage des serveurs, d’optimiser et d’alléger nos sites.

L’éco-quoi ?

L’éco-conception consiste à réaliser un produit en limitant son impact environnemental tout au long de son cycle de vie.

En matière de site internet, nous pouvons agir lors de la définition du projet et de ses spécifications, de la conception UX (design de l’expérience utilisateur), de la conception UI design (design de l’interface) et lors du développement.

Sortir de la culture du toujours plus

Plusieurs études démontrent que 70 % des fonctionnalités demandées par les utilisateurs ne sont pas essentielles : 45 % ne seraient jamais utilisées. Si nous avons tendance à toujours vouloir offrir la meilleure qualité et maximiser les possibilités, il faut pour l’environnement en finir avec cette culture du toujours plus, toujours mieux et entrer dans l’ère de la sobriété. Un bénéfice que l'on retrouvera aussi sur la facture.

Simplifier l’arborescence

Plus un utilisateur passe de temps sur un site, plus son empreinte environnementale grimpe. Lors de la conception du parcours utilisateur, il faut donc minimiser le nombre d’étapes et supprimer les interactions inutiles. Toute la difficulté consiste à réussir cela tout en faisant simple, concis et clair.

Par exemple, si l’utilisateur doit fournir des pièces justificatives en ligne, il convient de l’informer par avance des documents à prévoir (par mail, lors de l’inscription par exemple). De cette façon, il peut les préparer avant de démarrer la session web et compléter le processus en ligne d’une traite.

L’éco-conception graphique

L’éco-conception de l’interface va permettre d’alléger le poids et le temps de chargement. Pour cela, on fait la chasse au superflu, aux effets non-indispensables :

  • Privilégier les icônes aux images ;
  • Utiliser des SVG de moins de 100ko pour réduire leur poids ;
  • Limiter le nombre de vignettes de contenu ;
  • Eviter les sliders et les carrousels ;
  • Limiter les animations comme le scroll infini (coucou les story Instagram) ou l’autoplay (les gifs ou les carrousels automatiques) ;
  • Réaliser des pages plus courtes ;
  • Limiter le nombre de polices d’écritures et de graisses utilisées (une pour les titres, une pour le texte, c’est déjà bien) ;
  • Privilégier les polices préinstallées sur nos appareils : Arial, Tahoma, Trebuchet MS, Verdana… (promis, y en a des sympas) ;
  • Limiter le nombre de couleurs (vive la monochromie ou la bichromie).

Wikipédia, un des meilleurs site éco-conçu

L’éco-conception en développement

Lors du développement, on va ici chercher à réduire le nombre de requêtes, diminuer le volume échangé et limiter les traitements d’informations. Là aussi, il convient d’adopter plusieurs bonnes pratiques : 

  • Mettre en place des sprites (compatibles Retina et non Retina) ;
  • Ne pas charger de CSS et de JS inutiles (pas de compilation globale) ;
  • Différer le chargement des éléments lourds ;
  • Éviter le chargement de scripts externes trop gourmands en requêtes ;
  • Limiter le nombre de requêtes ;
  • Compresser les fichiers CSS et Javascript ;
  • Utiliser un système de cache de type Varnish ;
  • Limiter la taille des images et utiliser les nouveaux formats d'images ;
  • Nettoyer tout le code dupliqué ;
  • Compresser les assets en tar.gz.

Intégrer l’éco-conception dans les process et impliquer les parties prenantes

Pour systématiser la prise en compte des objectifs de développement durable par toutes les parties prenantes au projet, nous proposons des ateliers de validation de l'éco-conception. Une approche basée sur le Référentiel Général d'Éco-conception de Services Numérique, le référentiel de l'Etat. 

Objectifs :

  • S’assurer de la mise en œuvre des critères d’éco-conception
  • Concilier charte, univers de marque et éco-conception 
  • Minimiser l’impact environnemental du site Internet

La transition écologique, une affaire de tous les jours

L’éco-conception n’est qu’un élément de la démarche de transition écologique. Nous agissons également sur nos pratiques du quotidien, que ce soit à la maison ou au bureau.

En effet, il s’agit pour nous d’une préoccupation majeure qui fait l’objet d’une réflexion approfondie dans le cadre de notre stratégie RSE. En ce sens, nous avons établi un plan d’actions pour aller plus loin : création d’une charte d'achats responsables, calculer notre impact carbone, systématiser le don ou le recyclage du matériel, sensibiliser nos partenaires…

Agir pour l’environnement, c’est choisir de créer une plateforme web éco-conçue mais aussi choisir des prestataires engagés dans une démarche de réduction d’impact carbone global. Et si en plus, ils sont experts Drupal, c’est encore mieux ;) ! Contactez-nous pour parler de vos projets et en apprendre plus sur notre stratégie RSE !

Quelques modules Drupal utiles : 
Minify Source html : pour minimiser le HTML source avant que les données ne soient envoyées au navigateur.
Image Optimize : pour optimiser les images lors de leur enregistrement.
Blazy : pour activer le chargement différé des images.
Memcache API Integration : pour fournir une intégration entre Drupal et Memcached.
Warmer : pour fournir toute l'infrastructure nécessaire afin d'orchestrer votre politique de gestion du cache.