Exigences de sobriété numérique pour les villes et collectivités – Classement

Reading Time: 7 minutes

En 2020, nous avions publié une étude portant sur les exigences de sobriété numérique au sein des marchés publics. A l’occasion de la publication cet été du décret n° 2022-1084 du 29 juillet 2022, il nous a semblé judicieux de refaire le point sur les sites des villes et collectivités.  

Ce décret concerne les communes et collectivités de plus de 50.000 habitants, leur imposant l’élaboration d’une stratégie numérique responsable portant en particulier sur la réduction de l’empreinte environnementale du numérique.  

Nous avons donc remesuré les sites des 29 villes et 17 métropoles déjà abordés afin de comparer les résultats obtenus.  

Les mesures ne portent ici que sur la première page de chaque site. Il faudrait bien sûr dans l’idéal prendre en compte un échantillon de pages plus large voire comparer en se basant sur un parcours utilisateur commun à l’ensemble de ces sites. Toutefois, la présente démarche permet déjà d’établir des points de comparaison et de dégager quelques bonnes pratiques.

Sites des métropoles 

L’Ecoscore tel que défini par Greenspector permet d’avoir une bonne vision d’ensemble pour chaque site. Nous commencerons donc par regarder son évolution entre les mesures initiales et les remesures.

Ecoscore des sites des métropoles

Dans la plupart des cas, on observe une amélioration (même légère) de l’EcoScore. Les métropoles de Brest, Grenoble, Nice, Orléans et Strasbourg se démarquent par une augmentation très forte. Pour quelques métropoles, la tendance est à la baisse.  

Alors que Nancy présentait le meilleur EcoScore (74), Rennes prend la tête avec un EcoScore de 80. 

On peut toutefois estimer qu’il serait important pour chaque ville d’obtenir un EcoScore d’au moins 50/100, ce qui n’est encore pas le cas pour certaines.  

L’estimation des impacts environnementaux des différents sites est un autre bon élément de comparaison.

Projection carbone des sites des métropoles

On remarque ici que la tendance est globalement à la hausse pour les sites mesurés avec parfois un fort écart entre la mesure initiale et la remesure. Le cas de la métropole de Saint-Etienne l’illustre très bien.

Analyse plus poussée de certains sites

Page d'accueil du site de la métropole de Rennes
Métropole de Rennes

Ce site apparaît très léger.  Les images, même si elles sont plutôt nombreuses, sont légères mais devraient être lazy-loadées (ne les charger qu’au moment de les afficher).  Le recours à une font variable permettrait de limiter les requêtes. Le carrousel en page d’accueil n’apporte pas grand-chose. Le fait qu’il soit en autoplay risque d’entraîner des surconsommations en plus de pouvoir poser des problèmes d’accessibilité.  La page Accessibilité serait plus pertinente si elle faisait état de la conformité vis-à-vis du RGAA (Référentiel Général d’Amélioration de l’Accessibilité) et présentait le plan pluriannuel d’accessibilité pour le site.  Les quelques animations, même si elles ne sont pas envahissantes, semblent superflues et peuvent entraîner une surconsommation.

Page d'accueil du site de la métropole de Montpellier
Métropole de Montpellier

Suite à la remesure, le site de la métropole de Montpellier est le moins bien placé. En laissant le site ouvert, on observe rapidement plus de 300 requêtes HTTP pour plus de 30 Mo de données transférées. Même une fois le site chargé, les requêtes continuent à s’accumuler.  

La page d’accueil est particulièrement lourde, surtout au niveau des contenus : beaucoup d’images, des carrousels en autoplay, quantité de services tiers.  

Si des gains rapides sont possibles via de l’optimisation technique, un travail de fond s’impose notamment via une approche plus sobre du design.

Synthèse des mesures pour les sites web des métropoles

