Même si nos devs front ont pris l’habitude de se prêter leurs copies des “115 bonnes pratiques de l’écoconception” de Frédéric Bordage, il est impossible de ne réaliser que des sites web 100% éco-responsable.

D’ailleurs, le site web 100% éco-responsable n’existe pas. Pourtant, voici quelques bonnes pratiques faciles à appliquer, que nous mettons en place sur chacune de nos conceptions de site web.

Tous les Data Center ne se valent pas, certains fonctionnent à partir d’énergies renouvelables (solaires, éolien) et d’autres non. Certains mettent en place des dispositifs pour moins chauffer et moins rejeter de gaz à effet de serre, d’autres non.

Nous conseillons de faire régulièrement un comparatif des différents fournisseurs d’hébergement sur le marché, pour trouver le meilleur compromis entre performance fonctionnelle et performance énergétique.

A l’heure où nous écrivons cet article, nous pensons que ce meilleur compromis se trouve chez Infomaniak, et c’est pourquoi nous hébergeons tous nos sites dans leur Data Center “vert” situé en Suisse, mais il existe des offres similaires chez les autres hébergeurs

Le développement d’un site responsive, qui s’adapte au terminal d’affichage utilisé, est plus efficace à bien des égards.

Tout d’abord, vous n’avez qu’une seule version de votre site, alors qu’auparavant il fallait développer et héberger plusieurs sites, un pour mobile et un pour desktop. De plus, très souvent les sites responsives sont imaginés en mobile first. Et pour qu’un site charge efficacement avec une connexion mobile, il faut que les pages soient légères : d’une pierre deux coups !

Les utilisateurs ne s’en rendent pas compte mais les scripts appelant des ressources externes sont très présents sur les sites web. A-t-on vraiment besoin de charger 5 ou 6 Google fonts ? Ne chargez que deux polices, les titres et les sous-titres. A-t-on vraiment besoin de cette vidéo YouTube sur cette page ?

Bien entendu, on a tous envie d’avoir notre script Analytics sur son site, il n’est pas question de supprimer toutes les ressources tierces mais de les limiter.

L’intégration de publicités programmatiques ou les Social Walls sont les meilleurs exemples de ressources tierces très lourdes et qui ont tendance à souvent entraîner des erreurs d’exécution des scripts. C’est pourquoi on ne propose quasiment plus de Social Wall à nos clients, au profit d’images fixes renvoyant sur les réseaux sociaux.

Le Lazy Loading est une technique qui permet de charger les éléments d’une page web uniquement à partir du moment où on en a besoin. L’exemple typique est celui d’une image qui se situe en dessous de la ligne de flottaison, elle ne sera chargée que lorsque l’internaute aura scrollé jusqu’à l’emplacement de l’image.

Sachant cela, il est aisé de comprendre pourquoi le lazy loading est une bonne pratique d’éco-conception :on limite les données transmises en ne téléchargeant que celle dont on a besoin !

C’est tout simple, la mise en cache permet de limiter le nombre de requête HTTP effectuées. Un élément est appelé via une première requête. Si cet élément est mis en cache, nous n’avons pas besoin de le télécharger une seconde fois lorsqu’on en a besoin à nouveau.

Nous l’avons vu, de nos jours les images représentent une bonne partie du poids des pages web. C’est pour cela qu’il faut bien les optimiser :

• Les redimensionner à la taille qui sera effectivement affichée sur l’écran de l’internaute : nul besoin d’une image en 4K pour une image qui ne sera jamais affiché sur plus de 500 pixels de large.
• Les compresser
• Utiliser le bon format d’image, un .svg est bien moins gourmand en ressources qu’un .png

Les images et vidéos sont souvent la cause principale d’un poids élevé pour une page. Cela ne veut pas dire pour autant qu’il ne faut pas faire attention au code. Il est recommandé d’utiliser le strict minimum en termes de JS et de CSS pour le rendu d’une page web.

Par exemple, la plupart des CMS et des Page Builders ont tendance à charger énormément de code superflu pour simplifier le travail du créateur du site. Si vous en avez la possibilité, optez pour un thème personnalisé qui va minimiser le nombre de divs et de classes pour n’inclure que ce dont on a vraiment besoin.

Les JS et les CSS que vous appelez doivent également être minifiés pour réduire leur poids et leur temps de chargement, il s’agit de supprimer les caractères inutiles comme les espaces, les sauts de ligne et les commentaires.