Le Guide Pratique de l’Éco-Conception Web

Dans cet article, l’équipe Haploïde vous propose de découvrir des méthodes et des techniques concrètes pour améliorer la performance écologique de vos projets grâce à l’éco-conception web. 

À la fin des années 90, l’avènement de l’informatique et la digitalisation progressive des tâches administratives et des supports de communication a permis une avancée écologique grâce aux économies réalisées sur les très nombreuses impressions papier, omniprésentes en entreprise.

Ce phénomène, en partie vrai dans certains pays, ne s’est pourtant pas complètement exprimé à l’échelle mondiale puisqu’une étude de la Upstate Medical University de New-York a montré en 2016 que l’employé de bureau américain consomme toujours en moyenne plus de 10 000 feuilles de papier par an, dont 45% finissent à la poubelle dans la même journée.

Du côté de l’informatique, la production d’équipements informatiques a littéralement explosé au cours des 20 dernières années : une étude de Statista a montré que la part des foyers dans le monde équipés d’un ordinateur à la maison est passée de 27% en 2005 à 49.5% en 2019 et plus de 80% en Europe.

Cette explosion du nombre d’ordinateurs a également été couplée à l’avènement du smartphone et des tablettes dont le nombre d’utilisateurs a dépassé les 3.5 milliards en 2020, ce qui a de surcroît entraîné une hausse exponentielle des données générées, partagées et stockées par les utilisateurs sur les réseaux et data-centers.

Toutefois, l’avènement du « tout numérique » apporte aussi son lot d’effets négatifs : dans l’ensemble, la production intensive d’équipements informatiques combinée à l’augmentation du nombre d’heures passées sur Internet et l’avènement de la vidéo et du streaming en ligne génèrent désormais une pollution numérique très conséquente, de l’ordre de 4% des émissions carbone totales de la planète.

Selon plusieurs sources comme The Shift Project ou CleanFox, la pollution numérique mondiale en équivalent CO2e est aujourd’hui comparable à la pollution émise par un pays entier comme l’Espagne ou à la totalité de l’industrie aérienne dans le monde en 2020. 

Ces chiffres, absolument astronomiques, devraient être amenés à augmenter dans les années qui viennent, allimentés par la progression de l’accès aux smartphones et à Internet des pays en voie de développement et par l’explosion du streaming vidéo issu des plateformes comme YouTube, Netflix, Instagram, SnapChat et TikTok.

Si les campagnes de sensibilisation à la pollution émise à domicile (eau, électricité…) nous sont familières, peu de communicants, designers, développeurs et entreprises connaissent réellement l’empreinte carbone massive du numérique.

Face à ce constat, il est impératif que les entreprises impliquées dans le numérique (c’est-à-dire la quasi-totalité…) prennent conscience de l’impact écologique du digital et intègrent l’éco-conception web au sein de leurs politiques RSE, au sein de leurs communications, de leur marketing et lors du développement de solutions digitales.

Pour être le plus efficace possible, l’éco-conception web doit être prise en compte en amont lors de la création du projet afin de pouvoir agir sur le design et les fonctionnalités des produits ou services numériques que vous créez.

Si vos solutions sont déjà en place, pas de panique. Il est également possible de les auditer, d’en mesurer l’empreinte carbone et d’agir afin d’implanter des solutions écologiques.

Dans ce guide, l’équipe Haploïde vous propose de découvrir un ensemble de mesures concrètes pour accompagner les décideurs, communicants, graphistes, concepteurs et développeurs vers le design et le développement de solutions et outils digitaux plus écologiques et plus performants, centraux dans l’éco-conception web. 

Si vous cherchez à créer des campagnes de communication écologiques, découvrez aussi notre guide dédié à la communication écologique. 

Au cours des 20 dernières années, on a constaté que le poids moyen d’une page web a été multiplié par 115, pour atteindre plus de 1600Ko en 2015, selon une étude de Sanders (2014) rapportée par Frédéric Bordage. Cette augmentation est portée par le recours massif aux images, vidéos, animations et scripts. 

