La bonne nouvelle c’est que vous pouvez maitriser la pollution générée par votre site en adoptant l‘éco-conception web !
L’éco-quoi ? Je vous explique tout dans cet article.
Sommaire
Qu’est ce que l’éco-conception web ?
L’éco-conception web c’est l’art de créer un site avec l’empreinte carbone la plus faible possible. Il y a de nombreuses façons d’aborder l’éco-conception selon le type de site souhaité et la solution technique retenue pour la création de ce dernier.
Je vous propose aujourd’hui d’explorer l’éco-conception sous WordPress : une solution Open Source et largement utilisée dans le monde.
Alors oui, WordPress n’est pas la solution la plus légère. Un site en pur HTML et CSS aura une empreinte plus faible. Mais encore faut-il maitriser ces languages !
WordPress offre une interface visuelle, simple et efficace pour modifier son site sans nécessairement avoir à toucher au code. Une solution idéale pour les entrepreneurs ou les petites entreprises que j’accompagne !
Vous n’êtes pas encore expert en HTML/CSS ? Vous avez à coeur de réduire la pollution numérique de votre entreprise ? L’éco-conception web sous WordPress est faite pour vous.
Attention, la pollution numérique de votre business ne concerne pas uniquement votre site web.
Vos contenus sur les réseaux sociaux, vos e-mails et votre consommation de vidéos en font également partie. L’éco-conception de votre site est néanmoins un bon point de départ !
Pourquoi un site éco-conçu ?
Vous hésitez encore ? Vous avez du mal à voir l’intérêt de l’éco-conception web ? Voici 5 arguments pour vous faire changer d’avis !
Votre business est éco-friendly ?
Donnez de la cohérence à votre démarche en pensant un site tout aussi éco-responsable que vos produits ou services !
Vous aimez la performance ?
Un site éco-conçu sera d’autant plus léger et rapide à charger (même sur mobile en 2G).
Et vous ne le saviez peut-être pas mais un site dont les pages se chargent rapidement sera mieux référencé sur Google que ses concurrents les plus lents !
Less is more
Un site éco-conçu repose sur la simplicité, la sobriété. (On parle d’ailleurs de sobriété numérique).
Vous obtenez ainsi une interface simple de prise en main, le parcours client est clair, l’expérience est fluide, sans frustrations.
Vous avez des délais courts ?
L’éco-conception web repose sur la priorisation des fonctionnalités et la recherche de compromis. Cette méthodologie vous aide à hiérarchiser vos besoins pour avancer plus rapidement !
J’ai tout donné pour vous convaincre. Maintenant, hop, passons à l’action !
Attendez, avant de poursuivre, j’espère que vous avez votre brief de site internet sous les yeux. C’est bon ? Allons-y.
Web design et Éco-conception web
L’éco-conception web c’est aussi une affaire de design !
Effectivement, il ne vaut mieux pas vous précipiter sur la phase d’intégration sur WordPress. Prenez le temps du Web Design pour peaufiner votre site sous forme de maquettes.
Pourquoi ? Tout simplement parce que des maquettes c’est beaucoup simple à modifier qu’un site WordPress !
Une fois vos maquettes parfaitement éco-conçues nous pourront passer à l’intégration sous WordPress.
D’ailleurs, pour vous expliquer le plus clairement possible la phase de Web Design dans l’éco-conception web j’ai fait appel à Ludivine, ma super binôme Eco-designer.
Éco-conception, Web design et identité de marque
Nous parlions tout à l’heure de cohérence dans les valeurs portées par votre business et vos actions concrètes.
L’éco-conception ne se limite pas à votre site et son web design. Elle peut également s’appliquer à votre identité de marque (Charte graphique, packaging, support de communication print…).
Concrètement, éco-concevoir de son identité de marque c’est :
- Prendre le soin de choisir des couleurs économes à l’impression
- Choisir une police d’écriture avec une surface d’encrage minime
- Concevoir un packaging intelligent, minimaliste, fonctionnel et recyclable
- Préférer un tampon avec son logo et ses informations de contact plutôt que d’imprimer des centaines de cartes de visite
Alors si vous n’êtes pas du genre à faire les choses à moitié, trouvez un super Eco-designer comme Ludivine pour vous accompagner dans une démarche d’éco-conception plus globale ! 😉
Les maquettes, au coeur de l’éco-conception web
Revenons à notre Web Design et nos maquettes.
Il existe différents types de maquettes, elles varient selon le niveau de précision.
En éco-conception web on commence par les maquettes Wireframes. Comme un squelette de son futur site, elles permettent de se concentrer sur la structure.
Lors de la création de la maquette wireframe on va pouvoir commencer à réfléchir à l’arborescence de son site, aux contenus à produire, au parcours client, aux fonctionnalités essentielles.
Généralement, la maquette Wireframe représente toutes les pages du site pour obtenir une vue d’ensemble.
Je vous recommande d’utiliser Figma ou Balasmiq pour créer des maquettes wireframes en collaboratif.
Une fois les maquettes Wireframes établies, on peut passer aux maquettes graphiques.
Les maquettes graphiques correspondent à l’habillage des maquettes wireframes, à leur mise en forme.
On va donc se pencher sur les couleurs, les typographies, les medias utilisés sur le futur site.
À ce stade de l’éco-conception web on va déjà adopter une forme de sobriété en :
- Limitant le nombre de photos
- En évitant la vidéo au profit de GIFs
- En se limitant à une ou deux typographies
- En oubliant les animations trop compliquées
- En faisant des maquettes « mobile first », destinées prioritairement au mobile
- En trouvant des alternatives pour dynamiser la visite !
Contrairement aux maquettes Wireframes, vous n’êtes pas contraint de faire une maquette graphique pour chaque page de votre site.
Concentrez-vous sur les pages les plus stratégiques comme la page d’accueil ou une fiche produit.
Vous pouvez aussi demander à votre intégrateur de suivre un Design System, préparé en amont par votre Designer pour mettre en forme les pages secondaires.
Une fois qu’une maquette graphique est validée, elle est envoyée telle quelle au développeur pour l’intégration.
Bien sûr, préférez un designer et un développeur tous deux familiers avec l’éco-conception web.
Hiérarchiser dès la conception des maquettes
Prendre le temps de travailler sur vos maquettes va vous aider à mieux vous projeter.
Ai-je vraiment besoin d’un slider ? Comment simplifier ma navigation sur mobile ? Cette vidéo en fond est-elle nécessaire ? Est ce que cette animation complexifie la navigation ?
Ce sont des questions qu’il vaut mieux se poser lors de la création des maquettes !
C’est le moment de hiérarchiser les fonctionnalités que vous avez initialement prévues.
Pour plus d’efficacité, entourez-vous de votre designer et de votre développeur ! Leur regard vous aidera à prendre du recul et prioriser.
Mais surtout, n’oubliez pas de vous munir de vos personas, ou encore mieux, de faire tester votre interface à des beta-testeurs !
Vous concevez ce site pour votre utilisateur final et non pas pour vous. Prenez donc le temps d’identifier précisément ses besoins et attentes.
Prioriser avec la méthode MoSCoW
La méthode MoSCoW permet de classer et de prioriser les fonctionnalités de votre site éco-conçu.
Commencez par identifier vos fonctionnalités.
Par exemple pour un e-shop avec une dizaine de références haut-de-gamme : une whishlist, paiement en 3x sans frais, paiement par CB, carte dynamique pour localiser le magasin physique.
Puis répartissez vos fonctionnalités entre les quatre catégories suivantes :
- Must have : Cette fonctionnalité est indispensable. Sans elle, le site ne fonctionne pas.
- Should have : Cette fonctionnalité est importante mais elle n’est pas pour autant vitale au projet.
- Could have : Cette fonctionnalité est peu importante. On la réalisera si il reste des ressources à disposition.
- Won’t have but would like : Cette fonctionnalité est vraiment optionnelle. Elle pourra être réalisée dans une version ultérieure du site.
Si l’on poursuit l’exemple du e-shop, voici la hiérarchisation que je proposerai :
| Must have | Paiement par CB (Essentiel au fonctionnement du site) |
| Should have | Paiement 3 fois sans frais (Intéressant pour augmenter le nombre de ventes sur des paniers élevés) |
| Could have | Whishlist (Ce n’est pas essentiel sur un e-shop avec peu de références) |
| Won’t have but would like | Carte dynamique (Commençons par une image !) |
Bonnes pratiques pour un site internet éco-conçu sous WordPress
Se tourner vers un hébergement vert
L’hébergement de votre tout nouveau site va nécessiter de l’énergie et ainsi générer une forme de pollution numérique.
De plus en plus de sociétés d’hébergement web offrent une alternative verte à l’hébergement classique.
J’utilise pour ma part Infomaniak avec de nombreux clients sensibles à l’éco-conception web.
Pour vous faire une idée, je vous invite à consulter ce comparatif d’hébergeurs web verts.
Utiliser un thème le plus léger possible
WordPress fonctionne avec des « thèmes ».
Il en existe énormément, vous trouverez à différents prix des thèmes spécialisés, des thèmes polyvalents, des thèmes spécialisés pour le e-commerce…
Seulement, ces thèmes sont souvent très lourds. Ils comprennent des multitudes de fonctionnalités, scripts et extensions pour convenir au plus grand nombre. Le problème, c’est que vous risquez de n’utiliser que 30% de ce qui est inclus dans votre thème.
Ma solution ? On oublie les thèmes trop lourds et on se tourne vers les thèmes les plus légers du marché.
Je recommande le thème Generatepress, réputé pour être l’un des thèmes WordPress les plus légers. Je l’utilise sur mes projets d’éco-conception web dans sa version premium pour rendre l’édition de contenus plus simple !
Et les extensions ?
Pour pimper votre site WordPress et lui apporter de nouvelles fonctionnalités vous allez pouvoir ajouter des extensions.
Attention cependant à ne pas en abuser. Chaque extension ajoutée à votre site WordPress l’alourdit !
On en revient donc à la priorisation de la méthodologie d’éco-conception web.
Cette fonctionnalité est-elle essentielle pour ma cible ? Est-ce que je peux faire autrement ?
Si cette fonctionnalités fait partie de vos must have, choisissez votre extension en fonction de son poids, de sa pertinence, des ses notes et de sa fréquence de mise à jour !
Évitez particulièrement les extensions ultra-complètes et lourdes si vous ne comptez utiliser qu’une fonctionnalité sur les 50 proposées.
Les médias, au coeur de l’éco-conception web
En éco-conception web on apporte une attention particulière aux médias.
Les médias (photos, vidéos, gifs, …) sont des fichiers plutôt lourds selon leur traitement.
L’idéal est de les limiter au maximum. Pourtant les medias restent essentiels pour de nombreux business. On va donc trouver des compromis.
Par exemple, pour le eShop d’une marque de mode on va difficilement pouvoir se passer de photos.
En revanche, quel est l’intérêt pour un comptable de s’obstiner à ajouter des images libres de droits dans ses articles ?
Si vous êtes déterminé à apporter des medias sur votre site web, suivez à minima les règles d’éco-conception web suivantes :
- Importez vos images dans des dimensions qui correspondent à son utilisation. Par exemple, pour un logo préférez une image de 200x100px plutôt que 2000x1000px.
- Compressez vos images avec un logiciel. Je vous recommande Squoosh pour redimensionner et compresser.
- N’utilisez le format .png que si vous avez besoin de transparence sur votre image. Le format .jpg est généralement plus léger.
- Préférez un gif à la vidéo pour dynamiser votre site
- Raisonnez en Kb pour mesurer le poids de vos images. En règle générale j’essaie de ne pas dépasser les 100kb par image.
Et le code ?
Pour les plus aguerris, faites également attention à votre code et plus particulièrement aux scripts que vous utilisez. Par exemple, le jQuery peut considérablement ralentir votre site. Encore une fois, tout repose sur votre capacité à faire de compromis pour un site éco-conçu le plus léger possible !
Analyser les performances de son site éco-conçu
Ça y est ! Votre site éco-conçu est enfin en ligne.
Ne vous arrêtez pas en si bon chemin !
Prenez le temps de paramétrer un outil de tracking sur votre site pour analyser ses performances et les habitudes de vos visiteurs !
Vous n’êtes pas à l’aise avec Google Analytics et savez pertinemment que vous ne l’utiliserez pas à 100% de ses capacités ?
Passez à un outil de tracking plus simple comme Matomo. Vos données seront plus compréhensibles. Cerise sur le gateau, Matomo est un outil de tracking éthique sans influence externe (vous maitrisez à 100% les données récoltées) !
En plus de votre outil d’analyse marketing, armez-vous d’un outil de mesure de performance au chargement.
Google Page Speed et GTMetrix vous aident à analyser le temps de chargement de vos pages web et vous donnent des conseils pour améliorer vos performances.
Finalement, pour récompenser vos efforts en éco-conception web, rendez-vous sur websitecarbon.com pour calculer l’empreinte carbone de vos pages web !
Petit bonus : websitecarbon.com vous permet également d’afficher votre score sur votre site web ! Vous pouvez trouver le mien dans mon footer 🙂
Suivi et entretien de son site éco-conçu
Vous pensiez que c’était fini ? Pas encore, l’éco-conception web c’est du travail !
Le suivi et l’entretien de votre site est crucial en éco-conception. Rédigez des guidelines pour vous assurer que vos bonnes pratiques seront appliquées par l’ensemble de votre équipe.
Faites un suivi régulier des mises à jour nécessaires, des contenus publiés et de vos statistiques. Surtout, ne cédez pas à la tentation de l’ajout intempestif de fonctionnalités. Analysez. Prenez du recul. Écoutez vos utilisateurs. Et seulement après, envisagez l’ajout de fonctionnalités.
J’espère que vous avez appris de nouvelles choses et que j’ai pu vous convaincre de passer à l’éco-conception web !
Vous voulez approfondir le sujet ? Passer à l’action ? Je suis à votre écoute !