Comment devenir un développeur web éco‑responsable ?

Dans notre monde de plus en plus connecté, le numérique à un rôle important dans l’émission de CO2, impactant fortement l’environnement. Et la pollution numérique étant invisible, pas toujours simple de comprendre l’impact que nos habitudes numériques ont sur notre environnement.

Quelques chiffres permettent de se faire une idée. Par internaute, l’empreinte carbone numérique annuelle est :
— 346kWh d’énergie
— 200kg de gaz à effet de serre
— 3000 litres d’eau
— 1 requête Google consommerai autant qu’une ampoule allumée 1 heure.

Frédéric Bordage, dans son livre Éco-conception web : les 115 bonnes pratiques, écrit : « L’empreinte écologique des sites web explose depuis quelques années, en grande partie parce qu’ils sont mal conçus : en témoigne le poids des pages web, multiplié par six entre 2008 et 2015!».

Quand on est développeur et que des centaines ou milliers de personnes visitent les sites web que nous développons, nos actions peuvent rapidement avoir un impact fort. Il est possible d’agir à notre échelle et de faire certains gestes simples, permettant de diminuer l’impact écologique de nos sites web.

On remarquera rapidement que notre impact dépend fortement du poids des ressources du site web et du nombre d’appels faits vers le serveur. Plus les ressources sont lourdes, plus le serveur aura besoin d’énergie pour les stocker et les livrer au poste du client, et plus l’impact ecologique sera élevé.

Faisons ensemble le tour de certaines actions simples à fort impact. Certaines suggestions peuvent paraitre évidentes, mais une piqure de rappel ne fait jamais de mal !

Diminuer l’utilisation des emails

Il est estimé que 12 milliards de mails sont envoyés chaque heure dans le monde. Réduire l’utilisation des emails est donc un premier pas.

Dans les sites web que vous développez, si c’est possible, essayez de réduire le nombre d’emails envoyés depuis le site. Il est également envisageable, dans certains cas, de regrouper les mails entre eux.

Ensuite, en ce qui concerne votre usage personnel, désabonnez-vous des newsletter des sites que vous ne suivez plus, ou désactivez les notifications par mail automatiques de certains services tels que Github, Trello ou Jira.

Pour finir, supprimez les mails inutiles que vous stockez, qui consomment de l’énergie côté serveur.

Optimisez les images sur votre site web

La majorité du poids d’un site web est dû aux images. Il est donc important d’effectuer un vrai travail d’optimisation sur les images.

La première tâche consiste à utiliser sur son site web des images ayant une dimension optimisée. Par exemple, si une image est affichée à l’écran avec une taille maximale d’environ 800x600px, il est inutile que le fichier original fasse 2400x1800px. Réduire ses dimensions réduira son poids, et baissera l’énergie nécessaire pour la stocker, la récupérer sur le serveur et l’afficher sur l’ordinateur du visiteur.

Ensuite, il faut penser à optimiser le poids des images. Cette méthode marche particulièrement bien avec les images JPG. Il est possible de diviser par deux le poids d’une image sans altérer sa qualité ni diminuer ses dimensions. Pour cela, il existe des sites web tels que imagecompressor.com qui peuvent s’en occuper pour vous.

Pour finir, il est recommandé d’utiliser le type d’image adapté au besoin. Par exemple :
– Les images JPG sont adaptées pour les images complexes, telles que des photos ;
– Les images PNG sont préférées quand l’image contient de la transparence ;
– Les SVG sont parfaits pour des icônes ou logos vectorisés.

Il est important de noter que le bénéfice d’optimiser les images se situe également du côté de l’utilisateur. Réduire le poids des images permet d’accélérer le site, ce qui génère de la satisfaction client et augmente systématiquement le taux de conversion.

Favoriser le traitement asynchrone

L’exemple parfait pour illustrer cette section est le suivant : Pourquoi charger toutes les informations d’une page alors que l’utilisateur ne va peut-être jamais scroller ? Dans la mesure du possible, misez sur l’asynchrone : cela permet de réduire le nombre de ressources à charger, et cela rendra votre site web plus véloce.

Mettre en place du cache navigateur

Le cache navigateur permet de stocker certaines infos de votre site web (images, css, js,…) afin de ne pas réinterroger le serveur à chaque visite. Si un visiteur revient sur votre site de manière récurrente, les données seront récupérées sur le cache navigateur, et non sur le serveur.

Plus d’informations

Minifier son code CSS et JS

Cette solution a les mêmes avantages que l’optimisation des images : cela réduit le poids des ressources sur le serveur et rend le site web plus rapide à charger.

Minifier son code supprime les caractères inutiles tels que les espaces ou les commentaires, et renomme les variables en les raccourcissant. Cela diminue mécaniquement le poids du fichier source.

Plus d’informations

En conclusion

Vous avez tout interêt à mettre ces actions en place. Tout simplement car dans la plupart des cas, elles représentent une réelle valeur ajoutée pour l’utilisateur, notamment en terme de performance. Tout le monde est donc gagnant.

Pour plus d’inspiration, vous pouvez lire Éco-conception web : les 115 bonnes pratiques de Frédéric Bordage, qui aborde de manière détaillée ce sujet.

Sources :

https://www.fournisseur-energie.com/internet-plus-gros-pollueur-de-planete/#lempreinte_ecologique_des_internautes

https://www.greenit.fr/2015/05/12/quelle-est-l-empreinte-environnementale-du-web/

Livre Éco-conception web : les 115 bonnes pratiques de Frédéric Bordage



Autres articles à découvrir



J’ai testé : Scalecity, la formation Growth & IA

Scalecity introduit le monde du Growth Hacking. Pleinement concerné de par mon activité à l’Aéroport de Lyon, j’ai décidé de me lancer dans cette formation.

L’Ademe met à jour ses données sur la pollution numérique

Ça y est ! Après des années de désinformation, l’Ademe a mis à jour ses données concernant la pollution numérique.

Remplissage automatique des codes reçus par SMS

Mettez en place sur votre site web le remplissage des codes reçus par SMS, à l’aide d’un simple attribut HTML.




Un projet à soumettre,
ou une question à me poser ?

×

Rentrons en contact

Un projet à soumettre, une demande de devis ou simplement une question? Contactez-moi et nous discuterons ensemble de vos objectifs afin de cerner vos attentes. Je vous guiderai afin de trouver les solutions adaptées à vos besoins.