L’éco-conception web : comment commencer ?

par | Avr 15, 2021 | Marketing Digital & Innovation

 

  • 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.

  1. 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

  2. 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.
    This website is hosted Green - checked by thegreenwebfoundation.org

  3. 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.

  4. 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.

  5. 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.

  6. 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.

Lire d’autres articles

Marque employeur : Bien communiquer pour attirer les talents

La plupart des entreprises sont à la recherche des meilleurs talents. Cependant, toutes ne profitent pas de la marque employeur pour atteindre les candidats potentiels. Dans cet article, nous allons voir comment vous pouvez utiliser les actions de communication pour...

Reprise d’études à 36 ans, en travaillant : Témoignage

Comment, à 36 ans, je me suis engagée dans une reprise d'études 100% en ligne grâce à l'EDHEC Online ? C'était déjà assez compliqué d'être étudiante à 18 ans, mais être une étudiante de 36 ans, est une toute autre histoire. Je ne vais pas mentir - c'est difficile....

Pourquoi mettre en place une stratégie de communication digitale ?

Vous vous demandez peut-être pourquoi vous avez besoin d'une stratégie de communication digitale alors que vous pourriez simplement utiliser les médias sociaux. Bien que les médias sociaux soient un excellent moyen de communiquer avec votre public, ils ne suffisent...

Comment obtenir la certification Google Ads en 5 étapes simples

Google Ads est une plateforme publicitaire puissante qui peut aider votre entreprise à atteindre un public plus large. Si vous souhaitez obtenir la certification Google Ads, vous êtes au bon endroit ! En tant que consultante en communication & marketing, obtenir...

Conseils de Graphiste : Comment créer une communication géniale

Le graphisme est une affaire de communication. Il s'agit du processus de visualisation et d'élaboration d'idées pour communiquer avec un public cible. Mais en tant que graphiste indépendant, je constate souvent que beaucoup de gens ne comprennent pas l'importance du...

Générer des leads avec son site internet

Générer des leads est une étape indispensable pour l'acquisition de clients sur le web. Définir une stratégie pour développer votre business et vos méthodes pour gagner en visibilité, attirer des prospects et faire connaître votre offre. Voyons comment générer des...

Buyer Persona : comment définir votre client idéal

Le "buyer persona" est un outil très utilisé en marketing. On pourrait supposer que toutes les entreprises l'ont déjà créé et l'utilisent pour définir sa stratégie.Cependant, même les entreprises déjà bien établies ne l'exploitent pas toujours. Définir le portrait de...

Objectif SMART ? Méthode + Tableau de travail

Définir un plan ainsi que des buts à atteindre, est un bon moyen d’avancer en mettant toutes les chances de notre côté pour réussir. Avoir des objectifs aide à progresser. L'objectif SMART nous offre une direction vers laquelle aller. Cependant, se fixer des objectifs...

Marketing stratégique versus Marketing opérationnel

On parle beaucoup de Marketing. C'est un terme qui a souvent une image négative. Et pourtant, le marketing  au sens large est obligatoire pour la réussite de toute entreprise. On peut différencier le marketing stratégique du marketing opérationnel. Mais quelles sont...

32 questions à se poser pour établir sa stratégie de communication

Mon carnet de travail gratuit Ce carnet de travail est destiné à vous accompagner dans l’établissement de votre nouvelle stratégie de communication. À travers une série de questions, vous allez pouvoir définir votre positionnement stratégique et avoir une vision...