versionMétropolesecoscoreEnergieCPUDonnéesMémoireRequêtesCarbonEauSol
https://metropole.rennes.fr/ - RemesureRennes804,600,832,22687,58430,300,0480,528
https://www.lillemetropole.fr/ - RemesureLille764,770,682,37685,11240,280,0470,537
https://www.grandnancy.eu/accueil/Nancy743,540,581,35544,09450,240,0380,412
https://www.bordeaux-metropole.fr/ - RemesureBordeaux724,780,661,45756,86510,300,0490,551
https://www.grandnancy.eu/accueil/ - RemesureNancy724,890,602,04718,18420,310,0500,560
https://www.orleans-metropole.fr/ - RemesureOrleans715,691,461,77544,13370,330,0550,643
https://www.metropolegrandparis.fr/fr - RemesureParis704,470,542,07704,63380,280,0460,511
https://www.saint-etienne-metropole.fr/Saint Etienne703,750,533,80426,20890,360,0490,463
https://www.lillemetropole.fr/Lille693,570,631,73560,04460,250,0390,416
https://www.metropole-rouen-normandie.fr/ - RemesureRouen665,001,300,94706,73300,270,0470,563
https://www.bordeaux-metropole.fr/Bordeaux623,870,851,34562,92600,270,0430,457
https://metropole.nantes.fr/ - RemesureNantes625,321,3510,16748,48600,520,0670,626
https://www.clermontmetropole.eu/accueil/ - RemesureClermont615,700,885,68808,34910,490,0690,679
https://metropole.rennes.fr/Rennes604,311,931,23639,53430,270,0440,495
https://www.toulouse-metropole.fr/ - RemesureToulouse604,750,912,49698,46710,350,0530,560
https://www.metropolegrandparis.fr/frParis594,080,831,94567,65430,270,0430,471
https://www.saint-etienne-metropole.fr/ - RemesureSaint Etienne575,861,0834,99819,961041,130,1130,743
https://www.brest.fr - RemesureBrest565,331,253,87723,991420,510,0700,664
https://metropoletpm.fr/ - RemesureToulon545,420,794,97686,441760,580,0780,694
https://metropole.nantes.fr/Nantes525,071,528,75699,17880,520,0670,613
https://www.ampmetropole.fr/Aix Marseille Provence514,380,9114,12893,421400,680,0760,573
https://www.metropole-dijon.fr/ - RemesureDijon516,082,083,51657,43700,430,0660,706
https://www.nicecotedazur.org/ - RemesureNice505,021,213,06654,931290,460,0650,622
https://www.metropole-rouen-normandie.fr/Rouen494,372,931,64657,77260,250,0420,493
https://www.clermontmetropole.eu/accueil/Clermont454,311,491,23698,79890,330,0510,520
https://tours-metropole.fr/Tours444,641,762,85778,26670,350,0520,547
https://tours-metropole.fr/ - RemesureTours444,891,075,43663,200,320,0490,542
https://www.strasbourg.eu/ - RemesureStrasbourg436,192,682,80754,16840,440,0680,725
https://www.grenoblealpesmetropole.fr/ - RemesureGrenoble416,592,373,81696,83860,480,0730,771
https://metropoletpm.fr/Toulon414,210,954,58921,882420,620,0770,598
https://www.toulouse-metropole.fr/Toulouse414,191,402,10601,40700,320,0480,498
https://www.ampmetropole.fr/ - RemesureAix Marseille Provence407,862,3010,18840,472070,840,1100,984
https://www.metzmetropole.fr/ - RemesureMetz3811,063,248,47925,301490,850,1261,300
https://www.montpellier3m.fr/ - RemesureMontpellier325,932,1340,93754,012591,480,1440,843
https://www.brest.frBrest315,382,403,64882,162180,610,0810,711
https://www.metropole-dijon.fr/Dijon285,886,316,48630,14770,490,0690,692
https://www.orleans-metropole.fr/Orleans286,407,572,27590,651120,470,0730,762
https://www.metzmetropole.fr/Metz2616,105,979,20856,201641,100,1711,858
https://www.nicecotedazur.org/Nice244,623,054,28651,051210,460,0620,576
https://www.grenoblealpesmetropole.fr/Grenoble1910,167,545,87656,85960,680,1071,168
https://www.montpellier3m.fr/Montpellier196,393,4428,83831,253801,420,1480,942
https://www.strasbourg.eu/Strasbourg97,858,801,98675,410,370,0680,860