Pourtant, les besoins des utilisateurs restent relativement stables et une étude menée en 2014 par Standish Group a montré que 80% des fonctionnalités créées pour les utilisateurs ne sont que rarement ou très rarement utilisées. 

Face à ce constat, il est important de comprendre que l’éco-conception web doit commencer en amont du projet, lors de la phase de conception et de design ou d’expression des besoins, que les plus grandes réductions d’empreinte environnementale peuvent être accomplies. 

Plus spécifiquement, c’est à l’étape du design et de la conception fonctionnelle du projet web que vous aurez le plus d’impact sur l’empreinte carbone future de votre projet.

C’est en effet bien à cette étape que vous déciderez du nombre d’éléments à afficher, du nombre de fonctionnalités disponibles et des mécanismes d’interaction des visiteurs avec votre produit ou service web. 

Pour concevoir un design simple et efficace, l’idée est d’entreprendre une démarche qualitative visant à épurer les fonctionnalités et éléments non-essentiels afin de créer une interface utilisateur cohérente et homogène qui regroupera l’ensemble des fonctionnalités essentielles du projet. 

En réussissant à adopter une posture de “sobriété numérique”, vous décuplez également les chances que les utilisateurs se focalisent sur ce qui compte le plus au sein de votre solution numérique, augmentant de surcroît le taux d’adoption et de rétention de votre produit ou service digital. 

En plus des scripts, les images, animations et les vidéos sont généralement les éléments les plus lourds d’une page et sont donc des éléments à prendre en compte en éco-conception web. 

Elles ont l’inconvénient d’allonger le temps de chargement des pages si elles ne sont pas optimisées, ce qui diminue la qualité de l’expérience-utilisateur.

Bien évidemment, la question n’est pas d’éliminer à 100% les images et les vidéos de votre solution web puisque celles-ci sont nécessaires pour votre image de marque ainsi que pour l’expérience-utilisateur.

Cependant, la logique reste la même : il s’agit d’adopter une démarche de sobriété du design et de réduire l’utilisation “à tout-va” des images et des vidéos pour en diminuer l’empreinte écologique.

Deuxième étape importante de ce point, il est impératif d’optimiser le poids des images et des vidéos en adoptant le format de visionnage des vidéos suivant les appareils (opération à faire en post-production) et en compressant les images de votre site web.

Si le projet s’y prête, adoptez dès l’étape de la conception une approche “mobile-first” du design, c’est-à-dire un design conçu avant tout pour les terminaux mobiles.

À ce sujet, Frédéric Bordage, spécialiste de l’informatique durable et de l’éco-conception web, recommande d’opter pour une architecture Responsive Design + Server Side Component qui en plus d’appliquer les principes responsive, permet aux serveurs de sélectionner les éléments à charger sur les terminaux mobiles.

Dès la phase de design et de conception, planifiez une architecture simple et pertinente qui permettra une meilleure accessibilité du contenu et des fonctionnalités. Cette approche par l’accessibilité s’applique également à l’organisation de l’information, des menus et des pages de votre projet numérique. Elle permet de réduire le nombre de pages à ouvrir pour accéder à une information particulière, ce qui augmente l’efficience de votre service tout en réduisant son empreinte énergétique. Vous souhaitez en apprendre d’avantage sur l’éco-conception et la communication écologique ?

Dans la deuxième partie de notre guide de l’éco-conception web, nous aborderons les pratiques d’éco-conception liées au développement web. 

Pour mieux éco-concevoir vos projets web, il est en effet impératif de conjuguer une approche design écologique avec des pratiques de développement permettant de diminuer l’empreinte environnementale de votre projet.

Dans la première partie de cet article consacré à l’éco-conception web, nous avons vu que les premières étapes du cahier des charges et du design jouent un rôle clé dans l’éco-conception puisqu’elles permettent de planifier en amont les fonctionnalités, l’architecture et les optimisations écologiques à mener.

Pour être complète, cette démarche doit être complétée par le déploiement de pratiques de développement écologique, à la fois en front, en back et côté serveur. 

