L’éco-conception web

Grâce à internet, nous pouvons échanger des messages, écouter de la musique et regarder des vidéos en streaming en illimité. Malheureusement et au même titre que les sites web, ces habitudes que nous avons en ligne ont un impact sur l'environnement, encore invisible dans notre société.

Au moment où j'écris cet article, le monde compte plus d'1,85 milliards de sites internet avec plus de 4,88 milliards d'utilisateurs et en moyenne, un site web produit 4,61g de CO2 par page vue. Pour des sites qui ont en moyenne 10.000 pages vues par mois, cela représente 553kg de CO2 par an par site.

L’utilisation d’Internet représente elle-même 3,7% des émissions de gaz à effet de serre dans le monde, c’est-à-dire l’équivalent de tout le trafic aérien du monde. Ces émissions pourraient doubler d’ici 2025 (hors statistiques dû au COVID-19). Cela représente pour chaque utilisateur d’internet, en moyenne 400g de CO2 émis par an.

La consommation d’internet est telle qu’elle constitue un véritable enjeu environnemental pour les années à venir. C’est pourquoi il est important de réduire son impact carbone.

Pourquoi les sites web ont-ils un impact sur l’environnement ?

Une simple visite sur une page web émet du CO2 et il peut être plus ou moins important.

En effet, plus la page est lourde et plus elle génère des requêtes, plus elle émettra de CO2 et cela aura un impact sur l’environnement.

La lourdeur d’une page web est principalement dûe au poids des images, des vidéos, des scripts chargés…

Maintenant que vous savez pourquoi un site web peut avoir un impact sur l’environnement, je vais vous expliquer ce que nous faisons en tant que développeurs pour créer un site web qui respecte la planète !

En tant que développeur web, que faisons nous ?

Heureusement, il existe des solutions pour réduire l’impact carbone de nos sites web.

Pour commencer, vous pouvez analyser votre site web avec Website Footprint ou encore avec Website Carbon. Ils vous permettront de savoir quel impact carbone a votre site sur la planète.

N’oubliez pas de passer en revue toutes les pages de votre site car elles sont toutes différentes, ce ne serait pas cohérent d’avoir une page d’index légère et le reste des pages lourdes.

En complément, vous pouvez ajouter l’extension “Carbonalyser” sur votre navigateur. Ce ne sera pas aussi précis que les outils ci-dessous mais cela pourra vous donner une idée de votre consommation d'électricité et les émissions de gaz à effet de serre (GES) associées à votre navigation sur le web.

Pensez à concevoir des sites légers et qui se chargent rapidement, car au-delà du fait qu’un site lourd pollue, l’expérience utilisateur est aussi impactée si le site est long à charger.

Des solutions orientées pour le frontend

Nous avons sélectionné une liste de solutions/bonnes pratiques afin d’avoir une approche orientée éco-conception pour le frontend.

Réduire la taille des images chargées

Évidemment il est important que la qualité de celles-ci ne soit pas impactée au moment de la compression, l’idée étant de trouver un ratio qualité / poids avec un bon compromis. Il faut également éviter de redimensionner les images artificiellement en CSS, si vous savez quelle taille elle va faire, redimensionnez-la directement avec votre logiciel d’édition d’image avec les bonnes dimensions.

Utiliser des vidéos si c’est indispensable

Et surtout désactiver la lecture automatique en laissant l’utilisateur décider s'il veut lire ou non la vidéo — au passage, sachez que la plupart des navigateurs coupent systématiquement la bande son des vidéos lues automatiquement pour éviter de gêner l’utilisateur qui ne serait pas intéressé par la vidéo.

Ne garder que les requêtes essentielles.

En effet, lorsqu’un utilisateur fait une recherche sur votre site, cela déclenche x requêtes http, le serveur envoie au navigateur du visiteur tous les fichiers nécessaires à l’affichage de votre site web. Or, en général, plus il y aura de fichiers à charger, plus votre site sera lourd et plus le chargement sera long.

