Écoconception : classement des sites des candidats à la présidentielle 2022

Depuis le 7 mars dernier, nous connaissons les noms des 12 hommes et femmes participant à la course à l’élection présidentielle française de 2022.

Au-delà des ambitions écologiques propres à chaque candidat, qu’en est-il vraiment sur le terrain ? Ces personnalités politiques ont-elles conscience des enjeux environnementaux et sociétaux du numérique ? Ont-elles intégré une démarche d’écoconception à leur propre site web de campagne ? Quid du respect désormais bien encadré de la vie privée des internautes (RGPD) ? De leur accessibilité numérique ?

Chez Temesis, ces questionnements sont au coeur de notre expertise ; il était donc tout naturel de nous interroger.

En matière de numérique responsable, nous vous livrons ici le regard du pôle écoconception de Temesis pour compléter l’analyse déjà réalisée par le pôle RGPD de Temesis et celle du pôle accessibilité de Temesis :

• Les sites des candidats à l’élection présidentielle 2022 sous l’œil du RGPD
• Accessibilité : classement des sites des candidats à la présidentielle 2022

Avertissement : nous ne faisons pas de politique

La course à l’investiture présidentielle de 2022 est un rendez-vous important pour la démocratie française, aussi devons-nous faire preuve d’impartialité dans ce classement. Nous ne nous exprimons ni sur les idées ni sur les programmes des candidats. Nous citons les individus, non les partis politiques. Nous évitons par ailleurs d’insérer des liens hypertextes vers les services numériques analysés (ou sites web), bien qu’ils soient mentionnés, afin d’interférer le moins possible sur leur référencement naturel et anticiper, à terme, d’éventuels liens morts. Cette campagne étant censée être éphémère, nous partons du principe que les supports digitaux devraient l’être tout autant.

Notre méthodologie d’analyse et de classement

L’objectif n’est pas de mener un audit complet de la performance web environnementale du site web de campagne de chaque candidat à cette présidentielle 2022. Il est d’évaluer la maturité des équipes de développement respectives en matière de sobriété numérique à travers de premières métriques de performances web environnementales (ou de “webperfs environnementales” comme nous avons coutume de les nommer chez Temesis).

Voici le contexte de ces analyses :

• Type d’analyse : Page survolée. Il s’agit de quantifier le nombre et le poids des ressources chargées par un service numérique lorsque l’utilisateur arrive sur une page web pour la toute première fois et défile du sommet jusqu’en bas.
• Opérateurs : Julien Wilhelm & Christophe Clouzeau
• Date : Du 16 au 18 mars 2022
• Terminal simulé : Mobile (360 x 640 pixels)
• Navigateur : Chrome 98
• WebExtensions : Néant
• État du cache client : Vide
• Autre(s) interaction(s) : Rejet des cookies

Et la définition des indicateurs que nous observons en priorité :

• Données transférées : Elles comprennent le poids des ressources compressées (le cas échéant) envoyées depuis le serveur d’hébergement du site vers le (smartphone), ainsi que les en-têtes HTTP (Hypertext Transfer Protocol) de réponse. Toutes ces ressources peuvent avoir un impact significatif sur la vitesse de chargement du service numérique et la consommation énergétique du terminal utilisateur.
• Données décodées : Elles correspondent au poids réel des ressources utilisées et peuvent avoir un impact significatif sur la consommation énergétique et la capacité de traitement du terminal utilisateur.
• Requêtes : Elles correspondent à autant de réponses HTTP transitant via le réseau entre le terminal et le serveur, et peuvent avoir un impact modéré sur la vitesse de chargement du service numérique.

Pour restituer ces résultats, nous avons utilisé Panalyzer, un outil d’analyse du trafic réseau développé en interne.

Le site HTTP Archive.org (en) propose un état des lieux actuel (et passé) du Web et comprend plusieurs métriques intéressantes. Ainsi, tandis que nous écrivons ces lignes, le poids moyen dans le monde des données transférées par une seule page web serait de l’ordre de 2,11 Mo (Mégaoctet) sur desktop (ordinateur portable, de bureau) et de 1,94 Mo sur mobile.

Nous utiliserons cette valeur moyenne de 2 Mo pour établir notre classement des sites web de campagne 2022.

