eco conception site web pour Altercompta

Eco-conception web : quelques exemples de sites écoconçus

Les exemples de sites écoconçus sont pauvres dans un monde où une box internet consomme autant qu’un grand frigo, où une donnée numérique parcourt en moyenne 15 000 km (mail, téléchargement, vidéo, requête web…), où les data-centers semblent consommer entre 2 et 5% de l’électricité en France (grand écart selon les études). Il est temps de tracer une ligne responsable sur l’immense possibilité que nous offre le digital. Et sur le sujet, il y a du progrès à faire.

Si en 2017, 77% des Français(e)s ignoraient ce qu’était la pollution numérique, en 2021, ce terme est évoqué à l’Elysée, dans les lois et dans les médias généralistes. On avance !

Finalement, si l’impact du numérique est particulièrement lié au matériel, la consommation liée à l’hébergement et à la navigation sur les sites Web prend une part de plus en plus importante. En effet, derrière chaque vidéo Netflix regardée en 4K, chaque requête Google, chaque page Web chargée, il y a un serveur qui tourne, des calculs qui se font, des données qui voyagent et qui allument des LED sur des écrans… Oui, charger une page Web ça paraît magique, mais ça a un impact, et cet impact peut être diminué.

Cela s’appelle l’éco-conception de site Internet.

Les 4 piliers de l’éco-conception de site Web

La conception 

Tout d’abord, un site éco-conçu est un site frugal, dans un état d’esprit “Faire mieux avec moins”. Et pour y arriver, c’est dès le cahier des charges et le wireframing que cela se joue.  On vous donne quelques bon réflexes à ce niveau là : 

  • Éliminer les fonctionnalités non indispensables (frugalité). Avez-vous vraiment besoin de ce module gratuit et performant mais dont vous ne vous servirez jamais ? Sortez de la logique « qui peut le plus peut le moins », parfois appelée « on n’en a pas besoin maintenant, mais on le met au cas où pour plus tard ».
  • Épurer l’interface (sobriété), faire plus de pages, mais des pages moins chargées
  • Adapter la technologie à l’usage
  • Préférer la saisie assistée à l’autocomplétion
  • Éviter les plugins inutiles de Wordpress
  • Concevoir un univers qui utilise l’illustrations en SVG.

Dans un monde où il est de plus en plus simple de faire un site Web, on a tendance à déployer beaucoup plus que besoin, avec une grosse partie du poids d’une page liée à des choses invisibles. C’est ainsi que la taille moyenne d’une page web est passée de 0,45 mégaoctets en 2010 à 1,7 mégaoctets en juin 2018. Stop.

Le développement : 

Ensuite, une fois le site conçu, le traitement en développement est particulièrement important pour éviter d’exploser le poids d’une page. Voici quelques exemples d’approche : 

  • Éviter de mettre trop d’images et les optimiser (compression, choix de format, regroupement via sprite, etc).
  • Supprimer les traitements inutiles (animations, redimensionnement des images par le navigateur…)
  • Héberger les typos
  • Favoriser les pages statiques
  • Factoriser, modulariser, et externaliser les librairies (CSS, JS, etc)
  • Réduire les accès au DOM Et éviter de le manipuler
  • Attention aux boucles

L’hébergement :

Un hébergement nécessite d’avoir des serveurs fonctionnant 24h/24. Un site web éco-conçu doit donc opter pour un hébergement roulant 100% à l’énergie renouvelable, et ayant un système de refroidissement digne de ce nom. De plus, celui-ci doit respecter les normes énergétiques faibles : la norme ISO 50001 ou avec un PUE (Power Usage Effectiveness) inférieur à 1,1 tels que Aonyx et Infomaniak, sont très bien. 

Cependant, un hébergement c’est aussi un paramétrage :

  • Ne livrer que du contenu optimisé, si possible statiquement (compression manuelle des fichiers plutôt que Gzip à la volée par le serveur Web)
  • S’assurer que le cache (navigateur et front web) est utilisé au maximum
  • Optimiser l’infrastructure logiciel (paramétrage)

Et vous savez quoi, comme un site web éco-conçu est moins lourd, il est plus rapide à charger. Et comme il est plus rapide à charger, il plaît à l’algorithme Google, bref, c’est bon pour votre SEO. 

Finalement, ces trois critères posent les bases d’un site internet vertueux. En effet, ils vous permettront d’identifier vous-même si un site est éco-conçu ou non. Si certaines informations sont difficiles à trouver, il existe cependant un moyen d’évaluer plus simplement les performances environnementales d’un site internet.

Le repère : l’Eco-index

L’éco-index est un outil gratuit qui permet de mesurer l’impact de votre site internet. 

Il se présente sous la forme d’une extension Google Chrome et fonctionne de la manière suivante : il charge votre page, l’analyse et calcule les émissions de gaz à effet de serre et la consommation que cela génère. 