Pour cela, on peut rassembler tous les scripts JavaScript en un seul fichier, idem pour les feuilles de styles, parfois même charger les images sous forme de “sprites” ou pour les fichiers SVG les charger “inline” par exemple.

Concevoir des designs simples et épurés

La simplicité est presque toujours la meilleure approche de toute façon !

Éviter de charger des frameworks complets si on n’en utilise qu’une partie.

Il vaut mieux personnaliser le framework choisi pour n’en charger que ce qui est utilisé. Par exemple, remplacer jQuery par du Vanilla JS est souvent la meilleure façon de faire du JavaScript front. En effet, le JavaScript natif est léger, rapide et multi plateformes ! Contrairement à jQuery, pas besoin de charger des bibliothèques supplémentaires, puisqu’il est déjà implémenté dans tous les navigateurs d’aujourd’hui.

Mobile first

S’assurer que l’approche Mobile First est bien respectée, de telle sorte que les petits écrans ne chargent pas de lourds médias uniquement destinés aux grands écrans.

Nettoyer le code

Vérifier si la totalité de son code CSS et JavaScript est utilisé. En effet, pourquoi charger ce qui ne sert pas ? Vous pouvez le faire grâce à l’outil de Chrome : Code Coverage. Il existe également un outil, uniquement pour le CSS : Unused CSS. Ces outils vous permettront d’isoler le code CSS et/ou JavaScript inutilisé sur votre site.

Enfin, si vous utilisez des modules bundlers comme WebPack ou PostCSS par exemple, vous pouvez utiliser PurgeCSS qui analysera votre contenu et vos fichiers CSS puis comparera automatiquement le CSS défini dans vos feuilles de styles avec celui véritablement utilisé sur votre site. Il supprimera alors le CSS inutile pour des fichiers plus légers.

Lazy Load

Lorsque vous arrivez sur un site internet, le navigateur charge toutes les ressources nécessaires pour afficher la page correctement, même si certaines ressources ne se trouvent pas dans la zone visible de l’écran. Il existe une technique (“LazyLoad”) qui permet de charger uniquement les ressources lorsqu’elles apparaissent dans le « viewport ». Les ressources les plus importantes à charger ainsi à la demande sont (notamment) les images et les vidéos, puisque ce sont bien souvent les fichiers les plus lourds des sites ou web app.

Pour cela, il existe une librairie Vanilla JS (verlok/vanilla-lazyload) qui est légère et qui permet de charger en différé toutes les ressources au-dessus de la ligne de flottaison. D’autres outils du même type pourront peut-être être plus pertinents pour votre stack, à vous de chercher un peu celui qui vous conviendra le mieux.

Il existe également le Lazy Load natif, c’est-à-dire qu’il est déjà intégré aux navigateurs modernes (voir lesquels supportent cette technique). Il suffit d’ajouter l’attribut “loading” aux balises IMG, Picture ou même iFrame pour activer le Lazy Loading. Il existe trois valeurs à cet attribut :

• loading=“lazy” : lazy loading
• loading=“eager” : pas de lazy loading
• loading=“auto” : le navigateur décidera lui-même

Charger les images pour des terminaux spécifiques

Même si vos images ne sont pas visibles grâce à l’instruction CSS display: none, elles sont tout de même chargées par le navigateur.

La solution est d’utiliser deux attributs : srcset et sizes (incompatible avec Internet Explorer), il suffit de les ajouter à vos balises img, ou bien d’utiliser la balise picture. Cette technique permettra de ne charger que les images visibles.

Il existe également une technique qui consiste à utiliser la propriété CSS background-image: url(url-de-votre-image) avec les media queries afin de charger vos images de manière responsive.

Utiliser le format SVG (Scalable Vector Graphics) autant que possible.

En effet, le SVG est basé sur du XML, ne se pixelise pas et est super léger. En plus, il est compatible avec tous les navigateurs modernes ! Comme son nom l’indique, c’est un format vectoriel, donc vous n’aurez pas besoin de charger plusieurs versions d’une même image en fonction des différents écrans et grâce à ce format, vous pourrez redimensionner vos images sans aucune perte de qualité.