Gardons cependant à l’esprit que 2 Mo, c’est souvent déjà trop. Les moyennes httparchive.org reflètent une tendance où l’aspect responsable de la conception numérique n’est pas une priorité ; “être dedans” est loin d’être un gage d’efficience, il faut viser bien au-dessous. Plus important encore, le poids d’une page ne fait pas tout ! Si la frugalité d’un service numérique est un frein à son intérêt, la démarche d’écoconception est en échec.

Notons enfin que les 12 sites web de campagne évalués évoluent d’un jour à l’autre, parfois même d’heure en heure. Nous avons fait au mieux pour limiter l’amplitude temps de notre plage d’analyse et garantir une prise de vue de l’ensemble de ces services numériques à un même instant T (2,5 jours). Bien que cela ait peu d’impact sur les “tendances”, il est utile de le préciser.

Résumé du classement (sans les détails)

Le classement des sites web de campagne présidentielle 2022, du moins responsable au plus soutenable

12e position : Jean Lassalle (21,8 Mo transférés)

Voici les chiffres relevés sur la page jl2022.fr :

• Données transférées : 21,8 Mo
• Données décodées : 25,3 Mo
• Nombre requêtes : 120

Quatre aspects qui nous ont interpellés :

• Cette vidéo de 1 minute (format mp4 de taille 1280x720, sans piste sonore) qui se lance en lecture automatique et en boucle masquée par le bandeau cookies. Avec ses 15,3 Mo, elle représente 70 % des données transférées totales de la page, tout en sollicitant activement notre terminal.
• Du JavaScript, 37 requêtes, et des styles CSS Cascading Style Sheets, 24 requêtes, trop lourds et bien trop morcelés. Qui dit requête dit en-têtes de requête. À vouloir proposer de nombreux petits fichiers au lieu d’un plus gros, les formalités explosent et l’on finit par faire transiter plus d’informations sur le contenu que de contenu en lui-même.
• Ces 43 images immédiatement transférées et non optimisées (près de 6 Mo), quand 1 seule est identifiée au-dessus de la ligne de flottaison.
• D’un point de vue UX (User eXperience), en plus des animations d’affichage JavaScript, il y a de nombreux effets de roll-over (survol de liens) inapplicables sur mobile. Le poids du JavaScript ainsi transféré, puis censé être utilisé sur le terminal, est donc inutile.

11e position : Marine Le Pen (16,6 Mo transférés)

Voici les chiffres relevés sur la page mlafrance.fr :

• Données transférées : 16,6 Mo
• Données décodées : 21,8 Mo
• Nombre requêtes : 123

Et quatre aspects qui nous ont interpellés :

• Le chargement immédiat de l’ensemble des ressources de la page, dont 35 images (85 % des données transférées), quand seules 2 sont clairement identifiées au-dessus de la ligne de flottaison.
• L’absence manifeste d’optimisation des images, avec des dimensions supérieures à celle du terminal, pas ou peu de compression et parfois même des formats inadaptés au contenu. À titre d’exemple, si l’on travaille de notre côté à optimiser le portrait de la candidate affiché à 360 pixels de large :
  1. Poids et dimensions de l’image d’origine : 3,78 Mo pour 2665 x 2532 pixels
  2. Une fois recadrée et redimensionnée :
     • Image rétina de 720 x 720 pixels : 381,8 Ko (Kilooctet)
     • Image non rétina de 360 x 360 pixels : 111,2 Ko
  3. Puis, compressée au format d’origine JPG (Joint Photographic Group) :
     • Image rétina : 70,3 Ko
     • Image non rétina : 40 Ko
  4. Voire, compressée au format WebP :
     • Image rétina : 31,3 Ko
     • Image non rétina : 8,5 Ko soit seulement 0,22 % du poids de l’image originale
• Un trop-plein de JavaScript poussé par Facebook ou encore Youtube, dont l’intérêt pour l’utilisateur est à questionner à ce stade de sa navigation.
• L’espace vidéo liste les vidéos publiées sur Facebook et Youtube, ce qui introduit de nombreuses requêtes vers ces services tiers intégrant à chaque fois le poids de leur lecteur respectif. Point positif : pour limiter le défilement infini (ou “infinite scroll”) de requêtes vers ces vidéos, un bouton “Plus de vidéos” permet de les afficher 3 par 3, ce qui est plutôt judicieux.

