Catégorie : Sobriété du web

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

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.

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 !

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 :

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. 

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 : 

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. 

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

Analyse des résultats

Projections CO₂ 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 CO₂ moyen par page et par minute (0,147 gEqCO₂) nous donne une projection d’impact CO₂ moyen d’une lecture numérique de : 3,381 gEqCO₂. 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 gEqCO₂), nous obtenons une projection d’impact CO₂ moyen par visite de : 0,311 gEqCO₂, soit 7,167 gEqCO₂ 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.

Indicateurs	Impact CO2 g EqCO2	Mètres parcourus en véhicule léger
Moyenne par visite (2,12 pages consultées) / minute	0,311	2,77
Moyenne d’une visite d’un média presse (23 minutes)	7,167	63

Presse numérique ou papier ?

On considère que l’impact CO₂ d’une page d’un exemplaire papier se situe entre 2,3 et 2,5 g eqCO₂ 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).

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

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