9 conseils pour un site internet écologique + BONUS

Avoir son propre site internet est une plus-value de taille quand on a une entreprise. C’est un peu comme la vitrine des magasins de mode : on choisi les choses qu’on veut montrer aux client.e.s, on peut suivre notre propre ligne éditoriale.

Avec la dernière année que nous venons de passer, la présence sur le web des entreprises a explosé ! Tout le monde s’est replié sur le monde numérique pour ne pas mettre la clé sous la porte. Cependant, il faut rester vigilant et garder en tête que chaque produit numérique a une empreinte carbone. Découvre dans cet article mes 9 conseils pour un site internet écologique (avec une surprise à la fin ! 🎁).

1. Choisis un hébergeur web vert et local

La première chose à faire quand on parle de conception écologique de sites internet, c’est évidemment de réserver l’hébergeur web. Pour faire simple l’hébergement, c’est l’endroit où toutes les données, les images et les contenus de ton site internet seront stockées. Alors plus ton site sera lourd, plus cet endroit devra avoir une grande capacité de stockage.

C’est un peu comme la clé USB qui a commencé à bouder quand tu as voulu mettre toutes tes photos et vidéos à ton retour de vacances… Elle n’avait pas assez de place de stockage, alors tu as cherché une clé USB avec plus de mémoire (ou tu as fait le ménage sur la première !).

Un serveur c’est la même chose.

Les serveurs, les centres de données et les systèmes de refroidissement consomment énormément d’électricité.

Alors comment tu peux régler tout ça ? J’ai fait quelques recherches pour toi et j’ai trouvé des hébergeurs web écologiques qui utilisent de l’énergie renouvelable à 100 % pour faire rouler les serveurs. Pour avoir testé quelques-uns, je peux t’assurer qu’ils proposent un service client d’excellente qualité, avec des équipes techniques très agréables et serviables.

  • PlanetHoster (data center en France et au Canada)
  • Infomaniak (basé en Suisse)
  • Ex2 (basé au Canada)
  • O2Switch (basé en France)

Si je devais garder qu’un seul hébergeur web écologique, ce serait PlanetHoster sans hésiter. J’aime le fait qu’ils soient présents sur deux grands continents, qu’ils fonctionnent à 100 % avec de l’énergie renouvelable en France et à 100 % à l’énergie verte au Canada.

J’ai d’ailleurs une petite surprise ! Rendez-vous à la fin de l’article ! 🎁

2. Limite les images et compresse-les

Un site internet ne se met pas en place en claquant des doigts ! On a besoin, avant de s’attaquer au design (c’est-à-dire à quoi va ressembler notre site) on doit lister les contenus que l’on veut faire apparaître dessus !

Qui dit contenu, dit … ? Stockage ! Afficher du contenu sur son site internet, on l’aura compris, c’est utiliser de la mémoire sur les serveurs. Alors comment on fait ?

L’éco-conception, ce n’est pas seulement réduire la taille des choses et des ressources nécessaires (réduire l’encre pour imprimer un flyer par exemple). C’est aussi penser à la nécessité des choses : est-ce que j’ai vraiment besoin d’afficher cette image sur mon site internet ? Est-ce qu’elle apporte vraiment quelque chose à mon audience ? Est-ce qu’elle transmet le message que je veux ?

En construisant ton site internet, pose-toi la question si les images que tu veux afficher dessus sont réellement utiles et pertinentes. Garde seulement celles qui te paraissent les plus importantes et n’oublie surtout pas de les compresser (c’est-à-dire de réduire leur poids) !

La compression des images permet de réduire en moyenne de 80 % leur poids ! Alors plus tu as d’images à afficher, plus tes économies seront grandes. Pour te faciliter le travail, je te livre mon compresseur d’image préféré : CompressJPEG

3. Privilégie les images au format JPEG

Le format des images est aussi quelque chose de très important quand on parle de poids des images. Sur le web, tu as sûrement déjà croisé des PNG, des GIF et des JPEG.

Chacun de ces formats possède ses propres avantages et inconvénients. Par exemple, le format PNG gère la transparence alors que le JPEG ne le supporte pas. Je te conseille de privilégier le format JPEG pour des images à afficher sur ton site internet !

