Partager cet article

Comme plus de 50 000 freelances, recevez des offres de mission tech à la messure de votre talent sur FreelanceRepublik.

Je m'inscris  ➔

Trouver des Freelances

Comme plus de 50 000 freelances, recevez des offres de mission tech à la messure de votre talent sur FreelanceRepublik.

En savoir +  ➔

Derniers articles

FreelanceRepublik

+100 missions tech
par semaine

Je m'inscris  ➔

A la recherche d'un freelance ?

Déposez gratuitement votre projet tech sur FreelanceRepublik

En savoir +  ➔
AccueilMarché de la techWebL'éco-conception : comment l'intégrer à son développement web ?

L’éco-conception : comment l’intégrer à son développement web ?

Si internet était un pays, il serait le troisième plus gros consommateur d’électricité au monde. Internet consomme en effet 10 à 15% de l’électricité mondiale ; et quand on sait que toute l’électricité produite n’est pas verte – loin de là – on n’a aucun doute sur le fait qu’il contribue à la pollution.

Il existe cependant des solutions pour pallier à cette surconsommation qui augmente chaque année. L’une d’elle se trouve à la racine de cette consommation : lors de la conception des sites et plateformes qui nécessitent cette électricité.

Il s’agit de l’éco-conception web : concevoir les solutions web avec une approche écologique.

C’est le sujet de cet article, dans lequel nous allons expliquer comment mesurer l’empreinte écologique de son site, et surtout, comment la diminuer.

Quelques chiffres sur l’empreinte carbone d’internet

Pour bien se rendre compte de l’impact écologique qu’ont internet et le numérique, voici quelques chiffres :

  • Le numérique (qui inclut également tout ce qui concerne les appareils physiques) est responsable de 4% des émissions de CO2 (avec une estimation à 8% en 2025) ;
  • Le streaming, qui représente 60% des flux de données échangées, a une pollution équivalente à un pays comme l’Espagne ;
  • Envoyer un e-mail avec une pièce-jointe de 1 Mo revient à laisser une ampoule allumée pendant 25 minutes.

On comprend donc l’enjeu de plus en plus important de l’écoconception.

Vérifier l’empreinte écologique de son site

Avant d’expliquer comment améliorer l’empreinte écologique de son site (et donc de faire de l’éco-conception), voyons déjà comment la mesurer.

Pour ça, il existe plusieurs outils.

WebPageTest

Logo de WebPageTest, site permettant de tester l'éco-conception d'un site web

WebPageTest est un site permettant de simuler une connexion à votre site avec divers paramètres.

Une fois cette connexion testée, WebPageTest renvoie tout un tas de données vous donnant une idée de ce qui transite vers votre site, de l’état de compression de vos images, etc.

Tout ça est important, car plus il y a de données échangées entre le navigateur et votre site, plus l’énergie nécessaire pour le faire fonctionner sera importante.

Website Carbon Calculator

Logo de Website Carbon Calculator, site web permettant de calculer l'empreinte écologique d'un site web

Website Carbon Calculator est un outil en ligne mesurant lui, ou estimant, la consommation en carbone de votre site.

Une fois ce dernier testé, vous savez à quel point votre site est « propre » comparé au reste du web, et sa consommation en CO2 à chaque fois que quelqu’un viste la page.

Le site donne également des comparaisons, pour mieux comprendre ce que votre page web consomme, et donne aussi des conseils en éco-conception.

Lighthouse

Logo de Lighthouse, extension de développement de Google permettant de tester un site en cours de développement

Lighthouse est un outil de développement intégré à Google Chrome, permettant de mesurer plusieurs données d’un site web, notamment ses performances.

Il donne donc le même type de données que WebPageTest, avec des conseils d’optimisation. L’intérêt de Lighthouse est que c’est un outil destiné aux développeurs freelance, et il peut donc être utilisé lors des phases de développement, ce qui est essentiel lorsqu’on veut faire de l’éco conception.

Le guide des tech leader 2.0 !
Une étude menée au travers de consultations des membres de la communauté Tech.Rocks, d'interviews de Tech Leaders ainsi que le point de vue des experts de la tech !

L’éco-conception web en 6 étapes

Ordinateur posé sur une table en forêt, à côté de fleurs et d'une tasse

Maintenant qu’on a compris les problématiques liées à l’écoconception, il est temps de voir comment l’implémenter lors du développement.

Pour ça, nous avons choisi 6 actions à mettre en place pour concevoir un site web de manière écologique.

Mais avant de les lister, voyons déjà quels sont les objectifs de ces actions. Il y en a trois principaux :

  • Réduire le nombre de requêtes échangées via votre site ;
  • Diminuer le volume de ces données échangées ;
  • Limiter le traitement de l’information.

En respectant ces 3 objectifs, on tend d’avantage vers un site propre, durable.

1) Choisir les bonnes technos

La première étape lors de la conception d’un projet web, c’est d’en choisir les technos, la stack technique.

Et c’est dès cette étape qu’on peut intégrer l’écoconception à notre site. En effet, toutes les technos n’ont pas le même impact en terme de consommation de ressources, et donc d’énergie.

