Aujourd’hui, on imagine mal une entreprise sans site web. Utile pour présenter votre concept, vos services ou produits, et même pour communiquer sur votre actualité, le site internet semble indispensable. Pour allier site web performant et réduction de votre empreinte numérique pensez au site web éco-responsable : l’option gagnant-gagnant pour votre business, vos clients, et les émissions de CO2 liées à votre présence numérique !
Qu’est-ce qu’un site web éco-responsable ?
L’impact environnemental d’un site internet n’est pas à négliger. Lorsque l’on sait qu’une page web produit en moyenne 1,76 gramme de CO2 par visite, et qu’un site bien référencé peut cumuler jusqu’à 10 000 visites par mois, l’empreinte écologique d’un site web grimpe vite !
Un site web éco-responsable est un site internet conçu de manière optimisée, afin de limiter son impact environnemental et ses besoins en énergie. Nombre de pages, volume des images, fonctionnalités, contenu, hébergement… Tout est pensé pour limiter l’empreinte carbone du site internet, et ce, durant tout son cycle de vie. Les sites web éco-responsables se caractérisent par leur design épuré, leur facilité d’utilisation et leur sobriété en termes de ressources utilisées.
Un bon exemple pour créer un site internet facilement, sans prendre le risque de créer du contenu trop lourd est le site one-page. Comme son nom l’indique, c’est un type de site internet qui est concentré sur une seule page. Au lieu d’avoir un menu qui vous fait naviguer de page en page, ce dernier est en fait composé d’ancres qui vous permettent d’aller d’une section à l’autre de la page unique.
Quels sont les avantages d’un site web éco-responsable ?
Tout d’abord, en adoptant les bonnes pratiques d’un site web éco-responsable, vous participez à votre échelle à la limitation de la pollution numérique. Cela est d’autant plus important lorsque l’on sait que l’industrie du web à elle seule génère plus de 4% des émissions de CO2 au niveau mondial. Il existe des labels qui vous permettent de mettre en avant l’éco-responsabilité de votre démarche ! On pensera notamment aux labels suivants :
- Green Code Lab ;
- Numérique Responsable ;
- Greenspector ;
- Wattimpact ;
- Green Web Foundation.
Ensuite, un site éco-responsable se présente généralement sous une forme très épurée, sans contenu superficiel. Pour vos lecteurs, il est agréable de lire du contenu sur une page présentant un design clair et fluide.
Enfin, débarrassées du superflu, vos pages seront d’autant plus rapides à charger : de quoi rendre vos lecteurs heureux !
10 astuces pour rendre votre site web éco-responsable
Choisir un hébergeur écologique
Les hébergeurs écologiques, dits “verts” sont ceux qui utilisent des sources d’alimentations renouvelables, ou du moins, plus respectueuses de l’environnement. Choisir un tel hébergeur est un premier pas vers l’éco-responsabilité de votre site ! Il existe différents hébergeurs verts, comme par exemple :
- Infomaniak ;
- PlanetHoster ;
- Ex2 ;
- Ikoula ;
- Hostpapa.
Choisir un hébergeur local est également pertinent dans une démarche d’éco-responsabilité.
Réduire la taille des supports visuels
Les images sont particulièrement lourdes et nécessitent davantage d’énergie lors du chargement de votre site. Réduire leur taille, ou utiliser des icônes, lorsque c’est possible, améliorera l’empreinte carbone de votre site web. Pour les vidéos, demandez-vous si elles sont réellement nécessaires, et compressez-les si vous désirez les garder. De manière générale, limitez le volume d’éléments graphiques, et simplifiez au maximum ceux que vous choisissez !
Travailler le contenu
Lorsque vous réfléchissez au plan de votre site web, il est crucial de se pencher sur le contenu. Un site web éco-responsable est efficient : pas de contenu superflu ! Posez-vous toujours la question : ce que je souhaite rajouter sur mon site web a-t-il une réelle plus-value pour mon lecteur ? Si la réponse est non, ne chargez pas votre page de contenu inutile, qui sera énergivore sans apporter d’information intéressante. Soyez concis et efficace dans vos textes.
Minimiser le code
Le code est très important dans l’impact énergétique global de votre site web : il est primordial de le minimiser au maximum. Pour ce faire, optez pour des langages web les plus économes possible, et évitez les recours importuns aux commandes sans réelle valeur ajoutée. HTML ou CSS sont des options de codage relativement économes en énergie. De manière générale, recourir à du code ou des scripts optimisés améliorera la performance de votre site, et permettra une navigation plus fluide.
Épurer l’interface et le design du site web
Une page complexe, avec de nombreux éléments à afficher, n’est pas compatible avec un site web éco-responsable. Le chargement de pages complexes est gourmand en énergie ! Pour votre site web éco-responsable nous vous conseillons d’adopter un design clair et épuré, en simplifiant au maximum la complexité de vos pages. De la même façon, les polices que vous choisissez ont un impact : optez pour des polices standardisées, plus faciles et légères à charger pour vos lecteurs, et limitez le nombre de polices différentes.
Optimiser la navigation sur le site
Votre site se doit d’être responsive, c’est-à-dire d’être aussi lisible sur ordinateur que sur tablette ou mobile. Optimiser la navigation est la meilleure façon d’assurer cette lisibilité, peu importe l’appareil utilisé. Ainsi, soyez efficace dans votre contenu, évitez les effets de style lourds ou inutiles, et adoptez un design sobre avec un nombre de pages limité. De cette manière, vous rendrez votre site plus éco-responsable, et vos lecteurs plus satisfaits de la fluidité de leur expérience !
Supprimer les éléments dispensables au fonctionnement du site
Ne vous encombrez pas d’éléments inutiles au bon fonctionnement de votre site. Par exemple, trop de plug-ins alourdissent vos pages et leur chargement ne sera que davantage énergivore. En ce qui concerne du CSS non utilisé, il existe différents outils vous permettant de l’identifier et de le supprimer :
- Chrome DevTools : permet d’identifier les lignes de codes qui ne sont pas exécutées, et donc potentiellement superflues.
- UnusedCSS : outil payant mais utile pour les sites web fonctionnels, puisqu’il permet d’identifier le CSS inutilisé, de nettoyer votre code, et de télécharger la nouvelle version purifiée.
- PurifyCSS : cet outil est utile pour les sites web en phase de test uniquement. Il permet de supprimer le CSS inutile avant la mise en ligne du site.
- PurgeCSS : permet de comparer le contenu du site aux fichiers CSS et de supprimer les éléments sans correspondance. Cependant, l’outil ne sera pas adapté aux sites utilisant des plug-ins, étant donné son manque d’automatisation.
Mettre en place un système de cache
La mise en cache est un système qui permet le téléchargement et le stockage d’éléments de votre site tels que JavaScript ou des images, plus près de l’utilisateur. Cela signifie que si un internaute quitte et revient sur une page de votre site web, les données se téléchargent depuis le cache au lieu d’envoyer une nouvelle requête au serveur. Plus performant et moins énergivore, la mise en cache est un bon allié dans votre démarche d’éco-responsabilité !
Choisir les bons plug-ins
Les plug-ins sont les outils qui vous permettent d’ajouter des extensions, ou fonctions supplémentaires à votre site. Ils sont généralement assez énergivores. Dans l’idéal, un site éco-responsable n’utilise pas de plug-in, mais cela ne signifie pas que vous devez absolument vous en priver ! Avant de choisir un plug-in, réfléchissez à son importance, et limitez au maximum leur nombre.
Tester son site web
Il existe différents outils permettant simplement et rapidement de tester votre site web. Ces plateformes ne nécessitent que le lien http de votre site et vous permettent de mesurer en quelques secondes leur dimension éco-responsable. Nous vous conseillons de tester votre site web lors de sa mise en place ainsi que tout au long de sa vie : certains testeurs vous donnent des conseils. Cela vous permettra de vous tenir au courant des nouvelles avancées liées à l’éco-responsabilité des sites web.
6 exemples de sites éco-responsables
Vous retrouverez dans ce tableau 6 sites éco-responsables : score EcoIndex, émissions de gaz à effet de serre, liste non-exhaustive de bonnes pratiques… Voici 6 bons exemples à suivre dans la création de votre propre site !
Sustainable Web Design
Sur le site de Sustainable WebDesign, les ressources sont compressées, toutes les images sont visibles par le lecteur et aucun cookie n’est utilisé à des fins statistiques. De plus, le site n’utilise pas de police à caractères spécifiques.
- Site web : sustainablewebdesign.org
- Score EcoIndex : 88.92/100
- Émissions GES : 1.22g
- Le petit plus : Le site internet indique en direct le temps de chargement des pages ainsi que les émissions de CO².
LowTech Lab
LowTech Lab prend soin d’adopter les bons réflexes en termes d’éco-responsabilité. Les ressources sont compressées, le nombre de domaines est limité, les requêtes en erreur sont évitées et la taille des images est optimisée.
- Site web : lowtechlab.org
- Score EcoIndex : 82.12/100
- Émissions GES : 1.36g
- Le petit plus : LowTech Lab précise en bas de page que que le poids moyen d’une page de ce site internet est 12 fois inférieur au poids moyen d’un site web non éco-conçu.
The Hope Gallery
The Hope Gallery propose un site internet avec un minimum de fonctionnalités. Le design est épuré et la police minimaliste. De plus, les requêtes sont minimisées grâce au contrôle des API.
- Site web : www.thehopegallery.com
- Score EcoIndex : 83.22/100
- Émissions GES : 1.34g
- Le petit plus : The Hope Gallery propose également une expérience utilisateur optimisée sur les smartphones.
Océan Fifty
- Site web : oceanfifty.com
- Score EcoIndex : 91.82/100
- Émissions GES : 1.16g
- Le petit plus : Ocean Fifty dédie une page de son site, accessible directement depuis la home page, pour expliquer en détail sa démarche de conception éco-responsable.
Fairphone
À l’instar des sites éco-responsables présentés dans cet article, le site de Fairphone adopte des pratiques simples mais efficaces. Le site fait le choix de limiter son nombre de domaines ainsi que de requêtes. Aucune image non visible par les visiteurs n’a été téléchargée et le site évite un maximum la pratique des redirections.
- Site web : www.fairphone.com
- Score EcoIndex : 70.66/100
- Émissions GES : 1.59g
- Le petit plus : En plus d’avoir conçu un site web responsable, Fairphone vend des produits dans la continuité de leur démarche écologique !
MacDonald’s
Nous avons choisi de vous présenter le site de MacDonald’s car deuis début 2022, le site a été totalement repensé pour répondre aux exigences des sites web éco-responsables.
- Site web : www.mcdonalds.fr
- Score EcoIndex : 53.82/100
- Émissions GES : 1.92g
- Le petit plus : Si ce dernier n’est pas aussi optimisé que les précédents sites, il reste tout de même un exemple à suivre pour les sites internet grand public.
Quels outils pour rendre son site web éco-responsable ?
Les outils pour tester son site web
Il existe différents outils pour mesurer le degré d’éco-responsabilité de votre site. Parmi eux :
- EcoIndex : calcule le score de performance environnementale de votre site, et vous site par rapport à la médiane.
- PageSpeed Insights : cet outil gratuit créé par Google vous donne de nombreuses informations sur le temps moyen de chargement, la taille de vos pages, ainsi que des conseils pour améliorer l’expérience utilisateur sur votre site.
- Ecometer : analyse votre site internet afin de mesurer son impact environnemental et fourni 115 conseils éco-responsables appliqués aux sites web.
- WebsiteCarbon : calcule l’empreinte carbone de votre site et vous propose des astuces afin de la réduire.
Tous ces outils utilisent des critères tels que la complexité des pages, la bande passante nécessaire à leur chargement, le nombre de requêtes http, etc.
Les solutions pour réduire le poids des fichiers
Des fichiers légers sont plus rapides à charger, et donc moins énergivores. L’objectif ici est de diminuer leur taille sans perdre en qualité. Pour ce faire, vous pouvez compresser les images avant de les télécharger sur votre site. Adobe Photoshop, Affinity Photos, TinyPNG ou encore WP Smush Pro vous permettent de le faire. Il est également possible de passer par des scripts dédiés à cet objectif, à coder directement dans votre site.
Les logiciels de création de site
Pour créer votre site éco-responsable, vous avez deux options : passer par une agence spécialisée, ou réaliser vous-même votre propre site internet.
Les agences présentent l’avantage de vous livrer un site fonctionnel et professionnel sans que vous ayez besoin de vous en occuper : pratique si vous avez du budget et que vous manquez de connaissances en matière de conception web ! Différentes agences mettent en avant leur sensibilité à l’éco-conception :
- Noiise ;
- Site et Co. ;
- PandiWeb ;
- UseWeb.
La deuxième possibilité est de créer votre site internet vous-même. Il existe différents outils permettant aux indépendants de réaliser leur propre site internet de manière relativement simple :
Durant la création de votre site, gardez en tête les conseils que nous vous donnons ici, afin de rendre votre site éco-responsable !
FAQ
Comment faire un site web éco-responsable ?
Pour créer un site éco-responsable, ne gardez que le contenu essentiel, compressez les images et vidéos, adoptez un design épuré et faites appel à un hébergeur vert !
Qu’est-ce que l’éco-conception ?
L’éco-conception désigne le fait de concevoir un produit, ici un site web, en tenant compte de son empreinte environnementale, et en mettant en place des solutions afin de limiter au maximum son impact énergétique.
Quel budget pour créer un site éco-responsable ?
Si vous choisissez de créer votre site vous-même, certains CMS sont totalement gratuits. En passant par une agence, le budget dépendra notamment du type de site que vous souhaitez (vitrine ou e-commerce par exemple), ainsi que du nombre de pages et de renvois.
