Catégorie : Sobriété du web

Reading Time: 6 minutes

L’article en résumé

Un service tiers c’est quoi ? Ce sont des services qui permettent d’integrer une fonctionnalité ou un contenu complexe via du code dont on a peu de contrôle. Les 10 services tiers les plus fréquents bloquent le chargement des sites pendant environ 1,4s. Les polices google sont le service le + répandu alors même que son utilisation peut contrevenir au RGPD.

Les impacts des services-tiers sont loin d’être négligeables. En termes environnementaux, de performance, de sécurité mais aussi de gestion des données personnelles, de captation de l’attention et parfois même d’accessibilité. Il convient donc d’y avoir recours le moins possible. Ce dernier point est soutenu par les référentiels du RGESN et du GR491.

Les bonnes pratiques pour limiter les services tiers ?

• Votre site est en construction : ne pas inclure de services tiers
• Votre site est déjà construit : limiter l’ajout de contenus ou supprimer certains services tiers ( en vérifiant la compatibilité avec la conception, marketing ou stratégie déjà en place)
• Votre site se chargera plus vite : un bonus pour le numérique responsable ainsi que l’expérience utilisateur.

Un exemple concret :
Lors d’un audit client, il a été décidé de supprimer le fil twitter présents sur plusieurs pages du site.

Résultats :
une amélioration significative des métriques et indicateurs.

En particulier : 

• Réduction de la vitesse de décharge de la batterie de 36% 
• Réduction de la charge CPU de 76% 
• Réduction du volume de données transférées de 68% 

Contexte

Les services-tiers sont présents sur 94% des sites web et représenteraient 45% des requêtes effectuées par l’ensemble des sites web. Ces services servent à intégrer une fonctionnalité ou un contenu complexe via du code le plus souvent hébergé sur un autre site, en ayant peu ou pas de contrôle sur celui-ci. Ainsi, il peut s’agir d’une solution d’analytics, d’une vidéo, des contenus d’un réseau social, d’un captcha, de trackers, etc.  
En voici une liste (triée par catégories), construite par Patrick Hulce. 

Tweet de Marcel Freinbichler 

Traduction : En raison de RGPD, USA Today a décidé d’exécuter une version distincte de son site web pour les utilisateurs de l’UE (Union Européenne), dans laquelle tous les scripts de suivi et les publicités ont été supprimés. Le site semblait très rapide, j’ai donc fait un audit de performance. À quelle vitesse Internet pourrait être sans tous les déchets ! 🙄 

5,2 Mo → 500 Ko 

Vous trouverez plus d’informations à leur sujet ainsi que des statistiques sur leur utilisation dans le chapitre Third-parties du Web Almanac : https://almanac.httparchive.org/en/2022/third-parties  

Il en ressort notamment que les 10 plus fréquents bloquent en moyenne le chargement des sites pendant 1,4s et que des optimisations techniques restent souvent possibles (minification, compression, chargement différé mais aussi suppression de code JS obsolète). Aussi, la plupart des services tiers les plus utilisés sont liés à Google.  

Il est d’ailleurs intéressant de noter que les polices Google sont le service le plus répandu, alors même que leur utilisation peut contrevenir au RGPD. Une façon d’y remédier est d’héberger soi-même les fichiers correspondants. Le mieux reste bien sûr de s’en tenir le plus possible aux polices système disponibles sans requête supplémentaire. 

