Écoconception Web : 3 nuances de vert

Dans mon précédent article sur la pollution numérique, je donnais quelques pistes pour réduire l’impact écologique de votre site web. Mais concevoir un site plus respectueux de l’environnement se réfléchit en amont. Je vais aujourd’hui vous détailler les trois piliers de l’écoconception web. Alors c’est parti pour trois nuances de vert !

Avant de se chauffer, qu’est-ce que l’écoconception web ?

L’écoconception web correspond aux pratiques mises en place pour obtenir un site web durable, tout en respectant les meilleurs standards de l’UX Design. Concrètement, un site optimisé où vos visiteurs trouveront rapidement l’information désirée en un minimum de clics réduira le nombre de pages chargées et donc son impact environnemental.

Et ça plaît à Google ! En effet, améliorer l’expérience utilisateur (UX) et la rapidité d’affichage de votre site web améliore mécaniquement votre visibilité sur les moteurs de recherche. Ce qui est bon pour la planète est bon aussi pour votre SEO !

Les 3 piliers de l’écoconception web

Hébergement et serveur

J’en parlais déjà dans mon précédent article, les hébergeurs consomment énormément d’énergie, à la fois à cause des serveurs allumés H 24 et de leur rafraîchissement constant (un serveur, ça chauffe). C’est pourquoi la première étape consiste à travailler avec des hébergeurs dits “verts” qui garantissent un approvisionnement en énergie renouvelable.

Autre point, l’optimisation des données stockées sur votre serveur. La méthode la plus efficace ? Utiliser la compression GZIP qui est dorénavant prise en charge par la totalité des navigateurs web du marché. Cette compression sans perte – jusqu’à 70 % pour les petits fichiers – permet de réduire la taille de vos pages HTML, de vos scripts et vos feuilles de style.

Conception et design

Fondation même de votre site web, il est impératif de bien réfléchir à sa structure. Une arborescence plus simple signifie souvent qu’il sera bien plus facile pour votre visiteur de trouver l’information recherchée, ce qui implique moins de pages “inutiles” visitées, une navigation plus rapide et donc une réduction de l’impact écologique.

C’est également en amont qu’il convient de réfléchir au design de votre site web. Et au grand dam des créatifs et autres web designers ou spécialistes UX, un site éco-conçu se doit de proposer un design très épuré, avec des couleurs sombres qui consomment beaucoup moins d’énergie à l’affichage. 

Alors attention, on a dit design épuré, pas spartiate ! On ne s’interdit pas de mettre des visuels, mais il est essentiel de les optimiser. Il s’agit alors de choisir le bon format d’image, la bonne dimension (finie l’image en 4K redimensionnée automatiquement en 500px) et surtout de réduire son poids en la compressant le plus possible sans réduire sa qualité. 

Concernant les vidéos, je vous conseille d’en réduire l’utilisation au maximum, mais comme pour les images, d’optimiser leur format et leur encodage pour garantir que leur lecture consomme le moins d’énergie possible. L’idéal serait de proposer plusieurs formats et encodages en fonction de l’appareil utilisé afin d’éviter à un utilisateur de smartphone de devoir charger une vidéo conçue pour un écran en 1080p. En dernier recours, vous pouvez héberger votre vidéo sur YouTube et l’afficher sur votre site en iframe, mais en procédant ainsi, la lecture de votre vidéo implique le travail de deux serveurs : celui de votre site et celui de YouTube.

Technique et fonctionnalités

Un des buts premiers d’un site web écoconçu est de garantir l’accès le plus rapide possible à l’information désirée. Il est donc nécessaire d’obtenir, en plus d’une structure et d’une interface simplifiées, un temps de chargement des pages le plus rapide possible. 

Un audit des différentes fonctionnalités de votre site sera à prévoir afin de supprimer celles devenues inutiles. C’est souvent le cas sur des sites WordPress un peu âgés. Il est si simple d’installer un plugin qu’on oublie très souvent de le désinstaller une fois que la fonctionnalité n’a plus lieu d’exister. Alors on fait du tri ! 

Il faudra également limiter au maximum le nombre de requêtes générées par vos pages. Exemple flagrant : les sliders positionnés en haut de page. Avez-vous réellement besoin de ces trois images (le plus souvent de grande taille) ? Autre point, les polices de caractères. Très souvent, plusieurs polices sont prévues en remplacement en cas de problème d’affichage. A l’arrivée sur votre site, le navigateur de votre visiteur va donc télécharger deux voire trois polices de caractères alors qu’une seule sera affichée. En utilisant une police universelle présente nativement sur tous les navigateurs, vous réduirez le temps de chargement de votre page.

Tournons-nous vers le code de votre site désormais. Il est possible de fortement réduire le temps de chargement de vos pages en minimisant le code source. Cette action supprimera les espaces inutiles de vos fichiers et réduira leur poids. Et en parlant du poids des fichiers de codes, il faut impérativement éviter d’utiliser des librairies comme Bootstrap par exemple, car elles contiennent énormément de code. Ce qui est normal puisqu’elles sont conçues pour faciliter le travail d’intégration en prévoyant en avance le maximum d’éléments graphiques, d’animations et d’interactions. Au final, cela fait beaucoup de code non-utilisé sur votre site, ce qui le ralentit considérablement.

Green or not green, that is the question!

Maintenant que vous avez les bases de l’écoconception web, il est désormais temps de tester votre site pour voir s’il correspond bien à ces critères. Et comme je suis un type comme ça 👍, je vous donne plusieurs outils qui vous permettront de bien auditer votre site :

• Website Carbon Calculator qui vous indique la production de CO₂ générée à chaque visite sur votre site. Il estime ensuite la production de CO₂ à l’année en la comparant à la moyenne des autres sites web. Il vous indique même le nombre d’arbres qu’il faudrait planter pour compenser complètement les émissions de votre site web.
• Ecometer qui lui teste votre site selon plusieurs critères design et techniques et vous donnant un score sur chacun de ces points et des conseils pour les corriger et faire progresser votre site sur la longue route du green web.

Et une fois que votre site est plus green que Yoda, vous pouvez aller plus loin et l’afficher fièrement ! Certains sites proposent même des labels « Green Web » :

• Green Code Lab qui se concentre sur les bonnes pratiques de développement responsable et propose un label à trois niveaux.
• Le label Numérique Responsable qui forme des entreprises sur les questions de RSE et attribue son label aux organisations qui s’engagent à réduire leur impact numérique.
• La Green Web Fondation propose d’afficher sur votre site web une petite vignette indiquant que votre site est hébergé grâce à de l’énergie renouvelable.

J’espère qu’avec cet article j’ai pu vous faire comprendre qu’un site plus respectueux de l’environnement, ça ne s’improvise pas. On peut certes appliquer quelques rapides modifications qui en réduisent rapidement l’impact environnemental, mais c’est en réfléchissant en profondeur et à chaque étape de son projet de refonte que l’on s’assure d’obtenir un site web le plus éco responsable possible. Vos visiteurs et la planète vous remercieront !