Quels gestes écologiques adopter pour réduire l’empreinte carbone de son site web ?

par Coralie | 05/01/26 | Éco-conception

Est-ce bien utile d’avoir des couleurs éco-responsable sur son site ?

par Coralie | 06/10/25 | Éco-conception

Aujourd’hui, on va parler couleurs. Pas juste de “goûts” ou de tendances, mais de l’impact réel que tes choix de couleurs peuvent avoir sur les visiteur·euses de ton site ainsi que sur l'environnement. Toutes les combinaisons de couleurs ne se valent pas. Tou·tes tes client·es idéaux·ales n'auront pas la même vision de ton site web, ni la même expérience de ce dernier.

La plupart du temps, on choisit une palette parce qu’on "aime" bien le rendu. Mais en réalité, les couleurs jouent plusieurs rôles clés :

• Elles transmettent un message émotionnel (apaisement, énergie, sobriété…)
• Elles représentent ton entreprise ou ton activité, la vibe que tu veux renvoyer auprès de ta cible
• Elles installent un univers graphique, un style spécifique en fonction de leurs combinaisons
• Elles vont avoir un impact écologique plus ou moins important
• Elles conditionnent surtout la lisibilité de ton site et donc son accessibilité

Ce n’est donc pas juste une question de goût. C’est une question de responsabilité et de choix.

Les couleurs éco-responsables sont-elles alors qu’un détail ?

Oui et non. On va mettre les pieds dans le plat et résumer tout ça en 2 points :

• Sur le web, les couleurs sombres (proches du noir) consomment moins d’énergie sur certains écrans (OLED notamment).
• En print, c’est l’inverse : plus ta couleur est claire, moins tu utilises d’encre.

Alors on fait quoi Jamie ? Un site en dark mode et des cartes de visite toutes blanches ? NON, non, non et non ! Surtout pas.

Le conseil que je donne à l'intégralité de mes client·es et potentiel·les futur·es client·es est toujours le même : sur un site web, il y a de nombreux facteurs polluants, certains plus que d'autres. Contrairement à ce qu'on pourrait croire, les couleurs font partie des facteurs les moins polluants. Cela reste donc un impact minime comparé au reste des éléments de ton site web.

Nota bene : les couleurs, c'est environ moins d’1 % du poids total d’une page web. Donc, tu n’auras pas un site éco-responsable juste parce que tu choisis des éco-couleurs web. C’est surtout ton hébergement, l'optimisation de ton code, le poids de tes images, l'optimisation de tes vidéos, etc., qui feront toute la différence.

Tandis que sur le print, l'impact est beaucoup plus important ! Alors si on réfléchit deux minutes, il vaut mieux privilégier une charte graphique avec des couleurs éco-responsables pour le print plutôt que pour le web.

Mais ne nous arrêtons pas en si bon chemin.

Tant qu'à être dans le respect du vivant et de ce qui nous entoure, prenons en considération ++ les êtres humains qui vont venir visiter ton site et leurs déficiences visuelles possibles. Parce que sur le web, comme sur le print, le vrai combat à mener, c'est l'accessibilité des couleurs entre elles.

Ce serait quand même dommage d'appliquer une charte graphique sur son site qui rendrait toutes tes pages, articles, boutons, formulaires, etc., illisibles et donc incompréhensibles et inutilisables pour certaines personnes.

Le vrai combat ? Utiliser des couleurs qui matchent entre elles #MatchyMatchy

Des couleurs qui matchent entre elles, c'est tout simplement des combinaisons de couleurs qui ont un assez bon ratio de contraste entre la couleur du texte et la couleur de l'arrière-plan.

Au-delà d'avoir des couleurs éco-responsables pour le print, il faut donc surtout vérifier qu'on ait bien des combinaisons de couleurs accessibles : assez lisibles entre elles, pour tout le monde. Aka : exit la palette de couleurs full pastel !

Comment vérifier l'accessibilité de ses couleurs ?

Avec des outils spécifiques et surtout pas en les regardant simplement de loin ou de près. La phrase que j'entends systématiquement lorsque je dis à mes client·es que les couleurs de leur charte graphique ne sont pas accessibles entre elles :

“Ben pourtant moi je les vois bien, j'arrive à lire.”

Sauf que… iels ne sont pas tout le monde, et tout le monde ne perçoit pas les couleurs comme iels.

Je leur demande alors s’iels ont pensé aux personnes qui sont daltoniennes, par exemple. Ou bien à celleux qui ont une vision réduite de leur champ de vision, de la fatigue visuelle, ou utilisent même des lecteurs d’écran pour les aider à lire l'écran. C'est dans ces cas précis que, si le taux de contraste entre tes couleurs est trop faible, ton contenu devient carrément illisible pour iels.

Les outils spécifiques que je vais te présenter maintenant ne sont pas n'importe lesquels : ils sont basés sur les normes WCAG et RGAA, qui sont celles de la réglementation officielle de l'accessibilité numérique dans le monde (WCAG) et spécifiquement en France (RGAA).