10e position : Fabien Roussel (11,9 Mo transférés)

Voici les chiffres relevés sur la page fabienroussel2022.fr :

• Données transférées : 11,9 Mo
• Données décodées : 16,7 Mo
• Nombre requêtes : 125

Et quatre aspects qui nous ont interpellés :

• Le chargement immédiat de l’ensemble des ressources de la page, dont 52 images (81 % des données transférées), quand seules 2 sont clairement identifiées au-dessus de la ligne de flottaison.
• L’absence manifeste d’optimisation des images, avec des dimensions supérieures à celle du terminal, pas ou peu de compression et parfois même des formats inadaptés au contenu.
• Une quantité élevée de styles CSS (1 Mo de données décodées, 8 requêtes).
• Du côté des fonctionnalités gourmandes en ressources, tout y est : lecteur vidéo, réseaux sociaux et autres services tiers, défilement horizontal (qui gêne le scroll vertical), cartographie (qui gêne également le scroll).

9e position : Valérie Pécresse (8,9 Mo transférés)

Voici les chiffres relevés sur la page valeriepecresse.fr :

• Données transférées : 8,9 Mo
• Données décodées : 16 Mo
• Nombre requêtes : 191

Et quatre aspects qui nous ont interpellés :

• Le chargement immédiat de l’ensemble des ressources de la page, dont 58 images (près de 70 % des données transférées de la page), quand seules 3 sont clairement identifiées au-dessus de la ligne de flottaison.
• Une quantité élevée de styles CSS (1,7 Mo de données décodées, 45 requêtes) et de JavaScript (5,6 Mo de données décodés, 69 requêtes).
• Les polices typographiques personnalisées servies dans des formats d’un autre âge. Déjà, en quantité (8), c’est trop ; il est recommandé de ne pas excéder 2 à 4 fontes. Ensuite, si ces polices venaient à ne pas être chargées, les navigateurs web restitueraient quoiqu’il arrive le contenu textuel à l’aide des safe fonts intégrées aux terminaux. En l’absence de prise de risques, autant employer exclusivement du Woff2 (Web Open Font Format 2), le format le plus léger à l’heure actuelle, et bannir le TTF (TrueType), comme c’est le cas ici.
• D’un point de vue UX, le chargement complet de la page est quasi entièrement recouvert par une pop-in de cookies et une pop-in d’abonnement aux actualités de la candidate. Chargé, mais pas utilisable.

8e position : Philippe Poutou (8,7 Mo transférés)

Voici les chiffres relevés sur la page poutou2022.org :

• Données transférées : 8,7 Mo
• Données décodées : 14,2 Mo
• Nombre requêtes : 123

Et trois aspects qui nous ont interpellés :

• Le chargement immédiat de l’ensemble des ressources de la page, dont 68 images (54 % des données transférées), quand seules 3 sont clairement identifiées au-dessus de la ligne de flottaison.
• L’absence manifeste d’optimisation des images, avec des dimensions supérieures à celle du terminal, pas ou peu de compression et parfois même des formats inadaptés au contenu. À titre d’exemple, si l’on travaille le portrait du candidat proposé en 360 pixels de large :
  1. Poids et dimensions de l’image d’origine : 2,1 Mo / 5134 x 3423 pixels
  2. Une fois recadrée et redimensionnée à 600 x 600 pixels : 148,6 Ko
  3. Puis, compressée en JPG (format d’origine) : 89,4 Ko
  4. Voire, compressée en WebP : 75,1 Ko soit seulement 3,49 % du poids de l’image originale
• Du JavaScript qui pèse lourd (4,2 Mo de données décodés, presque 30 % du total) avec notamment des sources comme Youtube, du Vimeo ou encore Twitter.

7e position : Yannick Jadot (7,9 Mo transférés)

Voici les chiffres relevés sur la page jadot2022.fr :

• Données transférées : 7,9 Mo
• Données décodées : 9,6 Mo
• Nombre requêtes : 132

Et trois aspects qui nous ont interpellés :