Il ressort de tout ceci que les impacts des services-tiers, en particulier sur les sites web mais aussi les applications mobiles, sont loin d’être négligeables. En termes environnementaux, de performance, de sécurité mais aussi de gestion des données personnelles, de captation de l’attention et parfois même d’accessibilité (voir à ce sujet l’article de Temesis : https://www.temesis.com/blog/contenus-tiers-exemptes-deroges-audites/). Il convient donc d’y avoir recours le moins possible.  

Chez Greenspector, c’est quelque chose que nous regardons de très près pour nos clients, via des outils spécifiques permettant de lister les services tiers et d’estimer leurs impacts respectifs. C’est d’ailleurs là une valeur ajoutée non-négligeable de la mesure. Et une étape incontournable pour réduire les impacts environnementaux et améliorer l’expérience utilisateur. 

Intéressons-nous aujourd’hui à la bonne pratique de sobriété qui consiste à intégrer le moins possible de services-tiers dans un service numérique.  

Référentiels existants 

On retrouve ce critère dans la famille Spécifications du RGESN (Référentiel Général d’écoconception de services numériques) : 2.5 – Le service numérique a-t-il pris en compte les impacts environnementaux des services tiers utilisés lors de leur sélection ? 

On le retrouve également dans le GR491 (Guide de référence de conception responsable de services numériques) : Est-ce que les services tiers (fils réseaux sociaux, social wall, carrousels, google maps etc) ne sont pas utilisés par facilité pour pallier le manque de ressources de production de contenus ? 

Bonne pratique

Objectif

Cette bonne pratique de sobriété consiste donc à limiter le nombre de services-tiers dans un service numérique.  

Quand ?

Elle intervient dès la conception du service (choisir de ne pas inclure les services en question) mais aussi lors de l’ajout de contenu (afin par exemple de ne pas intégrer directement une vidéo Youtube dans un article).  

Facilité de mise en œuvre

Il est facile techniquement de supprimer un service-tiers. En revanche, cette suppression peut nécessiter en amont des discussions sur la conception, le marketing ou la stratégie. C’est d’ailleurs pour cela que cette décision doit intervenir le plus tôt possible dans le projet.  

Gains estimés

Les gains peuvent être conséquents sur plusieurs domaines liés au Numérique Responsable. Dans tous les cas, l’expérience utilisateur en bénéficie.  

Cas d’étude

Lors de l’accompagnement d’un client (audit initial puis mesures quotidiennes et expertise), il a été décidé de supprimer le fil Twitter présent sur plusieurs pages du site. La modification a eu lieu le 1er février 2023. Les mesures sur la page d’accueil mettent en avant les gains liés à cette modification, constats que l’on observe par la mesure des consommations de ressources IT et d’énergie via l’outil Greenspector.  

Evolution des métriques liées au chargement de la page entre le 1er et le 2 février 2023

Ecoscore (benchmark web) du 1er février 2023

Ecoscore (benchmark web) du 2 février 2023 

On constate donc ici une amélioration significative des métriques et indicateurs. En particulier :  

• Réduction de la vitesse de décharge de la batterie de 36% 

• Réduction de la charge CPU de 76% 
• Réduction du volume de données transférées de 68% 

Suite à la projection environnementale via la méthodologie Greenspector, on constate que l’impact de cette page d’accueil était, avant suppression du fil Twitter, de 0.95g eqCO2. Après suppression de ce fil, il est de 0.54g eqCO2.  

La page en question a plus de 2,5 millions de vues par an. 

Dans un souci de simplification, on laisse de côté ici les apports du cache côté client (même s’ils sont sûrement non-négligeables), les disparités de temps passé par chacun sur cette page, ainsi que les modifications apportées à celle-ci sur ce laps de temps.  

On passe alors d’un impact sur un an de 2,38T eqCO2 à 1,36T eqCO2, soit une réduction de plus de 40% de l’impact en termes d’émissions de gaz à effet de serre. 

Pour les autres impacts évalués, la tendance est similaire. Ainsi, sur un an, on passe de 383047 à 224675 L d’eau consommée et de 383 à 230 m² d’occupation des sols. 

Aller plus loin

Pour les services-tiers jugés indispensables, il existe des méthodes pour en réduire l’impact (via des bonnes pratiques d’efficience). Il peut notamment s’agir d’avoir recours à une façade pour intégrer une carte interactive ou une vidéo sous la forme d’une vignette cliquable.  

Certains articles abordent le sujet sous l’angle de la performance web :  

• Reducing the Site-Speed Impact of Third-Party Tags, par Andy Davies [article en anglais] : améliorer la performance via la gestion des tags.
• How to Find the Third-Parties on Your Site, par Simon Hearne [article en anglais] : présentation de l’outil RequestMap, intégré dans Webpagetest pour détecter les services-tiers. Cet outil avait déjà été abordé sur le blog de Greenspector dans le cas d’une application Android. 
• Identifying, Auditing, and Discussing Third Parties, par Harry Roberts [article en anglais] : comment auditer les services-tiers d’un site 
• Reducing The Web’s Carbon Footprint: Optimizing Social Media Embeds, par Michelle Baker [article en anglais] : comment intégrer les contenus de réseaux sociaux de façon efficiente.
• Partytown  [article en anglais] : une librairie qui propose de gérer les services-tiers via un WebWorker 

• Are my third parties green, par Fershad Irani [article en anglais] : un outil en ligne pour évaluer l’impact environnemental des services-tiers via la provenance de l’électricité alimentant les serveurs.

Reading Time: 2 minutes

À l’arrivée du numérique et en particulier du web, nombreux sont ceux qui annonçaient que tout ceci permettrait de limiter grandement le volume d’impressions. En réalité, c’est l’inverse qui s’est produit car ces nouvelles technologies, couplées à la démocratisation des imprimantes personnelles, ont permis à tout un chacun d’imprimer plus facilement. Au passage, ceci peut être vu comme une illustration de l’effet rebond ou paradoxe de Jevons. 

Il convient de garder en tête que l’impression est encore utilisée à des fins personnelles ou professionnelles pour la transmission ou le stockage d’informations.  

Nous verrons donc ici comment faire pour que l’impression du contenu d’un site web soit aussi peu impactante que possible. Nous n’aborderons pas ici l’imprimante, le papier ou les encres utilisées (imprimer en qualité brouillon, en recto-verso, plusieurs feuilles par page, etc). Nous allons plutôt nous intéresser aux bonnes pratiques de conception qui peuvent rendre l’impression moins impactante et le contenu imprimé plus lisible.

Pour commencer, regardons ce que mentionnent à ce sujet les référentiels existants.  

• Le référentiel des 115 bonnes pratiques d’écoconception web du collectif GreenIT.fr propose la BP_027 : “Fournir une CSS print”. Le bref exemple fourni couvre déjà une bonne partie des recommandations que nous détaillerons dans le reste de l’article.  
• Le GR491 propose de vérifier qu’une version épurée est bien disponible pour l’impression  et qu’une police optimisée pour l’impression est utilisée. 

Ceci rejoint en partie ce que nous allons désormais voir en termes de recommandations.

Limiter le nombre de pages 

Souvent, lorsque l’on tente d’imprimer directement une simple page web, le nombre de feuilles utilisées paraît disproportionné. C’est notamment le cas, par exemple, lorsqu’il s’agit d’imprimer un billet électronique, comme un billet de train. Afin d’y remédier, plusieurs actions sont possibles :  

• Réduire les marges des pages 
• Réduire l’espacement entre les éléments 
• Réduire la taille des titres et textes 
• Linéariser les contenus 
• Supprimer les contenus périphériques (images décoratives, éléments contextuels tels que des blocs présentant les articles similaires ou les derniers articles, menus, haut et bas de page, éléments de navigation, etc)

Limiter les surfaces d’encre 

Si l’on a vu dans la bonne pratique précédente comment limiter la quantité de papier utilisée, il est également possible de limiter l’utilisation d’encre. En particulier si un mode sombre est en place mais avec tout fond coloré, s’assurer qu’à l’impression le fond est bien blanc. Ici aussi, il peut être intéressant de supprimer les visuels non-nécessaires tels que les images décoratives.  

Certaines polices sont conçues spécialement pour réduire la quantité d’encre utilisée à l’impression. Regardez à ce sujet Ryman Eco ou des outils comme EcoFont.  

Il peut aussi être envisagé de laisser la possibilité à l’utilisateur d’imprimer le contenu sans les images. Dans certains contextes, les images peuvent aider à la compréhension mais autant laisser à l’utilisateur le choix d’imprimer une page avec ou sans les images.  

De plus, des filtres CSS peuvent limiter le coût en encre des images : Quality print versions with CSS filters. 

Comment mettre en œuvre ces recommandations ? 

Comme évoqué dans les 115 bonnes pratiques d’écoconception web, le plus simple est de mettre en place une feuille de style dédiée à l’impression et utilisée pour l’ensemble du site. Pour cela, je vous invite à consulter l’article de Smashing Magazine intitulé “Print stylesheets in 2018”.  

Conclusion 

Afin de faciliter l’impression des contenus d’un site web, nous avons vu ici les bonnes pratiques à mettre en œuvre. Le coût en développement s’annonce limité mais les bénéfices pour les utilisateurs peuvent être conséquents. Il est en effet essentiel de garder en tête l’ensemble des contextes d’utilisation d’un site web.

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.

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.

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

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.

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

version	Métropoles	ecoscore	Energie	CPU	Données	Mémoire	Requêtes	Carbon	Eau	Sol
https://metropole.rennes.fr/ - Remesure	Rennes	80	4,60	0,83	2,22	687,58	43	0,30	0,048	0,528
https://www.lillemetropole.fr/ - Remesure	Lille	76	4,77	0,68	2,37	685,11	24	0,28	0,047	0,537
https://www.grandnancy.eu/accueil/	Nancy	74	3,54	0,58	1,35	544,09	45	0,24	0,038	0,412
https://www.bordeaux-metropole.fr/ - Remesure	Bordeaux	72	4,78	0,66	1,45	756,86	51	0,30	0,049	0,551
https://www.grandnancy.eu/accueil/ - Remesure	Nancy	72	4,89	0,60	2,04	718,18	42	0,31	0,050	0,560
https://www.orleans-metropole.fr/ - Remesure	Orleans	71	5,69	1,46	1,77	544,13	37	0,33	0,055	0,643
https://www.metropolegrandparis.fr/fr - Remesure	Paris	70	4,47	0,54	2,07	704,63	38	0,28	0,046	0,511
https://www.saint-etienne-metropole.fr/	Saint Etienne	70	3,75	0,53	3,80	426,20	89	0,36	0,049	0,463
https://www.lillemetropole.fr/	Lille	69	3,57	0,63	1,73	560,04	46	0,25	0,039	0,416
https://www.metropole-rouen-normandie.fr/ - Remesure	Rouen	66	5,00	1,30	0,94	706,73	30	0,27	0,047	0,563
https://www.bordeaux-metropole.fr/	Bordeaux	62	3,87	0,85	1,34	562,92	60	0,27	0,043	0,457
https://metropole.nantes.fr/ - Remesure	Nantes	62	5,32	1,35	10,16	748,48	60	0,52	0,067	0,626
https://www.clermontmetropole.eu/accueil/ - Remesure	Clermont	61	5,70	0,88	5,68	808,34	91	0,49	0,069	0,679
https://metropole.rennes.fr/	Rennes	60	4,31	1,93	1,23	639,53	43	0,27	0,044	0,495
https://www.toulouse-metropole.fr/ - Remesure	Toulouse	60	4,75	0,91	2,49	698,46	71	0,35	0,053	0,560
https://www.metropolegrandparis.fr/fr	Paris	59	4,08	0,83	1,94	567,65	43	0,27	0,043	0,471
https://www.saint-etienne-metropole.fr/ - Remesure	Saint Etienne	57	5,86	1,08	34,99	819,96	104	1,13	0,113	0,743
https://www.brest.fr - Remesure	Brest	56	5,33	1,25	3,87	723,99	142	0,51	0,070	0,664
https://metropoletpm.fr/ - Remesure	Toulon	54	5,42	0,79	4,97	686,44	176	0,58	0,078	0,694
https://metropole.nantes.fr/	Nantes	52	5,07	1,52	8,75	699,17	88	0,52	0,067	0,613
https://www.ampmetropole.fr/	Aix Marseille Provence	51	4,38	0,91	14,12	893,42	140	0,68	0,076	0,573
https://www.metropole-dijon.fr/ - Remesure	Dijon	51	6,08	2,08	3,51	657,43	70	0,43	0,066	0,706
https://www.nicecotedazur.org/ - Remesure	Nice	50	5,02	1,21	3,06	654,93	129	0,46	0,065	0,622
https://www.metropole-rouen-normandie.fr/	Rouen	49	4,37	2,93	1,64	657,77	26	0,25	0,042	0,493
https://www.clermontmetropole.eu/accueil/	Clermont	45	4,31	1,49	1,23	698,79	89	0,33	0,051	0,520
https://tours-metropole.fr/	Tours	44	4,64	1,76	2,85	778,26	67	0,35	0,052	0,547
https://tours-metropole.fr/ - Remesure	Tours	44	4,89	1,07	5,43	663,20		0,32	0,049	0,542
https://www.strasbourg.eu/ - Remesure	Strasbourg	43	6,19	2,68	2,80	754,16	84	0,44	0,068	0,725
https://www.grenoblealpesmetropole.fr/ - Remesure	Grenoble	41	6,59	2,37	3,81	696,83	86	0,48	0,073	0,771
https://metropoletpm.fr/	Toulon	41	4,21	0,95	4,58	921,88	242	0,62	0,077	0,598
https://www.toulouse-metropole.fr/	Toulouse	41	4,19	1,40	2,10	601,40	70	0,32	0,048	0,498
https://www.ampmetropole.fr/ - Remesure	Aix Marseille Provence	40	7,86	2,30	10,18	840,47	207	0,84	0,110	0,984
https://www.metzmetropole.fr/ - Remesure	Metz	38	11,06	3,24	8,47	925,30	149	0,85	0,126	1,300
https://www.montpellier3m.fr/ - Remesure	Montpellier	32	5,93	2,13	40,93	754,01	259	1,48	0,144	0,843
https://www.brest.fr	Brest	31	5,38	2,40	3,64	882,16	218	0,61	0,081	0,711
https://www.metropole-dijon.fr/	Dijon	28	5,88	6,31	6,48	630,14	77	0,49	0,069	0,692
https://www.orleans-metropole.fr/	Orleans	28	6,40	7,57	2,27	590,65	112	0,47	0,073	0,762
https://www.metzmetropole.fr/	Metz	26	16,10	5,97	9,20	856,20	164	1,10	0,171	1,858
https://www.nicecotedazur.org/	Nice	24	4,62	3,05	4,28	651,05	121	0,46	0,062	0,576
https://www.grenoblealpesmetropole.fr/	Grenoble	19	10,16	7,54	5,87	656,85	96	0,68	0,107	1,168
https://www.montpellier3m.fr/	Montpellier	19	6,39	3,44	28,83	831,25	380	1,42	0,148	0,942
https://www.strasbourg.eu/	Strasbourg	9	7,85	8,80	1,98	675,41		0,37	0,068	0,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 :

	Ecoscore	Energie	CPU	Données	Mémoires	Requêtes	Impact Carbon (gEqCO2)	Empreinte Eau (Litres)	Empreinte sol (m2)
Moyennes des remesures	57	5.72	1.40	7.30	725	95	0.52	0.071	0.68
Moyennes des mesures initiales	43	5.57	2.92	5.20	682	111	0.49	0.069	0.67

Sites des villes 

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

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.

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

Analyse plus poussée de certains sites 

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.

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.

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.

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 :

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

version	Villes	ecoscore	Energie	CPU	Données	Mémoire	Requêtes	Carbon	Eau	Sol
https://metropole.rennes.fr/ - remesure	Rennes	82	4,72	1,01	2,20	638,77	43	0,30	0,048	0,541
http://www.lemans.fr/ - remesure	Le Mans	76	4,65	0,64	2,01	686,57	71	0,33	0,051	0,549
https://www.lille.fr/ - remesure	Lille	76	4,99	1,07	4,35	688,68	80	0,41	0,059	0,594
http://www.bordeaux.fr/ - remesure	Bordeaux	75	4,45	0,54	0,51	612,36	26	0,23	0,041	0,500
https://www.lemans.fr/ - remesure	Le Mans	75	4,91	0,75	2	737,59	71	0,34	0,054	0,577
https://www.reims.fr/ - remesure	Reims	71	5,39	1,22	2,70	695,55	61	0,36	0,057	0,625
https://clermont-ferrand.fr/ - remesure	Clermont Ferrand	68	5,34	1,12	1,11	596,62	56	0,32	0,054	0,615
http://www.bordeaux.fr/	Bordeaux	66	3,38	1,78	0,42	486,05	93	0,28	0,04	0,42
https://www.amiens.fr/ - remesure	Amiens	64	5,64	0,71	2,67	871,97	48	0,35	0,057	0,645
https://www.lehavre.fr/ - remesure	Le Havre	63	5,06	1,24	4,32	775,82	88	0,42	0,061	0,606
https://www.lemans.fr/	Le Mans	63	3,73	0,71	3,77	623,83	64	0,33	0,05	0,45
https://www.aixenprovence.fr/ - remesure	Aix	62	5,16	0,74	5,16	748,06	108	0,47	0,065	0,629
http://nice.fr/ - remesure	Nice	62	5,40	1,33	24,73	697,57	65	0,83	0,088	0,658
https://www.paris.fr/ - remesure	Paris	62	6,00	1,85	6,81	718,24	47	0,45	0,066	0,690
https://www.lyon.fr/ - remesure	Lyon	61	4,92	0,95	3,46	740,146	114	0,44	0,062	0,603
https://www.paris.fr/	Paris	59	4,19	2,45	17,64	604,00	49	0,62	0,07	0,51
http://www.lemans.fr/	Le Mans	58	4,08	1,96	2,75	563,91	66	0,32	0,05	0,48
https://metropole.nantes.fr/ - remesure	Nantes	58	5,35	1,31	10,10	740,88	60	0,52	0,067	0,630
https://www.saintdenis.re/ - remesure	Saint Denis	58	5,77	0,87	5,54	715,67	67	0,45	0,065	0,673
https://www.toulouse.fr/ - remesure	Toulouse	57	5,07	0,91	2,91	742,45	103	0,41	0,061	0,613
https://www.nimes.fr/ - remesure	Nimes	56	5,44	1,55	12,29	700,41	115	0,64	0,079	0,673
https://www.saintdenis.re/	Saint Denis	56	4,45	2,78	2,74	592,78	41	0,30	0,05	0,51
https://www.villeurbanne.fr/ - remesure	Villeurbanne	55	5,28	1,13	11,97	625,22	79	0,58	0,072	0,635
https://www.amiens.fr/	Amiens	54	4,02	1,68	2,22	734,33	59	0,30	0,05	0,47
http://www.angers.fr/ - remesure	Angers	54	5,19	1,28	2,16	596,79	62	0,34	0,05	0,603
https://www.marseille.fr/	Marseille	53	4,76	1,74	7,86	402,54	243	0,71	0,09	0,66
https://www.reims.fr/	Reims	53	3,97	1,42	1,29	507,91	82	0,31	0,05	0,48
https://toulon.fr/ - remesure	Toulon	53	5,42	0,65	4,94	945,61	153	0,54	0,074	0,682
https://www.brest.fr/ - remesure	Brest	52	5,30	1,35	3,72	733,54	142	0,50	0,069	0,661
https://www.dijon.fr/	Dijon	51	4,32	2,37	4,19	580,40	91	0,40	0,06	0,53
https://metropole.nantes.fr/	Nantes	50	6,39	2,85	12,60	656,37	62	0,62	0,08	0,75
https://www.montpellier.fr/ - remesure	Montpellier	49	6,27	1,01	9,45	1029,02	73	0,56	0,076	0,737
https://metropole.rennes.fr/	Rennes	49	4,42	2,89	1,85	616,47	48	0,29	0,05	0,51
https://www.marseille.fr/ - remesure	Marseille	48	5,92	1,71	19,55	690,65	201	0,94	0,105	0,782
https://www.lyon.fr/	Lyon	46	4,62	2,85	2,69	573,40	68	0,35	0,05	0,55
https://www.annecy.fr/ - remesure	Annecy	45	5,57	1,79	4,23	692,91	116	0,48	0,069	0,67
https://clermont-ferrand.fr/	Clermont Ferrand	45	5,03	1,76	3,17	462,48	88	0,40	0,06	0,60
https://www.mairie-perpignan.fr - remesure	Perpignan	45	7,33	2,41	9,74	793,54	159	0,73	0,097	0,900
https://www.strasbourg.eu/ - remesure	Strasbourg	43	6,38	3,14	2,79	702,44	84	0,44	0,069	0,746
http://www.angers.fr/	Angers	42	5,59	4,35	3,46	591,16	57	0,39	0,06	0,64
https://www.dijon.fr/ - remesure	Dijon	42	4,66	1,00	1,44	656,469		0,22	0,041	0,511
https://www.grenoble.fr/ - remesure	Grenoble	40	6,08	2,16	6,44	571,02	73	0,49	0,070	0,712
https://www.mairie-perpignan.fr	Perpignan	40	5,19	2,78	2,50	544,38	147	0,48	0,07	0,65
https://www.aixenprovence.fr/	Aix	39	4,61	1,68	7,84	768,69	110	0,51	0,07	0,57
https://www.lille.fr/	Lille	39	6,23	3,39	12,66	852,37	84	0,65	0,08	0,74
https://www.limoges.fr/fr - remesure	Limoges	39	8,51	1,82	2,33	609,38	100	0,54	0,088	0,986
https://www.toulouse.fr/	Toulouse	38	4,57	2,44	3,00	641,75	123	0,43	0,06	0,57
https://www.tours.fr/ - remesure	Tours	38	5,68	0,88	5,67	818,58		0,35	0,055	0,628
https://toulon.fr/	Toulon	37	5,85	2,09	16,48	923,89	215	0,90	0,10	0,78
https://www.brest.fr/	Brest	34	5,77	3,09	3,40	843,12	209	0,61	0,08	0,75
https://www.grenoble.fr/	Grenoble	33	5,66	6,55	5,93	600,86	60	0,45	0,06	0,66
http://nice.fr/	Nice	33	6,07	4,65	26,59	627,28	194	1,09	0,12	0,80
https://www.villeurbanne.fr/	Villeurbanne	33	5,22	2,27	8,72	740,51	128	0,58	0,07	0,65
https://www.lehavre.fr/	Le Havre	32	4,66	3,30	5,40	726,97	106	0,46	0,06	0,57
https://www.montpellier.fr/	Montpellier	30	5,08	1,86	7,20	899,69	168	0,60	0,08	0,66
https://www.nimes.fr/	Nimes	29	4,17	2,32	5,13	715,84	167	0,52	0,07	0,55
https://www.annecy.fr/	Annecy	27	9,60	6,74	2,98	619,48	123	0,64	0,10	1,12
https://www.limoges.fr/fr	Limoges	26	15,12	7,25	1,96	614,32	60	0,75	0,14	1,69
https://www.tours.fr/	Tours	16	10,22	4,78	21,99	961,47	203	1,18	0,15	1,25
https://www.strasbourg.eu/	Strasbourg	8	7,45	7,95	5,83	663,39		0,43	0,07	0,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 :

	Ecoscore	Energie	CPU	Données	Mémoires	Requêtes	Impact Carbon (gEqCO2)	Empreinte Eau (Litres)	Empreinte sol (m2)
Moyennes des remesures	58	5.53	1.28	5.92	719	88	0.47	0.066	0.656
Moyennes des mesures initiales	41	5.61	3.16	6.81	658	111	0.53	0.072	0.680

Reading Time: 2 minutes

Le mois dernier nous étions présents à la Nantes Digital Week. Nous avons participé à plusieurs conférences et ateliers sur la thématique du numérique responsable. C’était l’occasion de rencontrer de nombreux acteurs du digital mais également de nombreux visiteurs curieux d’en savoir plus sur ce vaste sujet.  

Le jeudi 22 octobre nous avons animé l’atelier “Héberger, mesurer et concevoir des sites vertueux” en compagnie de DRI et Webofacto. C’est dans ce cadre que nous avons mesuré les sites internet de plusieurs visiteurs et partenaires de l’évènement. 

Le classement en détail

La moyenne d’impact carbone sur une minute de navigation de ces 98 partenaires est de 0,45 gEqCO2 soit l’équivalent de 2 mètres effectué en voiture thermique. Seulement 8 sites se trouvent au-dessus de cette moyenne, ce qui traduit une bonne tendance. Le site web le plus sobre de ce classement (le site du CIC, 0,19 gEqCO2) est 7,8 fois moins impactant que le site le moins sobre (Saint-Nazaire Tourisme, 1,5 gEqCO2). 

La moyenne de consommation d’énergie (mAh) est de 3,7 mAh et en moyenne 9,01 Mo de données sont échangées. En termes de requêtes web, la moyenne est de 73.

Rang	Nom	ecoscore	Carbon Impact (gEqCO2)	requests	Énergie (mAh)	Données (Mo)	Mémoire (Mo)	Empreinte eau (Litres)	Empreinte sol (m2)
1	CIC	81	0,19	31	2,97	1	531,87	0,03	0,34
2	Le Blog du Modérateur	84	0,2	18	3,57	1,06	605,54	0,03	0,40
3	La Cantine	80	0,22	38	3,2	1,34	570,44	0,03	0,37
4	Banque des territoires	73	0,22	51	2,92	1,31	669,14	0,03	0,35
5	Whome	76	0,26	43	3,14	3,32	661,64	0,04	0,37
6	sfr	63	0,27	68	3,51	1,45	674,38	0,04	0,42
7	Chateau des Ducs de Bretagne	62	0,27	48	3,9	1,91	757,64	0,04	0,45
8	BNP Paribas	72	0,28	77	3,12	2,11	669,86	0,04	0,39
9	Cobage	67	0,31	72	3,3	3,15	582,25	0,04	0,40
10	Mismo	61	0,31	73	3,78	2,48	864,87	0,05	0,46
11	Enedis	52	0,35	57	3,5	5,91	716,59	0,05	0,42
12	Sogetrel	52	0,37	103	3,47	3,76	860,64	0,05	0,44
13	Ecosystem	36	0,37	52	4,93	4,33	744,72	0,05	0,57
14	_icilundi	69	0,38	27	3,37	9,48	661,03	0,05	0,40
15	PALO IT	61	0,39	87	3,8	5,04	708,84	0,05	0,47
16	Université de Nantes	71	0,4	61	3,46	8,16	650,39	0,05	0,42
17	VIF	51	0,41	112	3,79	4,41	826,63	0,05	0,48
18	La Box Loire Atlantique	63	0,47	91	3,74	8,63	650,42	0,06	0,47
19	Radio Prun'	50	0,48	44	3,56	12,92	712,56	0,05	0,43
20	Maison Europe	58	0,55	149	4	8,09	695,45	0,07	0,53
21	Isefac Bachelor	41	0,6	181	3,82	8,4	915,64	0,07	0,53
22	Accenture	35	0,61	63	6,92	11,29	647,93	0,08	0,80
23	Tele Nantes	48	0,8	146	3,43	21,39	821,12	0,08	0,48
24	Groupe Onepoint	57	1,11	84	3,36	40,15	744,13	0,10	0,47
25	Saint Nazaire Tourisme	47	1,5	70	4,16	58,42	761,91	0,13	0,57

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 ?

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

version	ecoscore	CO2 impact (gEqCO2)	requests	Energie (mAh)	Données échangées (Mo)	CPU (%)	Empreinte eau (Litres)	Empreinte sol (m2)	Mémoire (Mo)
hskr.ru	60	0,30	23	5,45	1,82	2,71	0,05	0,61	682,42
ladispensadelchianti.it	75	0,31	56	4,73	1,57	1,14	0,05	0,55	511,82
ingridparis.com	65	0,36	38	5,54	3,59	2,11	0,06	0,63	632,50
azzerad.com	63	0,38	75	5,59	1,98	1,50	0,06	0,65	735,91
marcoambrosi.salon	52	0,41	47	5,81	4,75	2,44	0,06	0,67	701,52
once-lifetime.com	45	0,45	56	5,73	6,37	2,24	0,06	0,66	734,36
grege-interieurs.com	39	0,64	26	11,20	6,80	5,06	0,11	1,25	746,73
webflow.com	33	0,67	179	6,34	7,17	3,21	0,09	0,80	863,02
lamalama.n	42	0,71	21	9,71	13,42	4,71	0,10	1,09	828,77
blueyard.com	56	0,72	50	8,02	15,13	2,56	0,10	0,92	575,93
datagrid.co.jp	29	0,80	128	9,34	11,02	3,15	0,11	1,10	671,31
betterup.com	27	0,81	121	11,28	7,85	3,51	0,12	1,31	862,15

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.

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 :

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.

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 :

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) :

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

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

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.

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 :

Ainsi que le format Webp :

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

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… 

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 :

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 : 

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.