Les avantages du format JPEG :

  • qualité suffisante pour une utilisation digitale
  • prend très peu de place
  • peut être lu par tous les programmes

Si tu n’as vraiment pas le choix et que tu dois par exemple utiliser de la transparence dans tes images, penses à compresser tes images PNG avec le compresseur CompressJPEG.

4. Fait attention aux vidéos

Les vidéos sont très gourmandes en ressources, surtout si tu actives l’autoplay ! Les vidéos en autoplay sont énergivores et réduisent considérablement la vitesse de chargement de la page web. Même si elles sont parfaites pour transmettre des messages clairs et pertinents, essaye de limiter au maximum leur utilisation.

  • limite le nombre de vidéo que tu intègres
  • utilises la résolution la plus basse possible
  • désactives l’autoplay

5. Privilégie les polices de caractère natives

Pour afficher du contenu textuel à l’écran, tu devras utiliser des polices de caractères lisibles et adaptées à ton audience. Une police de caractère, c’est avant tout un fichier qui contient entre autres les lettres et les règles d’écriture comme l’espacement entre chaque lettre, etc. Un fichier a forcément un poids alors il faut aussi prendre tout ça en compte quand on parle d’éco conception de sites internet !

C’est quoi une police de caractère native ?

Une police de caractère native est une police qui est installée par défaut sur le système d’exploitation que tu utilises. Tu as sûrement déjà entendu parler de Times New Roman ou encore de Garamond ? Elles font partie des polices natives qu’on retrouve chez tous les utilisateurs de Windows.

Il faut donc faire attention à la définition de polices natives, car tout le monde n’a pas les mêmes polices installées sur son ordinateur.

Mais pas de panique, j’ai l’outil parfait pour prévenir quelques erreurs : je te présente CSS Fonts Stack ! Ce site internet te livre une liste complète des Web Safe Fonts ainsi que leur pourcentage d’utilisation en fonction des systèmes d’exploitation.

De quoi t’aider à choisir une police de caractère native qui est disponible chez la plupart du monde ! Pour t’assurer que les polices de caractère s’affichent comme tu veux, tu peux aussi créer une liste des polices de caractère à utiliser en priorité. C’est un peu plus complexe à mettre en place sans coder, mais je t’en reparlerai plus tard.

Une solution un peu moins éco responsable serait d’utiliser des bibliothèques de fonts libre de droit en ligne. Google Fonts en est un bon exemple.

Comment ça fonctionne ? Avec Google Fonts, tu peux choisir une police de caractère comme Montserrat et récupérer un lien d’intégration à ajouter dans la balise < head > du code HTML de ton site internet. Avec ce lien, tu vas pouvoir utiliser la police sur ton site internet. Pour qu’elle se charge correctement via le navigateur de tes utilisateurs, le serveur va devoir se connecter à la bibliothèque Google Fonts en faisant une requête pour récupérer la police.

Les bibliothèques de polices customisées sont donc un peu plus gourmandes en ressources, mais restent une solution alternative correcte pour diversifier ses polices.

Pense aussi à limiter le nombre de polices de caractères que tu utilise sur ton site : utilises une police pour les titres et une pour le corps de texte, c’est amplement suffisant !

6. Utilise des couleurs sombres (dark mode)

Tu as sûrement déjà entendu parler du dark mode ? Pour t’expliquer tout ça simplement, c’est la fonctionnalité qui permet à tes utilisateurs de changer les couleurs de l’interface de ton site internet : tu leur donnes le choix d’utiliser des couleurs sombres ou claires pour leur interface. De plus en plus d’organismes proposent le mode sombre pour l’utilisation de leur interface et c’est une très bonne chose !

Pourquoi le mode sombre est-il écologique ?

  • les pixels clairs demandent à votre ordinateur plus de lumières et donc plus d’énergie
  • il permet d’économiser la batterie de votre ordinateur portable (ou demande moins d’électricité pour votre PC fixe)

En plus de l’aspect écologique, le mode sombre permet d’apaiser les yeux.

7. Définis le parcours utilisateur de ton site internet pour que ton audience aille droit au but

