Eco-conception d’un projet web

Un site écoconçu est souvent perçu au premier abord comme un site « simpliste », « vide » mais cette vision est évidemment fausse et réductrice. L’écoconception pousse simplement à faire mieux avec moins, pour des sites plus performants et surtout moins énergivores.

Qu’est-ce que l’éco-conception web ?

L’éco-conception c’est avant tout un ensemble de méthodes de production permettant de diminuer les impacts environnementaux d’un produit ou service sur l’ensemble de son cycle de vie. Elle fait partie des bonnes pratiques dites « numérique responsable ».

De nos jours, le  numérique se développe, les activités se digitalisent et les sites web deviennent de plus en plus nombreux. Il devient urgent de réduire l’impact du numérique sur notre environnement, c’est pourquoi l’éco-conception web fait l’objet de toutes les attentions. Concevoir des sites internet moins énergivores et plus respectueux de l’environnement, oui ! Mais comment ?

Think green

Comment concevoir un site web respectueux de l’environnement, du côté du design ?

  • Avant la création graphique

    Un site web doit répondre aux attentes de ses utilisateurs, c’est un fait indéniable. L’éco-conception, c’est avant tout une manière de concevoir les interfaces web en respectant les bonnes pratiques d’UX Design afin que l’expérience utilisateur soit optimale.
    En ce sens, deux points principaux sont à travailler en amont de la création graphique :

    • Mieux définir le besoin et éliminer les fonctionnalités inutiles :

    Au cœur de l’UX, la question de l’étude du besoin est primordiale pour le développement d’un site web qui réponde aux besoins et attentes réelles des utilisateurs. A la clef, un site efficace avec une bonne performance qui sera délivré de fonctionnalités inutiles. Il n’est pas question de faire de la décoration mais d’aller à l’essentiel. Avec une consommation mobile croissante (68.1% des visites de sites internet en 2020 proviennent de smartphones ), la conception en « mobile first » est à prioriser de façon à être sûr d’aller à l’essentiel et de ne pas prévoir de contenus superflus. De cette manière on s’assure également que la navigation sera optimale pour la majorité des utilisateurs, quelque que soit son terminal (ordinateur, tablette, mobile…).

    • Fluidifier l’expérience utilisateur :

    Plus un utilisateur passe de temps sur un site, plus son empreinte environnementale sera élevée. Il est nécessaire d’optimiser le parcours utilisateur pour rendre la navigation plus intuitive sur les pages et que l’utilisateur trouve le plus rapidement possible l’objet de sa recherche : une information, un produit qu’il souhaite acheter, effectuer une réservation… Ainsi, l’utilisateur sera satisfait et l’impact environnemental de sa navigation web sera amoindri.

  • Bonnes pratiques de design écoconçu

    Sur le plan du design quelques bonnes pratiques sont également à respecter comme :

    • Optimiser les images pour réduire leur poids tout en gardant une qualité d’image satisfaisante :

    1. Prioriser les images vectorielles dès que cela est possible (.svg).
    2. Enregistrer les photographies ou images bitmap en .jpg ou .webp.
    3. Utiliser des images au bon format : Il est important de prévoir directement les images au format dans lesquelles elles seront visualisées pour ne pas demander un effort supplémentaire au serveur pour redimensionner dynamiquement l’image (ne pas mettre une image de 2000px de large si elle sera affichée en 700px de large maximum). Il faudra prendre soin de redimensionner les images dans leur taille d’affichage définitive avant de les mettre en ligne.
    4. Baisser la qualité de l’image.
    5. Compresser l’image.
    6. Faire du « Responsive images » : Prévoir une version d’image pour chaque résolution d’écran (une petite image pour mobile, une image moyenne pour tablette, une grande image pour desktop, …)
      Le redimensionnement dynamique des images nécessite une grosse puissance de calcul du navigateur web qui peut ainsi être facilement évitée et transfert de données inutiles.

    • Limiter l’usage des vidéos :

    Lorsque la vidéo n’est pas indispensable il est préférable de la remplacer par le son seul ou une illustration pour expliquer le propos. Si la vidéo est indispensable, il est recommandé :

    1. De limiter sa durée (moins de 1m30).
    2. De baisser la qualité des vidéos et les compresser.
    3. Désactiver l’auto play, la lecture automatique des vidéos.
    4. Remplacer la vidéo par une image cliquable qui renverra vers le lecteur Youtube.

    • Limiter les animations :

    Les animations doivent être utilisées seulement si elles apportent une réelle plue value à l’expérience utilisateur. Il est nécessaire également de limiter toutes les animations qui se lancent automatiquement ou tournent en boucle.

    • Utiliser des polices systèmes :

    Si le site utilise des polices standards (déjà installées de base sur la majorité des systèmes d’exploitation), l’utilisateur n’aura pas besoin de télécharger de police supplémentaire, rendant ainsi le chargement du site plus rapide et moins énergivore. Si des polices non standards sont utilisées, limiter leur nombre à 3 maximum.

    • Limiter l’utilisation des plugins et widgets :

    Les plugins et widgets utilisent beaucoup de ressources et peuvent facilement être évités. Par exemple, on peut remplacer les fils d’actualité Twitter ou Facebook directement intégrés par des icônes .svg, et la carte Google maps par une image cliquable renvoyant sur l’url Google maps.

    • Eviter les scroll infinis :

    Le défilement infini d’une page augmente le temps passé sur le site et le poids de la page. Il est donc préférable d’opter pour une pagination ou un bouton « voir plus ».

    • Optimiser les documents en téléchargement sur le site :

    Compresser et réduire la qualité des fichiers en libre téléchargement sur le site est important pour ne pas trop solliciter le serveur. Il est également intéressant de prévoir une description succincte du contenu du fichier à côté du lien de téléchargement pour éviter les téléchargement inutiles et d’afficher le poids du fichier afin d’informer l’utilisateur.

