Catégorie : Sobriété du web

Analyse des 10 sites nominés mobile excellence par Awwwards

Reading Time: 7 minutes

Awwwards est le site qui référence des sites web qui sortent du lot de par leur conception, expérience utilisateur proposée et leur design. C’est une véritable référence pour les webdesigners et développeurs web dans le monde entier. Le concept est simple : chaque jour, des créateurs soumettent leur site web sur Awwwards. Le site est déposé dans la catégorie des nominés « Site of the day ». Ce dernier est jugé par des membres de la communauté Awwwards composée de designers, développeurs et agences. Le meilleur site de chaque jour de l’année paraît dans le livre « The 365 Best Websites Around the World ». Tous les mois, un site est élu « Site of the month ». À la fin de l’année, lors d’une cérémonie, le jury choisit le meilleur de l’année.

Le site Awwwards s’est étoffé depuis sa création en 2009. Les nominés sont répartis en 6 groupes :

  • Sites of the Day
  • Sites of the Month
  • Sites of the Year
  • Developer
  • Mobile Excellence
  • Honorable

Il existe également des thématiques de site qui sont appelées Categories et qui sont au nombre de 26.

Des sites très jolis mais pas forcément sobres ?

Notre curiosité nous a amené à analyser 10 sites nominés sur Awwwards. Nous avons sélectionné des sites nominés dans le groupe « Mobile Excellence ». Ces sites sont jugés sur 4 critères :

  • Friendliness
  • Performance
  • Usability
  • PWA

Awwwards attribue un score pour chacun des critères ci-dessus, ce qui permet de calculer ensuite un score total.

Chez Greenspector, nous avons décidé d’aller plus loin dans l’analyse de ces sites pour savoir s’ils répondaient bien à nos critères de sobriété.

Analyse complémentaire des sites en bas du classement 

Betterup.com

Plus de 200 requêtes HTTP pour charger la page puis 1 requête environ toutes les 10 secondes. Les requêtes pointent vers une cinquantaine de domaines.

On retrouve ces requêtes sur la RequestMap (outil créé par Simon Hearne) :

SI la présence du bandeau pour les cookies est légitime, le chatbot occulte une bonne partie de l’affichage, ce qui est problématique pour un site récompensé par un Awwward. Ce chatbot est-il vraiment nécessaire ? Ne devrait-il pas s’ouvrir (et se charger) qu’à la demande de l’utilisateur ? 

A noter également (mais c’est malheureusement souvent le cas) qu’une trentaine de requêtes sont déclenchées dès qu’on accepte les cookies.  

Lorsqu’on scrolle, le nombre de requêtes et la quantité de données transférées augmentent considérablement suite à l’intégration directe d’une vidéo Vimeo. L’utilisation du pattern facade aurait été plus judicieux. On remarque aussi un carrousel dont l’utilisation sur mobile est difficile (swipe exclusivement). 

Le lazy-loading est bien implémenté mais on note différents effets visuels superflus (notamment parallaxe) qui viennent encore alourdir le site, notamment au scroll.  

Lorsqu’on scrolle jusqu’au bas de la page, on en est à plus de 400 requêtes HTTP et plus de 12 Mo de données transférées.

Enfin, le plugin Wave détecte une quarantaine d’erreurs d’accessibilité et une trentaine d’erreurs de contraste.

Nous avions précédemment abordé le sujet des sites sobres mais nous sommes typiquement ici sur un site où un design très chargé ainsi que de trop nombreux scripts tiers dégradent fortement l’expérience utilisateur. On retrouve notamment cela lorsqu’on observe les mesures pendant les étapes de pause :

Dans l’idéal, il ne devrait pas y apparaître de transferts de données ni de pics aussi marqués pour la vitesse de décharge de la batterie. Ceci peut être dû à des services tiers ou à des animations.

Datagrid.co.jp

Pour ce site, le chargement ne finit jamais vraiment, comme l’attestent les outils de développeur de Firefox :

Les stats ici (temps de chargement compris) ne cessent jamais d’augmenter.  

Le site a sans nul doute un intérêt du point de vue du design pur mais il s’agit ici d’un site qui n’est absolument pas utilisable :  

  • Les mouvements perpétuels (sans possibilité de contrôle) le rendront inaccessibles pour certains utilisateurs.  
  • Les requêtes en continu vers une quinzaine de domaines mettront à mal le forfait data d’une partie des utilisateurs.  
  • Les erreurs de contraste sont bel et bien présentes et la navigation au clavier plus que laborieuse.  

Tout ceci se traduit sans surprise par un impact environnemental plus que conséquent avec en continu des transferts de données et sollicitation de la batterie des smartphones utilisés, même en background.

Webflow.com

Les remarques sur les deux sites précédents s’appliquent en grande partie à celui-ci. Lors du chargement, on compte plus 200 requêtes pour 2 Mo transférés. En effet, on compte plus de 57 domaines, ce qui correspond bien au slogan du site proposant de faire de votre site web un atout marketing.  

Si la taille des images est plutôt bien maîtrisée, l’essentiel du poids du site provient du JS avec plus de 100 requêtes dont une dizaine de plus de 100 ko chacune.

Le lazy-loading des images ne semble pas avoir été implémenté et le design de cette page d’accueil paraît de toute façon beaucoup trop lourd.  

En revanche, les erreurs rapportées par le plugin Wave sont quasiment inexistantes.  

Bref, il y aurait encore à faire afin de rendre cette page d’accueil plus sobre, de mieux intégrer certains éléments mais aussi de limiter le recours aux services tiers.  

Analyse complémentaire des sites en haut du classement 

Ladispensadelchianti.it

Ce site est plutôt léger (tout juste au-dessus d’1 Mo) et rapide à charger. On arrive tout de même à 60 requêtes HTTP pour le premier chargement, réparties sur une quinzaine de domaines.  

Cette page d’accueil est visuellement riche mais reste claire. Les images sont optimisées (notamment via l’utilisation du format webp). Il est regrettable que le lazy-loading ne soit pas implémenté. 

Le cache est globalement bien géré, ce qui est une très bonne chose.  

En revanche, on remarque que les polices sont plutôt volumineuses, pour un total de 5 requêtes. Il faudrait privilégier les polices systèmes voire une police variable afin de limiter le nombre de requêtes.  

Aussi, du point de vue du RGPD, il serait préférable d’éviter les fonts Google ou de les héberger soi-même. 

Quelques erreurs d’accessibilité apparaissent avec Lighthouse.  

Il faudrait limiter les animations au scroll et les effets au déplacement du curseur semblent superflus (voire nuisibles pour l’utilisateur). 

Ingridparis.com

Ce site est en apparence assez sobre. Pas de requêtes vers des services tiers et des images globalement optimisées mais trop nombreuses. La mise en place du lazy-loading (de préférence nativement) serait une très bonne chose.  

Le chargement est rendu plus long par le chargement par défaut d’une vidéo d’1 Mo ainsi que 20 requêtes environ rien que pour les polices. 

Le cache est en revanche implémenté sur quasiment tous les éléments. 

Même si Wave remonte peu d’erreurs d’accessibilité, les animations devraient être moins présentes au scroll sur la page. Actuellement, elles font de l’étape de scroll l’étape la plus impactante du point de vue de la vitesse de décharge de la batterie.

Azzerad.com

La tendance observée jusque-là semble se confirmer : de nombreuses images (optimisées mais la plupart sont chargées deux fois) et beaucoup d’animations.  

15 requêtes rien que pour les polices mais assez peu de requêtes vers des services tiers.  

Bref, un site qui gagnerait à être un peu plus sobre dans sa présentation et à aller plus loin dans l’optimisation technique pour éviter que les efforts (notamment d’optimisation des images) ne soient annulés par des mauvaises pratiques (comme le chargement en double des images).  

Côté Wave, quelques erreurs d’accessibilités remontent mais surtout des problèmes de contraste.

Projection des données pour mesurer l’impact environnemental

Nous sommes allés plus loin dans l’analyse en réalisant une projection de données afin d’obtenir des détails supplémentaires nottament sur l’impact CO2, l’empreinte eau et l’empreinte sol.

Ici, l’énergie, les données échangées, le CPU et l’usage de la mémoire sont directement mesurés sur le device. Les impacts environnementaux et l’Ecoscore (basés sur les mesures mais aussi sur l’application des bonnes pratiques) sont calculés. Vous trouverez les détails dans l’article dédié sur le blog. Il est ainsi possible de comparer les différents sites, classés ici en fonction de leur Ecoscore (plus il est élevé, mieux c’est).

versionecoscoreCO2 impact (gEqCO2)requestsEnergie (mAh)Données échangées (Mo)CPU (%)Empreinte eau (Litres)Empreinte sol (m2)Mémoire (Mo)
betterup.com270,8112111,287,853,510,121,31862,15
datagrid.co.jp290,801289,3411,023,150,111,10671,31
webflow.com330,671796,347,173,210,090,80863,02
grege-interieurs.com390,642611,206,805,060,111,25746,73
lamalama.n420,71219,7113,424,710,101,09828,77
once-lifetime.com450,45565,736,372,240,060,66734,36
marcoambrosi.salon520,41475,814,752,440,060,67701,52
blueyard.com560,72508,0215,132,560,100,92575,93
hskr.ru600,30235,451,822,710,050,61682,42
azzerad.com630,38755,591,981,500,060,65735,91
ingridparis.com650,36385,543,592,10,060,63632,50
ladispensadelchianti.it750,31564,731,5711,140,050,55511,82

Conclusion

Lorsque le design de sites doit être jugé ou comparé, ceux qui ressortent en tête sont souvent des sites proposant un foisonnement d’images et autres effets visuels tels que des animations ou de la vidéo. Même si ces choix de designs peuvent être plus attractifs ou ludiques, ils nuisent souvent à l’accessibilité mais aussi aux impacts environnementaux… donc, in fine, aux utilisateurs eux-mêmes. 

Même en cherchant des sites spécifiquement dédiés à la sustainability, on trouve des exemples présentant de nombreuses erreurs d’accessibilité ou transférant des fichiers de plus de 5 Mo au chargement. 

Sur le site des Awwwards, on trouve bien parmi les critères pris en compte l’utilisabilité. Toutefois, un parcours rapide des notes obtenues montre que, même pour betterup.com qui présente de nombreuses erreurs d’accessibilité, la note d’utilisabilité est souvent très élevée. Il est normal qu’une part de subjectif, souvent liée à l’expérience personnelle et à la perception qu’on a de telles créations, entrent en ligne de compte. Néanmoins, une mesure objective devrait permettre de relativiser et nuancer le propos, aussi bien pour l’accessibilité que pour la sobriété (voire la performance). Ces contraintes supplémentaires pourraient être sources de créativité et donner lieu à des expériences utilisateur innovantes tout en restant respectueuses des utilisateurs et de la planète.

Quel format d’image choisir pour réduire sa consommation d’énergie et son impact environnemental ?

Reading Time: 4 minutes

Choisir le bon type d’image pour réduire l’impact environnemental d’un site n’est pas chose aisée. On peut se focaliser sur la taille de l’image ou sur la performance d’affichage (est-ce que les deux sont liés ?). C’est peut être la bonne approche. Cependant une mesure d’énergie sera un élément plus précis si on souhaite vraiment mesurer la consommation effective et aller vers une réduction de l’impact environnemental.

Nous avions réalisé en 2017 un benchmark du nouveau format WebP par rapport au JPEG et PNG. La prise en compte du Webp dans les navigateurs commençait. De plus l’AVIF, format d’image prometteur est arrivé.

Voici une étude mise à jour.

Méthodologie

Comme image de test, nous avons utilisé celle proposée par Addy Osmani dans un article sur Smashing Magazine.

Les images ont été générées pour avoir la même qualité perçue. Les qualités de compression sont donc différentes entre les formats.

