Ce site web a été conçu selon des principes de faible émission de carbone!
🌎
Émissions moyennes de GES
par page 0.14 g CO2 eq.
🚿
Consommation du site sur un mois
L'équivalent d'une douche d'1 minute

Conception de sites web écologiques : enjeux et bonnes pratiques

Nicely article

Saviez-vous qu’Internet consomme environ 10% de l’électricité mondiale ? Cette surprenante réalité met en lumière l’impact environnemental souvent sous-estimé des technologies numériques, et plus particulièrement des sites web. Dans ce contexte, la création de sites web écologique n’est plus une option, mais une nécessité. À l’Agence Nicely, nous comprenons l’importance de réduire l’empreinte carbone numérique. C’est pourquoi nous nous engageons à concevoir des sites web non seulement esthétiquement plaisants et fonctionnels, mais aussi respectueux de l’environnement.

L’ère du numérique a transformé la façon dont nous vivons, travaillons et communiquons. Cependant, alors que nous naviguons dans cette ère de connectivité permanente, il est crucial de reconnaître et de minimiser notre impact environnemental. La création de sites web écologique est une démarche innovante qui répond à ce défi, offrant une solution à la fois durable et technologiquement avancée. Dans cet article, nous explorerons ce que signifie un site web écologique, pourquoi il est essentiel de s’orienter vers de telles solutions, et quels sont les défis à relever pour y parvenir. Nous vous fournirons également des insights pratiques sur les stratégies, outils et technologies que nous utilisons pour transformer vos idées numériques en réalités écologiques.

Rejoignez-nous dans cette aventure passionnante où technologie et durabilité se rencontrent, pour créer un avenir numérique plus vert. Bienvenue dans l’univers de la création de sites web écologique avec l’Agence Nicely!

I. Qu’est-ce qu’un site web écologique ?

Pour qualifier un site web comme écologique, il faut commencer par définir ce qui peut polluer lors de l’utilisation de celui-ci. Premièrement, un site web consomme de l’énergie à travers le serveur sur lequel il est hébergé. Ces serveurs sont alimentés par différents types d’énergies selon leurs localisations. Il est plus probable qu’un serveur québécois soit alimenté par l’hydroélectricité, alors qu’un serveur américain risque d’être alimenté par des centrales à charbon. Notez que le serveur québécois émettra environ 70 fois moins d’émissions de gaz à effet de serre comparé au serveur américain illustré dans l’exemple précédent (WHC.CA).

Deuxièmement, les sites web consomment de l’énergie dès qu’ils sont consultés par un·e utilisateur·trice. On parle en moyenne de 0.25g de CO2 à 2g de CO2 par visite. Les émissions sont variables, car elles sont directement liées au poids des pages web. C’est pourquoi il est nécessaire de réduire la taille moyenne des pages web afin de limiter les émissions néfastes.

Deuxièmement, les sites web consomment de l’énergie dès qu’ils sont consultés par un·e utilisateur·trice. Cela peut varier de 0.1g de CO2 à 10g de CO2 par visite pour les sites les plus polluants. Les émissions sont variables, car elles sont directement liées au poids des pages web. C’est pourquoi il est nécessaire de réduire la taille moyenne des pages web afin de limiter les émissions néfastes. Un site web écologique est donc un site web qui utilise un hébergement vert (énergie renouvelable), avec chaque page web légère (idéalement inférieur à 1mo), et qui limite le nombre de requêtes entre le serveur et le·la client·e.

II. L’importance de la conception web écologique

La part d’émission de gaz à effet de serre représentée par les technologies numériques est alarmante. En effet, on l’estime aujourd’hui à 4% (soit le double de celle de l’industrie de l’aviation) et les expert·e·s déclarent que cette part devrait doubler d’ici 2025 avec les différents progrès réalisés avec l’intelligence artificielle (elle aussi très énergivore).

De plus, la part de la consommation énergétique des centres de données devrait s’élever à 10% en 2030, c’est pourquoi la sobriété numérique est une nécessité imminente. Ma recommandation personnelle serait de délaisser les géants centres de données américains propulsés au charbon, pour des alternatives plus vertes comme il en existe au Québec par exemple. D’autres hébergeurs participent à des programmes de compensation carbone, qui peuvent constituer une alternative à une énergie propre.