En adoptant une démarche de développement web écologique, on permet également d’allonger la durée de vie des solutions numériques que l’on créées, ce qui s’inscrit dans une lutte contre l’obsolescence rapide/programmée du matériel informatique.

En effet, un des enjeux majeurs de la pollution numérique est lié aux cycles de production et de vente frénétiques de l’industrie du hardware informatique, poussés par les pré-requis techniques toujours plus grands des sites internet, jeux et logiciels. 

Avant de découvrir les différentes pratiques de développement permettant de réduire l’empreinte écologique de vos solutions digitales, il faut également avoir en tête qu’un site plus écologique profite généralement de meilleures performances de chargement et d’une architecture plus claire, ce qui facilite le “crawl” des pages par Google et améliore donc son référencement naturel sur les moteurs de recherche. 

Les informations que vous trouverez dans cette partie ont été en partie puisées de l’ouvrage “Éco-conception Web : les 115 bonnes pratiques” de Frédéric Bordage, disponible chez Eyrolles ainsi que des conseils de Renaud Héluin et Vincent Nguyen, spécialistes du développement web.

Dans cette partie, nous allons nous pencher sur les pratiques de développement à mettre en place côté front-end, principalement à l’étape de l’intégration, c’est-à-dire au passage de la maquette à l’interface graphique utilisateur. 

Les sprites CSS consistent à regrouper plusieurs images dans une plus grande appelée “spritesheet”. Cette méthode permet de réduire le temps de chargement des pages (et leur poids) en diminuant le nombre de requêtes HTTP. 

Pour générer des sprites CSS, il existe plusieurs outils gratuits comme CSSsprites.com. 

Concernant la compression des CSS, l’idée est avant tout de réduire le nombre de feuilles de style CSS afin de diminuer le nombre de requêtes HTTP. Vous pouvez concaténer plusieurs feuilles de style en un seul fichier si elles sont utilisées sur toutes les pages et activer également la compression des CSS depuis votre CMS. 

Si vous n’utilisez pas de CMS, certains frameworks intègrent des solutions automatiques de compression des CSS et vous pouvez également utiliser le mod Deflate via le serveur web Apache.

Optimiser la vitesse de chargement en limitant le nombre d’éléments à afficher et en compressant les fichiers permet d’améliorer les performances écologiques de votre solution numérique.

En effet, à chaque utilisation du service, vous réduisez les ressources nécessaires à charger par l’internaute et l’utilisateur. Si vous réalisez une économie de 40% des ressources à charger, imaginez le résultat en multipliant cette économie par plusieurs milliers voire millions d’utilisateurs !

Flash, utilisé par le passé pour animer des éléments de page, consomme beaucoup de ressources et il est donc préférable de favoriser l’utilisation de HTML + JavaScript pour l’animation.

En effet, les bibliothèques JavaScript comme jQuery sont souvent déjà chargées pour des parties du site, ce qui permet d’éviter le téléchargement de code supplémentaire. 

Je sais ce que vous allez vous dire : nous venons de vous dire d’utiliser JavaScript pour les animations ! 

C’est vrai ; mais l’idée est d’en réduire l’utilisation sur les animations souvent consommatrices de beaucoup de ressources et non de proscrire l’utilisation de ce langage qui possède aussi de nombreux avantages.

Nous le disions toute à l’heure, privilégiez la mise en place d’une navigation intuitive et rapide sur vos solutions numériques. 

Concrètement, cela revient à disposer l’information de façon accessible et logique et de réduire la longueur des “chemins” nécessaires pour accéder à une information clé. 

En faisant cela, vous réduirez le nombre de pages et de ressources chargées inutilement, ce qui améliorera les performances écologiques de votre interface. 

Le chargement paresseux ou lazy loading consiste à ne charger les images d’une page web que lorsque l’internaute passe effectivement à ce niveau de la page, réduisant fortement le nombre de ressources chargées inutilement. 

Dans certains cas, la mise en place du lazy loading nécessite de programmer le processus en JavaScript.

Récemment, les navigateurs Chrome et Firefox ont annoncé l’implémentation automatique (native lazy loading) du mécanisme au sein des navigateurs. 