Nous avons calculé la moyenne de ces données. Sur plan général nous remarquons que l’écoscore moyen est de 50, l’énergie consommé 5,65 mAh, le pourcentage du CPU utilisé est de 2,16, les données échangées représentent 6,25 Mo, la mémoire vive utilisée est de 704 Mo, le nombre de requêtes est de 103. Concernant l’impact environnemental on observe que l’impact carbone est de 0,51 gEqCO2, l’empreinte Eau est de 0,070 Litres et l’empreinte sol de 0,68 m2.

En distinguant les mesures des remesures voici les moyennes que l’on obtient :

EcoscoreEnergieCPUDonnéesMémoiresRequêtesImpact Carbon (gEqCO2)Empreinte Eau (Litres)Empreinte sol (m2)
Moyennes des remesures575.721.407.30725950.520.0710.68
Moyennes des mesures initiales435.572.925.206821110.490.0690.67

Sites des villes 

Là aussi, on commence par regarder l’EcoScore des sites des villes de l’échantillon.

Ecoscore des sites des villes

Plus encore que pour les métropoles, la tendance pour l’EcoScore est clairement à la hausse.  

En plus du site de la ville de Rennes (déjà abordé dans le cadre des métropoles), les sites des villes du Havre, de Lille et surtout de Strasbourg se sont améliorés de façon significative.  

C’est là aussi le site de la ville de Rennes qui présente le meilleur EcoScore. On note au passage le choix intéressant d’avoir le même site pour la ville et la métropole. Concernant l’EcoScore le moins élevé, il revient au site de la ville de Tours.  

Voyons désormais l’empreinte environnementale de ces sites.

Projection carbone des sites des villes

La tendance globale est à la diminution, ce qui est une très bonne chose.

Analyse plus poussée de certains sites 

Page d'accueil du site de la ville de Lille
Ville de Lille

Même si ce site a bien évolué depuis les premières mesures, il reste encore des axes d’amélioration à explorer.  

De nombreuses requêtes HTTP, plusieurs Mo de données échangées et quelques erreurs 404 parmi les ressources à récupérer.

Taille des requêtes HTTP des sites des villes

On note ici au passage l’intérêt d’avoir une page HTML 404 aussi légère que possible car c’est souvent ce que va renvoyer le serveur s’il ne trouve pas ce qui lui est demandé. A noter qu’il est possible de modifier cela via la configuration du serveur afin de plutôt renvoyer un simple message. Le mieux étant bien entendu de s’assurer de ne pas aller chercher des éléments introuvables. 

La page d’accueil est très chargée, avec notamment un carrousel en défilement automatique et de nombreuses images et contenus.  

Il serait avantageux d’utiliser une font variable et d’éviter de charger toutes les icônes de FontAwesome.  

Certaines images, pesant plusieurs centaines de ko, devraient être optimisées.

Page d'accueil du site de la ville de Tours
Ville de Tours

De façon assez classique, on trouve ici de nombreuses images dont certaines devraient être optimisées.  

Pourtant, à première vue, la page d’accueil n’apparaît pas si chargée. Il est donc nécessaire de creuser un peu afin de mieux comprendre ce qui rend le site aussi lourd.  

On trouve une dizaine de requêtes pour les polices et on note au passage des fonts Google (ce qui peut, rappelons-le, poser souci vis-à-vis du RGPD).  

Plusieurs requêtes semblent également correspondre à de la vidéo.  
Mais l’essentiel des requêtes provient des fichiers JS et CSS.  

En regardant de plus près les domaines de provenance des requêtes, l’une des explications du poids du site apparaît.

Requêtes du site de la ville de Tours

Ce feu d’artifice est fourni par l’outil RequestMap développé par Simon Hearne (déjà évoqué lors de l’analyse de requêtes en provenance d’une application Android). Si l’on n’a pas le détail, on voit qu’il y a de nombreuses requêtes et que la plupart proviennent d’autres domaines.  

L’onglet Domains de Webpagetest nous permet d’en apprendre un peu plus :

Domaines appelés par les requêtes sur le site de la ville de Tours

