Le monde numérique a un impact sur la planète. Dans un contexte de dérèglement climatique, il est nécessaire de le limiter au maximum. C’est ce que j’ai cherché à faire dans ce site web.
Le web et ses symboles
Green UX
Pour cela, j’ai cherché à prendre en compte pour ce site des pratiques d’écoconception digitale ou green UX. (green : vert, UX : acronyme de User eXperience. C’est la qualité de l’expérience vécue par l’utilisateur).
Green IT
Si on veut aller plus loin, le Green IT (IT : acronyme d’Information Technology : technologie de l’information) va s’intéresser à tout ce qui permet la réduction de l’impact environnemental des technologies numériques et de leurs usages.
- l’écoconception des sites
- utiliser le plus longtemps possible ses appareils
- choisir du matériel reconditionné
- utiliser un moteur de recherche écologique
- bien gérer ses mails…
IT for Green, for good, fair IT…
Enfin, on parle d’IT for Green quand il s’agit de la mise au service de l’environnement des technologies numériques pour analyser, prévenir et apporter des solutions. On peut aussi prendre en compte d’autres dimensions :
- l’IT for good, le numérique pour faire le bien, utilise les technologies digitales au service de causes humaines
- le fair IT, le numérique équitable, s’intéresse à la dimension éthique. Par exemple les conditions de travail dans l’industrie de l’informatique, veiller à ce que des enfants ne travaillent pas dans les usines produisant ordinateurs ou smartphones.
Un site web écologique et inclusif
Un site internet ne peut pas être « écologique ». Par contre on peut en limiter l’impact pour notre planète en réfléchissant dès le début du projet à une éco-conception.
Le poids des pages web
En matière de numérique, ce qui pèse le plus, est le renouvellement fréquent du matériel. Or l’obsolescence des smartphones et ordinateurs est principalement causée par la couche logicielle : applications, sites web, logiciels, jeux vidéos… Plus un service numérique est lourd, plus l’utilisateur aura besoin de renouveler son terminal pour un appareil plus puissant. Ainsi le poids médian d’une page web est passé de 14 Ko en 1995, à 500 Ko en 2011, 2,1 Mo en 2021. Cela nécessite donc une puissance informatique supérieure pour faire fonctionner un service numérique. Cela a pour conséquence un renouvellement « forcé » du matériel. Avec des pages « allégées », on réduit l’obsolescence des équipements, qu’il s’agisse des équipements utilisateurs ou des équipements réseau ou serveur
Accessibilité des pages web
Dans ce site, mes choix sont de plus pensés pour favoriser l’accessibilité de mes pages au plus grand nombre.
L’idée première est d’avoir une interface simple, sobre. En limitant le poids des pages, on peut diminuer l’énergie nécessaire pour leur hébergement. L’utilisateur n’aura pas besoin d’un téléphone ou ordinateur de dernière génération avec une excellente connexion pour les consulter. Les utilisateurs n’expérimentent pas un site « qui rame » avec leur vieil appareil ou leur connexion de basse qualité. Ils ne sont donc tentés ni d’acheter un nouvel appareil ou un abonnement plus performant ou les deux. Un nouvel appareil pour avoir accès à la 5G par exemple. Il ne vont pas non plus aussitôt chercher un autre site plus fluide.
Enfin, cela améliore l’accessibilité pour tous. Une page trop chargée peut être difficile à suivre pour les personnes ayant certains handicaps. Au contraire, une page épurée pourra être mieux lue par des logiciels d’adaptation pour les personnes en situation de handicap.
Comment alléger ses pages web ?
Pour commencer, il faut choisir avec quel outil on va concevoir le site.
Ici, le SGC (système de gestion de contenu), ou CMS (content management system), est WordPress. C’est le système actuellement le plus couramment utilisé pour créer des sites internet, open source, conçu pour être simple à utiliser.
- Quand on utilise WordPress, il est nécessaire d’être vigilant au thème choisi. En effet certains peuvent être très lourds, mais d’autres comme Ecocoded, Neptune, ou SustyWP ont été écoconçus. Il faut aussi faire attention aux plugins choisis.
- Un plugin = extension est un module qu’on ajoute au site pour en étendre les options et fonctionnalités. Je les ai limité au maximum. Ainsi, pas d’extension vers des réseaux sociaux ou vers une galerie d’images. J’ai choisi l’extension Yoast qui permet d’avoir une analyse sur la construction et la lisibilité de chaque article.
- Un constructeur de page (page builder) permet de construire une page web en intégrant des éléments préconçus à la manière d’une boîte à outils. Là aussi on doit être vigilant puisque ce sont encore des éléments ajoutés au site. Un constructeur peut augmenter le poids d’une page jusqu’à 218 kb (+133 %) et le nombre de fichiers inclus (+68 fichiers, soit +623 %)
L’approche « mobile first »
Quand on prépare une page avec wordpress, on peut prévisualiser au choix en mode ordinateur, tablette ou smartphone. Si on se focalise sur l’écran d’un téléphone, on va aller davantage à l’essentiel.
« Optimisation par l’UI »
Le design d’un site web influe sur ses performances. Travailler sur la charte graphique (les couleurs, les polices de caractères) et sur les contenus tels que les images est un premier axe de travail, appelé « optimisation d’un page par l’UI » (UI : User Interface).
écran OLED ou LCD ?
OLED
Fin 2018, Google a fait paraître des études sur la consommation d’énergie des écrans selon les couleurs utilisées. Les résultats sont donnés pour les écrans de smartphone utilisant une technologie très répandue, appelée OLED pour Organic Light-Emitting Diodes. Chaque pixel est illuminé grâce à une LED. Le noir correspond à des pixels éteints, cette couleur ne consomme donc pas d’électricité sur ces écrans. 3 sous-pixels correspondent aux 3 couleurs avec lesquelles l’ensemble des couleurs sont créées, bleu, vert et rouge. On utilise aussi cette technologie pour une partie des écrans plats de télévision ou d’ordinateur.
- L’écran OLED du smartphone avec lequel Google a fait son étude dépense 250 mA pour afficher une capture d’écran de Google Map en mode « normal ». Mais 92 mA en mode sombre : une baisse de 63%. Attention, être conscient qu’on parle ici de la consommation de l’écran. Passer en mode sombre ne réduira pas de presque 2/3 la consommation de l’ensemble du smartphone. Pour diminuer la consommation du smartphone, il est conseillé de désactiver wifi, Bluetooth, localisation etc quand on ne les utilise pas.
- L’affiche d’un écran noir consomme 50 mA, l’affichage d’un écran blanc consomme 6 fois plus (plus de 300 mA).
- Lorsqu’un écran, réglé à la luminosité maximale, affiche exclusivement du bleu, il consomme plus (800 mW) que s’il affiche du rouge (600 mW) ou du vert (580 mW).
LCD
L’autre technologie d’écran (de smartphone, télévision, ordinateur) est celle des écrans à cristaux liquides ou LCD (de l’anglais liquid crystal display). Un écran LCD dispose d’un rétroéclairage qui fournit une source lumineuse à des pixels individuels. Comme dans la technologie OLED chaque pixel a des sous-pixel rouge, vert et bleu. Lorsque tous les sous-pixels d’un pixel sont désactivés, il apparaît en noir. S’ils sont activés à 100 %, il apparaît en blanc. Et en ajustant les niveaux individuels de rouge, vert et bleu, des millions de combinaisons de couleurs sont obtenues. Avec ce type d’écran, peu importe ce qui est affiché, la consommation électrique reste la même, celle du rétroéclairage. C’est alors la luminosité de l’écran qui importe, gérée par l’utilisateur.
Si le choix des couleurs n’a pas toujours un impact écologique, il en a en termes d’inclusivité. Pour une meilleure lisibilité, il est conseillé d’utiliser du texte de couleur foncée sur un fond clair, mais pas blanc qui peut paraître trop éblouissant. Par exemple un fond crème ou une couleur pastel. Cela dit, pour faire simple, les textes sont ici en noir sur fond blanc.
Il faut aussi penser aux personnes qui ont une déficience de la vision des couleurs. Si les différents éléments d’un graphique par exemple ne se différencient que par leurs couleurs, il ne sera pas pertinent pour tous. Si par contre les différences sont à la fois un changement de motif et un changement de couleur, on aura un graphique accessible pour tous.
Choix des polices
Le choix des polices est également important. Limiter la diversité des styles permet de réduire les données stockées. Ici je suis allée au minimum.
Bien choisir police, écartement des caractères et taille des interlignes va contribuer à la lisibilité de la page. Il faut bien sûr utiliser une police standard, déjà installée sur l’appareil de l’utilisateur, il n’y a alors pas besoin de télécharger de nouveaux fichiers pour afficher le contenu d’une page ce qui réduit le nombre de communications avec le serveur et le temps de chargement de la page (En 2022, le poids moyen d’une police web représente 138 Ko, soit 6% du poids de la page).
Pour une mise en page inclusive, il est conseillé d’aligner le texte à gauche, sans justification.
Les médias d’une page web
L’utilisation des médias et le stockage associé a un « coût » qu’il est possible de diminuer en évitant les supports vidéos, en diminuant le nombre de photographies et en en réduisant la taille. Ici, j’ai choisi d’intégrer des vidéos dans certaines pages. Cela correspond à une ligne de code qui fait le lien vers une vidéo stockée, par exemple, sur YouTube. C’est plus attractif qu’un lien sans peser « lourd » sur le téléchargement de la page : l’utilisateur la visionne s’il le veut uniquement.
- Pour les photographies, le format .jpeg est le plus adapté
- Pour les illustrations, on conseille de privilégier les images vectorielles au format .svg
- Lorsque les images sont décoratives et n’apportent rien en termes d’information, privilégier les images vectorielles aux photographies permet d’alléger le poids des images
Diminuer la taille des images
Diminuer la taille des images permet d’en diminuer le poids. Partons par exemple d’une grande photographie, de taille 2800 x 3840 pixels et pesant 1,4 Mo. Est-ce bien utile ? La résolution de l’écran de mon smartphone est de 2400 x 1080 pixels, la résolution recommandée de l’écran de mon ordinateur portable de 1920 X 1080… Même en mettant la photographie en plein écran, une taille de 2800 x 3840 est inutile ! Je peux donc en réduire la dimension. Ainsi la même photo, dimensionnée en 640 x 874 pixels ne pèse plus que 123 ko. Bien sûr, il peut être intéressant d’utiliser 2 dimensions, une qui s’adapte aux écrans de téléphone mobile et une autre pour la version ordinateur, en utilisant les balises html adaptées (guide d’écoconception de services numériques p. 33).
La compression des images
La compression consiste à simplifier le code de la photo de façon imperceptible pour l’œil humain de façon à en diminuer le poids, avec une application ou un plugin comme shortpixel. Par exemple, l’outil peut réduire le nombre de couleurs de l’image : si deux tons de noir ont un code couleur extrêmement proche, l’outil peut les harmoniser en leur attribuant la même couleur.
Des illustrations accessibles
Enfin, il faut penser aux personnes mal voyantes, en dotant chaque illustration d’une description alt-text indiquant l’objet, l’action, et le contexte de la photo. Une personne malvoyante ne pourra certes pas la voir, mais son logiciel lisant la page pourra lui en communiquer l’essentiel du contenu.
Choix des interactions
De même, bien choisir les interactions peut faire une grande différence sans forcément dégrader l’expérience utilisateur, par exemple on peut éviter les animations et remplacer les carrousels d’image par des flèches “suivant” – “précédent”.
Vérifier avec Green IT analysis
Green IT analysis est une extension disponible sur les navigateurs Google Chrome et Firefox. Sur n’importe quelle page web :
- On clique sur F12 pour accéder à un panneau technique.
- On va dans l’onglet « lancer l’analyse » et on obtient un « écoindex » compris entre A et G.
- En analysant les pages et en sélectionnant l’option “Activer l’analyse des bonnes pratiques”, on obtient un score et des pistes d’améliorations. Il est important d’effacer le cache au début de l’analyse et de désactiver les bloqueurs de publicité pour une mesure réaliste.
- Après avoir analysé et sauvegardé chaque page, l’historique du parcours est disponible en cliquant sur « Historique ». Vous pouvez alors exporter les résultats vers un tableur et faire la somme des impacts des pages afin d’obtenir l’impact global d’un parcours.
« Optimiser l’UX »
Le deuxième axe sur lequel travailler est de limiter le nombre de clics que le visiteur devra faire pour accéder à l’information qu’il recherche. Les informaticiens appellent cela « optimiser l’UX » (UX : User eXperience). Un parcours plus simple rend le site plus attractif et accessible, et cela le rend plus « écolo »
Choix de l’hébergeur
Les centres de données (« data center ») sont de véritables « gouffres énergétiques ». Le dernier axe sur lequel on peut agir est donc celui de l’hébergeur du site web.
J’ai choisi un hébergeur français, situé dans le département voisin, qui affiche une démarche écologique et éthique.