Et aussi

Si vous utilisez WordPress ou un autre CMS, il existe aussi des solutions pour réduire l’impact carbone de votre site sur la planète.

Pour commencer, si vous souhaitez prendre un thème intégré, pensez à charger un thème léger. Pour savoir s’il respecte l’éco-conception web vous pouvez le tester avec les différents outils de performance.

Gardez uniquement les plugins essentiels, car plus vous en chargerez, plus ils généreront des fichiers CSS et JS et alourdiront vos pages et le temps de chargement sera plus long.

Il existe également des plugins qui vont vous permettre d’alléger encore plus votre site WordPress :

• Autoptimize : Ce plugin va optimiser votre site pour le rendre plus rapide.
• WP Super Cache : Plugin de mise en cache, augmentera la vitesse de chargement de votre site et améliora sa performance. Il utilise un CDN, le plugin Linker lite y est directement intégré. Parfait pour compléter Autoptimize.
• Imagify : Compressera les images que vous ajoutez à votre médiathèque, sans leur faire perdre en qualité.
• Lazy Loader : Chargera le contenu visible et retardera le téléchargement et l’affichage du contenu qui apparaît sous la ligne de flottaison.

Pour éviter d’installer un plugin, vous pouvez toujours le coder vous-même et l’ajouter dans le fichier functions.php, ainsi vous aurez la main sur le code et si besoin, vous pourrez le modifier pour réduire son poids.

Des solutions orientées pour le backend

Quand on parle d’éco-conception on l’associe souvent au développement lié au frontend, pourtant une approche réfléchi côté backend permet également de diminuer l’impact du site sur notre environnement. Comme pour la partie précédente nous vous présentons une liste de bonnes pratiques.

Site statique

Une première approche est de savoir si générer les pages du site de manière statique au build de l’application à du sens pour le projet. Si oui, alors on ne dépend plus d’un langage côté serveur mais uniquement du serveur web. On bénéficie donc d’un site beaucoup plus performant et d’un serveur plus léger sans avoir besoin d’installer et de configurer une multitude de paquets. Si cette approche n’est pas pertinente et nécessite un serveur back, en écrivant un code propre, efficace et optimisé les appels au back seront plus réactifs. Il faut également proscrire le code mort, en plus d’être inutile il prend de la place pour rien et rend plus complexe la lecture du code.

Le choix de la technologie du backend.

Ce choix entraîne une consommation plus ou moins importante de ressources. Ainsi plus le langage est de haut niveau plus il consomme. Des études ont été menées, et comparent l'efficacité des langages en fonction des ressources qu’ils consomment. Ainsi on retrouve le C, le C++, le Rust dans le trio de tête alors que le PHP, le Ruby ou le Python sont relayés beaucoup plus loin dans le classement. Mais attention il ne faut pas prendre au pied de la lettre cette étude.

Pour faire du web certains langages sont plus adaptés que d’autres. Beaucoup d’aspect entrent en jeu lors du choix de la technologie. Il faut avant tout choisir un langage en fonction de ses besoins. L’éco-conception est le dernier levier dans le choix de la technologie. Cependant cette approche est possible tout au long de la phase de développement ainsi certains frameworks embarquent une gestion de cache assez performante ou des solutions permettant de garder en mémoire le résultat de certaines opérations (mémoïsation). Pour des applications au rendu complexe, le gain de performance est non négligeable.

Utiliser des serveurs de cache.

L’utilisation du CDN (Content Delivery Network) accélère le chargement des pages.

Grâce à la technologie IPAnycast, le CDN redirige la requête de l’utilisateur vers le PoP CDN OVH le plus proche de l’utilisateur et dont les temps de latence sont les plus courts pour lui.

Lorsque l’utilisateur revient sur votre site, ce dernier est plus rapide. En effet, si l’utilisateur demande à nouveau cette page, le point CDN le plus proche distribue le contenu statique directement depuis son cache, sans faire appel à votre hébergement.

