Éco-conception de sites internet : réduire l’empreinte environnementale de son site web
01 septembre 2020Trop souvent, la sobriété numérique est résumée à la réduction de l’empreinte environnementale du numérique, elle-même parfois réduite au fait de ne pas stocker ses mails. Pourtant, le sujet est bien plus vaste. La sobriété numérique porte sur l’environnement certes, mais aussi sur l’humain.
Dans cet article, nous apportons des réponses simples à la question «comment réduire l’empreinte environnementale de son site internet, à travers l’éco-conception ?» Sébastien Rufer d’Angle Web nous éclaire sur le sujet avec des exemples pratiques à mettre en place immédiatement pour améliorer votre site internet.
Mise en contexte : pourquoi prêter attention à l’empreinte environnementale d’un site internet ?
À lui seul, le digital émet, chaque année, autant de gaz à effet de serre que l’ensemble des salariés français allant travailler pendant 50 ans.
L’impact environnemental global du numérique – émissions de gaz à effet de serre, consommation d’eau bleue, consommation d’énergie primaire, impact sur la biodiversité et les matières premières – représente un 7e continent de la taille de 2 à 5 fois la France
(source : étude 2019 de GreenIT sur l’empreinte environnementale du numérique mondial).
Quel impact environnemental : entre data centers, poids des mails et des sites, terminaux ?
Aujourd’hui environ 60 % des impacts sont dus aux utilisateurs, dont 35 % à la fabrication de leurs équipements : téléphone, ordinateur, etc.
À titre d’exemple, en moyenne, les Français changent de téléphone tous les 18 mois !
Et dans bien des cas, ce changement est provoqué par une exclamation du genre « ça rame» ou «je n’ai plus de place».
Quant aux data centers, ils sont responsables de 15 % des impacts mondiaux.
Notez qu’il faut, par exemple, 2 fois plus d’énergie pour transporter une donnée vers un data center que de la stocker pendant un an. L’envoi est plus problématique que le stockage.
La question alors à se poser est : faut-il préférer envoyer une info par mail ou par SMS ? C’est ce que propose l’éco conception, choisir la solution la plus sobre.
Dans ce cas précis, c’est le SMS : il n’a que très peu d’impact.
L’éco-conception : une lutte contre l’obsolescence
Un des enjeux majeurs d’une démarche d’éco conception est de réfléchir à l’expérience que l’on propose davantage qu’à la solution technique. Cet aspect vient en second temps.
L’enjeu principal d’une démarche d’éco-conception est de :
- ne pas «gâcher» de la ressource en proposant des contenus ou des fonctionnalités inutiles – non attendues, faible qualité, sans intérêt.
- faire en sorte que la complexité technique n’oblige pas l’internaute à disposer d’un matériel trop récent et éviter ainsi l’obsolescence accélérée du matériel.
- d’évaluer la pertinence d’utiliser du high tech pour certaines fonctionnalités. Le low tech (2G/3G, SMS, etc.) peut apporter des réponses clairement adaptées.
Il arrive trop souvent de consulter une page d’accueil de site vitrine d’entreprise tellement lourde et complexe qu’elle ralentit un ordinateur ou mobile acheté il y a 3 ans.
L’éco-conception : se centrer sur le parcours utilisateur
Par abus de langage, on parle d’écoconception d’un site Web. En réalité, on écoconçoit pas un site, mais un acte métier.
Un site Web est un assemblage d’actes métier : générer des contacts, promouvoir un service, vendre un produit, etc.
Pour faire simple, nous identifions un ou plusieurs parcours utilisateurs pour réaliser ces objectifs.
Prenons l’exemple d’une femme qui chausse du 38 qui veut acheter une paire de bottines sur le site z**.com. Un parcours utilisateur simplifié pourrait être :
- recherche sur Google
- navigation sur le site pour aller sur la rubrique chaussure
- application de filtres pour sélectionner les bottines et la pointure 38
- choix d’un modèle
- ajout au panier
- tunnel de commande
- payement
- livraison
Pour chacune des étapes des parcours, et pour le parcours dans son ensemble, l’éco-conception nous invite à nous poser 3 questions :
- Est-ce que cette étape / ce parcours est vraiment pertinent pour mes audiences ?
- Est-ce que cette étape / ce parcours est vraiment profitable pour mon business ?
- Quelle est la solution technique la plus sobre pour la mettre en œuvre ?
Comprendre le gras numérique
On peut définir le gras numérique par les éléments fonctionnels, éditoriaux, graphiques ou techniques qui ne servent pas – ou pire qui desservent – les objectifs du site Internet.
Une étude de 2015, menée par The Standish Group, révèle que 64 % des fonctionnalités d’un logiciel ne sont jamais ou presque jamais utilisées !
Y’a-t-il vraiment un intérêt à publier une actualité sur la page d’accueil de son site Web avec photo et titre et de faire un lien vers une page qui n’en propose pas plus ?
À l’inverse, ou en réponse à ce gras, nous proposons une sobriété numérique qui vise le strict minimum nécessaire pour remplir les objectifs du site Web.
3 principes pour se concentrer sur l’usage des services avant tout :
- supprimer la production de gras numérique
- nous interroger sur la valeur ajoutée
- évaluer l’utilité
Principes sur lesquels se base aussi la sobriété éditoriale qui évalue l’intérêt de l’information au regard des besoins des publics.
Réduire l’empreinte environnementale de son site web : les points d’attention
Citons quelques exemples parmi les plus courants.
La vérité sur les carrousels
Bon nombre de sites sont pourvus de carrousels, placés souvent comme élément principal de la page d’accueil.
Saviez-vous que le taux de clic sur la première diapo est de 1 à 3 % et sur le second moins de 1% ?
Moralité, les carrousels ne sont pas intuitifs, sur le principe de pas vu pas su
L’alternative aux carrousels
Alors on fait quoi ? Il n’y a quasiment aucune raison d’utiliser un carrousel sur un site Web. Ce ne sont pas les alternatives qui manquent :
- Si le but est de provoquer une immersion, une grande et unique photo, bien optimisée et sans Javascript, peut très bien faire l’affaire.
- Hiérarchisez l’information différemment, par exemple, prévoir des blocs séparés et hiérarchisés pour chaque diapo.
C’est le choix qu’à fait Zalando : une image de fond et 3 boutons : Femme, Homme, Enfant.
En se débarrassant de gadget, vos visiteurs vont gagner :
- en rapidité d’affichage
- en simplicité d’usage donc gain temps et en charge cognitive
- en durée de vie de leur mobile ou ordinateur
Le poids des images
L’effet waouh sur les sites avec une belle image en plein écran, c’est chouette mais souvent l’image n’est pas optimisée.
Une personne qui consulte le site en mobilité dégradée ne lira peut-être pas les images, voire le site s’il ne s’appuie que sur des images.
Ce poids des images impacte aussi le temps de chargement global de la page.
Et en écho à ce que nous avons déjà dit sur le carrousel, si la première image est illisible, l’internaute ne saura toujours pas ce que l’entreprise fait.
Les solutions aux images lourdes
- choisir le bon format d’image : on utilise généralement le format JPG pour les photos et PNG pour les illustrations
- Bien dimensionner les images : ce n’est pas nécessaire d’utiliser une image de 1500 pixels pour l’afficher en vignette sur le site.
- l’image choisie n’est-elle pas du gras numérique ? est-elle réellement utile ?
Les cartes Google Maps
Plébiscitées en pied de page ou sur les pages contact, ces cartes sont très simples à intégrer : un simple copier / coller et toutes les fonctionnalités proposées par Google sont ainsi proposées sur son site Web !
On est clairement dans un cas de sur-qualité ! Car bon nombre de la ribambelle de fonctionnalités ne sont jamais utilisées.
Certes, en insérant une fonctionnalité, on pense faciliter l’accès à notre structure via le calcul d’itinéraire simplifié.
Certes ! Mais c’est payé très cher pour le peu de visiteurs qui vont utiliser cette fonctionnalité. Car en général, l’utilisateur n’utilise pas la fonctionnalité via le site. Raisonnons en parcours utilisateur : muni de mon téléphone, je tape le nom de l’entreprise, j’arrive sur le Google My Business et je clique sur itinéraire, voire je dicte le nom d’une entreprise via une appli
Quelles alternatives aux Google Maps ?
- Faire un plan d’accès à l’ancienne avec photo : cela participe à votre image visuelle et peut même alléger la compréhension de votre localisation.
- Générer une image du plan depuis un outil comme OpenStreetMap par exemple.
- Il est tout à fait possible de créer un lien vers une page Google Maps qui pointe un lieu et permettre ainsi aux visiteurs intéressés d’effectuer un calcul d’itinéraire pour venir vous voir.
Vos visiteurs vous remercieront d’avoir une page qui s’affiche rapidement et qui ne dégrade pas l’utilisabilité sur des terminaux un peu anciens.
Pour autant, vous ne faites pas l’impasse sur le service rendu !
Le poids de la vidéo
La vidéo fait couler de l’encre car support plébiscité, elle est néanmoins très gourmande en bande passante.
Notons tout d’abord que la vidéo ne se prête pas à toutes les conditions d’usage, ni à tous les visiteurs, on ne peut lire le contenu en diagonale.
On ne peut pas lire en diagonale.
Une bonne alternative est d’insérer une vignette de la vidéo avec un lien vers la plateforme d’hébergement et de proposer une retranscription écrite.
Et côté typo ?
Prenons l’exemple des typos, type Google Fonts. Il n’est pas rare qu’une page Web en propose plusieurs pour assurer le design du site : une pour le texte, une pour la titraille, une pour les mise en exergues, etc.
Le chargement des typos peut représenter jusqu’à 1/3 du poids d’une page et nécessitent plusieurs requêtes vers les services de Google ou votre propre serveur.
Attention à cette notion d’effet waouh qui a perverti les attentes clients.
Pour conclure, quel type de CMS choisir pour faire de l’éco conception ?
Le choix du CMS n’est pas très important. Il est tout à fait possible de proposer une démarche d’éco-conception avec WordPress par exemple.
Le vrai sujet concerne plutôt le choix des développeurs et intégrateurs. Ils doivent maîtriser complètement les bonnes pratiques et les recommandations de la communauté qui gère le CMS.
Ils doivent être capable de
- limiter la complexité des pages (nombre d’éléments HTML),
- optimiser leur poids
- et réduire le nombre de requêtes nécessaires.
L’usage du javascript doit être dédié au soutien des objectifs/parcours et ne pas produire du gras numérique.
Ont –ils la certification OpQuast ? la certification éco conception de services numériques ? Testez- leur sensibilité au sujet !
Un article écrit par Ferréole Lespinasse
Au sein de Cyclop Éditorial, Ferréole accompagne la redirection de la communication à travers l’approche par la sobriété éditoriale : conseil, audit de site, rédaction et formations, conférences et sensibilisation en sobriété éditoriale, rédaction web, langage clair.