Ce n’est ici qu’un extrait mais il fait apparaître plusieurs éléments intéressants :  

  • La plupart des requêtes (en termes de nombres mais aussi de poids) proviennent d’autres domaines 
  • Le plus grand nombre de requêtes provient de mobiledition.com 

Mobiledition.com propose à ceux dont le site n’est pas responsive de générer une version de leur site spécialement pensée pour un affichage sur mobile. L’intention n’est pas mauvaise mais la démarche plutôt aberrante du point de vue de l’écoconception. En effet, cette surcouche va exister en plus du site d’origine et être rafraîchie automatiquement à chaque mise à jour du site. Près de 10 ans après l’apparition de la notion de responsive design, il serait important que tous les sites puissent s’adapter aux différents devices voire qu’ils soient pensés mobile-first (en priorité pour le mobile puis étendre aux autres supports). Voire même offline-first afin de pouvoir faire face plus facilement à des connexions dégradées.  

En résumé, il serait important de repenser le site afin de limiter le plus possible le recours à des services tiers afin de le rendre moins impactant.

Résultat des mesures pour les sites web des villes

versionVillesecoscoreEnergieCPUDonnéesMémoireRequêtesCarbonEauSol
https://metropole.rennes.fr/ - remesureRennes824,721,012,20638,77430,300,0480,541
http://www.lemans.fr/ - remesureLe Mans764,650,642,01686,57710,330,0510,549
https://www.lille.fr/ - remesureLille764,991,074,35688,68800,410,0590,594
http://www.bordeaux.fr/ - remesureBordeaux754,450,540,51612,36260,230,0410,500
https://www.lemans.fr/ - remesureLe Mans754,910,752737,59710,340,0540,577
https://www.reims.fr/ - remesureReims715,391,222,70695,55610,360,0570,625
https://clermont-ferrand.fr/ - remesureClermont Ferrand685,341,121,11596,62560,320,0540,615
http://www.bordeaux.fr/Bordeaux663,381,780,42486,05930,280,040,42
https://www.amiens.fr/ - remesureAmiens645,640,712,67871,97480,350,0570,645
https://www.lehavre.fr/ - remesureLe Havre635,061,244,32775,82880,420,0610,606
https://www.lemans.fr/Le Mans633,730,713,77623,83640,330,050,45
https://www.aixenprovence.fr/ - remesureAix625,160,745,16748,061080,470,0650,629
http://nice.fr/ - remesureNice625,401,3324,73697,57650,830,0880,658
https://www.paris.fr/ - remesureParis626,001,856,81718,24470,450,0660,690
https://www.lyon.fr/ - remesureLyon614,920,953,46740,1461140,440,0620,603
https://www.paris.fr/Paris594,192,4517,64604,00490,620,070,51
http://www.lemans.fr/Le Mans584,081,962,75563,91660,320,050,48
https://metropole.nantes.fr/ - remesureNantes585,351,3110,10740,88600,520,0670,630
https://www.saintdenis.re/ - remesureSaint Denis585,770,875,54715,67670,450,0650,673
https://www.toulouse.fr/ - remesureToulouse575,070,912,91742,451030,410,0610,613
https://www.nimes.fr/ - remesureNimes565,441,5512,29700,411150,640,0790,673
https://www.saintdenis.re/Saint Denis564,452,782,74592,78410,300,050,51
https://www.villeurbanne.fr/ - remesureVilleurbanne555,281,1311,97625,22790,580,0720,635
https://www.amiens.fr/Amiens544,021,682,22734,33590,300,050,47
http://www.angers.fr/ - remesureAngers545,191,282,16596,79620,340,050,603
https://www.marseille.fr/Marseille534,761,747,86402,542430,710,090,66
https://www.reims.fr/Reims533,971,421,29507,91820,310,050,48
https://toulon.fr/ - remesureToulon535,420,654,94945,611530,540,0740,682
https://www.brest.fr/ - remesureBrest525,301,353,72733,541420,500,0690,661
https://www.dijon.fr/Dijon514,322,374,19580,40910,400,060,53
https://metropole.nantes.fr/Nantes506,392,8512,60656,37620,620,080,75
https://www.montpellier.fr/ - remesureMontpellier496,271,019,451029,02730,560,0760,737
https://metropole.rennes.fr/Rennes494,422,891,85616,47480,290,050,51
https://www.marseille.fr/ - remesureMarseille485,921,7119,55690,652010,940,1050,782
https://www.lyon.fr/Lyon464,622,852,69573,40680,350,050,55
https://www.annecy.fr/ - remesureAnnecy455,571,794,23692,911160,480,0690,67
https://clermont-ferrand.fr/Clermont Ferrand455,031,763,17462,48880,400,060,60
https://www.mairie-perpignan.fr - remesurePerpignan457,332,419,74793,541590,730,0970,900
https://www.strasbourg.eu/ - remesureStrasbourg436,383,142,79702,44840,440,0690,746
http://www.angers.fr/Angers425,594,353,46591,16570,390,060,64
https://www.dijon.fr/ - remesureDijon424,661,001,44656,4690,220,0410,511
https://www.grenoble.fr/ - remesureGrenoble406,082,166,44571,02730,490,0700,712
https://www.mairie-perpignan.frPerpignan405,192,782,50544,381470,480,070,65
https://www.aixenprovence.fr/Aix394,611,687,84768,691100,510,070,57
https://www.lille.fr/Lille396,233,3912,66852,37840,650,080,74
https://www.limoges.fr/fr - remesureLimoges398,511,822,33609,381000,540,0880,986
https://www.toulouse.fr/Toulouse384,572,443,00641,751230,430,060,57
https://www.tours.fr/ - remesureTours385,680,885,67818,580,350,0550,628
https://toulon.fr/Toulon375,852,0916,48923,892150,900,100,78
https://www.brest.fr/Brest345,773,093,40843,122090,610,080,75
https://www.grenoble.fr/Grenoble335,666,555,93600,86600,450,060,66
http://nice.fr/Nice336,074,6526,59627,281941,090,120,80
https://www.villeurbanne.fr/Villeurbanne335,222,278,72740,511280,580,070,65
https://www.lehavre.fr/Le Havre324,663,305,40726,971060,460,060,57
https://www.montpellier.fr/Montpellier305,081,867,20899,691680,600,080,66
https://www.nimes.fr/Nimes294,172,325,13715,841670,520,070,55
https://www.annecy.fr/Annecy279,606,742,98619,481230,640,101,12
https://www.limoges.fr/frLimoges2615,127,251,96614,32600,750,141,69
https://www.tours.fr/Tours1610,224,7821,99961,472031,180,151,25
https://www.strasbourg.eu/Strasbourg87,457,955,83663,390,430,070,82