Comment concevoir un site web respectueux de l’environnement, du côté du code ?

  • Bonnes pratiques de développement web

    Il est aussi possible d’effectuer certaines modifications côté développeurs afin de réduire l’impact du code :

    • Réduire le poids des librairies :

    Un site web est souvent composé de nombreuses librairies (des fonctionnalités déjà codées) qui sont appelées via des serveurs externes. Ici deux solutions sont à combiner :
    – La première consiste à ne faire appel qu’aux fonctions précises dont on a besoin. Ainsi la librairie Bootstrap (librairie combinant html, css et javascript) a fait le choix de séparer ses fonctionnalités en fichiers différents afin que ses utilisateurs puissent sélectionner seulement celles qui leurs sont nécessaires.
    – La seconde solution est l’hébergement des librairies directement sur le serveur du site web. Ces dernières années, afin de réduire les temps de chargement, le principe de CDN (Content Delivery Network) a connu un essor important. Toutefois regrouper ainsi les librairies sur des serveurs externes nécessite que le serveur du site web effectue un grand nombre de requêtes vers l’extérieur, ce qui impacte considérablement la consommation énergétique de l’ensemble des serveurs.

    • Réduire le poids des scripts : 

    En plus des librairies, les sites internet utilisent des scripts CSS et Javascript dont on peut optimiser le poids. Il est possible de minimiser ces scripts, ce qui permet de diviser le poids initial de ces fichiers.

     

  • Et pour l’hébergement de son site ?

    Aujourd’hui on peut faire le choix d’un hébergeur proposant des solutions « vertes » pour son site. De plus en plus d’hébergeurs s’engagent dans une démarche écologique, avec des green data centers utilisant en partie ou totalement des énergies renouvelables. Le Journal du Geek a d’ailleurs fait un article pour comparer les « meilleurs hébergeurs verts ».

    L’éco-conception web est un travail sur la globalité du cycle de vie de l’application / du site web de façon à réduire l’impact énergétique de chaque étape en trouvant des alternatives plus « green ». Il est encore impossible de ne plus du tout polluer, mais en changeant nos pratiques, nous pouvons diminuer significativement la pollution d’un site internet.


Comment mesurer l’impact environnemental de son site ?

Que ce soit pour identifier les axes d’améliorations en terme d’écoconception de son site web actuel ou visualiser le bénéfice d’une refonte fraîchement réalisée, il est intéressant de procéder à une mesure de l’impact environnemental de son site. Plusieurs outils existent et font appel à des méthodes de calculs et critères différents. Ces outils sont avant tout des indicateurs pour aider à identifier les problématiques environnementales de son site, et pouvoir ensuite initier des actions pour les résoudre.

Voici une sélection d’outils pour vous aider à analyser la qualité écologique de votre site internet :

  • Le solution EcoIndex évalue un site en fonction des critères suivants : la consommation en eau bleue et l’émission de gaz à effet de serre,
  • Greenspector donne quant à lui une mesure de la consommation électrique d’une page web sur mobile,
  • L’extension GreenIT-Analysis permet d’analyser les bonnes pratiques d’éco-conception d’une page web.
  • Pour finir Website Carbon Calculator indique le niveau d’émission de gaz à effet de serre d’un site et la source d’énergie utilisée par l’hébergeur.Afin d’établir des indicateurs fiables, il convient d’effectuer une analyse combinant l’ensemble de ces outils.

L’impact environnemental du web en quelques chiffres :

– Une donnée numérique parcourt en moyenne 15 000 kilomètres.
– Une recherche Google produit une émission de CO2 de 7 grammes.
– Les data center français consomment 10 % de l’électricité utilisée dans notre pays.
– Un site web génère 4,61 gramme de CO2.
– Le Numérique représente plus de 4% des émissions mondiales de gaz a effet de serre, consommation supérieure à celle des transports aériens.
– Si internet était un pays, ce serait le 3ème plus gros consommateur d’électricité mondiale après la Chine et les Etats Unis

Pour aller plus loin sur l’éco-conception : 

Ecoconception, Les 115 bonnes pratiques, Frédéric Bordage, Editions Eyrolles