Aux dernières nouvelles, la prochaine version de WordPress (5.5) devrait également intégrer un plugin natif de lazy loading. 

Pour vos illustrations, privilégiez le format SVG (scalable vector graphics) dont l’avantage principal réside dans son indépendance vis-à-vis de la résolution (=modulable selon les différentes tailles d’écrans sans perte de qualité). Ce format permet également de styliser vos illustrations avec du CSS et profite d’une bonne compatibilité sur la quasi-totalité des navigateurs.

Pour vos images, les nouveaux formats d’images comme WebP (développé par Google en 2010) permettent de réaliser de réelles économies sur le poids des images tout en bénéficiant d’une qualité similaire voire supérieure. 

Le dark mode, ou “thème sombre” est une fonctionnalité permettant de passer le fond (habituellement blanc ou de couleur) en noir afin d’améliorer le confort de lecture et de diminuer la consommation énergétique des écrans OLED et AMOLED, puisque ceux-ci “éteignent” les pixels pour afficher du noir. 

À l’heure actuelle, cette fonctionnalité est présente sur de nombreux logiciels et systèmes comme Slack, Facebook, Android, MacOs, YouTube, Google Chrome… 

Nous allons maintenant nous intéresser aux différentes solutions back-end que vous pouvez implanter pour renforcer la performance écologique de vos solutions web. 

La minification des fichiers CSS et JS est un processus semi-automatisé qui consiste à supprimer tout caractère inutile pour l’interprétation du code (espaces, tabulations, commentaires…) pour en réduire le poids et donc la durée de chargement. 

Même si les économies de poids sont petites lorsque prises individuellement, elles peuvent s’avérer grandes à l’échelle d’un site entier. Une étude de Yahoo! a montré que la minification du code avait permis une économie de 21% du poids des pages sur le top 10 des sites américains les plus consultés.

Ce processus de fusion permet de combiner les fichiers CSS et JS et donc de réduire le nombre de requêtes HTTP.

Vous pouvez en apprendre davantage sur la documentation du module Apache mod_pagespeed de Google, qui permet d’automatiser le processus. 

Nous vous conseillons fortement d’activer la mise en cache en utilisant les différents niveaux de cache proposés, facilement accessible si vous utilisez un CMS. 

La mise en cache permet d’augmenter la réactivité puisque les contenus sont retrouvés et chargés sans solliciter l’ensemble du réseau, permettant une réponse plus rapide et une économie de ressources. 

Les plug-ins comme Flash Player consomment beaucoup de ressources et nous conseillons donc de réduire le recours à ce type de solutions.

Si vous utilisez un CMS comme WordPress, désactivez ou désinstallez les plug-ins non-utilisés : vous gagnerez en rapidité de chargement en diminuant le nombre de requêtes/scripts utilisés tout en économisant sur les ressources utilisées à chaque chargement de page. 

Selon une étude présentée par The Next Web, la part du trafic Internet généré par les bots ou “robots” a frôlé les 40% du trafic total en 2018. Au sein de ces 40%, environ la moitié est représentée par des robots “utiles” et l’autre par des robots néfastes.

Face à ce constat qui nous montre que 20% du trafic mondial est formé de robots néfastes ou mal-intentionnés, il est important de déployer des mesures de protection, notamment anti-DDOS, afin de protéger vos données et vos utilisateurs, mais aussi de réduire l’énergie utilisée pour afficher votre site web à ces nombreux robots.

Si comme 8 sites sur 10, vous utilisez PHP, privilégiez l’utilisation de la version stable la plus récente : vous gagnerez en performances sur l’ensemble de votre site.

Selon le site WP Rocket, la version 7.0 de PHP permet aux serveurs d’exécuter deux fois plus de requêtes que PHP 5.6 avec deux fois moins de latence, tout en réduisant le risques d’expositions à des vulnérabilités identifiées sur les versions antérieures de PHP.

L’équipe Haploïde partage plusieurs conseils pour adopter une démarche éco-responsable au niveau des serveurs utilisés pour l’hébergement de vos solutions numériques.  

