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.

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.

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

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 ?