III. Comment créer un site web écologique

Créer un site web écologique requiert d’être dans une démarche de sobriété avant même l’élaboration du site web. Il faut veiller à faire le tri dans le contenu que l’on souhaite diffuser en se posant les bonnes questions. Est-ce pertinent pour mon utilisateur·trice ? Quelle est la valeur ajoutée de cette image ? Est-ce que mes visiteurs·trices vont regarder cette vidéo ?

Vous l’aurez compris, il est nécessaire de diffuser que du contenu qui sera apprécié par vos visiteurs·trices. Ainsi, vous réduirez le poids de vos pages, les requêtes entre votre serveur et votre site web, et vous améliorerez même votre expérience utilisateur grâce à un contenu épuré.

Pour créer un site web écologique, il vous faudra l’alléger le plus possible, tout en optimisant au mieux l’appel de ressources pour qu’il soit pertinent avec la navigation de vos utilisateurs·trices.

Pour réduire le poids de vos pages web et l’optimiser, différentes méthodes sont à mettre en place.  Voici 10 conseils pour réduire vos pages web efficacement :

  • Optimiser vos images

Premièrement, vous devez veiller à utiliser le format WebP pour vos images, qui permet une compression avancée sans perte majeure de qualité. Pour vos icônes, ou autres images peu complexes, je recommande le format SVG, qui permet de conserver la qualité maximale de vos illustrations tout en ayant un poids très léger.

Aussi, il est important d’utiliser des tailles d’images adéquates pour les alléger le plus possible. Par exemple, si la taille de l’image affichée sur votre page web est de 200×300, il est important que la taille intrinsèque du fichier soit aussi de 200×300. Ainsi, vous évitez d’afficher une image trop grosse sans raison.

Pour en apprendre plus sur les différents formats d’image, visitez notre article sur les meilleurs formats d’images à adopter pour votre site web.

  • Minifier les fichiers HTML, CSS, et JavaScript

Le principe de minifier ces fichiers consiste à supprimer tous les espaces et retours à la ligne dans le fichier texte du code. Cela n’est pas nécessaire pour la compréhension du code par les systèmes d’exploitation, mais uniquement pour la lisibilité des fichiers. Ainsi vous pouvez économiser un certain poids sur votre site web grâce à ce processus.

  • Utiliser la compression GZip ou Brotli

La réduction de la taille des données échangées entre le serveur et le navigateur de l’utilisateur peut être considérablement obtenue grâce à la compression des ressources. Les formats Gzip et Brotli se révèlent très performants pour la compression de fichiers textuels comme le HTML, le CSS et le JavaScript, ce qui rend cette technique très efficace pour améliorer les performances.

  • Supprimer les ressources inutilisées

Ce principe consiste à faire le tri parmi les fichiers javascripts, css et html qui ne sont pas utiles pour l’affichage de votre page. L’intérêt est d’éviter un chargement de ressource non nécessaire pour l’utilisateur. Pour aller plus loin, vous pouvez même supprimer les parties des bibliothèques javascript que vous n’utilisez pas. Imaginez que vous allez à la bibliothèque pour emprunter quelques livres spécifiques. Au lieu de prendre juste les livres dont vous avez besoin, c’est comme si vous décidiez de prendre avec vous les étagères entières sur lesquelles ces livres sont rangés. Il est donc important d’installer uniquement les ressources que votre site web utilisera.

  • Exploiter le Lazy Loading

Le chargement différé consiste à charger certains éléments uniquement lorsque l’écran de l’utilisateur·trice atteint cet élément lors de son scroll. C’est-à-dire qu’il est inutile de charger une image qui est tout en bas de votre page, tant que l’utilisateur n’a pas scrollé jusqu’à celle-ci.

Ainsi, vous optimisez le chargement des ressources uniquement lorsque celles-ci sont requises, et vous limitez l’appel de ressources.

  • Utiliser des polices natives aux systèmes d’exploitation

Idéalement, il faut utiliser des polices natives aux différents appareils (ordinateurs, téléphones, etc.). Cela permettra d’éviter un transfert d’environ 100kb par police qui ne serait pas déjà dans l’appareil de votre visiteur·trice.

  • Utilisez des règles de caching efficaces