Ces outils te diront donc avec exactitude si la combinaison de deux de tes couleurs entre elles a un ratio de contraste assez fort (entre la couleur d'arrière-plan et la couleur de ton texte) pour être lisible par le plus grand nombre.

Mes 3 outils préférés pour tester tes couleurs

Coolors Contrast Checker : tu colles deux des codes couleurs de ta marque, celui de ton arrière-plan et celui de ton texte, et tu vois si l’association match ou pas en termes d'accessibilité.

Color Review : très utile si tu n'as pas encore de palette de couleurs pour ton activité ou ton site et que tu veux voir en live le rendu de cette combinaison de couleur sur du texte, des boutons, des illustrations, etc.

Adobe Color Contrast : c'est mon préféré car il me donne plus de détails en m'indiquant exactement si les couleurs sont accessibles entre elles pour des gros titres uniquement, ou seulement des illustrations, ou bien pour les gros titres + corps de texte + illustrations.

Il y a vérifier puis ajuster sa palette de couleurs

Partons d'un cas concret : celui de mes dernier·es client·es avec qui j'ai réalisé ce travail d'ajustement de la palette de couleurs de leur site pour la rendre plus éthique et éco-responsable. C'était dans le cadre de l'optimisation de leur site web au complet. Et qui dit optimisations, ne dit pas refonte. Le but n'était surtout pas de tout refaire à zéro, ni de changer la charte graphique au complet. L'objectif était simplement d'ajuster certaines nuances de couleurs pour les rendre plus accessibles entre elles.

C'était d'autant plus important que ces client·es avaient deux enjeux majeurs par rapport à ça :

• Iels sont une référence dans leur domaine, donc beaucoup de gens les connaissent et les identifient depuis toujours avec leur charte graphique de base. Donc il était essentiel de conserver l'ADN de cette dernière afin de ne pas perturber leur audience actuelle.
• Iels avaient une couleur dominante très marquée qui était le reflet de leur identité, mais qu’iels utilisaient avec parcimonie car parfois trop forte justement. Le problème, c'est que tous les endroits de leur site où cette couleur était utilisée rendaient alors la lecture très compliquée pour certaines personnes, car pas accessible du tout avec aucune autre couleur de leur charte graphique.

Résultat : on a bel et bien gardé leur identité visuelle, mais on a ajusté légèrement les teintes, comme tu peux le constater ci-dessous, pour que tout le monde puisse accéder à leur contenu. Mon conseil sera donc le suivant pour toi : pas besoin de tout révolutionner, juste d’ajuster intelligemment (teinte, nuance, contraste, etc.) jusqu'à obtenir la bonne combinaison.

Petite astuce en plus : comment bien définir les couleurs spécifiques de chaque élément de son site web ?

Sur le web, la clé mystère est la suivante : c’est la règle du 60/30/10. Elle signifie que chacune des couleurs présentes dans ta charte graphique va être amenée à être plus ou moins tartinée sur ton site. Aka : toutes les couleurs de ton site ne vont pas être utilisées à parts égales. Tu n'auras jamais sur les pages de ton site exactement 20 % de rouge, 20 % de bleu, 20 % de blanc, 20 % de noir et 20 % de gris. Pour que ce soit le plus harmonieux, en webdesign, on utilise la règle du 60/30/10, soit :

• 60 % : la couleur dominante (souvent neutre ou sombre, utilisée pour les fonds, l'arrière-plan du site), ici le crème
• 30 % : une teinte intermédiaire (souvent utilisée pour marquer uniquement certains blocs et les mettre en avant), ici le rose Barbie
• 10 % : la couleur d’accent (celle qui attire l’œil sur les boutons, les liens, les appels à l’action), ici le fuchsia

Si tu veux faire le point sur tes couleurs rapidement et facilement afin de vérifier que ta palette reflète tes valeurs sans sacrifier ni la planète, ni l’accessibilité, j’ai préparé un guide pratique à compléter, rien que pour toi : Comment bien préparer la refonte de ton site éthique et éco-responsable.

À l’intérieur, tu trouveras des exercices simples et concrets pour poser les bases d’un site aligné avec tes valeurs. Tu peux le télécharger gratuitement dès maintenant.

Le mot de la fin...

Et si ta palette devenait un acte militant ? Au final, l’impact écologique des couleurs est limité. Mais leur pouvoir sur l’accessibilité et l’expérience utilisateur·ice est immense. Et si tes couleurs devenaient plus qu’un choix esthétique ? Et si elles devenaient un signe fort de ton engagement : un site beau, lisible, accueillant… pour tou·tes ?

Parce qu’un site éthique, ce n’est pas juste une question de design. C’est surtout une question de valeurs et d'engagement.

Bonus : si tu veux savoir si une couleur est “plus éco-responsable” sur le web, additionne les valeurs de son code RVB (rouge, vert, bleu). Si le total est ≤ 255, c'est une couleur qui consomme peu d'énergie sur le web. Tu peux vérifier ça sur Color-Hex.

+10 exemples de typographie écologique à utiliser sans modération

par Coralie | 04/08/25 | Éco-conception

La découverte qui a surprise ma cliente

Il y a quelques semaines, j'étais en plein audit éthique et éco-responsable avec une de mes clientes. Consciencieuse comme elle est, elle m'avait bien précisé : "On utilise juste deux polices, celles de notre charte graphique : une pour les titres, une pour le texte."

Sauf que...

En analysant son site, j'ai compté plus de 10 typographies différentes ! Voici ce qui s'était passé :

Le piège invisible de WordPress : Chaque plugin installé (formulaire de contact, témoignages, avis clients, etc.) arrive avec SA typographie par défaut. Et comme c'est rarement configuré automatiquement, ton site se retrouve avec une collection de typographies différentes dont tu n'as même pas conscience !

Pire encore : elle utilisait bien ses deux polices d'écritures, de sa charte graphique, dans le contenu de ses pages et articles, mais avait oublié de paramétrer son thème WordPress avec les mêmes typographies. Résultat ? Le thème chargeait des typographies par défaut EN PLUS de celles qu'elle utilisait consciemment.

Au final, son site chargeait +10 typographies différentes alors qu'elle pensait n'en utiliser que 2. L'impact ? Un site 3 fois plus lent et une empreinte carbone vraiment importante.

Et le pire dans tout ça ? Que ce soit elle, comme ses visiteurs ne pouvaient même pas voir la différence à l'oeil nu, tellement les typographies affichées se ressemblaient visuellement.

Cette expérience m'a fait réaliser à quel point les typographies sont un angle mort pour beaucoup d'entrepreneurs.es même conscients.es. On se focalise sur le choix esthétique en premier lieu, mais on oublie complètement l'impact écologique, technique et d'accessibilité (lisibilité pour tous) de ces dernières.

Parce que faire le mauvais choix de typographie pour son site peut être lourd de conséquence pour toi. Cela risque de :

• Alourdir inutilement ton site (et frustrer tes visiteurs avec des temps de chargement interminables)
• Dégrader ton référencement naturel
• Augmenter l'empreinte carbone de ton site
• Parfois même rendre ton contenu illisible pour certaines personnes

Bref, tout l'inverse de ce que tu veux quand tu es entrepreneur.se engagé.e !

Pourquoi une typographie a-t-elle un impact écologique ?

Spoiler alert : les polices d'écritures font partie des éléments souvent sous-estimés mais qui ont un impact énergétique bien réel sur ton site web ! Je vais t'expliquer pourquoi.

Le problème des polices d'écritures "web" classiques :

• Chaque typographie doit être téléchargée depuis un serveur externe (comme Google Fonts)
• Plus tu as de polices d'écritures différentes, plus tu multiplies les requêtes
• Chaque style (gras, italique, semi-gras...) = un fichier supplémentaire à charger
• Résultat : ton site devient lourd, lent, et énergivore

L'impact concret :

• Temps de chargement rallongé = visiteurs qui partent
• Plus de données consommées = plus d'énergie utilisée
• Serveurs sollicités inutilement = empreinte carbone qui explose

Et le pire ? Tes visiteurs ne voient pas toujours la différence entre ta typographie "tendance" et la simple Arial !

Les erreurs que je vois PARTOUT (et qui me font bondir)

Erreur n°1 : La collection de typographie

"J'ai une police pour mes titres, une pour mes sous-titres, une pour mon texte, une pour mes boutons, et une pour mes citations..."

La réalité : Chaque typographie pèse son poids et doit être chargée. Tu transformes ton site en véritable aspirateur à énergie !

Erreur n°2 : La police d'écriture "complète"

"J'ai pris la version complète avec tous les styles disponibles, on ne sait jamais..."

La réalité : Tu importes 15 fichiers alors que tu n'en utilises que 2. C'est comme acheter un frigo pour stocker une pomme !

Erreur n°3 : Le format lourd

"J'ai téléchargé ma police d'écriture en TTF, c'est le format par défaut..."

La réalité : C'est 3 à 5 fois plus lourd qu'un format optimisé comme WOFF2.

La solution magique : utiliser une typographie écologique et accessible, appelé "polices systèmes"

Les polices d'écritures dites "système", sont des typographies déjà présentes sur tous les appareils de tes visiteurs. Elles sont donc pré-installées sur Windows, Mac, iOS, Android... Donc, pas de téléchargement, pas d'attente, pas de consommation d'énergie supplémentaire. Résultat : ton site s'affiche instantanément avec zéro impact environnemental supplémentaire.

C'est ça, la magie des polices d'écritures système !

Voici +10 exemples de typographie écologique et accessible que j'utilise constamment sur les sites de mes client·e·s

(en plus, ce sont des polices d'écritures systèmes)

Les sans-serif (parfaites pour un look moderne et épuré)

1. Arial - La valeur sûre absolue, présente sur 99% des appareils
2. Candara - Plus douce qu'Arial, idéale pour un ton chaleureux
3. Euphemia - Moderne et lisible, parfaite pour les titres
4. Impact - Pour tes call-to-action qui ont du punch
5. Lucida Sans - Élégante et professionnelle
6. Tahoma - Compacte et très lisible sur écran
7. Trebuchet MS - Un côté humaniste qui rassure
8. Verdana - Conçue spécialement pour l'écran, ultra-lisible

Les serif (pour une touche d'élégance intemporelle)

1. Georgia - Parfaite pour les longs textes, très lisible
2. Palatino - Raffinée et chaleureuse
3. Times New Roman - Classique et universelle

Bonus : les polices d'écritures monospace

• Courier New - Pour tes extraits de code ou citations
• Consolas - Plus moderne que Courier

En cadeau : mes combinaisons de polices d'écritures systèmes préférées pour t'inspirer

Inspires-toi, piques-moi les idées, c'est gratuit et c'est éco-friendly.

Comment bien les utiliser ? Mes 3 règles d'or

Règle n°1 : Maximum 2 typographies différentes

Une pour tes titres, une pour ton texte. Point. Tu veux de la personnalité ? Joue sur les tailles, les couleurs, les espacements !

Règle n°2 : Limite les styles

Utilise uniquement les graisses dont tu as vraiment besoin. Souvent, normal + gras suffisent amplement.

Règle n°3 : Pense lisibilité avant tout

• Minimum 16px pour ton texte principal
• Évite les typographies trop fines (surtout sur mobile)
• Assure-toi que le contraste entre la couleur de ton texte et celle de son arrière-plan soit suffisant

Et si tu veux absolument utiliser une typographie "spéciale" ?

Je te comprends ! Des fois même, c'est parce qu'elle fait partie de notre charte graphique et il est trop tard pour en changer. Voici la stratégie hybride que je recommande :

• Texte principal : Utilise une police d'écriture système (ex: Georgia)
• Titres uniquement : Autorise-toi UNE typographie téléchargée
• Format : convertit les et compresse les en WOFF2 obligatoire (le plus léger)
• Optimisation : Supprime tous les caractères dont tu n'as pas besoin (si tu n'a besoin que de "normal, gras, italique" ne prend que ça. Pas besoin de la semi-bold, fine, extra-fine, noir, etc)
• Intégration : intègre ces polices d'écritures directement sur ton site

Le test ultime pour choisir ta typo

Avant de craquer pour une typographie, pose-toi ces questions :

- Est-ce que ma grand-mère de 75 ans pourrait lire mon site facilement (fais le test, vraiment, fais-lui lire) ?

- Est-ce que ça reste lisible sur un petit écran de smartphone ?

- Est-ce que ça correspond à mon message et mes valeurs ?

- Est-ce que j'ai vraiment besoin de cette typographie ou est-ce juste un caprice esthétique ?

Si tu as ne serait-ce qu'un doute sur une réponse, retourne aux polices d'écritures système. Tes visiteurs (et la planète) te remercieront !

Ton plan d'action en 3 étapes

1. Audit de ton site actuel : Combien de polices différentes utilises-tu ? (Plus de 2 = action requise !)
2. Choisis tes nouvelles typographies dans ma liste ou mes combinaisons des typographies éco-responsables et accessibles
3. Optimise la stratégie globale de ton site avec mon guide complet "Comment bien préparer la création de son site éthique et éco-responsable"

Ce guide gratuit te donnera toutes les clés pour créer un site qui reflète vraiment tes valeurs, de A à Z. Typographies, couleurs, images, structure... Tu auras une feuille de route claire pour lancer ton site ou le bonifier tout en respectant tes convictions !

[👉 Télécharge ton guide gratuit ici]

Le mot de la fin...

Choisir ses typographies, c'est bien plus qu'une question de goût. C'est un acte militant pour un web plus respectueux de nos visiteurs et de notre planète.

Aujourd'hui, tu as découvert qu'avec de simples polices système, tu peux créer un site magnifique, rapide et éco-responsable. Plus besoin de sacrifier tes valeurs pour avoir un site qui te ressemble !

Alors oui, peut-être que ta typographie Pinterest ultra-tendance devra attendre. Mais tes visiteurs te remercieront pour cette expérience fluide, et tu dormiras sur tes deux oreilles en sachant que chaque clic sur ton site n'alourdit pas inutilement l'empreinte carbone du web.

Le numérique éthique, ça commence par ces petits choix du quotidien. Et maintenant, tu as toutes les clés en main pour faire les bons !

Site internet écologique : 10 actions pour réduire l’impact carbone de ton site sans nuire à ton activité (voir même la booster)

par Coralie | 25/06/25 | Éco-conception

Tu t’es déjà demandé·e si ton site internet était écologique ou bien polluait ?

Je te vois venir… parce que c’est ce que j’entends tout le temps qu’en je parle de mon expertise « Mon site, c’est juste quelques pages avec trois photos et un formulaire, ça va… ». Eh bien non. Ton site a bel et bien une empreinte carbone. Et pas qu’un peu.

Le numérique, c’est 4 % des émissions de gaz à effet de serre dans le monde (plus que l’aviation civile). Et ça grimpe chaque année. Alors non, les sites web d'entreprises (aussi petite soit-elle) ne sont pas neutre. Mais bonne nouvelle : tu peux agir.

Je t’explique pourquoi, et surtout comment réduire l’impact écologique de ton site sans sacrifier ton esthétique ni tes objectifs business.

1. Comment ton site internet impacte l’environnement (sans que tu le saches) ?

C’est simple : ton site, ce n’est pas juste des pixels sur un écran. C’est des fichiers, des images, du texte, des vidéos… qui sont stockés dans des serveurs (de gros ordinateurs), qui tournent 24h/24, refroidis en permanence.

Chaque fois que quelqu’un visite ton site, il se passe trois choses :

1. Son appareil (ordi ou smartphone) consomme de l’énergie pour afficher la page.
2. Les données voyagent depuis le serveur jusqu’à son écran (via les réseaux : fibre, 4G, Wi-Fi, etc.).
3. Les serveurs tournent non-stop pour stocker et envoyer ces données.

Donc tout simplement : plus ton site est lourd (images non optimisées, animations, trop de plugins, éléments interactifs, etc), plus il pompe de l’énergie.

Un site éco-conçu consomme moins. Moins de pollution numérique. Plus de sobriété. Plus de sens. Plus aligné aux valeurs que tu défends. #AUTHENTICITÉ

Si tu as un business engagé, un projet porteur de sens… ton site DOIT être aligné avec tes valeurs. Sinon, c’est un peu comme vendre du vrac… emballé sous plastique.

2. Design responsable : 5 gestes visibles et concrets pour un site internet écologique (et aligné avec tes valeurs)

2.1. Un design épuré = un site plus clean (dans tous les sens).

On entend souvent que le minimalisme, c’est une tendance. En réalité, en design éthique et éco-responsable, c’est surtout du bon sens. Moins de blocs, moins d’effets, moins d’éléments qui saturent le regard… Résultat : ton site est plus léger, plus rapide, plus accessible et plus écologique.

Le piège, c’est l’espace. Quand on commence à designer pour ordinateur, on a cette impression de vide qu’on cherche à combler. On s'enjaille dans notre création, on ajoute un encart ici, une image là, un bouton en plus… Et sans s’en rendre compte, on surcharge. La vraie clé, c’est de penser mobile d’abord. Là, tu es obligé·e de te recentrer sur l’essentiel : qu’est-ce que la personne a besoin de voir, de comprendre, de faire ?

C’est ça, le design éco-responsable : un site qui sert vraiment tes objectifs et ceux de ton audience. Un site qui ne s’éparpille pas, qui va droit au but, avec fluidité et clarté.

2.2. Dégage les animations inutiles.

Tu vois ces petits effets qui apparaissent quand tu scrolles ? Ces blocs qui flottent, ces textes qui glissent, ces images qui vibrent… On pourrait croire que ça donne un côté moderne, un peu waouh à ton site. Mais soyons honnêtes : à quoi ça sert vraiment ? Est-ce que ça rend ton message plus clair ? Ton site plus efficace ? Rarement.

Chaque micro-animation, c’est du code supplémentaire. Des lignes qui tournent en tâche de fond, qui sollicitent le processeur de ton utilisateur.rice et les serveurs qui hébergent ton site. Résultat : plus d’énergie consommée et un chargement plus long…

En éco-conception, il y a une règle simple, mais qui pique parfois : si ce n’est pas utile, ça dégage. Oui, tu peux vouloir un site joli, mais joli ne veut pas dire chargé. Quand tu retires le superflu, tu laisses plus de place à l’essentiel : ton message, ton impact et l’expérience de ton visiteur ou ta visiteuse.

2.3. Choisis tes polices et tes couleurs avec conscience.

Soyons honnêtes : la couleur d’un site web a un impact écologique quasi nul. Moins de 1 % du poids d’une page, pour être exacte. Alors non, tu ne vas pas sauver la planète en passant ton site en dark mode (au contraire même, mais je laisse ce sujet là pour plus tard).

Par contre, le choix de tes couleurs est essentiel pour l’accessibilité de ton site. Et ça, c’est à prendre en compte. Un bon contraste entre le texte et le fond, des couleurs lisibles, compréhensibles pour tout le monde, y compris les personnes daltoniennes ou en situation de handicap visuel… ça c’est un vrai choix de design responsable et engagé.

Pour le print, en revanche, la donne change : certaines couleurs consomment beaucoup plus d’encre et sont donc plus polluantes. Donc si tu veux être aligné·e dans tous tes supports de communication (et il vaut mieux), tu peux penser à une charte graphique de base qui soit éco-responsable sur papier, et surtout accessible sur le web.

Côté typo, même logique : privilégie des polices web ou système, plus légères et plus rapides à charger. Et surtout, pense accessibilité avant esthétisme pur. Une typo lisible, sans fioriture, c’est un site plus inclusif. Et si tu veux vraiment réduire l’impact de cette dernière, héberge ta typo en local sur ton site plutôt que de la charger depuis des serveurs externes.

2.4. Optimise tes images (vraiment).

Spoiler : 90% des sites que j’audite ont des images 10 fois trop lourdes. Importer sur son site une image de 2000px qui au final s’affiche en 300px, c’est Inutile. De même que des images qui pèse 500Ko parce qu’elles ne sont ni optimisés, ni compressé pose soucis quand on sait qu’elle pourrait tout à fait faire 50Ko et qu’aux yeux du monde entier, personne ne verrait visuellement la différence. Mais pour l’éco-conception, l’impact en sera bien moindre.

Les bonnes pratiques à suivre : utilise des outils comme TinyPNG, Squoosh ou des plugins de compression. Puis surtout, enregistres les de base au bon format : WebP ou SVG (quand c’est vectoriel) de préférence plutôt que jpg ou png.

2.5. Stop aux vidéos hébergées sur ton site.

Une vidéo hébergée sur ton site, c’est un impact écologique considérable pour ton site. Parfois les vidéos sont décoratives, auquel cas, il vaut mieux les supprimer. Parfois elles sont nécessaires et stratégiques, par exemple si tu es vidéaste et que tu veux montrer tes vidéos dans ton portfolio, auquel cas il vaut mieux les optimiser. La meilleure pratique que je conseille à tous mes client.e.s : héberge-la sur YouTube, Peertube ou Vimeo, et intègre une capture d’écran avec un faux bouton play qui redirige vers la plateforme. Résultat : ton site ne sera pas impacté par le poids de ta vidéo.

Mais comme me dirait l’autre “Oui mais là on ne fait que déplacer le problème ailleurs…”

Oui mais non, car en effet, si tu optes pour cette technique il vaudra mieux optimiser également ta vidéo (comme pour les images, tailles, poids, format - je te conseille d’ailleurs de les enregistrer au format WebM) et privilégier Peertube aux autres plateformes qui est leur équivalent éthique et français (donc les vidéos seront hébergées en France, proche de votre audience - même stratégie que pour le choix de son hébergeur web).

3. Design durable : 5 actions « invisibles » qui font toute la différence pour avoir un site internet écologique

3.1. Choisis un hébergeur éthique (et local).

On vient d’en parler, les serveurs consomment énormément. Un hébergeur éthique, lui, utilise des énergies renouvelables, ou coupe ses serveurs en heures creuses par exemple. Si tu dois faire un choix, privilégie un hébergeur proche de ton audience cible. Si ta clientèle est en France, évite les serveurs aux USA. Plus c’est loin, plus ça consomme.

Quelques noms : Infomaniak, OVH, o2switch.

LIRE AUSSI :

3.2. Optimise ton parcours utilisateur.

Chaque détour, chaque clic inutile, chaque “je reviens en arrière parce que je suis perdu·e”, c’est non seulement frustrant pour la personne qui visite ton site, mais c’est aussi de l’énergie numérique gaspillée. Oui, ton parcours utilisateur a un impact écologique.

Imagine que ton site soit un chemin de randonnée. Plus il est clair, balisé, fluide, plus la balade est agréable… et plus elle est rapide. Si, au contraire, tu perds tes visiteurs dans des sentiers mal indiqués, tu crées de la confusion, de la lassitude et… des pages qui s’ouvrent pour rien.

Pour savoir ça, il faut tester, essayer et analyser leur parcours en réalisant une étude statistique du site.

3.3. Limite le nombre de pages et de fonctionnalités.

On a tous ce réflexe : “Oh, et si je créais une page spéciale pour ça ?” ou “Tiens, je pourrais ajouter cette fonctionnalité, ça pourrait servir…” Oui, mais à qui ? À quoi ? Et surtout : est-ce que ça sert vraiment tes objectifs ?

Ton site, c’est comme ton sac à dos. Plus tu le charges, plus il devient lourd, lent, pénible à transporter. À un moment, il faut trancher. L’éco-conception, ce n’est pas dire non à tout, c’est apprendre à faire des choix éclairés. À se demander : est-ce que cette page est essentielle ? Est-ce que ce module apporte vraiment de la valeur ? Si la réponse est non… tu connais la suite.

Et ne crois pas que ça réduit ton expertise, ton professionnalisme. Au contraire. Un site simple, fluide, bien pensé, ça inspire confiance. Ça donne envie de rester, de lire, d’agir.

3.4. Fais le tri dans tes contenus.

Ah, les pages créées “au cas où”… Les articles de blog qui datent de 2017 et que personne n’a lus depuis. On les connaît, ces reliques du web. Mais tu sais quoi ? Elles ne sont pas inoffensives. Chaque page hébergée consomme de l’énergie. Chaque fichier stocké, chaque image oubliée pèse sur ton site… et sur la planète.

Alors oui, faire le tri, ça demande un peu de courage. Mais c’est aussi extrêmement libérateur. Encore une fois, regarde tes statistiques. Quels sont les contenus qui attirent vraiment ton audience ? Lesquels sont utiles ? Et surtout, lesquels peuvent partir sans que ça ne change rien à ton activité ?

Et si c’est difficile de trier seul·e, n’hésite pas à demander un regard extérieur (celui de ton audience, évidemment). Parfois, ce qui nous semble indispensable ne l’est pas pour les autres. Le tri, c’est autant un acte écologique qu’un acte stratégique.

3.5. Fais des mises à jour régulières.

Tu crois que les mises à jour de ton site, c’est juste pour te rajouter une tâche dans ta to do list du mois (d’ailleurs tu ne le fais jamais) ? Raté. Un site à jour, c’est un site qui tourne mieux, plus vite, avec moins de failles de sécurité… et qui consomme moins.

Quand un plugin est obsolète, il peut créer des bugs, ralentir ton site, forcer les serveurs à compenser pour charger les pages correctement. Résultat : plus d’énergie dépensée, pour rien.

Alors oui, ça peut paraître pénible de vérifier ses mises à jour régulièrement. Mais c’est comme faire la vidange de ta voiture : tu le fais pour que tout fonctionne bien, pour que ça consomme moins et pour éviter de te retrouver en panne au mauvais moment.

Et pendant qu’on y est : un plugin inutilisé ? ça peut dégager. Une page obsolète ? Pouf, à la poubelle. Plus tu nettoies, plus ton site respire… et plus la planète te dit merci.

Le mot de la fin…

Éco-concevoir, c’est faire des choix. Est-ce que ça veut dire faire un site moche, triste et sans âme ? NON, vraiment pas (et si tu as un doute je t’invite à aller consulter mon catalogue de site éthique et éco-responsable à adopter).

Ça veut juste dire : être intentionnel·le. Chaque fonctionnalité, chaque image, chaque page existe parce qu’elle est utile.

“Moins, mais mieux.” Voilà le mantra à suivre.

Et si t’as besoin d’un coup de main pour réduire la consommation d'énergie de ton site et le rendre plus éthique et éco-responsable, je peux t’aider. Découvre mes accompagnements ou réserve directement un appel découverte avec moi.

Empreinte environnementale de son site : comment la mesurer et découvrir si son site est éco-responsable ou non ?

par Coralie | 30/09/24 | Éco-conception

Avant de s'attarder sur l'empreinte environnementale de ton site web, j'aimerais revenir rapidement sur l'impact du numérique. Car oui, le numérique est aujourd’hui un acteur majeur de la pollution mondiale. Pour te donner une idée, les activités en ligne (sites web, vidéos, mails…) représentent environ 4 % des émissions mondiales de gaz à effet de serre.

Que tu sois entrepreneuse engagée ou en pleine réflexion sur l’éco-responsabilité, il est temps de te demander : a quelle échelle ton site web participe-t-il, lui aussi, à cette empreinte écologique ?

Dans cet article, je vais t’expliquer pourquoi il est important de mesurer régulièrement l'empreinte carbone de ton site et comment le faire efficacement et facilement. Je vais aussi te parler des outils essentiels pour mesurer ton impact et surtout t'apprendre à lire, décrypter et interpréter les résultats de ces outils. Tu verras : il est tout à fait possible de réduire son impact tout en maintenant une performance de qualité (ça va même de paire).

1. Pourquoi c'est important de calculer l'empreinte environnementale de son site ?

1.1 L'impact carbone du numérique : une réalité incontournable

Contrairement à ce que l'on pourrait penser, internet n'est pas « virtuel » : il repose sur d'énormes infrastructures physiques. Pense à tous les câbles, serveurs, centres de données et réseaux qui rendent possible la navigation sur le web. Ces centres de données sont comme des usines géantes : ils engendrent une énorme consommation d'énergie pour fonctionner 24h/24 et refroidir les machines. Chaque jour : chaque clic, chaque image ou vidéo chargée sur ton site ajoute du travail à ces infrastructures, et donc, augmente l'énergie consommée.

1.2 Pourquoi une démarche régulière est essentielle

L'empreinte carbone d'un site peut fluctuer en fonction de nombreux facteurs : l'ajout de nouvelles fonctionnalités, l’augmentation du nombre de visiteurs et visiteuses, ou encore des choix techniques (comme l’intégration de vidéos ou d’animations). Faire un point régulier te permet de prendre conscience des dérives potentielles et de corriger rapidement ce qui peut être optimisé.

Lire aussi : Comment savoir si c’est le bon moment pour optimiser un site web afin de le rendre éthique et éco-responsable ?

2. Comment calculer l’empreinte environnementale de ton site efficacement ?

Pour mesurer correctement l'impact environnemental de ton site, il est nécessaire de comprendre comment utiliser les outils adéquats, mais aussi comment interpréter les résultats pour agir en conséquence.

2.1 Website Carbon : mesure l’empreinte carbone d’un site en quelques clics

Website Carbon est un outil très simple d'utilisation pour évaluer rapidement l'empreinte carbone d'un site web. Tu n'as qu'à entrer l'URL des pages de ton site dans leur barre de recherche, et le site te fournira une estimation de la quantité de CO2 générée par page et par visite. Bien évidement, cette action est à renouveler pour chacune des pages de ton site, une par une. Je te conseille d'ailleurs de noter les scores indiqués pour chaque page et d'en faire une moyenne pour ton site.

Avantages :

• Facile d'utilisation : il te suffit de saisir l'adresse d'une page de ton site pour obtenir une analyse rapide.
• Rapide : en quelques secondes, tu as une estimation chiffrée.
• Hébergement vert : l'outil te permet de savoir si ton site est hébergé sur des serveurs "verts", c'est-à-dire qui utilisent des énergies renouvelables.

Comment lire les résultats :

• Bon score : En dessous de 0,5g de CO2 par page visitée.
• Moyen : Entre 0,5g et 1g (la moyenne des sites étant à 0,8g).
• Mauvais : Plus de 1g de CO2 par page.

Exemple concret :

Si tu as un site vitrine simple avec quelques pages et que chaque page génère environ 0,3g de CO2, tu es dans une bonne moyenne. En revanche, si tu as un gros site avec de nombreuses images et vidéos, produits, etc tu pourrais voir des chiffres dépasser les 1g. Dans ce cas, il faudrait envisager des optimisations.

2.2 Eco-Index : une note d’éco-conception basée sur plusieurs critères

Eco-Index est un autre outil performant pour mesurer l'impact environnemental de ton site, mais il va plus loin que Website Carbon. Ici, tu obtiens une note d'éco-conception basée sur plusieurs critères : la taille des fichiers, le nombre de requêtes serveur, la structure des pages et le poids des images.

Avantages :

• Analyse multi-critères : au-delà du CO2, Eco-Index te fournit une vue d'ensemble sur la performance environnementale.
• Détails techniques : il te montre exactement quels éléments de ton site consomment le plus d'énergie.
• Notation claire : ton site reçoit une note de A à G, ce qui permet de visualiser clairement où tu te situes.

Comment lire les résultats :

• Bon score : Note A à B.
• Moyen : Note C à D.
• Mauvais : Note E à G.

Exemple concret :

Si tu reçois une note de C, cela signifie que certaines pages ou éléments du site peuvent être optimisés. Ici aussi, comme pour Website Carbon, il te faudra regarder toutes tes pages une à une pour avoir une réelle estimation. Je te conseille d'ailleurs de noter les scores indiqués pour chaque page et d'en faire une moyenne pour ton site. Si 1 page /10 a un score de C, et les autres sont des A et B, on peut clairement dire que le score général est bon.

2.3 Lighthouse : une vue globale sur les performances et l'impact carbone

Lighthouse est une extension de navigateur proposée par Google Chrome, qui te permet d'analyser plusieurs aspects de ton site web : performances, accessibilité, bonnes pratiques et éco-responsabilité.

Avantages :

• Vue d’ensemble : Lighthouse n’analyse pas uniquement l’impact carbone, mais t’offre une vision globale de la performance de ton site (accessibilité, SEO, mobile vs desktop, bonnes pratiques, etc).
• Recommandations détaillées : l'outil te fournit des conseils précis sur les optimisations à apporter.
• Accessible : tout le monde peut l’utiliser gratuitement en ajoutant simplement l’extension à son navigateur.

Comment lire les résultats :

Lighthouse te propose un score de 0 à 100 pour chaque page de ton site qui sont analysées.

• Bon score : Au-dessus de 90.
• Moyen : Entre 60 et 89.
• Mauvais : En dessous de 60.

Exemple concret :

Si tu obtiens un score en dessous de 90 en performance, il te donnera des conseils pour améliorer ton site. Néanmoins ce sont souvent des conseils assez techniques. Il te faudra alors te rapprocher d’un expert pour t’aider à optimiser tout ça.

3. Pourquoi ces trois outils sont complémentaires ?

Ces trois outils sont complémentaires parce qu’ils te permettent d'avoir plusieurs perspectives sur l'empreinte carbone de ton site. Website Carbon se concentre uniquement sur l’impact carbone par page, tandis qu’Eco-Index propose une approche plus globale en prenant en compte plusieurs critères techniques. Lighthouse, quant à lui, t'offre une vue d’ensemble sur la performance de ton site, y compris l'accessibilité, le SEO et les bonnes pratiques techniques.

Lire aussi : Boost ton SEO et rends ton site plus éthique et durable grâce à l’optimisation de tes visuels (images, pictos, illustrations)

L’idée est de combiner ces outils pour obtenir une vue complète et précise de l'impact environnemental de ton site, et d'agir sur différents axes d'optimisation.

Garder tout de même en tête que parfois, en réglant un soucis chez l’un, ça règlera un soucis chez l’autre. Parfois aussi, il est possible qu’en réglant un soucis chez l’un on impacte le score d’un autre. C’est tout a fait normal et il est très compliqué d’atteindre un 100% partout. Il faudra donc jongler au mieux entre tes optimisations, faire des tests et travailler en amélioration continue.

4. Penser au parcours utilisateur lors de l'analyse

Il est important de réaliser que chaque page de ton site a un impact différent. Les pages plus légères (comme celles sans images lourdes ou vidéos) auront un moindre impact, tandis que les pages comme une galerie d'images ou une page de vente avec plusieurs photos ou vidéos auront un impact plus élevé. C'est pourquoi il est essentiel de réaliser l'analyse page par page, pour identifier les éléments qui alourdissent le plus ton site.

Lors de l'analyse, il est aussi crucial de penser au parcours utilisateur. Par exemple, si un visiteur doit charger plusieurs pages pour trouver une information essentielle, cela multiplie les requêtes serveur et augmente l'empreinte carbone. Optimise ton site pour que les visiteurs trouvent l'information qu'ils cherchent en moins de clics et avec moins de pages à charger.

Comment faire ?

• Identifie les pages stratégiques : celles qui sont les plus visitées ou essentielles au parcours utilisateur.
• Analyse ces pages avec les outils mentionnés pour optimiser leur impact.
• Améliore la navigation en réduisant le nombre de clics nécessaires pour atteindre une information clé.

Lire aussi : Mieux convertir sur ton site grâce à des formulaires éthiques et optimisés

Le mot de la fin…

Calculer et réduire l'impact carbone de ton site web est une démarche essentielle pour aligner tes actions numériques avec tes valeurs éthiques et écologiques. Grâce à des outils comme Website Carbon, Eco-Index et Lighthouse, tu peux facilement identifier les points à améliorer et prendre des décisions concrètes pour un web plus durable. Garde en tête qu'il est crucial de vérifier chaque page individuellement et de penser au parcours utilisateur lors de l'optimisation.

Si tu veux aller plus loin dans cette démarche, n’hésite pas à me contacter en réservant une visio-découverte.

La méthode 80/20 : Comment l’appliquer à la conception de ton site pour le rendre éthique et éco-responsable

par Coralie | 10/09/24 | Éco-conception

Créer un site web éthique et éco-responsable, ça peut vite ressembler à une montagne à gravir, surtout quand on veut vraiment faire les choses bien sans se perdre dans tous les détails techniques. Alors voilà une petite astuce stratégique : et si tu te concentrais les 20 % d’actions qui font 80 % du boulot ? C’est ce qu’on appelle la méthode 80/20, ou la loi de Pareto. Dans cet article, je vais te montrer comment appliquer ce principe à ton site pour qu’il devienne plus vertueux et moins énergivore, sans te prendre la tête. Allez, on simplifie tout ça ensemble !

1. Qu’est-ce que la fameuse méthode 80/20 et quel rapport avec ton site ?

La méthode 80/20, c’est un peu comme se dire : "Je vais arrêter de courir partout et me concentrer sur ce qui rapporte vraiment". En gros, que 80 % des tes résultats viennent de seulement 20 % de tes efforts. Plutôt cool, non ? Pour ton site, ça veut dire que tu peux obtenir un impact positif en te concentrant sur quelques ajustements clés. Pas besoin de tout révolutionner d’un coup !

2. Pourquoi appliquer la méthode 80/20 à ton site ?

Tu te demandes pourquoi c’est intéressant de l’appliquer ? Tout simplement parce que ça va t’apporter des bénéfices concrets, comme :

1. Réduire l’impact environnemental : C’est comme faire le tri dans ta maison : en allégeant ton site des éléments qui consomment trop de ressources (images lourdes, vidéos inutiles, plugins gourmands), tu allèges aussi son empreinte carbone.
2. Améliorer l’expérience utilisateur : Un site plus léger, ça charge plus vite, et ça fait plaisir à tes visiteurs (et à la planète). Personne n’aime attendre, surtout sur Internet !

Lire aussi : +20 outils pour t’aider dans la création de ton site éthique et éco-responsable

3. Comment appliquer la méthode 80/20 à ton site WordPress : identifier les problèmes et agir efficacement

La méthode 80/20, c’est surtout repérer ce qui freine ton site pour ensuite agir là où ça compte vraiment. Voici comment identifier les 20 % d’éléments qui font toute la différence et les ajuster pour un site plus éthique et éco-responsable.

Problème 1 : Ton site est lent à charger

Pourquoi c’est un souci ? Un site lent, c’est frustrant pour tes visiteurs, ça fait fuir, et ça consomme inutilement des ressources.
Solution : Allège tes contenus média
Comment faire ? Utilise des outils comme Google PageSpeed Insights ou GTmetrix pour analyser ce qui ralentit ton site. Pense à optimiser tes images (formats WebP, compression), à réduire le nombre de vidéos, et surtout à éviter l’autoplay. Opte aussi pour des plugins de cache comme WP Rocket qui améliorent le temps de chargement.

Lire aussi : Les 3 piliers du SEO pour un site WordPress éthique et durable

Problème 2 : Trop de plugins gourmands

Pourquoi c’est un souci ? Les plugins, c’est pratique, mais trop, c’est trop ! Ils peuvent ralentir ton site et augmenter son empreinte carbone.
Solution : Fais le ménage dans tes plugins
Comment faire ? Réévalue régulièrement tes extensions. Supprime celles qui ne sont pas essentielles ou désactivées et privilégie des alternatives légères. Si possible, combine les fonctionnalités dans un seul plugin au lieu d’en avoir plusieurs qui se marchent dessus. Par exemple : assures de ne pas avoir deux plugins qui potentiellement peuvent faire la même chose et donc tu pourrais choisir de n'en garder qu'un des deux.

LIRE AUSSI : Est-ce que mon site est éco-responsable ? Apprendre à mesurer son impact carbone efficacement

Problème 3 : Un design complexe et peu accessible

Pourquoi c’est un souci ? Un design surchargé nuit à la lisibilité et à l’accessibilité, rendant la navigation compliquée pour tes utilisateurs, notamment ceux en situation de handicap.
Solution : Simplifie ton design et pense accessibilité
Comment faire ? Priorise une navigation simple, des contrastes de couleurs adaptés, et des typographies lisibles. Évite les animations inutiles qui détournent l’attention et consomment des ressources.

Lire aussi : L’accessibilité : mon chemin de designer pour sortir du “beau” et viser le juste 

Problème 4 : Un hébergement web non éthique

Pourquoi c’est un souci ? L’hébergement est l’un des plus gros contributeurs à l’empreinte écologique de ton site. Un hébergeur standard utilise souvent des énergies polluantes.
Solution : Choisis un hébergement vert
Comment faire ? Privilégie des hébergeurs qui s’engagent pour l’environnement, comme Infomaniak*, qui utilisent des énergies renouvelables. C’est un choix simple qui a un gros impact sur la durabilité de ton site.

Problème 5 : Contenus mal optimisés pour le mobile

Pourquoi c’est un souci ? La majorité des utilisateurs naviguent sur mobile. Si ton site n’est pas optimisé, tu perds des visiteurs et consommes plus de ressources qu’il n’en faudrait.
Solution : Assure-toi que ton site est mobile-friendly
Comment faire ? Utilise un thème WordPress responsive et vérifie régulièrement l’affichage de ton site sur différents appareils. Réduis les contenus superflus qui rendent la navigation sur mobile difficile.

Le mot de la fin...

Concentre-toi sur l’essentiel !

Appliquer la méthode 80/20 à ton site WordPress, c’est repérer ce qui bloque et agir là où ça a le plus d’impact. Avec ces ajustements, tu rends ton site non seulement plus éthique et éco-responsable, mais aussi plus agréable à utiliser en faisant un moindre effort.

*Lien affilié : ce qui signifie que si tu décides d'acheter ton hébergement sur Infomaniak via ce lien, je recevrais une commission.