Quoi de neuf?

Dans cet article, je vais vous donner des pistes pour réduire l'empreinte écologique de votre site web. Cerise sur le gâteau, ces techniques vont rendre le site web plus rapide, plus réactif, ce qui intervient dans le référencement du site dans les moteurs de recherche, et donc augmentera sa visibilité en ligne et son trafic.

Il y a 4 choses qui déterminent l’empreinte écologique d’une page web:

1. La durée et l’intensité de travail que le serveur devra déployer pour créer la page
2. La quantité de données qu’il transfère depuis le serveur vers le browser
3. La durée et l’intensité de travail que le browser devra déployer pour afficher la page
4. Comment il est hébergé

Tout d'abord, il faut admettre qu’il n’y a pas de moyens simples et efficaces pour mesurer ce paramètre, simplement parce que la consommation d’énergie se fait en plusieurs endroits, parfois dispersés sur la planète. On devra donc mesurer les effets secondaires de cette optimisation qui sont la vitesse de téléchargement des différents éléments de la page, leurs poids et la vitesse à laquelle la page s’affiche sur l’écran.

1 - Génération de la page HTML

Souvent, une base de donnée intervient pour le stockage des informations du site web, de ce fait la première chose à faire est de s’assurer que la base de données est bien structurée et optimisée par des index.

Deuxièmement, il faut utiliser un système de cache ou de publishing afin que la base de donnée ne soit pas sollicitée à chaque demande d’une page donnée. On évite ainsi la consommation du serveur de base de données et des appareils réseau qui fonctionnent entre le serveur web et la DB.

2 - Transfert des données

Ceci comprend toute une série de fichiers nécessaires à la création de la page comme le code HTML, les fichiers des feuilles de style CSS, les polices de caractère, le code JavaScript et enfin les images et autres médias.

Tous doivent être réduit au strict nécessaire et ensuite compressé au maximum, il existe des outils pour compresser les codes CSS et JS ainsi que pour les images.

En ce qui concerne les images, il y a de nombreuses techniques pour réduire leur poids, mais leur optimisation pour le rendre plus légères n’est pas toujours compatible avec l’objet du site. Par exemple, si vous êtes photographe et voulez que vos visiteurs puissent admirer les détails de votre travail, vous voudrez des images de haute qualité, par contre pour un blog de cuisine, l’important, c'est que l’utilisateur ait une idée de à quoi ressemble le plat, donc vous pouvez aller un pas plus loin dans l’optimisation.

3 - Affichage de la page

Nous sommes maintenant côté client et le browser va devoir afficher la page dont il vient de recevoir le code, la vitesse et performance à laquelle il va afficher la page dépend du nombre de lignes de code qu’il va devoir interpréter, essentiellement du HTML, du CSS du JavaScript et de plus en plus souvent du SVG.

On ne parle plus ici de compression du code, comme au point 2, mais de sa réduction au strict nécessaire.

Si vous utilisez une librairie JS pour créer la page web côté client, par exemple React.js sachez que dans ce cas la page doit être générée à chaque vue par un client. Cela induira plus de consommation d’énergie qu’une solution avec rendu côté serveur, qui elle peut utiliser un système de cache qui permet de ne générer la page qu’une seule fois.

4 - hébergement

L’hébergement c’est le serveur où se trouvera votre site pour être accessible par les utilisateurs, il y a trois principalement 3 possibilités pour votre hébergement, listées ci-dessous par ordre croissant de consommation d’énergie

L’hébergement mutualisé, ça veut dire que votre site se trouve sur un serveur avec d’autres sites, c’est la solution la moins couteuse en énergie parce qu’un seul serveur peut héberger des dizaines de sites

Le serveur virtuel dédié, dans ce cas, on vous met à disposition un serveur virtuel consacré à votre site uniquement, c’est une solution que l’on envisage quand le trafic atteint plusieurs milliers de visiteurs par jours. Cette solution est assez économe parce que ce serveur peut être configuré facilement (augmentation de la mémoire, nombre de CPU alloués) pour correspondre à vos besoins

Le serveur physique dédié, dans ce cas un serveur est exclusivement dévolu à votre site et il fonctionne uniquement pour celui-ci. C’est la solution la plus énergivore parce qu’en général le serveur est surdimensionné, oui, comme ’il est difficilement modifiable, on prend de la marge dans ses spécifications pour ne pas devoir en changer rapidement, et la fabrication de ce serveur vient entièrement s’ajouter à votre bilan carbone, alors qu’il est divisé entre les différents sites pour les deux options précédentes.

En conclusion, on peut dire qu’il n’y a pas de recette miracle, mais une série d’interventions assez simples qui pourront aboutir à un réel gain de performance et par la même occasion à une réduction de la consommation d’énergie.

Après que j'ai écrit ce post, ChatGPT a été ouvert au public avec le succès que l’on connait. C’est sans grand espoir d’obtenir quelque chose de convaincant que je lui ai posé la question suivante

“Peux-tu m'écrire un article décrivant comment optimiser le développement de sites web pour consommer le moins d'énergie possible ?”

Je dois admettre que la réponse m’a totalement bluffé!!

Je vous laisse lui poser la question pour voir sa réponse https://chat.openai.com/chat