Utilisez des règles de caching efficaces. L’intérêt est que si votre utilisateur·trice revient sur votre site web, il n’aura pas à re télécharger les pages qu’il aura déjà vues. Ainsi, elles seront stockées dans son appareil pendant une certaine période de temps puis réutilisées lors de sa prochaine visite.

  • Utilisez le réseau de distribution de Cloudflare (CDN)

Le CDN (Content Delivery Network) de cloudflare consiste à délivrer une version statique de votre page web à travers le monde entier sur différents serveurs. L’intérêt est d’accélérer la vitesse de votre site web, peu importe où l’utilisateur se situe dans le monde. De plus, Cloudflare permet de filtrer le trafic qui pourrait vous être indésirable, en plus de vous permettre certaines optimisations en un clic (comme la compression Brotli, minifier les fichiers et autre…)

Cloudflare est engagé dans des démarches environnementales favorables qui font selon moi un choix numéro 1 pour son CDN gratuit.

“Cloudflare’s recent climate disclosures and commitments are encouraging, especially given how much traffic flows through their network. Every provider should be at least this transparent when it comes to accounting for the environmental impact of their services. We see a growing number of users relying on CDNs to host their sites, and they are often confused when their sites no longer show as green, because they’re not using a green CDN. It’s good to see another more sustainable option available to users, and one that is independently verified.” – Chris Adams, Co-director of The Green Web Foundation”

https://blog.cloudflare.com/green-hosting-with-cloudflare-pages
  • Appliquez les standards du W3C

Appliquer les règles de conception du W3C favorise l’écoconception en assurant des sites plus accessibles et performants. Les standards W3C encouragent une utilisation optimisée des ressources, réduisant ainsi la consommation d’énergie et les émissions de CO2 liées à l’exploitation des sites web. Ces pratiques améliorent également l’expérience utilisateur globale.

  • Appliquez les recommandations de Google PageSpeed Insights

Il est aussi primordial de respecter les différentes recommandations que Google Page Speed Insights peut vous donner afin de réduire le poids de vos pages web, et pour optimiser le chargement de celles-ci qui généralement vous permettront d’atteindre une meilleure performance environnementale. Vous obtiendrez naturellement de meilleures performances en référencement naturel, et votre expérience utilisateur sera bonifiée. 

Vous pouvez coupler cette optimisation avec d’autres outils, tel que Eco-Grader qui pourrait vous donner des recommandations actionnables afin de réduire vos émissions carbone.

IV. L’écoconception : bénéfique pour la planète, vos utilisateurs·trices, et votre référencement naturel

Vous l’aurez compris, l’écoconception est étroitement corrélée avec la performance de votre site web. C’est-à-dire que si votre site web est écoconçu il sera par conséquent plus léger, optimisé et aura une expérience utilisateur·trice bonifiée. En résumé, adopter des pratiques d’éco-conception web n’est pas seulement un acte responsable sur le plan environnemental, mais cela apporte également des avantages tangibles tels que l’amélioration de la vitesse de chargement, la réduction des coûts d’hébergement et un meilleur classement SEO. À l’avenir, nous pouvons anticiper une augmentation de l’intégration des principes d’éco-conception à mesure que la prise de conscience environnementale et les exigences réglementaires s’intensifient. Les développeurs·euses et designers seront probablement encouragé·e·s, voire requis, à construire des sites plus verts, propulsant ainsi les innovations en matière de technologies durables. Adopter ces pratiques aujourd’hui vous place à l’avant-garde d’une tendance en pleine expansion et vous prépare pour les standards de demain.

À L’agence Nicely, nous sommes pionniers·ères dans l’adoption des pratiques d’écoconception web. En choisissant de travailler avec nous, vous optez pour une agence à la pointe de l’innovation, qui non seulement préserve l’environnement, mais assure également que votre site web soit performant, moderne et parfaitement aligné avec les dernières tendances en matière de développement durable. Nous vous aidons à faire la différence, tant dans l’empreinte écologique de votre site que dans son impact sur le marché.

Vous aimerez aussi :

Nicely article

Agence web : comment choisir la bonne pour une refonte web

Lire l'article »
Louis Gerecht
juillet 26, 2024
Formats d'image article

Explorer les formats d’image qui transformeront votre site

Lire l'article »
Louis Gerecht
juillet 26, 2024
Aller au contenu principal