Nous avons calculé la moyenne de ces données. Sur plan général nous remarquons que l’écoscore moyen est de 49, l’énergie consommé 5,57 mAh, le pourcentage du CPU utilisé est de 2,22, les données échangées représentent 6,36 Mo, la mémoire vive utilisée est de 689 Mo, le nombre de requêtes est de 99. Concernant l’impact environnemental on observe que l’impact carbone est de 0,50 gEqCO2, l’empreinte Eau est de 0,069 Litres et l’empreinte sol de 0,668 m2.

En dissociant les mesures des remesures voici les moyennes que l’on obtient :

EcoscoreEnergieCPUDonnéesMémoiresRequêtesImpact Carbon (gEqCO2)Empreinte Eau (Litres)Empreinte sol (m2)
Moyennes des remesures585.531.285.92719880.470.0660.656
Moyennes des mesures initiales415.613.166.816581110.530.0720.680

Les mesures initiales ont été menées sur un smartphone Samsung Galaxy S7 sous Android 8.

Les remesures quand à elles ont été effectuées sur un smartphone Samsung Galaxy S9 sous Android 10. Les mesures ont été réalisées au travers de notre outil Greenspector Benchmark Runner, permettant la réalisation de tests automatisés.

Détail des scénarios :
– Chargement de l’application
– Lecture du site web en premier-plan
– Lecture de la page avec scroll
– Inactivité du 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 connecté à un réseau wifi peuvent être différentes lorsque le smartphone est connecté à un réseau filaire. Pour chacune des itérations, le cache est préalablement vidé.

Découvrez comment Greenspector évalue l’impact environnemental des services numériques.