Image 1 : https://res.cloudinary.com/ddxwdqwkr/image/upload/v1632192015/smashing-articles/206-webp-ayousef-espanioly-DA_tplYgTow-unsplash.webp

  • Test 1 Qualité par Défaut donné par Sqoosh (https://github.com/GoogleChromeLabs/squoosh/) : JPEG original (560KB), JPEG@q75 (289KB), WebP@q75 (206KB),  AVIF@q30 (101KB)
  • Test 2 Qualité cible JPEG@q70 : JPEG (323KB), WebP@q75 (214KB), AVIF@60 (117KB)
  • Test3 Faible qualité : JPEG@q10 (35KB), WebP@q1 (35KB), AVIF@q17 (36KB)2

Image 2 : https://res.cloudinary.com/ddxwdqwkr/image/upload/v1632080886/smashing-articles/q50jpg.jpg

  • Test1 : Taille cible de 45k : Original (442kB), JPEG@q50 , WebP@q54, AVIF@q36

Image 3 : https://res.cloudinary.com/ddxwdqwkr/image/upload/v1632082138/smashing-articles/q10-25.jpg

  • Test 1: Taille cible de 25kB : Original (716KB),  JPEG@q10 , WebP@q5, AVIF@q19

Protocole de mesure :

  • Nous affichons une par une les images dans un navigateur Chrome sur un device réél (Samsung Galaxy S10).
  • Nous utilisons les outils Greenspector pour mesurer la consommation d’énergie et les autres métriques (CPU, performance…).
  • Nous effectuons une mesure tout au long de l’affichage de l’image et cela 3 fois pour avoir des mesures stables.
  • Les mesures sont faites dans différentes conditions de réseau Wifi, 3G et 2G.

Résultats

Sur l’image 1 pour le test 1, on obtient les mesures de consommation d’énergie suivantes :

Consommation d'énergie pour l'image 1

Si l’on observe de plus près le comportement en Wifi, on peut mieux apprécier les différences de consommation avec l’intervalle de confiance.

Consommation d'énergie pour la wifi avec intervalle de tolérance

En Wifi, la consommation est relativement similaire entre les types d’image. Le JPEG est un peu plus consommateur suivi du format WebP et ensuite par AVIF.

En 3G et 2G, la différence de consommation est notable et AVIF consomme moins d’énergie que Webp.

Ces comportements s’expliquent par la taille des fichiers plus faible en AVIF et en Webp.

Sur l’image 2, le comportement est le même :

Comparaison de consommation d'énergie pour l'image 2 entre la wifi, la 3G et la 2G

Sur l’image 3, il n’y a presque aucune différence entre les formats. L’image est petite et on se retrouve dans un fonctionnement proche du wifi (transfert rapide) :

Comparaison de consommation d'énergie entre la wifi, la 3G et la 2G

Le comportement est le même avec l’image 2 qui est à 45ko :

Consommation d'énergie pour l'image 2 en wifi, 3G et 2G

C’est le même comportement pour l’image 3 :

Consommation d'énergie pour l'image 3 en wifi, 3G et 2G

Il est nécessaire de surveiller les nouveaux formats (JPEG XL, Webp2…) ainsi que l’optimisation des algorithmes car même si les gains en taille sont importants, les traitements de décodage pourraient potentiellement gagner encore en efficacité. En effet, voici par exemple le traitement CPU pour l’image 1 sur le test 1, où AVIF consomme plus de CPU que les autres formats.

Traitement CPU pour l’image 1

Préconisations :

  • Dans tous les cas, il est nécessaire de compresser les images avec une qualité plus faible, peu importe le format de l’image. Une qualité >85% est inutile. La consommation d’énergie est diminuée d’un facteur 2 pour des qualités qui restent élevée, et diminuée d’un facteur 6 pour des qualités faibles.
  • Même si la consommation d’énergie est relativement proche entre les formats, le gain apporté par l’AVIF et le Webp est beaucoup plus important pour des connexions moins performantes. Le choix de AVIF et Webp sera préférable car les utilisateurs ne sont pas connectés avec du haut débit ! De plus le gain en terme de données échangées sera intéressant pour limiter la taille globale du site.
  • Le choix entre Webp et AVIF n’est pas simple et va dépendre de la typologie des images et des visiteurs. De plus, Google travaille sur la version 2 de WebP, et des formats comme JPEG XL arrive pour concurrencer AVIF. Cependant, compte-tenu des avantages du Webp autres que l’impact environnemental, nous conseillons plus l’usage de WebP.

Pour information, voici la prise en compte du format AVIF dans les browsers :

Pour information, voici la prise en compte du format AVIF dans les browsers :

Ainsi que le format Webp :

Pour information, voici la prise en compte du format webp dans les browsers :

Dans tous les cas, optimisez vos images, compressez, réduisez la taille et lazy-loadez !

L’impact de nos usages en visioconférence sur mobile et PC ! Édition 2022

Reading Time: 6 minutes

Pour cette nouvelle édition 2022 de notre classement, nous avons décidé de procéder différemment. Contrairement à l’édition 2021, nous avons réduit le nombre d’applications mesurées. Nous avons à la fois réalisé des mesures sur téléphone mais également PC pour répondre à la demande générale. L’objectif de ces nouvelles mesures est d’observer comment les solutions se situent en termes d’impact environnemental (Carbone) les unes par rapport aux autres sur des scénarios utilisateurs courants mais aussi sur deux plateformes différentes : PC versus téléphone.

Nous avons comparé 10 applications : BlueJeans, Google Meet, Go To Meeting, JITSI, Skype, Teams, Webex, Whereby, Zoho Meetings et Zoom.

Pour chacune de ses applications, mesurées sur un smartphone S7 (Android 8) et sur un ordinateur, les trois scénarios suivants ont été réalisés au travers de notre Greenspector Test Runner, permettant la réalisation de tests manuels sur une durée de 1 minute en one-to-one :

  • Conférence audio uniquement
  • Conférence audio et vidéo (caméra activée de chaque côté)
  • Conférence audio et partage d’écran

En savoir plus sur la méthodologie.

Classement projeté en impact carbone des applications de visioconférences (gEqCO2) sur mobile

Scénario / Année1 mn de visioconférence en audio1 mn de visioconférence en audio + caméra1 mn de visioconférence en audio + partage d’écran
20220,31 gEqCO21,10 gEqCO20,54 gEqCO2
Équivalence en mètres parcourus en véhicule léger2,76 mètres9,82 mètres4,82 mètres

En moyenne, une minute de visioconférence en audio impacte 71% moins qu’avec les caméras activées et 42% de moins qu’en partageant un écran. 

Le Top 3 d’une minute de visioconférence en moyenne : Zoho Meeting (0,49 gEqCO2), Microsoft Teams (0,513 gEqCO2) et Whereby (0,533 gEqCO2). Zoho Meeting premier de ce classement côté impact carbone impacte 2,2 fois moins que, GoToMeeting, le dernier de ce classement. La moyenne de ce classement est de 0,657 gEqCO2, 4 solutions se trouvent au-dessus. 

La principale partie des impacts Carbone se situent sur la partie device utilisateur (61%), suivie par la partie Serveur (23%) et enfin la partie Réseau (16%).

Voici les trois applications mobiles les moins impactantes en termes de Carbone suivant le scénario : 

Audio (Top 3)Audio + caméra (Top 3)Audio + partage d’écran (Top 3)
Microsoft TeamsWherebyMicrosoft Teams & Zoho Meeting
Cisco Webex MeetingZoho MeetingZoom & Google Meet
JITSI MeetTeams & ZoomCisco Webex Meeting

Consommation d’énergie des applications de visioconférences (mAh) sur mobile

Voici les moyennes de consommation d’énergie pour les trois scénarios sur téléphone : 

Scénario / Année1 mn de visioconférence en audio1 mn de visioconférence en audio + caméra1 mn de visioconférence en audio + partage d’écran
20226,68 mAh14,29 mAh7,82 mAh

En moyenne, une minute de visioconférence avec la vidéo activée consomme 2,1 fois plus d’énergie qu’en audio ; quant au partage d’écran, il engendre une surconsommation de 17% par rapport à l’audio seule. 

Consommation d’énergie des applications de visioconférences (mAh) sur PC !

Voici les moyennes de consommation d’énergie sur ordinateur : 

Moyenne : 1 mn de visioconférence en audioMoyenne : 1 mn de visioconférence en audio + caméraMoyenne : 1 mn de visioconférence en audio + partage d’écran
17,255 mAh23,654 mAh22,82mAh

Ici, une minute de visioconférence les caméras activées consomme 1,4 fois plus qu’avec l’audio ; quand au partage d’écran il engendre une surconsommation de 24% de plus qu’avec l’audio seule. On constate donc ici une différence de consommation énergétique beaucoup plus conséquente sur téléphone en fonction du scénario.  

Le Top 3 (tous scénarios confondus) en consommation d’énergie en prenant en compte la consommation du téléphone et de l’ordinateur : Zoho Meeting (76,21 mAh), BlueJeans (81,70 mAh) et Microsoft Teams (83 mAh). Zoho Meeting premier de ce classement côté consommation d’énergie consomme 1,4 fois moins que le dernier de ce classement : Whereby

Voici les trois applications mobiles les moins impactantes en termes de Carbone suivant le scénario : 

Audio (Top 3)Audio + caméra (Top 3)Audio + partage d’écran (Top 3)
Blue JeansZoho MeetingZoho Meeting
Cisco Webex MeetingZoomTeams
Google MeetTeamsBlueJeans

Données échangées des applications de visioconférences (Mo) sur mobile

Voici les moyennes des données échangées pour les trois scénarios : 

Scénario / Année1 mn de visioconférence en audio1 mn de visioconférence en audio + caméra1 mn de visioconférence en audio + partage d’écran
20220,88 Mo10,34 Mo4,49 Mo

C’est sur la consommation de données que les écarts se creusent entre les outils et les usages. 

En moyenne, une minute de visioconférence en audio consomme 91% moins (ou 12 fois moins) de données échangées qu’avec les caméras activées et 80% de moins qu’en partageant un écran. 

Le Top 3 (tout scénario confondus) en échange de données : Whereby (4,54 Mo), Zoho Meeting (8,39 Mo) et Skype (9,68 Mo). Whereby (via Firefox) premier de ce classement côté données échangées en consomme 9,2 fois moins que le dernier de ce classement : GoToMeeting

Voici les trois applications les moins consommatrices de données suivant le scénario : 

Audio (Top 3)Audio + caméra (Top 3)Audio + partage d’écran (Top 3)
Blue JeansWherebyZoho Meeting
Zoho MeetingZoho MeetingSkype
WherebySkypeZoom

Et pour nos usages au quotidien de la visioconférence : 

Dans l’étude effectuée en 2021 nous avons indiqué que la visioconférence est préférable à un déplacement en voiture. Effectivement cette solution est moins polluante, cependant attention aux effets rebond ! Avec la pandémie mondiale, le télétravail s’est largement répandu dans de nombreuses entreprises, cependant cette pratique encourage un nombre croissant de personnes à s’éloigner de leur lieu de travail. Donc en fonction du rythme de télétravail imposé et des moyens de transport utilisés, les gains environnementaux du télétravail peuvent être contrebalancés. 

Également il faut marquer un point d’attention à l’augmentation de consommation d’énergie des foyers engendrés. On peut considérer que cette hausse peut compenser la baisse de besoin en énergie dans les locaux d’entreprises mais cela est à prendre au cas par cas et comporte de nombreux facteurs.

Exemples :

Versions mesurées :

  • Microsoft Teams (4.10.1) / ordinateur (1.5.00.10453) 
  • Zoom (5.10.4) / ordinateur (5.10.7.3311)
  • Google Meet (2022.05.15.450927857) / client léger sur Firefox 
  • Cisco Webex Meetings (42.6.0.239) / ordinateur (42.5.0.22187) 
  • GoToMeeting (4.8.1) / client léger sur Chrome 
  • BlueJeans (2.2.0.142) / ordinateur (2.29.1-3) 
  • Skype (8.82.0.403) / ordinateur (8.83.0.411
  • Whereby (2.3.0) / client léger Firefox  
  • Zoho Meeting (2.2.1) / client léger Firefox  
  • Jitsi Meet (21.3.0)/ client léger Firefox  

Pour chacune de ses applications, mesurées sur un smartphone S7 (Android 8), les scénarios utilisateurs ont été réalisés au travers de notre Greenspector Test Runner, permettant la réalisation de tests manuels.

Une fois l’application téléchargée et installée, nous exécutons nos mesures sur les paramètres de base et d’origine de l’application. Aucune modification n’est réalisée (même si certaines options permettent de réduire la consommation d’énergie ou ressources : mode économie de données, thème sombre etc. Cependant nous vous encourageons à vérifier les paramètres de votre application favorite afin d’en optimiser l’impact.

Chaque mesure est la moyenne de 5 mesures homogènes (avec un écart-type faible). Les consommations mesurées sur le smartphone donné selon un réseau de type Wi-Fi peuvent être différentes sur un PC portable avec un réseau filaire par exemple. Pour chacune des itérations, le cache est préalablement vidé.

Pour les mesures sur ordinateur nous avons utilisé un connecteur Greenspector couplé à un module Yochto-Watt afin de mesurer la consommation énergétique. De la même manière que pour les applications mobiles les clients lourds, lorsqu’il en existait un, ont été téléchargés, puis installé sans changer les paramètres de base. Cette puce ne permet de mesurer que la consommation énergétique pour l’instant. C’est pourquoi les analyses de l’impact carbone et des données échangées de cet article ne s’appuient que sur les mesures réalisées sur téléphone. Ressource supplémentaire sur le Yoctopuce.

Découvrez comment Greenspector évalue l’empreinte environnementale de l’utilisation d’un service numérique. (Méthodologie complète)

CMS, No Code ou sans CMS, quelle solution choisir pour un site web sobre ?

Reading Time: 6 minutes

Aujourd’hui, nous allons étudier l’impact de solutions permettant la mise en place de sites web sans connaissance de codage. Parmi ces solutions, nous pouvons inclure les CMS (Content Management System) mais aussi des solutions No Code.

Cet article est le premier d’une série où nous analysons les mesures de 1500 sites via nos outils.
Nous traiterons dans ces articles de l’impact des technologies, des paramètres… 

Avertissement sur la méthodologie :

Nous avons mesuré plus de 1500 sites sur des appareils réels via nos suites de benchmark permettant la réalisation de tests automatisés (lancement du site, mise en attente, scroll, mise en tâche de fond). Nous récupérons ensuite les informations de technologies de ces sites via la solution WepAnalyzer

Nous avons choisi de porter notre analyse sur la consommation d’énergie. Cet indicateur va fortement impacter l’usure des batteries sur les appareils utilisateurs et donc, au final, avoir un impact environnemental. 

Comment lire les graphiques ?

Nous visualisons les données par des graphiques à « boîtes à moustache » (ou Box plot): 

  • La barre centrale indique la médiane. Les classements sont réalisés par rapport à cette donnée. 
  • Le haut et le bas de la boîte sont délimités par les 25e et 75e quantile.  
  • La taille de la boîte est appelée l’intervalle interquartile (IQR) 
  • Les barres en haut et en bas sont les moustaches et délimitent les valeurs attendues
  • Les moustaches s’étendent à 1,5 IQR
  • Les valeurs hors des moustaches sont visualisées via des points. Ils représentent soit des erreurs soit des valeurs aberrantes. 

Nous avons volontairement écarté les sites qui n’avaient pas assez d’échantillons (par exemple moins de 10 sites avec une certaine technologie).

Comment se positionnent les CMS et les solutions No Code ?

Nous retrouvons les technologies les plus répandues (selon Web Core Vitals), mise à part Shopify (ces sites doivent être classés dans la catégorie « Pas de CMS »). 

Nous observons un écart de 20% entre la solution la plus efficiente (Ametys) et la moins performante (Webflow). 

3 CMS se positionnent devant les sites sans CMS. Les CMS répandus comme Drupal et WordPress se positionnent derrière. Les quatre dernières solutions sont des solutions No Code

Pour certaines catégories (WordPress, sites sans CMS), il y a beaucoup de points considérés comme aberrants. Cela s’explique par un jeu de données important (plusieurs centaines de sites). Une analyse exploratoire de ces sites montre généralement qu’il s’agit de sites avec des traitements en continu assez lourds (comme de la vidéo). Voici, un exemple d’un site positionné en « outlier« , l’étape de chargement et d’idle (site inactif) consomment de façon importante compte-tenu d’une animation qui tourne en continu. 

Quelques pistes d’explications à l’analyse des CMS :

Ametys : un CMS spécifique à un domaine

Ametys est un CMS spécifique qui est utilisé pour des sites institutionnels. Sa présence dans ce classement s’explique par le fait que nous avions réalisé un classement des sites d’école, dans lequel de nombreuses écoles utilisent cette technologie. Son bon positionnement serait à analyser d’un point de vue technique, cependant on peut en déduire d’une solution qui a pour cible un type de besoin sera plus optimisable qu’une solution générique. L’intégration de multiples fonctionnalités dans un CMS amènera en effet une surconsommation. On observe de plus que ces sites institutionnels intègrent moins de modules que les autres sites. Il s’agit au final d’une sobriété fonctionnelle. 

Squarespace : une solution tout en un

Squarespace est un CMS hébergé par l’éditeur. Sur les sites analysés, nous pouvons identifier qu’il y a peu de requêtes (<30) donc qu’il y a potentiellement des solutions d’optimisation intégrées. Autres pistes, toutes les ressources sont hébergées sur Squarespace et les atouts (ou assets) sont sur des serveurs dédiés. L’hébergement du CMS par l’éditeur est en effet une bonne chose car elle va permettre des optimisations systématiques et mutualisées. Cependant, ce n’est pas forcément natif, il faut que l’éditeur l’applique. 

Typo 3 : des options d’optimisation natives

Typo 3 qui est une solution open source est en 3ème position. Ce positionnement est confirmé par un classement HTTP Archive. Cette performance s’explique par une gestion fine des caches et d’options d’optimisation natives. 

Les sites sans CMS

Les sites sans CMS intègrent une hétérogénéité de solutions techniques. Il est difficile d’en tirer des conclusions poussées, cependant la médiane des sites se positionne très bien par rapport à d’autres solutions (No Code, WordPress, Drupal…). La moustache basse est la plus basse par rapport à toutes les autres solutions. Cela montre qu’une efficience importante est possible plus facilement.  

Drupal : un CMS professionnel

Drupal se positionne juste après les sites sans CMS. Son bon positionnement peut s’expliquer par le fait que ce CMS est moins accessible que WordPress en termes de mise en place et de prise en main.  

Contentful : un CMS headless

Contentful est un CMS “sans interface”. Il permet de publier du contenu depuis d’autres outils. Le gain d’efficience est sûrement présent pour la publication (car on n’utilise pas ses outils habituels), par contre on observe que ce CMS a la même efficience qu’un CMS classique. 

WordPress : un CMS simple et très répandu

WordPress est très répandu et offre de nombreux plugins et thèmes. Cette généricité et modularité ont un coût. Ce CMS est accessible à beaucoup de monde, dont des utilisateurs non-techniques. La contrepartie est une explosion potentielle de plugins utilisés et une non-configuration du CMS en termes de performance et d’efficience. On voit par rapport à la moustache basse que le CMS peut être efficient, cela nécessite cependant un travail conséquent.  

Wix, Webflow, SiteCore, Adobe : des solutions No Code ou équivalentes

Ces solutions offrent à l’utilisateur la possibilité de réaliser un site web sans connaissance de codage. La médiane est élevée mais aussi les moustaches basses qui sont plus élevées que d’autres solutions montrent que ce sont des solutions plus lourdes. 

Conclusion 

D’un point de vue statistique, les solutions CMS n’ont pas toute la même efficience. La conception initiale, prenant en compte les optimisations, va être primordiale pour atteindre des bonnes performances (cas de Typo 3). On observe que la maîtrise de bout en bout, associée à la mise en place de bonnes pratiques (Squarespace), permet aussi d’atteindre un bon niveau. De la même manière, spécialiser un CMS (Ametys) et donc les options qui vont avec va permettre d’obtenir des bons résultats. 

Cependant, à l’opposé, rendre un CMS très générique et modulaire (WordPress), même si potentiellement performant initialement, va apporter de l’obésiciel. De la même manière, le No Code va apporter une lourdeur. Reste à identifier les causes de cette lourdeur. En effet, elle peut provenir des niveaux d’abstraction mais aussi des possibilités de rendu (interactivité, animations…) qui sont possibles facilement et qui amène l’utilisateur à en ajouter plus qu’il n’en faut. De plus, l’usage d’un CMS “généraliste” est aussi potentiellement représentatif d’un manque de précision du besoin. 

Pour une solution CMS (et plus globalement n’importe quelle solution), la sobriété ne sera pas innée. Il faudra appliquer un ensemble de bonnes pratiques

  • Architecture et technologie efficientes, bien que si l’on prend les technologies actuelles la différence entre les solutions est très faible et l’impact provient plus de la mauvaise utilisation des technologies.
  • Intégrations natives d’optimisations ou facilement activables par l’utilisation.
  • Mécanisme de limitation des fonctionnalités ou en tout cas sensibilisation de l’utilisateur à l’obésiciel.
  • Plus globalement, réfléchir à la problématique bout-en-bout prenant en compte hébergement, CDN (Content Delivery Network); sans aller sur des solutions gérées de bout-en-bout, on voit que la répartition des systèmes n’est pas forcément une bonne chose.
  • Afin d’offrir toujours plus de souplesse à l’utilisateur, et entre autres permettre à des personnes non techniques de réaliser des sites, il est nécessaire d’intégrer nativement des solutions d’optimisations, ce qui n’est pas du tout le cas actuellement.

Vous souhaitez intégrer un CMS dans ce classement ? Contactez-nous et envoyez-nous au minimum 20 liens vers des sites utilisant la technologie, nous les intégrerons dans les mesures et au sein de notre classement ! 

Pour notre prochain article, nous rentrerons dans l’analyse plus fine des données WordPress pour observer quels sont les paramètres et configurations qui influent sur la performance environnementale. 

Un site sobre est-il nécessairement moche ? 

Reading Time: 9 minutes

Aujourd’hui, nous allons nous intéresser à une interrogation qui revient très souvent lorsqu’on aborde la question de l’écoconception web ou de la sobriété numérique : un site écoconçu est-il nécessairement moche ? Souvent, la demande consiste plutôt à obtenir un échantillon de “sites jolis et écoconçus” (de préférence avec une finalité proche de celle du projet en cours). Les spécialistes de l’accessibilité web reconnaîtront sans doute ce type d’interrogation pour y avoir été eux aussi régulièrement confrontés. Il n’est déjà pas évident de définir ce que serait, dans l’absolu, un site “joli”. La notion est elle-même très subjective.  

Nous procéderons donc autrement. Nous constituerons d’abord une liste de sites a priori sobres. Il y a pour cela des listes et des annuaires qu’on listera plus loin. Une fois la liste constituée, nous ferons une première analyse rapide pour en exclure les sites qui ne sont pas aussi sobres qu’annoncé (trop de données transférées, trop de requêtes, etc.). Ensuite, nous utiliserons l’outil Greenspector afin de les départager (en les classant mais aussi en repérant ceux qui sont plus impactant qu’au premier abord).  

Enfin, munis de cette liste, nous regarderons à quoi ils ressemblent et essaieront d’en dégager des tendances de design, en fonction de leurs finalités respectives (un site d’information ne ressemble pas forcément à un site de commerce en ligne ou à celui d’une agence web, par exemple). Ce sera également l’occasion de garder en tête d’autres aspects du Numérique Responsable, en particulier l’accessibilité. Avoir un site léger et agréable à regarder n’a pas de sens s’il est inutilisable pour une partie de la population.  

La finalité ici est bien de proposer une liste de sites web avec un impact environnemental moindre. Libre à chacun de trouver ceux qui lui semblent attractifs et qui correspondent à ses attentes (en termes de finalité, de cible, etc.). Ainsi, cette liste pourra être une source de contre-arguments concernant les sites écoconçus qui seraient nécessairement moches. Ce peut aussi être un moyen de trouver des sources d’inspiration afin de concevoir à son tour des sites écoconçus et attractifs.  

Où sont les sites sobres ? 

Nous avons fait le choix d’éplucher les listes et catalogues de sites sobres, avec en bonus d’autres sites croisés par ailleurs.   

Voici les listes en question :

Il en existe probablement d’autres mais ceci constitue déjà un bel échantillon de départ. Si vous en avez d’autres en tête ou si vous voulez tester la sobriété de votre site, n’hésitez pas à nous contacter.  

Avec cette première liste (plus d’une centaine de références au final), une première analyse a été effectuée. Celle-ci s’appuie principalement sur l’onglet Network des DevTools afin de regarder les requêtes HTTP et la quantité de données transférées.

Au final, il ne reste qu’une quarantaine de sites qui sont alors utilisés pour un benchmark avec l’outil Greenspector.  

Sites sobres : le verdict par la mesure 

Le benchmark des sites retenus permet de les classer en fonction de leurs EcoScores respectifs (l’idéal étant d’obtenir un EcoScore le plus proche possible de 100). 

ClassementURLEcoscoreÉnergie (mAh)Données (Mo)Requêtes HTTPEmpreinte GES (gEqCO2)Empreinte Eau (Litres)Empreinte Sol (m²)
1https://kuroneko.io/fr/944.240.1420.180.040.46
2https://lesraisonnees.co/944.080.21110.190.040.45
3https://brawcoli.fr/924.080.13110.190.040.45
4https://solar.lowtechmagazine.com/924.350.35170.210.040.48
5https://www.pikselkraft.com/914.350.1130.190.040.48
6https://amap-chelles.net/904.590.3440.20.040.5
7https://primitive.wildandslow.fr/904.10.16110.190.040.45
8https://productfornetzero.com903.990.17140.190.040.44
9https://www.mountain-riders.org/904.310.23190.210.040.48
10https://fairness.coop/894.280.09140.20.040.47
11https://jeudi.am/894.470.15200.220.040.5
12https://www.boavizta.org/894.260.2790.20.040.47
13https://lowtechlab.org/fr874.090.2260.180.040.45
14https://www.gov.uk/874.350.24150.210.040.48
15https://www.treebal.green/874.190.8170.210.040.47
16https://www.boutique-natali.com/864.840.44250.250.040.54
17https://designersethiques.org/854.060.28170.20.040.45
18https://oceanfifty.com/854.630.42140.220.040.51
19https://anelym.fr/844.640.17230.230.040.52
20https://lowimpact.organicbasics.com/eur844.650.74330.260.040.53
21https://www.europeansleeper.eu/en844.330.73310.240.040.49
22http://www.biocoopmontreuil.fr/834.750.53230.240.040.53
23https://www.licoornes.coop/824.370.17280.220.040.49
24https://empreintedigitale.fr/814.261.14260.240.040.48
25https://www.international-alert.org/814.670.83280.250.040.53
26https://www.laboutiquedupartage.fr/814.770.31200.230.040.53
27https://www.light-communication.fr/814.530.19130.210.040.5
28https://dolo.biz/fr/804.811.19150.250.040.53
29https://www.polybion.bio/804.881.02100.240.040.54
30https://zugvoegelfestival.org/794.260.52440.250.040.49
31https://pathtech.coop/774.550.6660.210.040.5
32https://dalkia.fr/764.280.89380.250.040.49
33https://sustainablewebdesign.org/764.881.02430.290.050.56
34https://palaeyewear.com/744.511.19780.320.050.54
35https://themarkup.org/735.271.13140.260.050.58
36https://www.ademe.fr/724.750.64260.250.040.53
37https://theadccawards.ca/715.460.2960.240.050.6
38https://flowty.site/636.910.35210.320.060.77
39https://heylow.world/626.140.35190.290.050.68
40https://becolourful.co.uk/606.150.23150.280.050.68
41https://www.ec-lyon.fr/595.060.81430.290.050.58
42https://www.wholegraindigital.com/588.650.65250.410.080.96
43https://daviddaumer.com/507.830.32130.350.070.86

Pour chacun de ses sites web, mesurés sur un smartphone S7 (Android 8), les mesures ont été réalisées au travers de notre Greenspector Benchmark Runner, permettant la réalisation de tests automatisés. Les mesures ont été réalisées fin juin 2022. 

Détail des scénarios :  
– Chargement du site web 
– Scroll de la page 
– Inactivité site web en premier-plan 
– Inactivité site web en arrière-plan 
 
Chaque mesure est la moyenne de 3 mesures homogènes (avec un écart-type faible). Les consommations mesurées sur le smartphone donné selon un réseau de type wifi peuvent être différentes sur un PC portable avec un réseau filaire par exemple. Pour chacune des itérations, le cache est préalablement vidé. 

Découvrez comment Greenspector évalue l’empreinte environnementale d’un service numérique.

En classant les résultats (ici par EcoScore) et en regardant les extrêmes, on remarque déjà deux choses

  • Quelques sites ont des scores au-dessus de 80 voire de 90. C’est très rare et ça souligne des sites où un grand effort de sobriété numérique a été réalisé.  
  • Quelques sites ont un EcoScore anormalement “bas”. Il s’agit donc de sites plutôt légers mais malgré tout impactant.  

https://daviddaumer.com/ (EcoScore Greenspector 50) : peu de requêtes sur la page, peu de données transférées. Au cas où, on regarde avec EcoIndex et le score A est obtenu (ce qui est le meilleur score possible). La “chute” de l’EcoScore s’explique par des animations qui impactent en continu la batterie du device. Concrètement, ceci signifie que l’affichage de cette page vient accélérer la décharge de la batterie donc augmenter son usure et anticiper le changement de la batterie ou le rachat d’un appareil. Ceci induit de lourds impacts environnementaux, l’essentiel de ceux-ci provenant de la fabrication de l’appareil. Il faudrait limiter l’impact des traitements CSS et JS. Les animations sont-elles nécessaires ? Quel est leur impact sur l’accessibilité et la captation de l’attention ? 

Le raisonnement est à peu près le même pour

  • https://www.wholegraindigital.com/ (EcoIndex B, EcoScore Greenspector 58… et quelques animations dont certaines en continu) 
  • https://www.ec-lyon.fr/ (EcoIndex B, EcoScore Greenspector 59… et un carrousel dont il faudrait s’affranchir) 
  • https://becolourful.co.uk/ (EcoIndex A, EcoScore Greenspector 60)
  • https://heylow.world/ (EcoIndex A, EcoScore Greenspector 62) 
  • https://flowty.site/- (EcoIndex B, EcoScore Greenspector 63) 
  • https://theadccawards.ca/ (EcoIndex A, EcoScore Greenspector 71) : l’impact environnemental des animations est ici loin d’être négligeable, le site étant par ailleurs très léger et sobre. En revanche, cette débauche d’effets visuels nuit gravement à l’utilisabilité du site, en particulier du point de vue de l’accessibilité.  

Au final, ces exemples illustrent un point important sur l’ensemble des éléments à prendre en compte avant d’affirmer qu’un site est sobre ou a bénéficié d’une démarche d’écoconception. Les efforts sur le nombre de requêtes et la quantité de données transférées sont une bonne chose. En revanche, les traitements JS ou CSS (et plus particulièrement les animations) peuvent annuler une bonne partie des bénéfices ainsi obtenus. D’autant plus (et j’insiste sur ce point) que ces animations ont potentiellement un effet néfaste en termes de captation de l’attention mais surtout d’accessibilité. Je vous invite à ce sujet à vous référer entre autres au critère 13.8 du RGAA (Dans chaque page web, chaque contenu en mouvement ou clignotant est-il contrôlable par l’utilisateur ?). L’exemple le plus flagrant ici est https://heylow.world/ avec ses animations très présentes qui nuisent de plus à la lisibilité pour l’ensemble des utilisateurs.  

Analyse du classement des sites sobres 

Nous avons commencé par ce qu’il faut éviter pour produire un site web écoconçu qui soit visuellement agréable sans sacrifier pour autant son utilisabilité. Regardons désormais plus en détail les sites afin d’en extraire des exemples particulièrement pertinents.  

Nous pouvons déjà considérer la liste des sites avec un EcoScore > 70% comme des sites sur lesquels un effort de sobriété a été effectué. Reste à voir ce qui peut les rendre attractifs et lesquels mettre en avant.  

Note : pour éviter d’éventuels biais, le site de Greenspector n’a pas été inclus (même si son EcoScore est autour de 72). 

E-commerce

La liste contient 3 sites de e-commerce :  

https://lowimpact.organicbasics.com : au moment de la rédaction de cet article, le site standard est en maintenance. Sur la version “low impact”, le choix de la sobriété est clairement affiché. L’accent est mis sur les formes simples (via du SVG) et les aplats de couleurs. En revanche, il est regrettable que cette version ne soit pas la version par défaut du site. Ceci nuit grandement à l’impact de cette démarche. 

https://palaeyewear.com : la page d’accueil est plutôt légère et agréable. On y retrouve les éléments classiques pour un tel site : une vidéo (intégrée sobrement), quelques produits, les avis de consommateurs, quelques actualités, un rapport d’impact, etc. Plusieurs bonnes pratiques d’efficience ne sont pas respectées mais cette page s’en sort mieux que la plupart des autres sites de e-commerce. Tout se complique lorsqu’on accède à une fiche-produit. Ce sont ici plus de 100 requêtes et plusieurs Mo de données qui sont transférés. L’effort d’écoconception aurait donc dû être poussé plus loin, notamment en se basant sur un parcours utilisateur (navigation et achat d’un produit) plutôt que seulement sur la page d’accueil.  

https://www.boutique-natali.com : on trouve sur cette page aussi plusieurs éléments propres à ce type de site (promotions en cours, éléments de réassurance, produits mis en avant, etc.) en plus de la mise en avant de la démarche d’écoconception mise en œuvre. La même sobriété se retrouve sur les fiches produit. Certes, certains types de produits vendus en ligne nécessitent probablement plus d’images (par exemple dans le domaine de la mode ou des cosmétiques) mais il s’agit à mon avis là d’une bonne base de réflexion pour concevoir une boutique en ligne légère et agréable d’utilisation.  

Magazines et presse en ligne 

https://themarkup.org est un site sobre et élégant à la fois, ce qui est d’autant plus notable pour de la presse en ligne. Ces sites sont habituellement alourdis entre autres par la pub et les trackers, ce qui n’est pas le cas ici. Un site important à garder en tête, donc, comme exemple de site de presse en ligne écoconçu. Attention toutefois, la légèreté de ce site par rapport à d’autres sites similaires est en partie due à des choix de modèle économique. Une fois de plus, ceci met en évidence le rôle qu’ont à jouer tous les acteurs d’un projet sur le sujet de la sobriété numérique.  

https://solar.lowtechmagazine.com : il s’agit probablement là de l’un des exemples les plus connus. Le choix radical de réduction d’impact environnemental est ici clairement affiché. Ceci ne fera pas forcément l’unanimité (notamment en raison du dithering).  

On retrouve une logique proche sur le site des Designers Ethiques (mise en page proche d’un jounal papier à l’ancienne pour un résultat des plus sobres) voire (pour la structure) sur celui de .Pikselkraft. Le site du Low-tech Lab, s’il en reprend certains éléments, va vers une page plus riche en contenu et avec une structure moins rigide. La page d’accueil semble alors plus attractive et le contenu plus facile à identifier.  

Autres sites 

https://lesraisonnees.co : un site one-page basé sur le scroll. Un site d’agence au contenu classique mais réalisé de façon très sobre et efficiente, très clair. Un très bon exemple.  

https://brawcoli.fr : les éléments classiques sont regroupés en une seule page qui met bien avant ce qui est proposé par ce restaurant.  

https://primitive.wildandslow.fr : on trouve dans la liste de nombreux sites d’agence ou d’indépendants spécialisés dans la réalisation de sites sobres (ce qui est logique voire rassurant). Sur chacun, l’idée est généralement de tout présenter en une seule page avec des aplats de couleurs et peu d’images (toutes optimisées). Primitive by Wild&Slow est assez représentatif tout en se démarquant entre autres par des zones aux contours non-linéaires. Dans d’autres cas, l’accent est mis sur les formes géométriques plutôt que sur des images plus complexes.  

https://www.treebal.green est une variante beaucoup plus riche graphiquement et pour autant assez sobre.  

https://www.mountain-riders.org est un bel exemple d’utilisation des principes vus précédemment avec une charte graphique très contrastée pour un rendu au final propre et attractif. 

Même s’il peut sembler moins attractif que d’autres, https://www.gov.uk brille par sa légèreté et son accessibilité. De gros efforts ont ici été faits au niveau de l’architecture de l’information. Il est en tout cas intéressant d’avoir ici un exemple de service public accessible et sobre.  

 Même si les animations en continu et omniprésentes sont à éviter, certains sites légers les utilisent avec parcimonie :  

Il convient dans tous les cas de garder en tête l’accessibilité ainsi que le fait que ce type d’ajout n’est que cosmétique. Pour certains sites comme https://dolo.biz/fr, l’attractivité de la page d’accueil repose énormément sur les animations mais le tout reste efficient et plutôt plaisant (même s’il ne sera pas forcément pratique pour tout le monde à la navigation, en particulier au clavier).  

De façon totalement subjective, je retiens également https://zugvoegelfestival.org pour le choix des couleurs et la navigation dans la page d’accueil. Il est juste regrettable que les différents éléments de navigation dans le site ne soient pas disponibles (au moins au clic) dès l’arrivée sur le site. 

Et une dernière mention spéciale pour https://sustainablewebdesign.org qui reprend des formes géométriques, des couleurs vives et met l’accent sur l’accessibilité tout en étant une mine d’informations sur l’écoconception web.  

Conclusion 

Le classement présenté ici devrait vous permettre d’avoir un meilleur aperçu de ce qu’il est possible de faire avec un site web sobre. Cette liste est appelée à s’enrichir au fil du temps et à servir d’inspiration pour ceux qui voudraient se lancer dans la création de sites sobres.  

Si le ressenti que l’on peut avoir en utilisant un site est en partie subjectif, l’accessibilité doit être prise en compte et la notion de sobriété creusée autant que nécessaire.  

WEB2DAY – Le Marché de l’Impact : Classement des partenaires de l’évènement

Reading Time: < 1 minute

À l’occasion de l’évènement WEB2DAY, se déroulant du 1er au 3 Juin prochain à Nantes, Greenspector a mesuré l’empreinte environnementale des sites web des partenaires de l’évènement.

Ce classement sera mis à jour tous les matins lors de l’évènement et viendra s’étoffer des sites web des visiteurs.

Classement de l’empreinte environnementale des partenaires

La moyenne d’impact carbone sur une minute de navigation de ces 49 partenaires et 22 visiteurs est de 0,43 gEqCO2.

La moyenne de consommation d’énergie (mAh) est de 5,30 mAh et en moyenne 4,49 Mo de données sont échangées. En termes de requêtes web, la moyenne est de 62 requêtes.

ClassementNomEcoscoreCarbon Impact (gEqCO2)RequêtesÉnergie (mAh)Données échangées (Mo)Empreinte Eau (Litres)Empreinte Sol (m²)
1NumériqueResponsable Zici860.1573.360.1020.030.37
2Treebal800.18173.440.7740.030.39
3Empreinte Digitale720.19253.50.5860.030.4
4ASI710.2253.550.6180.030.4
5Parthema760.21233.820.720.040.43
6BDM770.22194.021.10.040.45
7Greenspector670.22383.740.3860.040.43
8GreenTechInnovation640.22144.121.570.040.46
9Marché de l'impact740.23134.531.210.040.5
10Troopers550.23184.810.420.040.54
11CIC Ouest720.23303.970.990.040.45
12Aguaro700.23383.760.9390.040.43
13Sigma720.24503.510.850.040.41
14France 3620.25344.281.090.040.49
15MyScript700.25433.911.240.040.45
16Toovalu660.25223.92.640.040.44
17HumanCraft770.2674.942.020.050.55
18Popotecolors580.26434.161.340.040.48
19Les Tilleuls Coop710.27553.821.380.040.45
20MAIF610.27384.231.950.040.48
21Shopopop670.28484.12.190.040.48
22Stampyt510.29534.351.770.050.51
23Ecole de Design630.29594.071.810.050.48
24Soho Coaching620.29194.573.660.050.51
25Banque Populaire GO580.3574.51.550.050.52
26Gesco560.3654.031.830.050.48
27SNCF630.3604.161.880.050.49
28Wavestone660.3384.13.370.040.47
29The Tribe560.32704.321.940.050.51
30JaiOuiDire460.32355.072.950.050.58
31ScaleWay570.33584.682.650.050.55
32SEIF470.33525.541.150.060.63
33Dosites450.33166.192.250.060.69
34Fabernovel370.34365.283.320.050.6
35Oxiane530.34874.491.430.050.54
36Twilio460.35624.43.910.050.52
37Largo460.35584.523.720.050.53
38Easyvirt570.35954.341.790.050.53
39Usbek&Rica460.36306.941.440.060.78
40Faguo380.36685.042.560.060.59
41Performanse400.37456.182.550.060.7
42Nantes Université610.37604.334.810.050.51
43Akeneo540.381034.162.780.050.51
44Polypus390.4525.195.440.060.6
45RepasLucide670.4503.917.750.050.46
46Audencia410.41854.953.940.060.59
47WebForce490.41975.242.370.060.63
48SNCF420.41745.144.080.060.61
49BeApp330.42645.674.30.060.66
50La Poste490.42925.353.030.060.64
51Lumiplan660.42604.676.430.060.55
52Eni Ecole460.42755.314.250.060.63
53Voyelle430.441364.772.150.060.6
54Whoz550.451164.754.320.060.59
55Mojom360.461264.564.230.060.57
56RadioFrance350.481495.741.190.070.71
57D Vine360.49886.225.20.070.73
58Astraga310.53878.253.070.090.95
59Flythenest280.541645.443.880.070.69
60Métropole de Nantes460.55535.7311.250.070.67
61The ForkN/A0.61638.797.150.091
62Stratosfair340.639611.171.470.111.27
63Unstatic350.63547.0412.530.080.81
64ADN Consulting290.641009.55.080.11.1
65GuestSuite300.691345.7112.180.080.71
66Pôle Images & Réseaux300.73727.1815.80.090.84
67AFBSHOP230.881807.2315.30.110.91
68Hypercube231.0111216.368.360.161.86
69OnePoint411.16694.8541.010.110.62
70WR2Studio321.481326.6148.050.140.86
71KoralPlay301.995012.3167.020.21.46

Retrouvez-nous sur place au stand du Marché de l’Impact. Le Marché de l’Impact est une initiative créée par la société Toovalu qui a pour but de mettre en avant des solutions opérationnelles locales à impact positif pour réduire les émissions des gaz à effet de serre des entreprises. L’initiative a aussi pour vocation de promouvoir les pratiques vertueuses pour diminuer l’empreinte environnementale du numérique.

Quelle est l’empreinte environnementale des 10 sites et applications de m-commerce les plus visités en France ? 

Reading Time: 7 minutes

Introduction

Le marché du e-commerce en France connaît une croissance très importante. Les ventes e-commerce sont passées de 57 milliards en 2014 à 112,2 milliards d’euros en 2021. Cette croissance s’explique en partie par la crise sanitaire. Cela a considérablement augmenté les achats en ligne et créé des habitudes chez les Français. Parmi ces ventes, celles sur mobile ont connu une croissance impressionnante. Elles ont augmenté de 13 % en 2021. Près d’un Français sur deux (48%) fait aujourd’hui des achats via son téléphone. Un Français sur trois (34%) achète via son téléphone au moins une fois par mois. 

L’abandon de panier représente 18 milliards de dollars de pertes de vente chaque année. Ce taux d’abandon est plus élevé sur mobile (97%) que sur ordinateur (entre 70 et 75%). Les raisons sont multiples : le prix, les coûts d’expédition, la rapidité de livraison, les réductions disponibles mais aussi le temps de chargement du site (Source). Les sites et applications de m-commerce ont donc tout intérêt à faire preuve de performance et de sobriété numérique. 

Qu’en est-il des 10 sites et applications de m-commerce les plus visités en France ? Quels sont les sites et applications les plus frugaux sur lesquels faire son e-shopping en toute sobriété ?

Choix des sites et applications

Pour déterminer quels sites et quelles applications étudier, nous nous sommes appuyés sur le classement des sites et applications e-commerce réalisé par Médiamétrie et la Fevad (Fédération du e-commerce et de la vente à distance). Il s’agit des sites et applications les plus visités en France au 2ème trimestre 2021.

La particularité de cette étude est qu’elle est basée sur un scénario commun qui va de la recherche et consultation d’un produit jusqu’à la consultation du panier avant paiement. Ceci permet d’être au plus proche des usages réels des internautes et mobinautes. 

Classement de l’empreinte environnementale des 10 sites de m-commerce les plus visités en France

Les 3 sites les moins impactants sont : Leclerc, Cdiscount et Ebay. 

Les 3 sites les plus impactants sont : Amazon, Carrefour et Veepee. 

Nous observons plus de 2,7 fois plus d’impact entre le site le moins impactant (Leclerc) et le site le plus impactant (Amazon) de ce classement.

La moyenne d’impact carbone de ces 10 sites web est de 0,92 gEqCO2 pour une durée moyenne du scénario de 1 minute et 54 secondes, soit l’équivalent de 8 mètres effectués en véhicule léger. 

Projection des impacts carbone sur un mois

Considérons que 55% du trafic global du e-commerce passe par le mobile, contre 39% par le PC et 6% par la tablette (Source).

Si l’on projette l’impact carbone de ces 10 sites e-commerce pour en moyenne 37,41 millions de visites par mois ayant une durée de 5 minutes et 54 secondes, cet impact serait de 439,6 tonnes d’EqCO2 par mois (87,5 tonnes sur mobile, 341,0 tonnes sur PC et 11,1 tonnes sur tablette). C’est l’équivalent de 98 fois la circonférence de la Terre parcourue en véhicule léger.

Concernant le meilleur site web de ce classement (Leclerc) pour 9,99 millions de visites / mois ayant une durée moyenne de 3 minutes, cet impact serait de 37,0 tonnes d’EqCO2 par mois (5,9 tonnes sur mobile, 30,3 tonnes sur PC et 0,8 tonne sur tablette). C’est l’équivalent de 8 fois la circonférence de la Terre parcourue en véhicule léger.

Concernant le site web le moins bon de ce classement (Amazon) pour 164,32 millions de visites / mois ayant une durée moyenne de 8 minutes, l’impact carbone serait de 2639,4 tonnes d’EqCO2 par mois (588,1 tonnes sur mobile, 1978,4 tonnes sur PC et 72,9 tonnes sur tablette). C’est l’équivalent de 588 fois la circonférence de la Terre parcourue en véhicule léger. 

Le site web Leclerc se distingue surtout au niveau des étapes de recherche, de visualisation d’un produit et de visualisation du panier. En effet, ce site consomme peu d’énergie sur ces phases par rapport à ses concurrents. Seules les informations essentielles sont présentes sur cette page de recherche (nom des produits, prix, disponibilité). Sur la fiche produit, il y a la possibilité d’ajouter rapidement le produit au panier, et des menus déroulants sont proposés si le client souhaite plus d’informations. Ce site est également celui qui échange le moins de données pour réaliser le scénario complet. 

En rentrant plus en détail sur la page de recherche d’un produit, beaucoup de bonnes pratiques sont appliquées. Il y a peu d’échanges réseaux avec 12 requêtes HTTP et un seul fichier CSS. Le chargement différé (lazy-loading) des images est appliqué. 

Le site web d’Amazon tient son mauvais classement principalement des étapes de recherche et de visualisation d’un produit. En effet, ce site consomme beaucoup d’énergie sur ces phases, et échange beaucoup de données. Il y a 9,10 Mo de données échangées pour la phase de recherche (contre 1,03 Mo pour Leclerc), et 5,58 Mo de données échangées pour la fiche produit (contre 0,18 Mo pour Leclerc). Lors de la recherche, beaucoup d’informations apparaissent (indication « Suggestions », « Sponsorisé », « Amazon Choice » ou « N°1 des ventes », nom du produit, note, nombre d’avis, prix, réduction, date de livraison). Une vidéo publicitaire en autoplay apparaît même au milieu des produits. Lors de la visualisation du produit, beaucoup d’informations apparaissent également (offres, dates de livraison en cas de livraison gratuite ou accélérée, détails du produit, produits fréquemment achetés ensemble…). De plus, le client est obligé de scroller avant de pouvoir accéder et cliquer sur le bouton « Ajouter au panier ».  

En rentrant plus en détail sur la page de recherche d’un produit, il y a beaucoup d’échanges réseaux avec 109 requêtes HTTP et 9 fichiers CSS. Le chargement différé (lazy-loading) des images n’est pas appliqué, ce qui implique un chargement des images non visibles à l’écran. Cette pratique est à proscrire, car l’utilisateur ne scrollera pas forcément jusqu’à ces images. 

Classement de l’empreinte environnementale des 10 applications de m-commerce les plus visités en France

Les 3 applications les moins impactantes sont : eBay, Leclerc et Carrefour. 

Les 3 applications les plus impactantes sont : Amazon, AliExpress et ManoMano.

Nous observons plus de 2,8 fois plus d’impact entre l’application la moins impactante (eBay) et l’application la plus impactante (Amazon) de ce classement

La moyenne d’impact carbone de ces 10 applications est de 0,69 gEqCO2 pour une durée moyenne du scénario de 2 minutes et 1 seconde, soit l’équivalent de 6 mètres effectués en véhicule léger

L’application eBay tient sa première place des phases du lancement de l’application et de la visualisation du panier. En effet, lors de ces phases, cette application consomme peu d’énergie. De plus, elle échange peu de données sur toute la durée du scénario (seulement 0,53 Mo). 

Amazon se retrouve une nouvelle fois à la dernière place du classement, loin derrière ses concurrents. Ce résultat s’explique à nouveau par les phases de recherche et de visualisation du produit, où cette application consomme beaucoup plus d’énergie que les autres. En termes de données échangées, nous observons 8,22 Mo pour la recherche (contre 0,23 Mo pour eBay) et 2,6 Mo pour la fiche produit (contre 0,13 Mo pour eBay). 

Bilan

Que ce soit pour les sites web ou les applications de m-commerce les plus visités en France, nous constatons un impact près de trois fois plus important entre la plateforme la plus sobre et celle la plus impactante

Cela montre qu’en gérant différemment les informations visibles à l’écran, le chargement des images, la consommation des scripts et les données échangées au cours du scénario, il est possible de diminuer l’impact environnemental d’un site web et d’une application mobile. 

En tant que e-shopper utilisant son mobile, il vaut mieux passer par les applications que par les sites web. En effet, sur le scénario étudié, les sites web impactent en moyenne 39% de plus. Seul AliExpress a une consommation plus importante sur application que sur site web. Cependant, les applications ont un impact au niveau de leur téléchargement et de leurs mises à jour. Elles sont donc à privilégier seulement en cas de commandes régulières.

Cela dit, en termes de sobriété numérique, rien n’égalera le fait d’acheter les produits alimentaires au marché et les autres produits chez des commerçants locaux, bien entendu ! 

Tableau des résultats

Classement des 10 sites web les plus visités en France

Sites web URLÉnergie (mAh)Données échangées (Mo)Impact carbone (gEqCO2)Empreinte Eau (Litres)Empreinte Sols (m²)Durée du scénario (secondes)
Leclerc e.leclerc 11,57 2,59 0,61 0,10 1,29 102.72
Cdiscount cdiscount.com 13,49 2,62 0,69 0,13 1,50 108.03
eBay ebay.fr 14,00 3,96 0,78 0,14 1,58 122.24
Leroy Merlin leroymerlin.fr 15,47 3,15 0,80 0,14 1,72 112.67
AliExpress fr.aliexpress.com 14,84 3,89 0,80 0,13 1,67 114.46
ManoMano manomano.fr 13,60 6,30 0,87 0,14 1,56 107.33
Fnac fnac.com 16,88 4,20 0,90 0,15 1,90 118.37
Veepee veepee.fr 14,50 8,19 1,00 0,16 1,68 114.95
Carrefour carrefour.fr 20,25 4,14 1,04 0,19 2,25 118.8
Amazon amazon.fr 19,04 18,06 1,68 0,24 2,29 123.84

Classement des 10 applications les plus visitées en France

Applications Version Énergie (mAh)Données échangées (Mo)Impact carbone (gEqCO2)Empreinte Eau (Litres)Empreinte Sols (m²)Durée du scénario (secondes)
eBay 6.51.0.2 11,69 0,53 0,51 0,09 1,27 119,73
Carrefour 14.4.3 11,67 0,57 0,52 0,10 1,29 108,64
LeclercDrive 15.2.0 11,97 0,45 0,52 0,10 1,30 128,01
Leroy Merlin 7.12.3 12,95 0,51 0,55 0,11 1,41 115,84
Cdiscount 1.43.0-twa 13,81 0,04 0,58 0,11 1,49 115,44
Fnac 5.2.7 12,78 1,14 0,59 0,11 1,41 128,84
Veepee 5.24.2 12,17 2,32 0,63 0,11 1,35 114,47
ManoMano 1.15.2 15,48 0,26 0,65 0,12 1,69 124,59
AliExpress 8.44.0 17,55 2,33 0,84 0,17 1,94 123,71
Amazon Shopping 24.6.0.100 19,74 12,86 1,46 0,22 2,31 126,03

Pour chaque site et chaque application, mesurés sur un Samsung Galaxy Note 8 (Android 9), les mesures ont été réalisées à partir de scripts utilisant le langage GDSL (Greenspector Domain-Specific Language). Ce langage permet d’automatiser des actions à réaliser sur un téléphone. Les mesures ont été réalisées entre le 29 mars et le 1er avril 2022. 

Détail du scénario commun aux 20 mesures : 

-Lancement du site ou de l’application
-Pause de 30 secondes sur la page d’accueil
-Recherche d’un produit en passant par la barre de recherche, puis visualisation des produits proposés
-Sélection d’un produit, puis visualisation de ses caractéristiques (détails, avis…) 
-Ajout du produit au panier 
-Pause de 30 secondes sur la page du panier 

Chaque mesure est la moyenne de 5 mesures homogènes (avec un écart-type faible). Les consommations mesurées sur le smartphone donné selon un réseau de type wifi peuvent être différentes sur un PC portable avec un réseau filaire par exemple. Pour chacune des itérations sur les sites internet, le cache est préalablement vidé. 

Côté projection de l’empreinte, les paramètres pris en compte pour réaliser ces classements sont : 

  • Ratio de visualisation : 100% Smartphone 
  • Ratio de visualisation : 100% France 
  • Localisation des serveurs : 100% Monde 

Découvrez comment Greenspector évalue l’empreinte environnementale d’un service numérique.

ChangeNOW 2022 : Classement de la sobriété numérique des sites web des partenaires

Reading Time: < 1 minute

À l’occasion de l’évènement ChangeNOW 2022, se déroulant du 19 au 21 Mai prochain au Grand Palais Éphémère à Paris, Greenspector a mesuré l’empreinte environnementale des sites web des partenaires de l’évènement.

Classement de l’empreinte environnementale des partenaires

La moyenne d’impact carbone sur une minute de navigation de ces 98 partenaires est de 0,50 gEqCO2 soit l’équivalent de 4,5 mètres effectués en véhicule léger. Seulement 31 sites web se trouvent au dessus de cette moyenne, ce qui traduit une bonne tendance. Le site web le plus sobre de ce classement (le site de l’ADEME, 0,2 gEqCO2) est 8,1 fois moins impactant que le site le moins sobre (heforshe, 1,62 gEqCO2).

La moyenne de consommation d’énergie (mAh) est de 5,23 mAh et en moyenne 8,36 Mo de données sont échangées. En termes de requêtes web, la moyenne est de 78 requêtes.

ClassementNomURLsEcoscoreCarbon Impact (gEqCO2)Énergie (mAh)Données échangées (Mo)RequêtesEmpreinte Eau (Litres)Empreinte Sol (m²)
1ademehttps://www.ademe.fr/760.23.630.63270.040.41
2ashokahttps://www.ashoka.org/fr-fr660.233.840.95330.040.44
3bsrhttps://www.bsr.org/fr/710.233.61.26400.040.42
4goodtechlabhttps://goodtechlab.io/560.243.090.04770.040.38
5makeFRhttps://make.org/FR700.243.793.28130.040.42
6microsofthttps://www.microsoft.com/560.244.051.08310.040.46
7sustainableventureshttps://www.sustainableventures.co.uk/710.244.141.41300.040.47
8ubuntuhttps://www.ubuntu-fr.org/700.243.582.61260.040.41
9maifhttps://www.maif.fr/690.253.911.54380.040.45
10parisandcohttps://www.parisandco.paris/730.253.582.68320.040.41
11franceinvesthttps://www.franceinvest.eu/660.263.960.82560.040.46
12toniichttps://toniic.com/670.273.891.12560.040.46
13pour un reveil ecologiquehttps://pour-un-reveil-ecologique.org/fr/510.284.222.39400.040.49
14usbeketricaenhttps://usbeketrica.com/en560.285.121.84210.050.57
15grandpalaishttps://www.grandpalais.fr/en710.283.630.92750.040.44
16mjashhttps://www.mjash.fr/710.284.121.08600.040.48
17greentech.earthhttps://www.greentech.earth/570.33.913.49480.040.46
18saint-gobainhttps://www.saint-gobain.com/en610.33.732.25700.040.45
19evpahttps://evpa.eu.com/510.314.232.63580.050.5
20capgeminihttps://www.capgemini.com/670.313.81.97740.050.46
21whocareschronicleshttps://www.whocareschronicles.com/550.314.14.1400.050.47
22changemakerxchangehttps://changemakerxchange.org/360.325.851.82290.060.66
23climateseedhttps://climateseed.com/fr640.323.854.02540.050.45
24halcyonhousehttps://www.halcyonhouse.org/690.323.695.37370.040.43
25fresqueduclimathttps://fresqueduclimat.org/510.3341.55950.050.49
26jokkolabshttps://jokkolabs.net/560.334.042.39790.050.49
27socialnesthttps://socialnest.org/470.334.532.76580.050.53
28leparisienhttps://www.leparisien.fr/530.334.562.17690.050.54
29Moët Hennessyhttps://www.lvmh.com/houses/wines-spirits/600.344.182.02850.050.51
30cleantechopenhttps://www.cleantechopen.org/490.354.394.56490.050.51
31unhcrhttps://www.unhcr.org/260.354.362.72770.050.52
32Bnpparibashttps://group.bnpparibas/en/600.364.282.1950.050.52
33swen-cphttps://www.swen-cp.fr/460.363.954.11770.050.48
34yunusandyouthhttps://yunusandyouth.com/400.364.332.58870.050.52
35lfca.earthhttps://lfca.earth/ALL_fr/570.374.362.97880.050.53
36bcorporationhttps://www.bcorporation.net/en-us/510.375.172.47710.060.61
37unwomenenhttps://www.unwomen.org/en490.374.255.29590.050.5
38bmw-foundationenhttps://bmw-foundation.org/en/470.394.645.38570.050.54
39financefortomorrowhttps://financefortomorrow.com/410.395.293.24690.060.62
40cdp.netenhttps://www.cdp.net/en520.394.765.77510.060.55
41inwinkhttps://www.inwink.com/fr/340.394.993.31770.060.59
42unescohttps://fr.unesco.org/450.44.34.57900.060.52
43rockstarthttps://rockstart.com/350.45.83.74550.060.67
44cartierwomensinitiativehttps://www.cartierwomensinitiative.com/420.45.853.38580.060.67
45mirovahttps://www.mirova.com/fr360.45.871.92840.060.69
46fastforward2030http://fastforward2030.com/420.414.827.56370.060.56
47solarimpulsehttps://solarimpulse.com/480.415.423.33830.060.64
48bridgeforbillionshttps://www.bridgeforbillions.org/50.415.842.6770.060.68
49CNNhttps://edition.cnn.com/440.425.254.13800.060.62
50makesensehttps://makesense.org/490.424.357.31600.060.52
51bcghttps://www.bcg.com/480.424.594.74920.060.56
52kairos-societyhttps://www.kairos-society.eu/370.424.513.441090.060.56
53springwisehttps://www.springwise.com/580.433.937.36810.050.48
54acumenhttps://acumen.org/390.444.943.511090.060.6
55gsgiihttps://gsgii.org/400.444.773.61180.060.59
56gecinahttps://www.gecina.fr/en630.454.099.01600.060.49
57impactfrancehttps://www.impactfrance.eco/360.457.034.47440.070.8
58orangehttps://www.orange.com/fr510.454.592.941400.060.58
59arrowhttps://www.arrow.com/360.465.992.641090.070.72
60socialenterprisehttps://www.socialenterprise.org.uk/280.465.18.69470.060.59
61aiglehttps://www.aigle.com/fr/fr380.475.388.48490.060.63
62kickstarthttps://kickstart.org/410.493.9810.04780.060.49
63paperontherockshttps://paperontherocks.com/430.494.5210.36600.060.54
643dexperiencelabhttps://3dexperiencelab.3ds.com/en/520.54.249.51860.060.52
65citeohttps://www.citeo.com/380.56.874.47820.080.8
66eibenindexhttps://www.eib.org/en/index.htm470.55.384.791230.070.66
67respectoceanhttps://www.respectocean.com/400.54.859.18740.060.58
68unreasonablegrouphttps://unreasonablegroup.com/360.5175.9660.080.81
69euclidnetworkhttps://euclidnetwork.eu/330.535.36.681170.070.65
70Founder Institutehttps://fi.co/410.545.577.671020.070.67
71KPMGhttps://home.kpmg/xx/en/home.html360.546.238.5690.070.73
72time-planethttps://www.time-planet.com/fr260.545.499.02870.070.66
73sweephttps://www.sweep.net/370.558.514.92650.090.97
74onepercentfortheplanethttps://www.onepercentfortheplanet.org/520.564.5412.69750.070.55
75lesechoshttps://www.lesechos.fr/440.587.065.71170.080.84
76phenixcapitalgrouphttps://www.phenixcapitalgroup.com/310.585.4910.21940.070.66
77lacaserneparishttps://www.lacaserneparis.com/420.695.7416.16760.080.69
78startupbootcamphttps://www.startupbootcamp.org/200.695.3316.9770.080.65
79endeavorhttps://endeavor.org/590.74.5620.03630.080.56
80terresdecafehttps://www.terresdecafe.com/en/300.75.917.322120.090.77
81ctofrancehttps://www.ctofrance.com/280.7610.296.091400.111.21
82cereshomepagehttps://ceres.org/homepage550.774.9621.57740.080.61
83The Hoffmann Global Institute for Business and Societyhttps://www.insead.edu/centres/the-hoffmann-global-institute-for-business-and-society330.785.4712.072070.090.73
84Start Up Energy Transitionhttps://www.startup-energy-transition.com/390.78170.93360.151.88
85hello-tomorrowhttps://hello-tomorrow.org/490.824.3924.08910.080.56
86bonduelleenhttps://www.bonduelle.com/en/540.824.5124.95740.080.57
87ship2bhttps://www.ship2b.org/470.825.674.773340.10.81
88ebanhttps://www.eban.org/290.888.3117.931070.110.99
89undphttps://www.undp.org/340.897.5523.86540.10.89
90oneyoungworldhttps://www.oneyoungworld.com/410.924.9129.65630.090.61
91apcoworldwidehttps://apcoworldwide.com/240.987.118.792000.110.91
92sparknewshttps://www.sparknews.com/350.995.9121.042090.110.79
93aptarhttps://www.aptar.com/301.037.4728.63790.110.9
94lafrenchtechhttps://lafrenchtech.com/fr/101.096.9232.9770.110.84
95nordictalkshttps://nordictalks.com/381.095.733.321090.110.73
96keringhttps://www.kering.com/281.1510.2626.971070.141.21
97merciraymondhttps://merciraymond.fr/351.46.4952.19260.130.79
98heforshehttps://www.heforshe.org/fr421.629.0656.94290.161.08

Greenspector a été sélectionné pour la troisième année consécutive par l’organisation pour participer et exposer à ChangeNOW, le rendez-vous incontournable et le plus grand évènement mondial pour la planète

Retrouvez-nous sur place dans la zone « Accelerate the Ecosystem » du 19 au 21 Mai prochain au Grand Palais Éphémère à Paris, nous répondrons à toutes vos questions. N’hésitez pas à nous contacter pour planifier un rendez-vous !

Pour chacun de ses sites web et applications, mesuré(e)s sur un smartphone S7 (Android 8), les mesures ont été réalisées au travers de notre Greenspector Benchmark Runner, permettant la réalisation de tests automatisés.

Détail des scénarios :
– Chargement de l’application
– Inactivité site web en premier-plan
– Scroll
– Inactivité site web en arrière-plan

Chaque mesure est la moyenne de 5 mesures homogènes (avec un écart-type faible). Les consommations mesurées sur le smartphone donné selon un réseau de type wifi peuvent être différentes sur un PC portable avec un réseau filaire par exemple. Pour chacune des itérations, le cache est préalablement vidé.

Découvrez comment Greenspector évalue l’empreinte environnementale d’un service numérique.

CAPTCHA et sobriété numérique 

Reading Time: 3 minutes

La sécurité est une partie essentielle du numérique responsable. Il n’est pas rare de se demander comment protéger son site, en particulier lorsque l’on laisse la possibilité d’envoyer du contenu depuis son site web : formulaire (en particulier de contact), commentaires, etc. Et lorsque l’on sait qu’une bonne partie de l’activité sur le web n’est pas due à des humains (How much of the internet is fake?). Personne n’a envie de subir une injection ou autre acte malveillant via son site. 

A la fin des années 90, une solution miracle est apparue sous la forme du CAPTCHA. Aujourd’hui, on trouve ce composant un peu partout. Il peut s’agir de recopier des caractères difficilement lisibles, de cliquer sur des photos contenant différents éléments ou de cliquer sur une case afin de prouver que l’on n’est pas un robot.  

Mais qu’en est-il de son impact environnemental ? Comment le concilier avec la sobriété numérique ? C’est ce que nous allons voir ici! 

A la recherche de la meilleure solution 

Le CAPTCHA répond au besoin de sécuriser les données soumises par des internautes sur votre site. 

Le problème est que cette façon de faire, entre autres avec reCAPTCHA, est souvent laborieuse pour les utilisateurs. L’impact environnemental du service numérique est alors accru par le simple fait que le parcours utilisateur se retrouve allongé, quand il n’aboutit pas carrément à un abandon. En particulier pour les utilisateurs en situation de handicap qui pourraient se retrouver dans l’impossibilité de mener la tâche à leur terme. Sans compter les requêtes supplémentaires (CSS, JS et autres iframes) nécessaires à l’intégration de ce type de composant dans une page.  

Ainsi (et c’est là un point essentiel du numérique responsable), la recherche du CAPTCHA le plus sobre tient d’abord compte de l’accessibilité.  

L’accessibilité des CAPTCHA est un problème récurrent et les solutions sont nombreuses. Le principal mot d’ordre ici est de ne pas utiliser de CAPTCHA. Ainsi, le poids de la sécurisation des formulaires ne doit plus reposer sur les utilisateurs. Le sujet a été précédemment discuté, entre autres chez Orange.  

Il en ressort plusieurs possibilités :  

  • Repérer le temps de saisie pour exclure les saisies trop rapides 
  • Utiliser un filtre (expression régulière ou autre) pour repérer les réponses suspectes 
  • Ajouter de façon aléatoire une question à laquelle un bot ne saura pas forcément répondre (“Quel animal aboie ?”, “Combien font un plus un ?”, “Combien de d dans pudding ?”, etc). En laissant la possibilité de rafraîchir la question en cas de difficulté pour l’utilisateur. 
  • Le honeypot (sur lequel nous allons revenir) 

Au final, c’est la solution du honeypot qui semble la plus adéquate dans la plupart des cas. Détaillée par ailleurs sur un site du gouvernement canadien, elle consiste à ajouter un champ caché dans le formulaire concerné. Ce champ doit être défini de façon à être rempli seulement par les bots. Pour cela, il est caché aux utilisateurs et technologies d’assistance, tout en donnant dans le code des éléments laissant penser aux bots qu’il s’agit d’un champ obligatoire. Ainsi, à la validation du formulaire, on sait qu’une réponse au formulaire avec ce champ renseigné ne devra pas être prise en compte. Le honeypot peut demander un peu de réflexion pour une mise en place sans faille mais elle reste très légère et surtout élégante car elle se recentre sur le besoin d’origine : empêcher des bots d’envoyer des informations via un service numérique. Plutôt que d’impacter l’utilisateur afin de s’assurer qu’il n’est pas un robot, on laisse intact le parcours utilisateur pour se focaliser sur la détection des bots.

Conclusion 

L’exemple du CAPTCHA s’avère représentatif d’une approche par le numérique responsable. Dans le but d’améliorer la sécurité d’un service numérique, on s’intéresse d’abord à l’accessibilité des solutions possibles (la solution gratuite et largement répandue n’étant là encore pas forcément la meilleure) pour enfin s’assurer via la sobriété numérique que la solution retenue ne dégrade pas l’impact environnemental du service.  

Classement de l’impact carbone du Top 100 des sites web les plus visités de la presse quotidienne française sur mobile

Reading Time: 6 minutes

Introduction

Ne rien rater de l’actualité, ce qu’il se passe dans le monde, être prévenu en temps réel, le smartphone prend ici toute son utilité. Nous sommes tous connectés à une application d’information, que ce soit le matin en allant au travail, dans les transports en commun, en déplacement dans la journée ou sur la pause déjeuner… Elles sont devenues incontournables pour suivre l’information en quasi-direct.

Dans le contexte actuel de pandémie de Covid-19 et depuis le premier confinement en mars 2020, la vente de journaux en kiosque a drastiquement chuté. Les modèles publicitaires de ces médias basculent de plus en plus également vers les versions digitales. Les versions digitales ont beaucoup d’atouts pour réduire l’impact par information lue et par personne. Par ailleurs, les visites et les lecteurs, consommateurs d’informations sur le numérique explosent.

Depuis le 1er avril 2021 et la nouvelle règle RGPD de protection des données, beaucoup de titres imposent désormais des abonnements payants en cas de refus des cookies. Si les médias restent pour la plupart libres d’accès et gratuits, ils regorgent de publicités et d’outils de tracking venant perturber la performance d’usage et l’expérience de lecture des contenus numériques. Ceci entraîne une augmentation de l’impact environnemental sur l’ensemble de la chaîne.

Les médias presse doivent donc rester vigilants pour monétiser sans démotiver les utilisateurs. Ils doivent constamment surveiller la performance sous peine de perdre du lectorat, de moins en moins captif dans un paysage de plus en plus concurrentiel. La masse importante de lecteurs oblige aussi à une plus grande responsabilité quant à l’impact environnemental généré.

Mais de quoi parle-t-on exactement ? Comment se situer en terme de sobriété d’impact ? Comment comparer l’impact de nos usages numériques avec ceux de la lecture sur un support papier ?

Nous avons choisi de comparer 100 sites web de la presse quotidienne généraliste parmi les plus consultés en France suivant le classement en ligne de l’ACPM (mars 2021). Pour cela, les filtres suivants ont été appliqués sur le site : Grand Public – Sites web mobile – Actualités & Informations – Actu & Informations généralistes. Les mesures ont été réalisées les 22 et 23 avril 2021.

Vous aussi, mesurez la sobriété et performance de votre site web sur mobile avec notre outil gratuit : le Mobile Efficiency Index. Bonne lecture !

Analyse des résultats

Synthèse – chiffres clés

La moyenne d’impact carbone par page et par minute de ce benchmark est de 0,147 gEqCO2. 62 sites se trouvent en dessous de cette moyenne, ce qui traduit une bonne tendance. 67 sites ont un Ecoscore Greenspector supérieur à la moyenne du classement. (51/100)

Quelques chiffres clés des différentes métriques mesurées sur ce classement des 100 sites web Presse consultés sur mobile :

MétriquesMoyenneMinimumMaximum
Impact CO2 par page / min en gEqCO20,1470,0750,441
Ecoscore Greenspector538111
Énergie consommée en mAh4,22 mAh3,2117,66
Données échangées en Mo2,31 Mo0,63014,98
Nombre de requêtes web787390

Projections CO2 pour une visite

La durée moyenne de lecture de la presse en France est de 23 minutes. (Source : OneNext V2 2021 ACPM). Ce temps de lecture combiné avec notre impact CO2 moyen par page et par minute (0,147 gEqCO2) nous donne une projection d’impact CO2 moyen d’une lecture numérique de : 3,381 gEqCO2. Soit 30 mètres parcourus en véhicule léger moyen français.

En moyenne en mars suivant l’ACPM, 2,12 pages sont consultées par visite et par média (sur l’ensemble de ces 100 sites web). En combinant ce chiffre avec l’impact moyen par page et par minute (0,147 gEqCO2), nous obtenons une projection d’impact CO2 moyen par visite de : 0,311 gEqCO2, soit 7,167 gEqCO2 pour une moyenne de lecture de 23 minutes. Soit l’équivalent de 63 mètres effectués en véhicule léger moyen français.

IndicateursImpact CO2 g EqCO2Mètres parcourus en véhicule léger
Moyenne par visite
(2,12 pages consultées) / minute
0,3112,77
Moyenne d’une visite d’un média presse
(23 minutes)
7,16763

Presse numérique ou papier ?

On considère que l’impact CO2 d’une page d’un exemplaire papier se situe entre 2,3 et 2,5 g eqCO2 par page (Source). C’est 16x plus élevé que pour une page moyenne consultée pendant une minute.

En comparaison avec un exemplaire papier de 50 pages : 120gr / exemplaire soit l’équivalent d’un kilomètre effectué en véhicule léger. La lecture de 13 heures et 36 minutes d’un format numérique équivaut à l’impact carbone d’un exemplaire presse papier. L’impact Carbone d’un exemplaire papier est en moyenne égalé par 35 lecteurs sur les formats numériques (basé sur une moyenne temps de lecture).

L’impact environnemental des 10 médias les plus consultés par mois

En Mars 2021 et selon l’ACPM, le top 10 des médias les plus consultés sur mobile par mois (selon le nombre de pages vues) était le suivant :

MédiaPages vues en Mars 2021Impact CO2 en tonnes
(T eq CO2)
Équivalences en km parcourus en véhicule léger
lequipe.fr268 142 56522,831203 855
ouest-france.fr248 400 02326,993241 010
programme-tv.net247 965 94025,149224 553
bfmtv.com213 233 37935,761319 297
closermag.fr186 568 23338,911347 425
lefigaro.fr166 235 14220,725185 049
lemonde.fr139 718 44712,746113 809
boursorama.com138 832 52645,795408 890
francetvinfo.fr125 611 91317,062152 339
femmeactuelle.fr117 341 33514,899152 345

Cette lecture des 10 titres correspond à l’équivalent de 260,87 Tonnes de CO2, soit 2,3 millions de km de voiture / mois de consultation. Soit en projection annuelle près de 28 millions de km de voitures.

Bien entendu, nous prenons la page d’accueil en page référence pour la projection de l’impact CO2, le nombre de pages vues remontées par l’ACPM englobe plus largement toutes les pages des sites des médias.

Le Top 3

Le top 3 de ce classement est constitué des médias : Vanity Fair, Télérama et LaRépubliqueDesPyrénées. Le premier de ce classement est 5,8 fois moins impactant que le dernier site web.

Le Flop 3

Le flop 3 de ce classement est constitué des médias : Boursorama, Objectif Gard et Z Infos 974.

Classement des 100 sites web de presse quotidienne française

ClassementURL mesuréeEcoscoreTotal gEqCO2
par page
Visites Mars 2021Pages vues Mars 2021Moyenne de pages consultées par visite sur MarsImpact CO2 par pages vues mensuelles TEqCO2Impact CO2 moyen par visite / minute
1vanityfair.fr730.075264818132640191.230.2450.092
2telerama.fr730.0785930116107137761.810.8350.141
3larepubliquedespyrenees.fr710.081197704236984991.870.2990.151
4businessinsider.fr710.0843189138153502864.811.2880.404
5marianne.net660.085572158690110551.570.7640.133
6lequipe.fr670.085591388622681425654.5322.8320.386
7parismatch.com720.08511995060943130577.868.0320.67
8france24.comfr740.0866887247112632341.640.9680.141
9sciencesetavenir.fr510.087458528656993781.240.4930.108
10lemonde.fr620.091833101061397184471.6812.7470.153
11lamanchelibre.fr530.092118601318129881.530.1660.14
12gqmagazine.fr630.0928633392100398211.160.9240.107
13geo.fr640.0957186106129216611.81.2240.17
14rfi.frfr660.0956896644140488192.041.3370.194
15psychologies.com680.095158740523536501.480.2250.142
16enfant.com710.096147167043235302.940.4130.281
17liberation.fr720.09610928412136652871.251.3080.12
18franceinter.fr640.0979245636141069171.531.3680.148
19courrier-picard.frN/A0.099380472452137811.370.5170.136
20cesoirtv.com640.099167030741119652.460.4080.244
21programme-tv.net700.1011149690512479659402.1625.150.219
22lejdd.fr610.102433445157431221.320.5840.135
23ohmymag.com470.10224261887340200191.43.4580.143
24nouvelobs.com660.10218462710346746241.883.5360.192
25vogue.fr570.1056672573305385904.583.2130.482
26mouv.fr690.105166311528191521.70.2970.179
27charentelibre.fr670.107298812157658441.930.6170.206
28courrierinternational.com700.1086443175104574611.621.1270.175
29franceculture.fr560.1089550215167272381.751.8090.189
30gentside.com470.10818925423255007281.352.7620.146
31ouest-france.fr720.109943459392484000232.6326.9930.286
32francefootball.fr760.111229076162693772.740.6940.303
33francebleu.fr620.11118086983256667631.422.8490.157
34gala.fr660.115522634611141084712.1813.0830.25
35sudouest.fr510.11624418027381791391.564.4340.182
36footmercato.net690.11625165358743808082.968.6430.343
37lavoixdunord.fr540.11818104799248744021.372.9270.162
38capital.fr670.1218245573255590891.43.060.168
39topsante.com600.127327130218064892.982.6220.358
40notretemps.com810.1221924633384588020.4680.243
41lepoint.fr610.12224208600371645111.544.5460.188
42lefigaro.fr430.125934040791662351421.7820.7260.222
43grazia.fr520.1268950822427126684.775.3610.599
44corsematin.com520.126176346827544501.560.3480.197
45larep.fr680.127183167027202041.490.3440.188
46femmeactuelle.fr630.127465267831173413352.5214.8990.32
47dna.fr570.128410185474020421.80.9440.23
48actu.fr570.1366282701866030511.3111.2160.169
49lest-eclair.frN/A0.13177213845154172.550.5850.33
50lalsace.fr540.13276043146992961.70.6130.222
51futura-sciences.com730.13412047041138154671.151.8580.154
52lejsl.com540.136232767656865022.440.7720.332
53francetvinfo.fr650.136900754831256119131.3917.0630.189
54lamontagne.fr640.136529639779950331.511.0860.205
55republicain-lorrain.fr540.1374979360105800682.121.4460.29
56paris-normandie.fr460.137325608150582511.550.6920.212
57bienpublic.com570.137258799760705752.350.8320.322
58leprogres.fr550.13811456693226525111.983.1160.272
59dossierfamilial.com520.14266445033625201.260.4710.177
60letelegramme.fr450.1438353788117976761.411.6840.202
61ledauphine.com570.14517720801321797651.824.6760.264
6201net.com380.147359180670133341.951.0280.286
63vosgesmatin.fr560.15208468643228562.070.6480.311
6420minutes.fr500.15237211638714507371.9210.8440.291
65lexpress.fr400.1527324340100709861.381.5290.209
66lesechos.fr510.15412395096175001901.412.6870.217
67santemagazine.fr550.154687946298103101.431.5140.22
68arte.tvfr590.1557339223192457702.622.9790.406
69science-et-vie.com430.155110651613488061.220.210.189
70estrepublicain.fr570.1568013464156418291.952.4460.305
71challenges.fr400.163213470928328371.330.4620.216
72parents.fr470.165486981976597111.571.2610.259
73lyoncapitale.fr540.167123187916370831.330.2740.222
74midilibre.fr630.16719440505288532381.484.8260.248
75varmatin.com440.167455568371216691.561.1920.262
76bfmtv.com620.1681270775572132333791.6835.7610.281
77lindependant.fr630.16910593314151904991.432.5710.243
78laprovence.com350.1710477922166746681.592.830.27
79huffingtonpost.fr440.17512924248164914761.282.880.223
80ladepeche.fr650.17636336779546067011.59.60.264
81leparisien.fr310.17952339150682023051.312.2260.234
82voici.fr620.183650793081132958581.7420.6930.318
83nicematin.com280.1868727545132036581.512.4570.281
84studyrama.com580.19235990184784393.591.6080.682
85lanouvellerepublique.fr270.199492154885323431.731.70.345
86lerevenu.com240.203171539323859981.390.4840.282
87closermag.fr350.209267196671865682336.9838.9121.456
88lunion.fr300.209402541796625062.42.0240.503
89europe1.fr390.21310533824168224811.63.590.341
90la-croix.com430.221230684537432061.620.8290.359
91bibamagazine.fr460.2235814198450529957.7510.0481.728
92telestar.fr330.2475126881323194616.37.9671.554
93autoplus.fr390.252179053560081853.361.5110.844
94latribune.fr520.252383699252292531.361.3190.344
95lyonmag.com430.265499829564751411.31.7170.344
96toutsurmesfinances.com140.269136469916097691.180.4330.318
97pourquoidocteur.fr260.271120065414801811.230.40.333
98boursorama.com380.33250418191388325265.5445.7961.829
99objectifgard.com120.337152747621039441.380.710.464
100zinfos974.com370.441205752641660402.021.8370.893

Vous souhaitez vous mesurer sur ce même benchmark ? Contactez-nous ou bien mesurez-vous sur notre outil en ligne : le Mobile Efficiency Index.

Pour chacun de ses sites web, mesurés sur un smartphone S7 (Android 8), les mesures ont été réalisées au travers de notre GREENSPECTOR Benchmark Runner, permettant la réalisation de tests automatisés. Les mesures ont été réalisées les 22 et 23 avril 2021.

Détail des scénarios :
– Chargement de l’application
– Inactivité site web en premier-plan
– Inactivité site web en arrière-plan

À titre informatif, 69% des sites web mesurés bloquent l’étape de scroll initialement présente dans nos scénarios de benchmark web en raison de la pop-up RGPD (acceptation ou refus des cookies).

Chaque mesure est la moyenne de 3 mesures homogènes (avec un écart-type faible). Les consommations mesurées sur le smartphone donné selon un réseau de type wifi peuvent être différentes sur un PC portable avec un réseau filaire par exemple. Pour chacune des itérations, le cache est préalablement vidé.

Pour évaluer les impacts des infrastructures (datacenter, réseau) dans les calculs de projection carbone, nous nous sommes appuyés sur la méthodologie Greenspector basée sur des données réelles mesurées du volume de données échangées. Cette méthodologie d’évaluation tient compte de la consommation de ressources et d’énergie en usage pour les équipements sollicités. Nous utilisons pour cela une approche dite « ascendante » (bottom-up) c’est-à-dire que l’on étudie  chaque composant du système et leurs contributions sur l’impact carbone. On considère une infrastructure standard (serveur, nombre de machines virtuelles requises, etc.) qui a été déterminée en compilant plusieurs articles et études scientifiques. Cette approche permet de mieux s’approcher d’un matériel réel et de mieux identifier les sources d’incertitudes. Une étude évaluant la variabilité de notre modèle sera bientôt publiée.

Pour évaluer les impacts du mobile dans les calculs de projections carbone, nous mesurons sur device réel la consommation d’énergie du scénario utilisateur et afin d’intégrer la quote-part d’impact matériel, nous nous appuyons sur le taux d’usure théorique généré par le scénario utilisateur sur la batterie, première pièce d’usure d’un smartphone. 500 cycles de charges et de décharges complètes occasionnent donc dans notre modèle un changement de smartphone. On considère qu’environ 30% des utilisateurs remplacent la batterie au lieu de remplacer le smartphone. Cette méthodologie et mode de calcul ont été validés par le cabinet de conseil spécialiste de l’éco-conception Evea.