close

Découvrez nos offres pour faire du digital le levier de votre croissance !

download
Modèles

Téléchargez le Guide Ultime de gestion de projet digitale pour vous aider à piloter vos transformations et faire les bons choix !



Vous avez entendu parler d'éco-conception web ? Vous voulez comprendre comment certains ont réussi à faire des sites plus légers, moins gourmands, plus écologiques ? Voici quelques exemples de sites éco-conçus pour vous inspirer.

L’empreinte écologique du web est conséquente. On estime que si Internet était un pays, il serait le sixième consommateur d’énergie sur la planète ! L’éco-conception web vise à rendre le web moins gourmand en ressources. C'est d'autant plus important que les progrès technologiques (augmentation des capacités de débit, complexité croissante des interactions digitales, ...) ont eu pour corollaire une augmentation impressionnante du poids des pages : ainsi, en 20 ans, le poids des pages a été multiplié par 115 (de 1995 à 2015, selon Frédéric Bordage du blog greenit.fr) !

La démarche d'éco-conception Web consiste à optimiser son site Internet pour limiter son impact environnemental. Dans un précédent article, nous décryptions les bonnes pratiques de l’éco-conception web. Pour aller plus loin, nous vous proposons de découvrir quelques exemples de sites web éco-conçus.

Les outils et indicateurs pour un audit vert de votre site

Il existe une multitude d’outils gratuits vous permettant de mesurer l’empreinte écologique de votre site web comme :

  • EcoIndex, qui vous indique votre score de performance environnementale et vous donne la possibilité de vous situer par rapport à la médiane ;
  • PageSpeed Insights, un outil Google qui vous informe sur la vitesse de chargement de vos pages sur tous les appareils et qui vous indique le poids de vos pages et les moyens de le diminuer ;
  • Ecometer, qui analyse l’impact environnemental de votre site en se basant sur les 115 bonnes pratiques de référence de l’éco-conception et vous fournit des conseils concrets.

Les principaux critères qui déterminent votre score sont :

  • La complexité de la page : mesurée par le nombre total d’éléments à afficher ;
  • La bande passante : en fonction des besoins en bande passante de la page ;
  • La charge serveur : liée au volume de requêtes HTTP. 

Des exemples de sites web éco-conçus

Pour mieux comprendre l’éco-conception, rien de tel que des exemples concrets ! Chez Adimeo, nous sommes loin d’être exemplaires mais nous y travaillons ! Nous savons que notre site est plutôt complexe, avec trop de requêtes HTTP, des polices non standardisées ou des feuilles de style non minifiées : de nombreuses pistes pour améliorer notre empreinte environnementale !

Nous avons choisi de vous montrer les bons élèves, qui ouvrent la voie en termes d’éco-conception web. Nous avons testé les principaux critères pour établir un palmarès !

Exemple 1 : Ihaveagreen.fr, notre lauréat !

eco-conception

 

I Have a Green crée des sites web éco-conçus et ça se voit ! La page d’accueil donne le ton, avec un design simple, épuré et minimaliste. Sur EcoIndex, tous les indicateurs sont au vert pour la page d’accueil du site.

Analyse du site I Have a Green

Note globale : A (94,8/100)

Plugins :  0 plugin

Empreinte environnementale

  • Empreinte GES : 1,1g CO2e
  • Empreinte eau : 1,65cl eau

Complexité de la page : 3 éléments sur la page d’accueil

Bande passante : 0 Ko !

Charge serveur : 1 requête HTTP

De plus, la vitesse de chargement est excellente :

Vitesse de chargement de la page sur Desktop : 99/100

Vitesse de chargement de la page sur Mobile : 100/100

Autres bonnes pratiques : le site n’utilise pas de police personnalisée et aucune image n’est redimensionnée.

 

Exemple 2 : EcoIndex.fr, le testeur testé !

Il nous semblait intéressant d’évaluer l’outil de référence pour confirmer qu’il met en pratique les critères utilisés ! Et c’est le cas puisque EcoIndex obtient une très bonne note dans son propre outil !

Analyse du site EcoIndex

Note globale : A (84,9/100)

Plugins : le site n’en utilise aucun !

Empreinte environnementale

  • Empreinte GES : 1,3g CO2e
  • Empreinte eau : 1,95cl eau

Complexité de la page : 79 éléments sur la page d’accueil

Bande passante : 255 Ko

Charge serveur : environ 12 requêtes HTTP

La vitesse de chargement est également excellente :

  • sur Desktop : 99/100,
  • sur Mobile : 94/100

 

Exemple 3 : Mcdonalds.fr, une bonne surprise !

Site de McDonald's

McDonald’s est très engagé en matière de développement durable. Et son site semble tenir compte des bonnes pratiques d’éco-conception, au moins au niveau de sa page d’accueil. Sa note globale sur EcoIndex est très élevée.

Analyse du site de McDonald's

Note globale : A (93,1 /100)

Plugins : 2 plugins sur la page d’accueil (un axe d’amélioration)

Empreinte environnementale

  • Empreinte GES : 1,17g CO2e
  • Empreinte eau : 1,76cl eau

Complexité de la page : 11 éléments sur la page d’accueil

Bande passante : 80 Ko

Charge serveur : 1 requête environ

La vitesse de chargement est très satisfaisante sur desktop mais beaucoup moins sur mobile :

  • sur Desktop : 89/100
  • sur Mobile : 27/100

 

Exemple 4 : Verdot Ips, le choix de la sobriété

eco-conceptionexemple

VERDOT Ips est une PME qui fabrique des équipements spécifiques pour l’industrie pharmaceutique. Son site web a été éco-conçu, dans une démarche de sobriété numérique. Sa page d’accueil obtient une note B sur EcoIndex grâce à un bon compromis entre performance et impact environnemental.

Analyse du site de VERDOT Ips

Note globale : B (74,9/100)

Plugins : 0 plugin

Empreinte environnementale

  • Empreinte GES : 1,5g CO2e
  • Empreinte eau : 2,25cl eau

Complexité de la page : 286 éléments sur la page d’accueil

Bande passante : 618 ko

Charge serveur : 19 requêtes

La vitesse de chargement est satisfaisante sur desktop comme sur mobile :

  • sur Desktop : 95/100
  • sur Mobile : 89/100

Le site de VERDOT Ips respecte ainsi les bonnes pratiques, notamment en n’ayant recours à aucune police personnalisée.

 

Voici donc à quoi ressemblent des sites web éco-conçus ! Il n’a pas été facile de trouver des exemples d’éco-conception web pour cet article, peu de sites semblent avoir adopté cette démarche à ce jour ! Attention, nous n’avons testé que les pages d’accueil. Il arrive parfois que la page d’accueil soit optimisée, sans que les autres pages du site le soient. Appliquer l’éco-conception à son site en entier permet d’avoir un impact significatif et durable.

Par ailleurs, notre test confirme qu’éco-conception web et performance ne sont pas incompatibles ! C’est même le contraire : certaines bonnes pratiques d’éco-conception web favorisent la performance du site.

Webinar - Quels outils pour piloter la performance de vos sites Web ?

Pour en savoir plus sur l’impact environnemental du numérique, RDV sur GreenIT.fr, la communauté des acteurs du numérique responsable. Vous y trouverez notamment une checklist des 115 bonnes pratiques d’éco-conception pour rendre votre site web plus éco-responsable.

Image mise en avant pour l'article
Nathalie Ferreira
Pourquoi s'abonner à
notre newsletter ?
Pour recevoir tous les mois, un condensé de contenus utiles et pertinents pour votre transformation digitale !