Choisir un hébergeur engagé dans le développement durable

L’hébergement des données des produits ou services web nécessite de l’électricité pour faire fonctionner les serveurs (individuels ou mutualisés) de l’entreprise d’hébergement web à laquelle choisissez de faire appel. 

Cette énergie, nécessaire pour héberger vos données, peut être renouvelable ou non, en fonction des fournisseurs d’énergie qui alimentent votre hébergeur.

Pour un hébergeur, il existe donc plusieurs façons de fournir des services d’hébergement plus écologiques : 

• Produire sa propre électricité renouvelable (éolienne, solaire)
• S’approvisionner en énergie renouvelable via les certificats d’électricité verte (RECS)
• Compenser les émissions carbone générées par l’entreprise
• Améliorer l’efficience énergétique de ses serveurs et équipements

À l’heure actuelle, la plupart des “géants” de l’hébergement ne se sont pas encore totalement engagés dans une démarche écologique. 

Il existe pour autant des entreprises d’hébergement comme Infomaniak (Suisse), EX2 (Canada) ou HostPapa (Canada) qui utilisent principalement ou entièrement des énergies renouvelables pour alimenter leurs serveurs, en plus de leurs efforts de compensation carbone et de leur implication générale dans le développement durable.

Recourir à un “reverse proxy” comme Varnish permettent de servir des contenus rapidement (pages, images…) tout en diminuant la sollicitation du serveur d’applications, ce qui permet de réduire la taille de l’infrastructure nécessaire, et donc sa consommation. 

Si le trafic généré par vos solutions numériques ne justifient pas d’utiliser un serveur dédié, privilégiez l’utilisation d’un VPS ou d’un hébergement partagé pour diminuer l’empreinte écologique de posséder un serveur dédié à votre site.

Il est temps de dresser une conclusion sur les pratiques de l’éco-conception web que nous avons abordées au sujet du design, du développement ou de l’hébergement. 

Tout d’abord, nous avons pu voir que l’empreinte écologique du numérique est forte, voire très forte : elle représente aujourd’hui près de 4% des émissions globales de la planète, soit plus que la totalité de l’industrie aérienne. Cette réalité est de plus en plus prise en compte par les Français, dans un mouvement plus général de prise de conscience de la nécessaire implication des entreprises dans le développement durable. 

Cette implication écologique doit pourtant encore être fortement accentuée par les entreprises qui doivent aujourd’hui intégrer la pollution issue du numérique au sein de leurs politiques environnementales et RSE : c’est un atout clé pour générer de la cohérence dans vos démarches de développement durable. Pour cela, il existe à l’heure actuelle un grand nombre de solutions à mettre en place, qui permettent de réduire fortement l’empreinte carbone et écologique de vos projets digitaux.

L’étape d’audit des besoins fonctionnels et de maquettage est primordiale : c’est à cette étape que les plus grosses économies énergétiques peuvent être planifiées, en recentrant le produit ou service sur ses fonctionnalités clés et en se focalisant sur l’essentiel afin de créer une expérience d’utilisation pertinente et efficace. Ensuite, c’est à l’étape du développement de vos solutions digitales qu’il sera nécessaire d’intervenir : les systèmes de minification, de cache et de gestion des contenus peuvent réaliser de grandes économies de ressources s’ils sont déployés correctement lors du développement de vos projets.

Enfin, la dimension écologique de votre hébergement doit également être prise en compte, en prêtant notamment attention au choix de votre hébergeur et à la mise en place d’un système de cache serveur. Il est important de garder en tête qu’un site écologique n’est pas un site “diminué”; bien au contraire ! Les gains de performance, notamment en termes de lisibilité, d’accessibilité et de vitesse d’affichage des éléments sont autant de signaux positifs, utiles pour augmenter votre taux de conversion et votre référencement naturel sur les moteurs de recherche : un site écologique, c’est aussi un site plus performant ! 

Chez Haploïde, nous vous accompagnons sur la création de campagnes de communication web et print écologiques, grâce à notre équipe de communicants, créatifs et développeurs formés aux techniques de l’éco-conception.