La note Eco Index est établie selon cinq critères :

  • L’Eau : quantité d’eau consommée pour une navigation sur la page
  • La GES : quantité de gaz à effet de serre générée pendant une navigation sur la page
  • Le nombre de requêtes : une requête est une demande faite aux serveurs web. Chaque calcul, image, document, ou code analytics à charger sur une page nécessite une requête aux serveurs.
  • La taille de la page : elle est mesurée en Kilo Octet. Elle augmente avec l’ajout de media, de polices spéciales (non présentes sur les ordinateurs) ou de code Javascript (très présent pour créer des animations d’éléments)
  • La taille du DOM : la taille du DOM représente la complexité de la page. Plus l’on ajoute des blocs, des paragraphes, des liens, des images, plus le DOM augmente. Plus le DOM est grand, plus il ralentit le temps de chargement des pages, car il demande plus d’énergie à être chargé.

Par la suite, il évalue sa performance en attribuant à votre site une note entre A (bien) et G (médiocre).

Comment l’utiliser ? 

  • Installez l’extension Ecoindex sur Whrome
  • Faites clic droit > Inspecter  – Un panneau latéral s’affiche alors
  • Cliquez sur les 2 flèches >> présentes dans le menu supérieur puis > Green IT
  • Vous arriverez sur l’accueil de l’extension Green IT. 
  • Chargez la page que vous souhaitez auditer. Ou rechargez là si elle était déjà ouverte, c’est important de le faire à ce moment là.
  • Pour débuter un audit, cliquez sur « Lancer l’analyse ». Cochez “Activer l’analyse des bonnes pratiques” pour avoir le détail de l’audit.

Quelques exemples de sites écoconçus :

Pour vous inspirer, nous vous avons sélectionné quelques sites à la fois beaux et à l’impact environnemental réduit. Parce que oui, on peut faire esthétique avec moins !

site-eco-concu

Une marque de multicoques de course : Océan Fifty

Un site qui obtient le score A en ecoindex :

– Une structure fonctionnelle du site avec une page par besoin

– Un graphisme minimaliste, des boutons explicites, des visuels légers, des illustrations vectorielles, une mise en page simplifiée

– Un développement technique optimisé : une typographie installée en local, pas de requête externe, pas de cookies, un thème WordPress léger, un code CSS optimal, un webdesign responsive

– Un hébergeur éco-responsable : Infomaniak

Une bonne recette pour un site à la fois esthétique et peu consommateur d’énergie, puisque, selon le site Websitecarbon, il rejette autant de carbone que ce que peut absorber un arbre en une année ! 

Une plateforme de collecte de dons, The Hope Gallery :

Un site qui obtient le score B sur l’Ecoindex :

  • Une expérience utilisateur mobile first
  • Un minimum d’éléments et de fonctionnalités
  • Un accès contrôlé à leur API afin d’éviter la multiplication des requêtes.
  • Chaque mini-site d’opération de collecte est un site statique hébergé sur un micro-service

Une belle initiative pour un beau projet !

exemple-eco-conception-web
site-internet-eco-concu

Un programme de pré-incubation pour des projets à impact positif : Maia Mater

Un site qui obtient un Eco-index B : 

  • Des polices de caractères standard
  • Pas plus de 2 fichiers CSS
  • Aucun plug in
  • Aucun cookies
  • Un nombre de requêtes limité
  • Des ressources compressées

Nous avons également éco-conçu nous même les sites internet de nos clients ! 

Site Web Primitive by Wild & Slow

Primitive, notre offre de formation responsable :

Une landing page qui obtient un éco-index B :

  • Pas de photos
  • Un univers illustré en svg
  • Des contenus puissants 
  • Des polices directement intégrées sur Wordpress
  • Moins de boutons mais mieux optimisés

Alter compta, un cabinet de comptables engagés : 

Avec un éco index A sur l’ensemble du site :

  • Un hébergement alimenté en énergies renouvelables.
  • Un template frugal sur Wordpress, ce qui permet au client de prendre aisément la main pour ajouter des articles, des actualités, des références
  • Des pages simples
  • Accent mis sur la puissance du contenu 
  • Des ressources extérieures réduites afin de limiter les requêtes (cookies, Google fonts, intégrations…)

site-web-eco-concu-altercompta

Finalement, il est possible de réduire l’impact de votre site internet grâce à des outils simples et quelques connaissances en la matière tout en conservant son aspect esthétique. L’atout d’un site éco-conçu ? Il est davantage UX friendly et moins long à charger ! Que demander de mieux ?


Pour aller plus loin sur le sujet de l’éco-conception, Julien, le fondateur de l’agence, organise des conférences sur la communication responsable

PARLONS EN

L’eco-conception print de votre support de communication c’est une réflexion engagée autour du graphisme et de l’impression de votre projet.


On voulait évoquer notre micro-aventure dans l’eco conception numérique de notre site, sans compétences en code. Qui peut le plus peut le moins.