Sans faire ici de comparatif poussé, il y a une techno qui pourrait être privilégiée pour un développement plus vert. Il s’agit des PWA.

En effet, les Progressive Web Apps possèdent certains avantages :

  • Le même code quelle que soit la plateforme ;
  • Un développement rapide (et donc moins de consommation de ressources numériques lors de cette étape) ;
  • Leur poids très faible ;
  • Un fonctionnement hors-ligne (pas besoin d’échanges de données pour qu’elles fonctionnent).

Ainsi, si vous voulez prendre en compte l’éco-conception lors de votre développement, envisager cette techno dès le début est une bonne idée.

2) Le lazy loading

Une fois le développement commencé, il y a des pratiques à mettre en place dès le début. Le lazy loading est l’une d’entre elles.

Le lazy loading (chargement paresseux, littéralement), vous le savez probablement, est une technique permettant de charger les éléments seulement lorsqu’on a besoin d’eux.

Par exemple, cela peut être ne charger des images que lorsqu’elles doivent apparaitre à l’écran. Il en est de même avec les composants de frameworks JavaScript ; il faudrait les charger uniquement lorsqu’on en a besoin.

3) Utiliser le cache pour une éco-conception efficace

Ce conseil peut paraitre évident, mais il est bon de le rappeler. Le cache est un excellent moyen de réduire les données échangées, car elles sont stockées, et il n’y a plus besoin, par exemple, d’appeler une base de données pour retourner les résultats d’une requête.

Il existe plusieurs types de cache, notamment :

  • Via le navigateur ;
  • Par le serveur qui héberge le site ;
  • Ou directement par le fournisseur d’accès internet.

4) Les images

Ce n’est pas une surprise, les images représentent une grosse partie de la bande passante lors du chargement d’un site web. Suivant les sites et leur optimisation, elles sont parfois plus lourdes que le site lui-même !

Il est donc important de :

  • Réduire la taille des images (inutile d’avoir une image 4k pour afficher l’aperçu d’une photo) ;
  • Les compresser, également ;
  • Les charger uniquement lorsqu’on en a besoin (utiliser le lazy loading dont on a déjà parlé).

5) Le design en éco-conception

En dehors du développement pur et pur, il faut également intégrer l’UX et l’UI à sa logique d’éco conception.

En effet, les animations, et le style en général, ont un impact non négligeable sur la consommation de ressources d’un site web.

Listons quelques règles qu’il est important de suivre :

  • Privilégier les effets CSS aux effets JavaScript, pour les animations, par exemple ;
  • Tout en évitant les effets CSS trop complexes (ils peuvent augmenter l’utilisation du CPU) ;
  • Éviter l’utilisation de vidéos (et ne pas les charger automatiquement à l’ouverture de la page) ;
  • Se passer de certains éléments, comme les carrousels.

6) Minimiser le code

Cela est aujourd’hui fait automatiquement via les frameworks JavaScript, mais on n’utilise pas toujours ces frameworks.

Ainsi, il est important pour une écoconception efficace, de minimiser son code source, comme ses fichiers JavaScript et CSS.

Il existe pour cela des outils, qu’ils soient en ligne ou disponibles à travers des bibliothèques.


Il y a bien évidemment d’autres techniques faisant de la conception web une conception propre, verte, comme le choix de l’hébergeur, la configuration du serveur, etc.

À vous aussi d’adapter votre développement en fonction de votre cas, chaque projet étant différent et nécessitant des ressources différentes !

Les problèmes de l’éco-conception web

S’il existe des solutions pour faire de l’écoconception, elles ne sont pas toutes toujours faciles à mettre en place.

En effet, tout projet de développement fait face à des contraintes propres à ses besoins fonctionnels.

Par exemple, un site dont le but est que des photographes partagent des clichés pourra difficilement se contenter de peu d’images et d’images de qualité réduite.

De plus, qu’on travaille en freelance ou dans une agence, un client peut avoir des exigences qui vont contre ce principe d’éco conception.

C’est à l’équipe de développement de trouver le juste milieu.

Et vous, utilisez-vous des techniques spécifiques à l’éco-conception ? Dites-le nous en commentaire !

X

Vous avez des besoins
en recrutement IT ?

Prenez RDV  ➔

Ces articles peuvent vous intéresser

Découverte du système de grille (Grid CSS)

La mise en page responsive constitue aujourd’hui un impératif pour tout site web qui se respecte. Pourtant, nombre de...

Les données structurées : Qu’est-ce que c’est ?

De nombreux propriétaires de sites web ne saisissent pas entièrement la définition des données structurées ni leur rôle concret...

Flexbox en CSS : des possibilités design sans limites !

Les possibilités de mise en page sur le Web semblaient jusqu'alors limitées. Coincés entre des layouts figés ou le...

Ne perdez plus de temps à prospecter en vain. Inscrivez-vous gratuitement sur FreelanceRepublik, et recevez de belles offres de missions tech. FreelanceRepublik est gratuit pour les freelances.

Je m'inscris  ➔