• Le chargement immédiat de l’ensemble des ressources de la page, dont 68 images (près de 68 % du poids de la page décodée), quand seule 1 est clairement identifiée au-dessus de la ligne de flottaison. Mention spéciale à cette image du candidat dans la foule de 2847 x 1341 pixels, d’un poids de 1,8 Mo, et dont on ne distingue au final qu’une main sur mobile !
• Cette tendance à diffuser des images PNG pour mettre en forme du texte alors que le combo HTML + CSS permet d’en faire autant, et mieux (24 fois tout de même).
• Des troubles de responsivité aisément rectifiables (contenu tronqué sur l’axe X notre fenêtre mobile).

6e position : Nicolas Dupont-Aignan (4,8 Mo transférés)

Voici les chiffres relevés sur la page 2022nda.fr :

• Données transférées : 4,8 Mo
• Données décodées : 8 Mo
• Nombre requêtes : 120

Et trois aspects qui nous ont interpellés :

• Ces loupés dans l’optimisation des images, avec dès le haut de la page, 3 photos de 1440, 1600 et 1920 pixels de large proposées comme telles dans un diaporama en lecture automatique, parfois au détriment même de leur lisibilité.
• Du JavaScript à foison (27,5 % du poids de la page décodée, la moitié des requêtes), avec à la fois des scripts bien trop morcelés, non minifiés, et dont l’intérêt est à questionner (usage d’un Google Analytics et d’un Matomo pour l’analyse du trafic par exemple).
• Des styles CSS trop lourds et bien trop morcelés (24 % du poids de la page décodée, 33 requêtes). Qui dit requête dit en-têtes de requête. À vouloir proposer de nombreux petits fichiers au lieu d’un plus gros, les formalités explosent et l’on finit par faire transiter plus d’informations sur le contenu que de contenu en lui-même.

5e position : Éric Zemmour (3,8 Mo transférés)

Voici les chiffres relevés sur la page zemmour2022.fr :

• Données transférées : 3,8 Mo
• Données décodées : 7,2 Mo
• Nombre requêtes : 61

Et cinq aspects qui nous ont interpellés :

• Une part importante de JavaScript avec notamment l’intégration directe d’une vidéo Youtube : c’est un tiers des requêtes totales de la page et la moitié des données décodées.
• Le chargement immédiat de l’ensemble des ressources de la page, dont 21 images (près de 28 % du poids de la page décodée), quand seule 1 est clairement identifiée au-dessus de la ligne de flottaison. Ces médias ne sont par ailleurs pas optimisés (dimensions supérieures à celle du terminal, pas ou peu de compression).
• Des troubles de responsivité aisément corrigibles (contenu tronqué sur l’axe X dans notre fenêtre mobile).
• D’un point de vue UX, le chargement complet de la page est entièrement recouvert par une pop-in de cookies. Chargé, mais pas utilisable.
• Enfin, nous constatons que le candidat possède de très nombreux comptes sur les réseaux sociaux, 10 en tout ! Ce qui par déduction multiplie son impact environnemental dans le numérique.

4e position : 6e position : Anne Hidalgo (3,6 Mo transférés)

Voici les chiffres relevés sur la page 2022avechidalgo.fr :

• Données transférées : 3,6 Mo
• Données décodées : 5,7 Mo
• Nombre requêtes : 95

Et trois aspects qui nous ont interpellés :

• Le chargement immédiat de l’ensemble des ressources de la page, dont 54 images (près de 47 % du poids de la page décodée), quand seules 3 sont clairement identifiées au-dessus de la ligne de flottaison.
• L’absence manifeste d’optimisation des images, avec des dimensions supérieures à celle du terminal, pas ou peu de compression et parfois même des formats inadaptés au contenu. À titre d’exemple, si l’on travaille un portrait de la candidate affiché à 320 pixels de large :
  1. Poids et dimensions de l’image d’origine : 1,2 Mo / 3008 x 1577 pixels.
  2. Une fois redimensionnée selon le contexte utilisateur :
     • Image rétina de 640 x 336 pixels : 121,1 Ko.
     • Image non rétina de à 320 x 168 pixels : 46,1 Ko
  3. Puis, compressée en JPG (format d’origine) :
     • Image rétina : 57,8 Ko
     • Image non rétina : 21 Ko
  4. Voire, compressée en WebP :
     • Image rétina : 12,9 Ko
     • Image non rétina : 6 Ko soit seulement 0,49 % du poids de l’image originale