Choisir un hébergeur vert.

L’hébergeur Français OVH semble se diriger vers l’éco-conception lui aussi. Il réemploie la chaleur de ses data centers pour chauffer ses locaux, il a également breveté un système de refroidissement à l’eau. Certains hébergeurs communiquent sur le type d’énergie qu’ils utilisent, la consommation des DC, le recyclage des serveurs en fin de vie, ces chiffres peuvent vous orienter dans votre choix… Une fois l’hébergeur choisi il faut se poser la question :

Qui sont mes utilisateurs et où sont-ils localisés ?

Le but est d’héberger le site dans le datacenter le plus proche des utilisateurs. Ainsi moins de bande passante sera utilisée et les performances seront meilleures pour l’utilisateur final.

Une configuration serveur adaptée

La gestion du serveur est un point non négligeable pour réduire la consommation de ressource. Le premier point est de choisir un serveur correspondant au besoin, il est inutile et plus coûteux d’avoir un serveur sur-boosté en RAM/CPU. La virtualisation est également un bon moyen pour réduire les coûts, exploiter davantage les ressources du serveur tout en ayant de très bonnes performances, le but est donc d’utiliser moins de serveurs. La configuration du serveur permet de gérer plus finement les ressources de la machine.

Ainsi, il existe une multitude de cache et d’outils permettant une amélioration des performances de votre application. Cache serveur (via varnish), cache applicatif (via PHP), cache de base de données, compression (via Gzip) sont des options très intéressantes pour permettre un gain non négligeable de performance et limiter ainsi des appels d’API inutiles. Bref, mettre en cache ou activer la compression permet d’économiser beaucoup de bande passante et de charge serveur.

Quels sont les avantages de l’éco-conception web ?

Pour commencer, votre référencement naturel ne sera que meilleur ! Google recommande qu’un site web ne dépasse pas trois secondes de chargement des pages et cela serait l’un des facteurs de classement de son index de recherche. Google est conscient que l’utilisateur veut un accès rapide, donc il accorde encore plus d’importance à la vitesse des pages en récompensant les sites web qui se chargent rapidement.

Avoir un site plus rapide permettra d’avoir moins de taux de rebond, ce qui signifie un utilisateur satisfait.

Plus un utilisateur attend que votre site charge, plus il consomme d'énergie. Pire encore s’il utilise une connexion 4G pour y accéder (la 4G consomme 23 fois plus d’énergie que le WIFI). Ainsi, avoir un site rapide et léger permettra de réduire l’impact carbone de votre site.

De plus, davantage de personnes pourront accéder au site si son chargement est rapide, car n’oublions pas que nous n’avons pas tous le même accès à internet, il se peut que certains utilisateurs aient une connexion internet faible.

Autre intérêt non négligeable pour la planète.

En cherchant légèreté, rapidité et performances, et en codant en gardant à l’esprit que même de vieux terminaux doivent pouvoir accéder à nos applis, on encourage les utilisateurs à ne pas acheter le dernier smartphone à la mode. Et à conserver leur “vieil” appareil… Qui bien souvent est suffisant pour un usage “standard” !

Conclusion

Vous pouvez constater qu’à notre échelle, nous pouvons tous faire des efforts pour limiter l’impact carbone de nos sites sur la planète.

Il y a bien évidemment des petites choses que vous pouvez faire en tant qu’utilisateur, par exemple, enregistrer en favori les sites que vous visitez fréquemment, cela évitera l’usage de requêtes pour les retrouver. Vous pouvez aussi trier vos mails et ne pas en envoyer si cela peut être évité.

Autre exemple tout simple : on peut aussi éviter de mettre des images dans les signatures de nos emails.

J’espère que cet article vous aura sensibilisé à l’éco-conception web !

Vous avez un projet de site internet ? Vous souhaitez qu’il soit réalisé dans l’éco-conception web ?

N’hésitez plus, faites confiance à ITNetwork !