Ne fais pas tourner l’utilisateur autour du pot pour qu’il devine lui-même l’objectif de sa venue sur ton site ! Plus un utilisateur reste longtemps sur ton site et plus il demande des ressources au serveur pour l’afficher sur ton navigateur.

Mais au fait, c’est quoi un parcours utilisateur ?

Le parcours utilisateur est la visualisation de toutes les relations que l’utilisateur a avec un produit digital ou réel. On peut l’imaginer un peu comme un arbre (qui modélise l’utilisateur) avec des branches (qui modélisent ses interactions avec un produit, par exemple un site web). Une branche pourrait modéliser la connexion de l’utilisateur sur la page d’accueil de votre site, puis une seconde branche pousserait et modéliserait son passage de la page d’accueil à la page contact et ainsi de suite.

Cet arbre des interactions n’est pas fixe. Et chaque utilisateur peut avoir plusieurs manières différentes de naviguer sur ton site internet.

Pourquoi définir un parcours utilisateur est important ?

Un parcours utilisateur est important pour guider ton audience dans sa navigation sur ton site internet. Tu leur montres le chemin à prendre pour qu’ils fassent l’action que tu souhaites sur ton site (par exemple remplir un formulaire, ou s’inscrire à ta newsletter).

Comment définir un parcours utilisateur ?

C’est en soit une des parties les plus importantes du travail d’un ou d’une UX UI designer. On ne peut pas se proclamer UX UI designer d’un claquement de doigts et t’apprendre à bâtir un parcours utilisateur digne de ce nom me prendrait bien une journée de formation.

Tu as besoin d’aide pour affiner ton parcours utilisateur ? Contacte moi pour faire appel à mes services.

8. N’utilise pas de CMS si tu n’en as pas de réels besoins

L’utilisation de CMS comme WordPress n’est pas toujours adaptée à tes besoins. Si tu n’es pas dans l’optique d’ouvrir une boutique e-commerce ou de gérer un blog, alors un site sur-mesure sans back-office est sûrement la solution la plus avantageuse pour toi.

En installant un CMS sur ton site internet, tu installes de nombreux fichiers qui ne te seront sûrement jamais profitables ! Tu alourdis donc ton site internet sans le savoir et ça peut réduire considérablement le temps de chargement de tes pages.

9. Limite le nombre de fichiers JavaScript

On entre dans les conseils un peu techniques, mais les fichiers JavaScript doivent être limités.

Les fichiers JavaScript (en plus d’avoir un poids par définition) sont des fichiers contenant du code qui doit être lu et compilé par ton navigateur. Ça fait donc plus de travail pour ton navigateur et ça allonge donc le temps de chargement de ta page web !

10. BONUS : vérifie l’éco-conception de ton site web avec des outils simples

Beaucoup de compagnies se sont mises à penser à leur impact sur l’environnement avec leur produits digitaux. Mais comment mesurer cet impact ? Pour finir cet article, je te livre mes outils préférés pour mesurer cet impact !

  • installe l’extension GreenIT (disponibles sur Mozilla Firefox et Chrome) pour mesurer l’éco index d’un site internet : ouvre la console de développeur en appuyant sur (F12) sous Mozilla Firefox et clique sur l’icône « GreenIT ». Lance l’analyse en cochant la case « activer l’analyse des bonnes pratiques » et découvre l’impact de ton site internet sur l’environnement.
  • utilise Website Carbon Calculator pour connaître ton empreinte sur l’environnement

Tu as besoin d’un site internet sur-mesure et tu aimerais réduire son impact sur l’environnement ? Alors on se retrouve très bientôt pour de nouveaux conseils ! En attendant, rejoins-moi sur ma page Instagram où je te livre des petites astuces au quotidien.

Et non ne t’inquiète pas ! Je n’ai pas oublié la surprise que je t’ai promis en début d’article : avec PlanetHoster on t’offre 10 % DE RABAIS sur ta solution d’hébergement préférée avec le code PHA-NUANCIA ou en cliquant juste ici ! 💚 Tu n’as maintenant plus aucune excuse pour réduire l’empreinte écologique de ton site internet !

💚

Tu aimeras aussi