3e position : Jean-Luc Mélenchon (2,7 Mo transférés)

Voici les chiffres relevés sur la page melenchon2022.fr :

• Données transférées : 2,7 Mo
• Données décodées : 4,9 Mo
• Nombre requêtes : 128

Et deux aspects qui nous ont interpellés :

• Le carrousel est en lecture automatique et il tourne en boucle, qu’il soit visible à l’écran ou non. Côté réseau, cela a peu d’impact, mais côté client, cela sollicite activement notre terminal.
• Ces quelques loupés dans l’optimisation des images, parfois livrées dans des dimensions supérieures à celle du terminal, pas ou peu compressées. Nombre d’entre-elles sont chargées à mesure que l’on parcourt la page, ce qui est plutôt positif, mais de ces 70 requêtes liées aux images, 54 concernent de petits fichiers vectoriels (taille réelle entre 150 octets et 37 Ko) qu’il conviendrait de regrouper.

2e position : Emmanuel Macron (1,9 Mo transféré)

Voici les chiffres relevés sur la page avecvous.fr :

• Données transférées : 1,9 Mo
• Données décodées : 3,3 Mo
• Nombre requêtes : 59

Et trois aspects qui nous ont interpellés :

• Ces 13 polices d’écritures personnalisées chargées : avec 1,1 Mo de données décodées / transférées, c’est 33 % du poids de la page ! À ce stade, autant s’orienter sur une fonte de type variable si l’intérêt de toutes les graisses est avéré.
• Ces loupés dans l’optimisation des rares images, avec des médias assez légers en soi, mais dont les dimensions de 2000 pixels de large ne sont pas adaptées à notre contexte utilisateur.
• Le refus des cookies ne permet pas d’interagir avec l’espace vidéo-interactif (vidéoAsk) qui permet de répondre oralement à une question posée en s’enregistrant. Il faut donc accepter de donner un peu de ses données personnelles pour également donner de sa voix, et augmenter l’impact environnemental occasionné par ce transfert de données.

1re position : Nathalie Arthaud (1,4 Mo transféré)

Voici les chiffres relevés sur la page nathalie-arthaud.info :

• Données transférées : 1,4 Mo
• Données décodées : 1,9 Mo
• Nombre requêtes : 40

Et trois aspects qui nous ont interpellés :

• Cette vignette mettant en scène la candidate et destinée à un affichage mobile (nom de fichier : homepage-mobile.jpg), mais qui, dans les faits, est une image de 2395 x 873 pixels. Double raté : tel que cela a été prévu dans le code source de la page, le chargement de la version mobile se fait en supplément de la version bureau, de dimensions et de poids évidemment supérieurs.
• Le JavaScript utilisé (20 % du poids de la page décodée), avec au moins deux bibliothèques JQuery dont on peut douter de l’intérêt.
• L’absence de chargement différé qui aurait pu s’appliquer aux (quelques) images situées sous la ligne de flottaison.

Notre conclusion

Notre analyse nous aura donné raison : un classement établi sur la base des données transférées est ici préférable à tout autre tant les dysfonctionnements détectés chez les uns et chez les autres sont souvent semblables.

Ce qui revient le plus :

• La surchage de contenus et d’interactions qui se fait au détriment de la sobriété fonctionnelle à privilégier dans une démarche d’écoconception numérique.
• L’ensemble des ressources qui est systématiquement chargé à l’arrivée de l’utilisateur sur la page, sans même une interaction de sa part (absence de clic, de défilement).
• Les images qui ne sont pas compressées et rarement adaptées au terminal client (ici, écran de mobile en 360 x 640 pixels de large), avec des dimensions réelles jusqu’à 10 fois supérieures au rendu.
• Du JavaScript, des polices et des styles CSS en pagaille, sur fond de bibliothèques de code intégrées à tort et à travers.

Notre barrière symbolique et mondiale de 2 Mo transférés par page ? Sur 12 sites web de campagne, seuls 2 parviennent à faire moins sans qu’il s’agisse d’une démarche volontaire puisque ces sites pourraient être encore optimisés. Preuve en est que la pollution numérique n’est à l’ordre du jour chez aucun de nos candidats à l’élection présidentielle 2022.