- Le numérique représente une part grandissante des émissions de CO2 dans le monde. En vous lançant dans l’éco-conception web, vous vous engagez à votre échelle pour réduire l’impact du numérique sur l’environnement.
- Se mettre à l’éco-conception web c’est revenir à l’essentiel, vous ne retenez que l’indispensable et vous supprimez le superflu.
- Opter pour l’éco-conception web c’est se donner toutes les chances d’innover au niveau technologique. Vous allez vous mettre dans la peau de votre cible, pour créer une expérience utilisateur optimisée.
La première fois que j’ai entendu parlé d’éco-conception, c’était il y a quelques années, par mon grand frère, Directeur technique chez Zenika, spécialisé dans le numérique responsable.
J’ai été longtemps perturbée d’apprendre qu’en tant que designer, j’étais l’une des personnes qui « polluaient » le plus le web. Et je ne savais pas comment corriger ça. Voici donc quelques pratiques faciles à mettre en place pour rendre vos sites éco-responsables.
L’éco-conception web c’est quoi ?
“ l’intégration de la réduction des impacts environnementaux dès la phase de conception d’un service numérique avec une vision globale sur l’ensemble du cycle de vie. Le même service rendu génère moins d’impacts s’il est éco-conçu. En intégrant les dimensions sociale et économique, elle mène à la conception numérique responsable . »
Source : Pôle éco-conception de St Etienne
Choisir un hébergement vert
C’est le cas d’OVH par exemple, qui est numéro 1 en Europe.
Les data centers de la société ovh sont aujourd’hui les plus éco-énergetiques au monde.
En 2010, l’hébergeur ovh investit dans un parc de huit éoliennes en Lorraine.Il y en a d’autres bien sûr, et si vous choisissez un hébergeur responsable et local, c’est parfait.
Faire du tri et ne conserver que le nécéssaire
Se conformer aux principes de l’éco-conception web c’est adapter le graphisme et l’ergonomie de son site pour parvenir à un design sobre et épuré.
Il s’agit de partir à la chasse au superflu, aux effets qui ne sont pas jugés nécessaires.
Un site qui respecte les fondamentaux de l’éco-conception web doit être responsive, c’est-à-dire que son affichage s’adapte aux différents écrans (ordinateur, tablette, smartphone).
Pour les éléments graphiques, privilégiez les icônes aux images, lorsque c’est possible !Sur chacune des pages de votre site demandez-vous pour chaque élément s’il mérite d’être présent. Supprimez les images superflues, les icônes, les typographies, qui n’apportent pas de valeur ajoutée.
L’objectif est d’aller à l’essentiel en retirant tout le superflu : Less is more.
En plus de faire un pas vers l’éco-conception web vous réduisez le temps de chargement de votre site. Cela s’avère être bénéfique pour l’expérience utilisateur et pour votre référencement naturel.
Réduire la taille des images
Bien utilisées, les images rendent votre site web plus convivial et plus attrayant. Elles apportent une valeur ajoutée à votre site.
Toutefois, chaque image de votre site constitue une requête HTTP distincte, elles sont donc polluantes. Donc si vous avez des images qui n’apportent pas de valeur ajoutée, il est préférable de les supprimer pour éliminer ces requêtes HTTP. Préférez une image optimisée sur chaque page, plutôt que 5 petites.
Par exemple, ce GIF drôle sur votre note de blog, en vaut-il la peine ? C’est possible… mais apprenez à faire des compromis chaque fois que vous ajoutez des images à votre contenu.
Enfin, assurez-vous de redimensionner et de compresser les images qui restent. Bien que cela ne réduise pas le nombre de requêtes HTTP en soi, cela réduira la taille de ces requêtes HTTP, ce qui les rendra plus rapides à charger.
Attentions aux Polices
Alors oui, en tant que designers, nous adorons les polices personnalisées.
Elles apportent du style, et offre de belles expériences à l’utilisateur sur votre site.
Cependant, vous devez faire attention à la façon dont vous les utilisez car chaque type de police personnalisée que vous utilisez ajoute une autre requête HTTP.Si vous comptez utiliser des polices personnalisées, réduisez-les au minimum.
Demandez-vous si vous avez vraiment besoin d’une police différente pour le titre et le corps de votre article ?
Avez-vous vraiment besoin des cinq graisses de police ? Ou pouvez-vous en choisir deux ?Il en va de même pour les polices d’icônes telles que Font Awesome et IcoMoon. Les polices d’icônes peuvent être utiles pour illustrées des valeurs par exemples, mais vous n’avez probablement pas besoin de charger plusieurs bibliothèques de polices d’icônes. Il est préférable de n’en choisir qu’une.
Enfin, si vous voulez aller plus loin et éliminer complètement les requêtes HTTP liées aux polices de votre site, vous pouvez envisager d’utiliser une pile de polices système. C’est moins joli et plus radical. Mais cela signifie également que vos visiteurs n’auront pas à charger de fichiers de polices pour rendre votre site. C’est idéal en éco-conception web.
Minimifier les CSS et javascript
Entre votre thème WordPress et vos extensions, votre site va probablement charger plusieurs feuilles de style CSS et fichiers JavaScript, ce qui signifie plusieurs requêtes HTTP juste pour que le navigateur télécharge les CSS et JS dont il a besoin pour rendre la page.
Pour réduire toutes ces requêtes séparées, vous pouvez combiner ces différents fichiers/feuilles de style en un seul fichier/feuille de style. Cette opération est appelée combinaison de fichiers ou concaténation de fichiers, selon l’outil que vous utilisez.
De nombreuses extensions WordPress de mise en cache comprennent des fonctions permettant de combiner des fichiers CSS et JavaScript. Par exemple, WP Rocket, vous permet d’activer les deux en quelques clics.
Éco-conception web : Pour Résumer
Il existe quelques principes simples à mettre en pratique pour construire un site éco-responsable. Mais, il y a bien d’autres choses encore à mettre en place pour optimiser ses sites, et pour le moment, je n’ai pas encore tout appliqué. Certaines choses sont plus complexes que d’autres. Vous retrouvez toute la liste dans le lien plus bas (collectif Green-it). L’idée n’est pas de se culpabiliser, mais de faire de son mieux.
Si votre site n’est pas optimisé, il vous faudra un peu de temps et de travail pour corriger vos mauvaises pratiques. Personnellement, j’y travaille encore. Mais ça vaut le coup non ?
J’essaye de faire des compromis entre design et écologie.
Je compte améliorer mon score sur mes propres sites dans les mois à venir, et sur les sites de mes clients.
Pour tester votre site vous pouvez utiliser Ecometer ou l’extension Chrome Green It-Analysis.
Et si vous souhaitez en savoir plus sur l’éco conception : rendez-vous sur le site du collectif Green-it.