Tu veux du trafic. Tu veux que ton site soit trouvé. Tu veux que Google te remarque… mais pour l’instant, il t’ignore…
Tu fais peut-être partie de ces personnes qui se disent :
“Je ne comprends pas… Pourtant j’ai travaillé fort sur mon contenu, mes mots-clés, j’ai écrit des pages complètes et des articles… et ça ne bouge pas.”
Je vais être transparente avec toi :
Si tu veux être dans les 3 premiers résultats, il n’y a pas de secret, il ne faut rien négliger.
Tu as le contenu certe. Mais… si ton site est peut-être en train de saboter ton référencement naturel sans que tu ne t’en rendes compte, c’est peut-être parce que justement tu as tout donné sur le contenu et négligé le reste.
Parce qu’on t’a bassiné avec le SEO = mots-clés, articles, rédaction.
Sauf que le SEO repose sur 3 piliers. Alors certes, le pilier du “Contenu” fait partie des 3, mais il y en a 2 autres qu’il ne faut surtout pas oublier. Et toi aujourd’hui, tu n’en travailles qu’un.
LES 3 PILIERS DU SEO (dont celui que tu as ignoré jusqu’à aujourd’hui)
Alors, on reprend les bases : il y a 3 piliers au SEO, le contenu, la popularité et la technique.
Pilier Contenu → ce que tu racontes sur ton site : articles, pages basé sur des mots-clés stratégiques pour te positionner au bon endroit. Mais, même le meilleur contenu du monde ne sert à rien si ton site n’est pas “ valorisé par d’autres.
Pilier Popularité → ce qui prouve que ton site est fiable : liens, réseaux sociaux, recommandations d’autres sites. Plus ton site est reconnu et recommandé par d’autres, plus Google le met en avant, mais même le site le plus populaire va voir sa visibilité impacté s’il n’est pas techniquement irréprochable.
Pilier Technique → la structure et les fondations de ton site : performance, accessibilité, version mobile, poids des pages. Si la technique est négligée, ta visibilité sur Google en sera impacté, peu importe la qualité de tes contenus ou de ta réputation.
Si ton poids dépasse les 200 Ko, ça veut dire que ton site risque de :
mettre trop de temps à charger ;
les visiteurs vont donc repartir avant même qu’il s’ouvre
Google te rétrograde dans le classement.
2. Score accessibilité < 90
En effet, si ton site obtient un score d’accessibilité (sur le plan technique encore une fois) inférieur à 90, c’est qu’il n’est pas assez accessible aux personnes en situation de handicap. Et Google, il pénalise les sites non inclusif.
Pour connaître le score d’accessibilité, ne serait-ce que de ta page d’accueil, utilises Page Speed Insights.
Si ton score est inférieur à 90, ça veut dire que ton site risque de :
être pas assez lisible et compréhensible pour les personnes en situation de handicap ;
les personnes concernés vont donc repartir sur le champ ;
Google te rétrograde dans le classement.
3. Performance mobile < 90
En effet, si ton site obtient un score de performance mobile inférieur à 90, c’est qu’il n’est pas assez adapté à des petites tailles d’écrans et à l’usage en contexte de mobilité. Et Google, il pénalise les sites qui ne sont pas mobile-friendly.
Pour connaître le score de performance mobile, ne serait-ce que de ta page d’accueil, utilises Page Speed Insights (section mobile).
Si ton score est inférieur à 90, ça veut dire que ton site risque de :
ne pas être facile à utiliser en contexte de mobilité ou depuis ta bio Insta ;
les personnes qui vont se retrouver face à des bugs vont donc repartir sur le champ ;
Google te rétrograde dans le classement.
4. Des images de plus de 200 Ko
En effet, si ton site possède des images qui font plus de 200Ko, c’est qu’elle ne sont pas assez adapté pour un site web (mais plutôt pour du print). Et Google, il pénalise les sites qui mettent trop de temps à s’afficher à cause d’images trop lourdes.
Pour connaître le poids de tes images, consultes tes images une à une dans ta médiathèque WordPress.
Si leur poids est supérieur à 200Ko, ça veut dire que ton site risque de :
ne pas charger assez vite (surtout si la connexion est mauvaise – milieux ruraux) ;
les personnes qui vont se retrouver face à un site qui met 1000 ans à tout afficher vont le quitter ;
Google te rétrograde dans le classement.
5. Ton site consomme + 0,3g de CO₂ par page vue
En effet, si ton site consomme +0,3g de CO2 par page vue, c’est qu’il n’est pas éco-conçu. Et Google, il ne pénalise pas encore les sites qui ne sont pas éco-responsable, mais ça ne saurait tarder (c’est le feeling qui parle). En tout cas la planète elle t’en sera reconnaissante.
Pour connaître l’empreinte carbone de ton site, ne serait-ce que de ta page d’accueil, utilises Website Carbon.
Si ton score est en-dessous de C, ça veut dire que ton site risque de :
polluer bien plus qu’il ne devrait ;
c’est donc vraiment dommage ;
et saches qu’un site qui diminue son empreinte carbone, est forcément un site plus léger donc plus performant (en plus d’être plus éthique)
Et là, c’est le moment oùtu réalises peut-être que tu t’es concentré(e) sur les textes de ton site en priorité, mais pas sur ce qui permet à Google d’y accéder, de les lire.
Le mot de la fin…
Imagine que je te lance un défi. Celui de prendre 1h pendant 30 jours (pas plus, ni moins) pour arranger tout ça et faire de ton pilier technique un vrai atout pour ton référencement naturel. Et pas que, puisque cela rendra ton site également plus performant, éthique et éco-responsable.
Le principe ? Pendant 1h par jour, tu suis une vidéo où je te donne exactement la marche à suivre sur ton site (une leçon + tutos), tu appliques tout ça sur ton site (clairement, tu passes à l’action), et tu vois ton site s’améliorer en temps réel de jour en jour. Tu observes des résultats concrets un peu plus chaque jour.
Et surtout tu reprends ton site en main, tu n’auras plus peur de mettre les mains dans WordPress (crois-moi, ça va devenir un vrai jeu d’enfants), tu arrêtes de subir la technique, tu prends le contrôle.
Tu passes de “je comprends rien à la technique, ni à WordPress” à “en fait c’était pas si compliqué, fallait juste me le montrer”.
Tu as déjà utilisé quelques fois l’écriture inclusive dans tes posts ou dans ta communication et c’est un premier pas. Tu l’as fais parce que tu sais que c’est important et cohérent avec tes valeurs et que ça traduit ton envie d’un monde plus juste et plus respectueux. Mais laisse-moi te poser une question : est-ce que ton site aujourd’hui reflète la même intention ?
Si la réponse est « oui » : la suite va t’intéresser pour savoir si oui ou non tu le fais de la bonne façon, notamment sans impacter ton SEO ou l’accessibilité de ton site pour les personnes en situation de handicap.
Si la réponse est « non » ou « pas « forcément », c’est parfait, parce que tu es au bon endroit pour commencer dès maintenant, et surtout démarrer du bon pied. Un petit pas après l’autre.
Souvent, on applique naturellement l’écriture inclusive sur Instagram ou dans une newsletter… mais sur son site, elle disparaît, ou n’est pas uniforme sur toutes les pages (et je suis la première concernée). Ou alors, on l’a utilisée un peu à la va vite, avec de belles intentions de départ, sans mesurer les impacts sur la lisibilité, l’accessibilité ou même le référencement naturel (SEO).
Oui, parce que l’écriture inclusive est un bon engagement, mais à condition de bien l’appliquer sur son site (et c’est valable aussi pour tous ces autres supports de communication). Aujourd’hui, on va voir pourquoi elle est essentielle, comment l’adapter à ton site, et surtout, quelles actions simples tu peux poser dès maintenant pour le rendre plus inclusif, sans perdre en clarté ni en performance.
Et tu sais quoi, je vais moi aussi profiter de la publication de cet article pour me mettre un bon coup de pied au fesses et corriger également toutes les petites erreurs qu’il y a sur mon site et qui sont passées totalement à la trappe cette année.
1. L’écriture inclusive sur ton site doit être un marqueur d’éthique, de bienveillance et de cohérence
Quand tu portes un projet engagé, ton site n’est pas juste une vitrine : c’est le reflet de tes valeurs. L’écriture inclusive permet d’exprimer ton engagement de manière concrète. Elle inclut tout le monde : femmes, hommes, personnes non-binaires (aka : toutes les personnes concernées par ton message).
Mais attention : toute ta bonne intention ne suffit pas. Si ton site devient difficile à lire, ton message se perd. Et si certaines personnes ne peuvent pas comprendre ton contenu (personnes dyslexiques, personnes qui utilisent un lecteur d’écran, ou simplement des personnes pressées qui lisent en diagonal), ton éthique va se retourner alors contre toi.
Inclure, ça veut dire permettre à tout le monde (de ton audience) de lire ton contenu, de comprendre ton message afin de se sentir concerné pleinement par ce dernier, plutôt qu’exclu.
2. L’écriture inclusive sur un site peut vite devenir… une fausse bonne idée
En effet, l’écriture inclusive, mal appliquée sur ton site, peut te desservir sur plusieurs aspects : la lisibilité, l’accessibilité et le SEO. On va décortiquer tout ça ensemble puis je te montre comment faire pour pallier à ça.
2.1. Lisibilité
Sur un écran, surtout mobile, les phrases longues, les doublets à répétition ou les symboles (comme le point médian) compliquent la lecture et entraîne une fatigue visuelle pour ton audience. Et malheureusement, un texte “inclusif” mais fatigant à lire pour les yeux… finit par être ignoré.
2.2. Accessibilité
Le point médian quant à lui est un vrai enjeu d’accessibilité. Parce que malheureusement, il n’est pas toujours bien interprété par les lecteurs d’écran ou les outils de traduction.
Un lecteur d’écran sert notamment à des personnes malvoyantes ou non-voyantes d’avoir une lecture audio du texte inscrit sur ton site. Et malheureusement, un point médian, va se vocaliser par ces outils phonétiquement comme : « [les] [étudiant] [Point] [E] [Point] [S] ». Ceci est un exemple (cela peut varier selon comment ils sont paramétrer ou selon les modèles) pour vous sensibiliser à des choses auquel on ne pense même pas, lorsqu’on est pas concerné directement.
Le point médian, n’est pas qu’un enjeu pour les personnes mal-voyantes ou non-voyantes, puisque c’est également un enjeu à la lecture pour les personnes DYS (dyslexiques, dysorthographies, etc), elles le perçoivent comme un obstacle, une difficulté en plus à la lecture.
2.3. Référencement naturel (SEO)
Google et les moteurs de recherche ne reconnaissent pas forcément le symbole point médian ou la lecture avec des doublets à rallonge (par exemple : « j’accompagne les entrepreneurs et les entrepreneures » – non, je n’ouvrirais pas maintenant le débat sur le féminin de : entrepreneuse ou entrepreneure).
Résultat : ton mot-clé principal peut être mal compris, ton référencement affaibli, et ta page moins visible.
Moralité : on dit oui à l’écriture inclusive sur son site. Mais adaptée à son site.
3. Alors, 4 règles pour utiliser l’écriture inclusive sur ton site sans lui nuire ?
L’idée, ce n’est pas de tout réécrire du jour au lendemain, mais d’adopter de bons réflexes et d’y aller petit pas, par petits pas. Voici mes conseils, les plus simples et rapide à mettre en place.
3.1. Privilégie les mots épicènes
Les mots épicènes sont ceux qui ne marquent pas le genre. Par exemple :
“Les personnes clientes” au lieu de “les client.e.s”
“L’équipe dirigeante” au lieu de “les dirigeants et dirigeantes”
C’est plus fluide, inclusif et SEO-friendly.
3.2. Utilise les doublets avec modération
Oui, tu peux écrire “les entrepreneuses et entrepreneurs”. Mais pas à chaque phrase et 3 fois dans le même paragraphe. Choisis les moments clés, les titres ou les phrases fortes. Sinon, ton texte devient répétitif et perd en impact.
3.3. Le point médian : pas interdit, mais à manier en conscience
Il peut être utile ou même inévitable dans certains contextes, mais pas systématiquement. Maintenant que tu connais son impact négatif sur d’autres aspects, utilise-le quand l’inclusion du mot est essentielle pour ton message, mais reformule-le ailleurs quand tu le peux. Par exemple :
Avant : “Chaque participant·e est invité·e à…”
Après : “Chaque personne participante est invitée à…” Le sens reste le même, mais la phrase est plus facile à lire.
3.4. Pense inclusif dès ta conception de contenu
L’inclusion ne s’arrête pas à l’écriture, comme elle ne s’arrête qu’au genre. Elle passe aussi par d’autres aspects, comme la forme : notamment par les visuels présents sur ton site. Diversifie les images, les profils représentés, les univers : c’est aussi ça, créer un site inclusif.
Je le sais, cela reste une gymnastique du cerveau à avoir à chaque fois qu’on écrit et c’est normal qu’on passe à côté de certaine tournure de phrase. Mais rappelez-vous que « mieux vaut fait que parfait ».
4. Voici 2 actions concrètes pour rendre ton site plus inclusif dès aujourd’hui
Pas besoin de refaire tout ton site. On se calme. On va commencer petit, parce que chaque petit pas compte :
Relis les textes de ton site et repère les mots genrés. Corrige-les avec des alternatives neutres ou épicènes.
Repère les points médians et reformule quand c’est possible. Allège ton contenu, simplifie-le car ton message gagnera en clarté et ton site, en accessibilité.
En bonus : si tu veux aller plus loin, pense à varier tes visuels. Parce qu’un site inclusif, ce n’est pas qu’une question de mots. C’est une expérience globale.
Objectif : Plugin de mise en cache rapide et léger, conçu pour améliorer la performance du site tout en minimisant l’utilisation des ressources serveur.
Utilisation :
Installer le plugin via le répertoire WordPress.
Activer la mise en cache des pages et optimiser les fichiers CSS/JS depuis les réglages.
Activer les fonctionnalités de préchargement des pages pour améliorer l’expérience utilisateur.
Éthique : Ce plugin est gratuit, open-source, et ne suit pas les utilisateurs. Il permet de réduire l’impact énergétique des sites en optimisant leur performance sans collecter de données utilisateur ni nécessiter un abonnement payant pour les fonctionnalités de base. Cela en fait une alternative plus équitable et accessible comparé à WP Rocket.
Autoptimize
(Gratuit)
Objectif : Plugin pour optimiser le CSS, JavaScript et HTML.
Utilisation :
Installer et activer.
Activer l’optimisation des CSS/JS et HTML dans les réglages.
Tester la compatibilité avec ton thème.
Éthique : Gratuit et open-source, considéré comme éthique.
BunnyCDN
(Payant, abordable)
Objectif : Un CDN respectueux de l’environnement qui utilise des serveurs alimentés par des énergies renouvelables pour accélérer la distribution de contenu et réduire la latence.
Utilisation :
Créer un compte sur BunnyCDN.
Ajouter ton site et configurer les paramètres de cache et de distribution.
Modifier les DNS pour utiliser les serveurs BunnyCDN.
Éthique :
BunnyCDN est engagé dans l’utilisation d’infrastructures durables et écologiques, avec une politique de réduction des émissions de carbone. Ils utilisent des centres de données certifiés « verts » et s’efforcent de minimiser leur empreinte carbone. Contrairement à Cloudflare, qui est une grande entreprise avec des pratiques parfois opaques, BunnyCDN place la transparence et la durabilité au cœur de son modèle.
Conseil : Bien que payant, il est très abordable et ne facture que ce que tu utilises, ce qui limite les coûts pour les petits sites tout en offrant un impact réduit sur l’environnement.
Voir son alternative plus éthique (gratuite) : Cloudflare
Cloudflare
(Gratuit avec options payantes)
Objectif : CDN (Content Delivery Network) pour distribuer le contenu efficacement et réduire la consommation d’énergie serveur.
Utilisation :
Créer un compte Cloudflare.
Ajouter ton site et changer les DNS pour utiliser Cloudflare.
Activer la mise en cache et la protection DDoS.
Éthique : Gratuit et performant, mais centralise les données des utilisateurs.
Voir son alternative plus éthique (payante) : BunnyCDN
WP-Optimize
(Gratuit)
Objectif : Nettoyer la base de données et optimiser les fichiers inutiles.
Utilisation :
Scanner et supprimer les révisions inutiles, spam, etc.
Éthique : Gratuit et éthique, aide à réduire les ressources serveur.
Mesurer le niveau d’éthique de son site web
Page Speed Insights
(Gratuit) – aussi nommé Lighthouse
Objectif : Outil de Google qui permet d’analyser la performance des pages web et de fournir des recommandations pour améliorer la vitesse de chargement et l’expérience utilisateur.
Entrer l’URL de la page que tu souhaites analyser et cliquer sur « Analyser ».
Consulter les résultats, qui incluent des scores de performance, des suggestions d’optimisation et des informations sur l’accessibilité.
Éthique : Cet outil aide les développeurs et les propriétaires de sites à optimiser leurs pages pour une meilleure expérience utilisateur. En améliorant la vitesse de chargement et l’accessibilité, PageSpeed Insights contribue à rendre le web plus efficace et inclusif pour tous les utilisateurs, indépendamment de leurs conditions d’accès à internet.
GTmetrix
(Gratuit)
Objectif : Outil pour tester la performance d’un site web et identifier les goulots d’étranglement.
Utilisation :
Analyser l’URL du site.
Étudier les recommandations sur la réduction du CSS/JS, images non optimisées.
Appliquer les correctifs nécessaires.
Éthique : Propose des insights utiles sans suivi de données invasif.
Website Carbon
(Gratuit)
Objectif : Outil en ligne qui analyse l’empreinte carbone d’un site web en évaluant sa consommation d’énergie et son impact environnemental.
Utilisation :
Accéder au site de Website Carbon et entrer l’URL de ton site web pour lancer l’analyse.
Examiner les résultats, qui incluent des informations sur la consommation d’énergie, le nombre d’arbres nécessaires pour compenser l’empreinte, et des suggestions pour améliorer l’impact environnemental.
Pour une intégration plus facile, tu peux installer le plugin WordPress Website Carbon qui permet d’afficher l’empreinte carbone de ton site directement sur le tableau de bord.
Éthique : Website Carbon sensibilise les utilisateurs à l’impact environnemental de leur site et propose des moyens d’améliorer la durabilité. Le plugin WP permet de suivre l’empreinte carbone sans dépendre d’outils externes, garantissant ainsi que les données sont facilement accessibles et compréhensibles.
Mon Conseil : En utilisant le plugin Website Carbon sur ton site WordPress, tu peux suivre en temps réel l’impact de tes efforts pour réduire l’empreinte carbone, ce qui te permet d’ajuster ta stratégie d’optimisation au besoin.
Eco-Index
(Gratuit)
Objectif : Outil pour évaluer et améliorer la performance écologique des sites web.
Utilisation :
Accéder à Eco-Index et entrer l’URL du site que tu souhaites évaluer.
Recevoir un rapport détaillé sur les performances écologiques et des recommandations pour l’amélioration.
Éthique : Eco-Index aide les entreprises et les développeurs à prendre des décisions éclairées pour réduire l’impact environnemental de leurs sites.
Ecograder
(Gratuit)
Objectif : Outil d’analyse de la performance écologique d’un site web, évaluant plusieurs aspects comme l’efficacité énergétique, la durabilité du contenu et l’optimisation des ressources.
Utilisation :
Entrer l’URL du site dans l’interface d’Ecograder.
Attendre le rapport d’analyse qui présente une note globale sur la durabilité du site.
Utiliser les recommandations pour améliorer l’efficacité énergétique et les performances du site.
Éthique : Open-source et gratuit, Ecograder ne collecte pas de données personnelles et promeut l’amélioration de l’empreinte environnementale des sites.
Digital Beacon
(By Wholegrain Digital) (Gratuit)
Objectif : Outil de surveillance des performances écologiques d’un site web, conçu par des experts en développement durable numérique.
Utilisation :
S’inscrire sur le site Beacon.
Ajouter l’URL du site et lancer une analyse de performance écologique.
Recevoir des recommandations pour optimiser l’efficacité énergétique du site.
Éthique : Développé par Wholegrain Digital, un acteur engagé dans la durabilité numérique, cet outil est conçu pour minimiser l’impact écologique des sites web.
Sustainable Web Design
(Gratuit) – (Sustainable Web Manifesto)
Objectif : Un calculateur en ligne pour évaluer l’impact écologique d’un site en fonction de la taille des fichiers, des requêtes, et de la consommation de bande passante.
Utilisation :
Entrer les paramètres de ton site (taille des pages, nombre de requêtes, etc.).
Recevoir une estimation de la quantité de CO2 générée par les utilisateurs.
Ajuster les recommandations pour améliorer l’empreinte écologique.
Éthique : Développé dans le cadre du mouvement pour un web durable, cet outil gratuit vise à encourager des pratiques plus respectueuses de l’environnement.
GreenFrame
(Payant)
Objectif : Plateforme d’analyse de l’empreinte carbone d’un site web tout au long de son cycle de vie, depuis le développement jusqu’à la production.
Utilisation :
Créer un compte et connecter ton site web à GreenFrame.
Lancer une analyse complète pour suivre l’empreinte écologique de chaque aspect de ton projet web (code, infrastructure, hébergement).
Utiliser les suggestions fournies pour optimiser les performances et réduire l’impact environnemental.
Éthique : GreenFrame est spécifiquement conçu pour intégrer l’écologie dans le processus de développement, avec une approche systématique et scientifique de la réduction de l’empreinte carbone.
Typographies
Google Fonts Optimizer (Gratuit)
Objectif : Optimiser l’intégration des Google Fonts pour réduire le temps de chargement.
Utilisation :
Installer et activer le plugin.
Sélectionner les polices à optimiser.
Activer le chargement asynchrone.
Éthique : Les polices sont hébergées localement, ce qui est mieux que de les charger depuis Google.
Google Fonts (Gratuit)
Objectif : Une bibliothèque de polices open-source permettant aux utilisateurs d’intégrer facilement des polices de qualité sur leur site.
Utilisation :
Accéder au site Google Fonts et parcourir les polices disponibles.
Sélectionner les polices désirées et copier le lien d’intégration ou le CSS fourni.
Ajouter le lien dans l’en-tête de ton site WordPress ou utiliser un plugin comme Easy Google Fonts pour une intégration facile.
Éthique : Google Fonts est gratuit, open-source et offre un accès à une large gamme de polices. Cependant, son utilisation peut parfois entraîner un suivi des utilisateurs, donc il est conseillé d’auto-héberger les polices pour garantir la confidentialité.
Adobe Fonts
(Payant)
Objectif : Service de polices par abonnement permettant l’accès à une vaste collection de polices professionnelles pour une intégration sur des sites web.
Utilisation :
Souscrire à un plan Adobe Creative Cloud.
Parcourir et sélectionner les polices sur Adobe Fonts.
Utiliser le code d’intégration fourni pour ajouter les polices à ton site.
Éthique : Bien qu’il s’agisse d’un service payant, Adobe Fonts offre une qualité supérieure et un support pour des polices respectant les droits d’auteur. Néanmoins, il est essentiel de vérifier les politiques de confidentialité d’Adobe.
Fontsource
(Gratuit)
Objectif : Une bibliothèque open-source de polices de Google Fonts que l’on peut auto-héberger pour un contrôle total sur la confidentialité.
Utilisation :
Installer Fontsource via npm ou utiliser un CDN.
Choisir les polices désirées et ajouter les fichiers nécessaires dans ton projet.
Utiliser CSS pour intégrer les polices dans ton design.
Éthique : Permet d’éviter les requêtes externes en auto-hébergeant les polices. Cela réduit les temps de chargement et respecte la vie privée des utilisateurs.
Traitement des déchets numériques
Database Cleaner
(Gratuit avec options payantes)
Objectif : Plugin permettant de nettoyer et optimiser les bases de données en supprimant les données redondantes ou inutilisées.
Utilisation :
Installer le plugin et lancer une analyse de la base de données.
Supprimer les tables obsolètes, les transients expirés, et les révisions inutiles.
Optimiser la base de données pour améliorer les performances.
Éthique : En nettoyant régulièrement la base de données, cet outil réduit la charge sur le serveur et optimise les performances du site, contribuant ainsi à une meilleure durabilité.
Simple File List
(Gratuit)
Objectif : Outil permettant de créer une liste de fichiers et de surveiller leur utilisation, pour éviter les fichiers non essentiels ou obsolètes.
Utilisation :
Installer et activer le plugin.
Créer une liste des fichiers pour identifier ceux qui ne sont plus utilisés.
Supprimer ou archiver les fichiers obsolètes pour réduire l’encombrement numérique.
Éthique : Outil simple mais efficace pour éviter l’accumulation de fichiers inutiles, contribuant à une gestion plus propre et responsable du site.
Media Cleaner
(Gratuit avec options payantes)
Objectif : Outil pour identifier et supprimer les fichiers multimédias inutilisés dans la bibliothèque WordPress.
Utilisation :
Installer et activer le plugin.
Scanner la bibliothèque de médias pour repérer les fichiers non utilisés.
Supprimer ces fichiers pour réduire la taille de la base de données.
Éthique : Gratuit avec une version payante pour des fonctionnalités avancées. Permet de limiter la surcharge de fichiers inutiles, améliorant l’efficacité du site tout en économisant de l’espace serveur.
Asset CleanUp
(Gratuit avec options payantes)
Objectif : Optimiser le chargement des fichiers CSS et JS en désactivant ceux qui ne sont pas nécessaires pour chaque page.
Utilisation :
Installer le plugin et analyser chaque page du site.
Désactiver les scripts inutiles pour chaque page ou section du site.
Observer une réduction des requêtes et de la taille des pages.
Éthique : Réduit le nombre de requêtes serveurs, diminue la bande passante utilisée, et améliore les performances du site, ce qui en fait un outil essentiel pour une gestion efficace et écologique des ressources.
Accessibilité
WP Accessibility
(Gratuit)
Objectif : Plugin WordPress pour améliorer l’accessibilité des sites web en respectant les normes WCAG (Web Content Accessibility Guidelines).
Utilisation :
Installer et activer le plugin.
Activer les options comme l’ajout de labels aux formulaires, la correction des liens vides et l’ajustement des contrastes.
Vérifier les sections de ton site pour garantir l’accessibilité aux utilisateurs handicapés.
Éthique : Open-source et gratuit, ce plugin permet d’améliorer l’accès à ton site pour toutes les personnes, quelles que soient leurs capacités. Favorise l’inclusion numérique.
Axe DevTools
(Gratuit)
Objectif : Extension de navigateur pour analyser et corriger les problèmes d’accessibilité directement sur les pages web.
Utilisation :
Ajouter l’extension axe à ton navigateur.
Tester chaque page de ton site pour détecter les erreurs d’accessibilité.
Appliquer les corrections recommandées pour respecter les normes WCAG.
Éthique : Outil gratuit, open-source, et largement utilisé dans les pratiques éthiques pour rendre les sites accessibles à tous.
WAVE
(Gratuit)
Objectif : Outil en ligne gratuit pour tester l’accessibilité d’un site web et générer des rapports détaillés sur les corrections à apporter.
Utilisation :
Accéder au site WAVE et entrer l’URL du site à tester.
Examiner les rapports générés pour voir les erreurs d’accessibilité (contrastes, liens manquants, etc.).
Apporter les modifications recommandées sur le site.
Éthique : Gratuit et accessible à tous, permet d’améliorer l’accessibilité sans compromettre la confidentialité des utilisateurs.
UserWay
(Gratuit avec options payantes)
Objectif : Plugin d’accessibilité pour ajouter un widget facilitant l’accès aux fonctionnalités d’accessibilité sur ton site (agrandissement de texte, contrastes, etc.).
Utilisation :
Installer et activer le plugin sur WordPress.
Configurer le widget pour qu’il soit visible sur toutes les pages du site.
Laisser les utilisateurs ajuster l’affichage selon leurs besoins.
Éthique : L’outil offre une version gratuite avec de nombreuses fonctionnalités utiles, mais la version payante propose des options avancées.
Color Safe
(Gratuit)
Objectif : Outil en ligne pour vérifier et ajuster les contrastes de couleurs sur un site web afin de respecter les normes d’accessibilité.
Utilisation :
Entrer les couleurs actuelles de ton site dans l’outil.
Obtenir des suggestions de couleurs accessibles pour améliorer le contraste.
Appliquer les nouvelles couleurs suggérées sur ton site.
Éthique : Gratuit et en ligne, aide à rendre les interfaces web plus accessibles, favorisant une meilleure expérience utilisateur pour les personnes malvoyantes.
Color Contrast Checker
(Gratuit) – (par UserWay)
Objectif : Vérifier le contraste des couleurs entre le texte et l’arrière-plan pour garantir l’accessibilité des sites web.
Utilisation :
Accéder au site UserWay et entrer les codes hexadécimaux des couleurs que tu souhaites tester.
L’outil affiche un score de contraste et des suggestions pour améliorer l’accessibilité.
Éthique : Cet outil vise à améliorer l’accessibilité numérique pour tous, en s’assurant que les utilisateurs ayant des déficiences visuelles puissent naviguer confortablement sur les sites.
Adobe Color Contrast Analyzer
(Gratuit)
Objectif : Outil permettant de vérifier le contraste des couleurs pour s’assurer que le contenu est accessible, surtout pour les personnes ayant des déficiences visuelles.
Utilisation :
Télécharger l’application ou utiliser la version en ligne.
Sélectionner les couleurs du texte et de l’arrière-plan à l’aide de l’outil.
Analyser le contraste et obtenir des recommandations sur l’amélioration.
Éthique : Cet outil vise à garantir que le contenu web est accessible à tous, contribuant ainsi à une expérience utilisateur inclusive. En mettant l’accent sur l’accessibilité, Adobe montre son engagement envers la conception éthique.
DopelyColors
(Gratuit)
Objectif : Générateur de palettes de couleurs qui permet de créer, explorer et partager des combinaisons de couleurs.
Utilisation :
Visiter DopelyColors pour explorer les palettes existantes ou créer ta propre palette.
Utiliser l’outil pour obtenir les codes hexadécimaux et les valeurs RVB des couleurs choisies.
Éthique : Cet outil soutient la créativité tout en favorisant une bonne accessibilité en permettant aux utilisateurs de choisir des couleurs harmonieuses.
Nos Langues / Our Languages – Inclusionnaire
(Gratuit)
Objectif : Outil en ligne conçu pour aider à adopter une écriture inclusive dans la rédaction française. Il propose des solutions et des recommandations pour rendre le langage plus inclusif et représentatif.
Explorer les différentes rubriques concernant les termes et expressions à utiliser ou à éviter.
Consulter les conseils sur l’utilisation de mots neutres et l’accord des genres dans les phrases.
Éthique : Cet outil soutient l’inclusivité et la diversité linguistique en fournissant des ressources qui permettent d’éviter les biais de genre et de créer un langage qui reflète l’ensemble de la population.
Vitrine Linguistique – OQLF
(Gratuit)
Objectif : Outil de référence pour les utilisateurs du français, offrant des conseils et des ressources sur l’écriture inclusive et d’autres aspects de la langue.
Utilisation :
Accéder à la Vitrine Linguistique sur le site de l’Office québécois de la langue française (OQLF) à l’adresse suivante : Vitrine Linguistique.
Parcourir les différents sujets liés à l’écriture inclusive, aux règles grammaticales et aux recommandations linguistiques.
Appliquer les conseils fournis pour enrichir et rendre plus inclusif le contenu rédigé en français.
Éthique : La Vitrine Linguistique promeut l’usage d’une langue inclusive et respectueuse, favorisant une communication qui prend en compte la diversité des identités de genre et des expressions.
Inclusi
(Gratuit)
Objectif : Plateforme dédiée à la promotion d’une écriture inclusive, offrant des ressources et des conseils pratiques pour rédiger de manière respectueuse et représentative.
Explorer les différentes sections, notamment les conseils sur l’écriture inclusive, les guides pratiques et les outils disponibles.
Utiliser les recommandations pour intégrer des pratiques d’écriture inclusive dans tes documents et communications.
Éthique : Inclusi soutient l’égalité et la diversité à travers le langage, en proposant des solutions qui évitent les biais de genre et promeuvent un discours qui reflète la pluralité des identités. En favorisant une écriture respectueuse, Inclusi contribue à un environnement de communication plus inclusif.
Hébergement
Infomaniak
(Payant)
Objectif : Hébergeur éco-responsable utilisant uniquement des centres de données alimentés à 100 % par des énergies renouvelables.
Utilisation :
Créer un compte et choisir un plan d’hébergement adapté à ton site.
Migrer ton site ou installer un nouveau site via leur interface simple.
Gérer ton site via leur tableau de bord écologique.
Éthique : Infomaniak est un leader dans l’hébergement durable, compensant 200 % de ses émissions de carbone. Ils utilisent également des équipements durables et optimisent la consommation d’énergie de leurs serveurs.
Conseil : Leur interface intuitive facilite la gestion des sites pour les utilisateurs novices.
GreenGeeks
(Payant)
Objectif : Hébergeur web éco-responsable qui compense 3 fois l’énergie qu’il consomme en achetant des crédits d’énergie renouvelable.
Utilisation :
Choisir un plan d’hébergement adapté à tes besoins (WordPress, WooCommerce, etc.).
Installer WordPress via leur interface en un clic.
Gérer ton site via le cPanel ou l’interface utilisateur personnalisée.
Éthique : GreenGeeks s’engage à rendre le web plus vert en réinjectant 300 % de l’énergie consommée dans le réseau sous forme d’énergie renouvelable. Ils utilisent aussi des technologies pour optimiser la consommation énergétique.
Conseil : Parfait pour les utilisateurs de WordPress qui cherchent une alternative écologique facile à gérer.
PlanetHoster
(Payant)
Objectif : Hébergeur web engagé dans une politique de réduction de son empreinte écologique grâce à ses centres de données verts et ses solutions d’économie d’énergie.
Utilisation :
Créer un compte et sélectionner un plan d’hébergement adapté (Cloud, VPS, dédié).
Installer WordPress ou un autre CMS via leur interface d’hébergement.
Suivre les performances de ton site via leur tableau de bord.
Éthique : PlanetHoster optimise ses centres de données pour limiter la consommation d’énergie et privilégie des pratiques durables dans l’ensemble de ses infrastructures.
Conseil : Ils offrent également un hébergement mutualisé écologique pour les petits sites.
Objectif : Coopérative d’hébergement web qui favorise la transparence et les pratiques écologiques.
Utilisation :
Rejoindre la coopérative en tant que membre et choisir un plan d’hébergement.
Installer ton site via leur interface dédiée.
Profiter du soutien communautaire pour gérer ton site de manière durable.
Éthique : WebHosting.coop met l’accent sur une gouvernance partagée, la transparence et l’utilisation de centres de données alimentés par des énergies renouvelables. En tant que coopérative, les utilisateurs sont également des décideurs.
Conseil : Idéal pour ceux qui souhaitent s’investir dans une démarche éthique et collaborative.
Kualo
(Payant)
Objectif : Hébergement web écologique qui utilise des centres de données alimentés à 100 % par de l’énergie renouvelable.
Utilisation :
Sélectionner un plan d’hébergement adapté à ton site.
Installer WordPress ou un autre CMS via leur installation en un clic.
Gérer ton site via leur tableau de bord utilisateur intuitif.
Éthique : Kualo s’engage à offrir un hébergement neutre en carbone et durable. Ils travaillent également avec des projets de reforestation pour compenser davantage leur empreinte carbone.
Conseil : Excellent pour les PME cherchant à réduire leur impact écologique tout en bénéficiant d’un service fiable.
O2switch
(Payant)
Objectif : Hébergeur web 100% français proposant un hébergement mutualisé avec des performances optimales et un service client de qualité.
Utilisation :
Choisir le plan d’hébergement adapté à tes besoins sur le site d’O2switch.
Profiter d’un processus d’installation en un clic pour WordPress ou d’autres CMS.
Gérer ton hébergement via un panneau de contrôle intuitif.
Éthique : O2switch utilise des serveurs alimentés par des énergies renouvelables et s’engage à réduire l’impact environnemental de ses opérations. En tant qu’entreprise française, elle se distingue par son support client réactif et sa transparence sur ses pratiques d’hébergement.
OVH
(Payant)
Objectif : Fournisseur d’hébergement web français offrant des services de serveurs dédiés, VPS et hébergement mutualisé, avec un engagement vers des pratiques plus durables.
Utilisation :
Choisir parmi une variété de solutions d’hébergement adaptées à tes besoins (mutualisé, VPS, cloud, etc.).
Configurer ton serveur ou ton compte d’hébergement via le tableau de bord OVH.
Déployer ton site web en utilisant les outils et les services proposés.
Éthique : OVH, basé en France, a pris des mesures pour réduire son empreinte carbone, notamment en utilisant des centres de données écologiques et en mettant en œuvre des solutions d’économie d’énergie. L’entreprise s’engage également à utiliser des énergies renouvelables dans ses infrastructures.
Consommation de données
Matomo Analytics
(Gratuit avec options payantes)
Objectif : Outil d’analyse respectueux de la vie privée des utilisateurs, offrant une alternative éthique à Google Analytics.
Utilisation :
Installer directement le plugin sur WordPress.
Configurer le suivi des visiteurs de manière anonyme.
Analyser les données sans compromettre la vie privée des utilisateurs.
Éthique : Respecte le RGPD et n’utilise pas les données des utilisateurs à des fins commerciales. Les données sont stockées localement, offrant un contrôle total aux administrateurs du site.
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.
Recommencer avec toutes les combinaisons de couleurs possibles avec ta palette de couleurs.
Nota bene
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.
Je ne veux pas te déranger mais j'aimerais bien t'accompagner avec quelques cookies pendant ta visite ... C'est OK pour toi ?
À quoi vont me servir ces cookies : à avoir des statistiques et faire des mesures d'audience dans le seul but d'améliorer ton expérience future.
Fonctionnel
Toujours activé
L’accès ou le stockage technique est strictement nécessaire dans la finalité d’intérêt légitime de permettre l’utilisation d’un service spécifique explicitement demandé par l’abonné ou l’utilisateur, ou dans le seul but d’effectuer la transmission d’une communication sur un réseau de communications électroniques.
Préférences
L’accès ou le stockage technique est nécessaire dans la finalité d’intérêt légitime de stocker des préférences qui ne sont pas demandées par l’abonné ou l’internaute.
Statistiques
Le stockage ou l’accès technique qui est utilisé exclusivement à des fins statistiques.Le stockage ou l’accès technique qui est utilisé exclusivement dans des finalités statistiques anonymes. En l’absence d’une assignation à comparaître, d’une conformité volontaire de la part de votre fournisseur d’accès à internet ou d’enregistrements supplémentaires provenant d’une tierce partie, les informations stockées ou extraites à cette seule fin ne peuvent généralement pas être utilisées pour vous identifier.
Marketing
L’accès ou le stockage technique est nécessaire pour créer des profils d’internautes afin d’envoyer des publicités, ou pour suivre l’utilisateur sur un site web ou sur plusieurs sites web ayant des finalités marketing similaires.
