L'écoconception, pour une sobriété numérique

Depuis nos débuts avec Nevoweb puis désormais avec l’Agence Sésame, nous tendons vers la sobriété numérique. L’écoconception de sites Web s’inscrit parfaitement dans cette démarche, où la simplicité et le beau s’allient, tout en préservant l’ergonomie et les fonctionnalités.

Nous avons construit nos compétences selon ces nouveaux aspects du Web, en constante évolution, et pouvons aujourd'hui répondre à tous vos besoins numériques et de communication, pour une relation durable !

Qu’est-ce qu’un site écoresponsable ?

Un site Internet consomme de l’énergie. Pour être visité, il a besoin d’être hébergé sur un serveur et subit des requêtes qui utilisent la bande passante. L’idée est de réduire cette consommation et son impact sur l’environnement.

L’écoconception est une logique d’amélioration continue : Elle commence par une optimisation de vos contenus et peut donc être mise en place sur n’importe quel site Internet existant. Si vous souhaitez réellement vous inscrire dans cette démarche, penser et concevoir un site dans une optique durable permet d’agir autant sur le plan technique qu’éditorial.

Quelle est l’empreinte écologique de mon site Internet ?

L’univers numérique grossit à une vitesse phénoménale. Il est partout dans nos vies, sur nos smartphones et autres objets connectés, les données échangées ne cessent de croître et pèsent aujourd’hui sur notre environnement.

Adopter une démarche éco-responsable c’est offrir à vos internautes une expérience utilisateur plus simple et beaucoup plus efficace. C’est proposer des contenus optimisés, plus pertinents, simplifier la mise en forme pour aller à l’essentiel, opter pour un webdesign plus efficient.

La sobriété numérique commence donc par un allégement des besoins de votre site, en opérant un tri sélectif : conserver le contenu pertinent et nécessaire et évacuer l’obsolète et le superflu, simplifier la structure, définir un bon ratio texte/média. Créer une stratégie de qualité et non de quantité, pour finalement proposer un message plus authentique et pertinent.

Un vrai challenge, car nous sommes habitués à la profusion de visuels et aux thèmes à effets compulsifs. Il s’agit de trouver les meilleurs compromis afin que l’écoconception ne soit pas perçue comme une régression mais plutôt comme une manière plus raisonnée d’exploiter les technologies. Un site web écologique est avant tout un site web performant !

Passons donc à l’action et créons les codes de demain.

Témoignage d'Anne Pelletier - AD FINE

AD FINE est un bureau d’études, de conseil et de formation qui accompagne entreprises et territoires dans la transition écologique. Dans une volonté forte d’être aligné sur les valeurs que nous défendons quotidiennement dans nos missions professionnelles, il nous est apparu évident d’écoconcevoir notre nouveau site internet afin d’en réduire les impacts environnementaux.
Rappelons-le : à l’échelle planétaire, le secteur du numérique émet déjà 4% des gaz à effet de serre, Parce qu’à l’horizon 2025, il est prévu que cet impact s’élève à 8% ! Il est nécessaire – et possible – d’agir dès aujourd’hui !

L’Agence Sésame a accueilli notre projet avec enthousiasme, offrant une écoute attentive à notre demande d’écoconception. Un challenge en soi car il s’agissait de concilier le design, le SEO, l’amélioration de l’expérience visiteur, et le poids numérique du site. Tout en valorisant l’identité graphique d’AD FINE, afin que ce nouveau site porte l’engagement de notre équipe et les valeurs de notre SCOP. De toute évidence, le professionnalisme et l’engagement des collaborateurs de l’Agence Sésame a permis de cocher toutes les cases.

Se lancer dans l’écoconception d’un site internet en 2022, c’est encore ouvrir des chemins peu empruntés. Il faut savoir innover. Tous les éléments de la création et de l’usage du site doivent être passés au crible préalable de l’analyse :

Ses contenus, leur pertinence et l’obsolescence de certains, leur mise en forme ;
L’expérience utilisateur,
Le trafic sur les pages,
Les attentes par rapport à l’hébergeur…

La disponibilité de l’équipe de l'Agence Sésame et ses précieux conseils nous ont permis de prendre des décisions pertinentes, toujours en connaissance de cause, de peser leurs avantages et leurs inconvénients, de chercher ensemble des solutions. Les aspects « techniques » de l’écoconception, qui sont exposés dans le référentiel de « 115 bonnes pratiques d’écoconception Web », mis au point par GreenIt.fr et respectés par l’Agence Sésame, permet aujourd’hui à AD FINE d’afficher une note EcoIndex A pour le bilan environnemental de notre nouveau site.
Avec des indicateurs qui parlent d’eux-mêmes :

Une empreinte carbone de 0,40 gr de CO2 pour chaque page visitée, contre 5,92 de CO2 pour l’ancienne version ;
En un an, avec 10 000 pages mensuelles vues, adfine.fr devrait produire 47,98 kg de CO2 (autant que 3 arbres en absorbent par an), alors que la version précédente produisait 710,05 kg d’équivalent CO2 (nécessitant 33 arbres en compensation carbone).

Dans le même temps, « l’univers AD FINE » est valorisé par son nouveau webdesign :

Une identité graphique mise en musique avec esthétique et fluidité à travers un site qui nous ressemble ;
Des contenus facilement accessibles ;
Une meilleure présentation de nos missions, nos engagements, nos solutions.

Tous les voyants de cette fructueuse collaboration entre l’Agence Sésame et AD FINE sont au vert ! En espérant que cette démarche inspire maintenant d’autres entreprises à passer le pas de l’écoconception, s’engageant ainsi dans une démarche volontaire de transition écologique et de réduction des impacts environnementaux du numérique.

Anne PELLETIER
Pilote du projet écoconception du site internet pour AD FINE
Chargée de mission commerciale et marketing

Pour tout renseignement sur notre démarche et notre collaboration, n'hésitez pas à me contacter

Les bonnes pratiques en écoconception

Nous avons identifié 12 bonnes pratiques qui nous paraissent essentielles dans la démarche d’écoconception, en s’appuyant sur le guide des 115 bonnes pratiques, édité par le collectif Conception Numérique Responsable.

1) Penser un site raisonnable

Afin de réduire l’impact de votre site, il faut optimiser sa lisibilité : organiser et hiérarchiser ses contenus, afin d’offrir un parcours simplifié et fluidifier au maximum la navigation.
Il est essentiel de proposer un menu clair contenant moins d’onglets et d’alléger la structure en rationnalisant le nombre de pages. On limite le nombre de clics et de requêtes, et ainsi l’empreinte du site.

2) Réduire les fonctionnalités non essentielles

Avant de se lancer dans la réalisation, il est essentiel de bien définir les besoins de vos utilisateurs, comprendre leurs usages pour ne pas leur proposer de fonctionnalités inutiles.
L’interface doit être simple à comprendre, et surtout pratique : Posez-vous la question de l’intérêt d’une fonctionnalité, et si elle participe à un meilleur parcours utilisateur pour trouver plus facilement le contenu qu’il est venu rechercher sur votre site.

3) Proposer du contenu qualitatif

Vous l’avez compris, un site éco-responsable mise sur l’efficacité des visuels, et sur leur qualité plutôt que leur quantité. Pour un site écoconçu, le ratio texte/media est différent d’un site classique avec plus de place pour le texte. On va donc sélectionner des visuels de qualité professionnelle ou privilégier le travail du webdesigner sur la CSS et les ressources vectorielles. Aussi, avec un contenu rationnalisé, le choix des mots-clés est important afin d’obtenir des requêtes pertinentes.

4) Approche mobile first

Les recherches sur les téléphones mobiles dépassent désormais les requêtes sur ordinateur en France. Le « mobile-first » consiste à concevoir un site en mettant la priorité sur la version mobile puis en l’adaptant progressivement au format desktop. Cette démarche va donc plus loin que le responsive design, car on limite ici le contenu pour se focaliser sur l’essentiel, afin d’obtenir un affichage acceptable sur mobile. Une approche donc plus sobre, où les contenus et leur impact sont réduits, et totalement en phase avec l’éco-conception.

5) Limiter l’utilisation de plugin

Les plugins permettant de faire de l’animation, telle un carrousel, peuvent être très gourmands en ressources. Souvent codées en Javascript, ces animations sont lourdes et doivent donc être utilisées uniquement si elles améliorent l’expérience utilisateur. Un carrousel automatique plein écran, par exemple, est à bannir. On va y préférer une animation CSS3, plus légère, et dont l’impact est minimal.
A éviter aussi, les widgets de toutes sortes (bot de chat, flux de réseaux sociaux, etc) qui dépendent de ressources externes et augmentent considérablement le temps de chargement.

6) Eviter les thèmes "à tout faire"

L'utilisation d'un thème permet d’habiller votre site et son CMS en quelques clics. Nombreux sur le marché sont les thèmes premium "à tout faire" : ils intègrent une multitude de plugins permettant de les faire fonctionner, pour s’adapter à tout type de site, et sont par conséquent lourds. Les ressources incluses par défaut, souvent non utilisées, alourdissent les pages et donc leur chargement. En concevant du sur mesure, ou en utilisant un thème plus ciblé, vous n’injectez que ce qui est nécessaire aux besoins du site.

7) Privilégier les formats sobres

Exit les carrousels d’images HD « full screen », place aux visuels doux. Il y a plusieurs manières d’illustrer un propos, que ce soit par l’image, l’infographie ou le texte lui-même. Ainsi la mise en page d’un site écoconçu est certainement plus travaillée, et l’on va chercher à utiliser au maximum les ressources vectorielles disponibles, ou jouer sur les couleurs de la charte, le choix des typos.
La CSS sera donc plus étoffée, le format SVG et les polices d’icônes privilégiés, les images moyen format ou low-res (jpg travaillé en 2 couleurs par exemple).

8) Proposer une alternative aux médias

Un texte, simplement mis en forme grâce au HTML/CSS, utilise beaucoup moins de bande passante qu’un texte illustré d’un média comme une vidéo, ou de photos. Fournir aux utilisateurs une alternative textuelle à ces contenus leur permet s'ils le souhaitent de lire plutôt que de visionner, et donc de consommer moins de ressources. Une action utilisateur peut proposer, via un script côté serveur, ce contenu alternatif. Et maintenir ce choix pendant toute la session de l’utilisateur.
Cette pratique est aussi bénéfique à l’accessibilité du site et son référencement.

9) Valider les pages auprès du W3C

Une étape primordiale avant la mise en ligne d’un site écoconçu est sa validation W3C, que l’on peut comparer à un contrôle qualité : Vérifier que le code HTML des pages est conforme aux standards du Web. Valider son site Web permet d’identifier les erreurs pénalisantes qui impactent les performances du site, le navigateur étant davantage sollicité pour corriger dynamiquement les éléments posant problèmes.

10) Optimiser les fichiers

Il s’agit de compresser ou minifier les fichiers utilisés, afin d’en réduire leur taille : CSS, Javascript, images… Si l’on peut considérer cette étape comme du peaufinage, appliquer cette règle systématiquement à toutes les ressources du site permet un gain de performance non négligeable.

11) Développer durable

Côté développement, il y a aussi des bonnes pratiques à adopter : la construction de services ou API et un déploiement en serverless permet de décharger les besoins du serveur. Le code est alors déployé sur une plateforme dédiée à l’exécution de manière optimale, sur les ressources disponibles.
L’utilisation du cache permet également d’optimiser l’affichage en « stockant » les requêtes.

12) Hébergement responsable

Concevoir un site écoresponsable c’est bien, l’héberger chez un prestataire de confiance et engagé dans une démarche responsable, c’est encore mieux. Vous pouvez privilégier un hébergeur qui utilisera majoritairement des centrales hydro-électriques pour alimenter ses centres par exemple.
En France, OVH s'inscrit dans la démarche européenne CISPE pour des datacenters climatiquement neutres.

BONUS : 13) Proposer un mode sombre

Proposer un mode sombre de votre site permet de réduire l’espace blanc. C’est l’une des premières techniques popularisées pour économiser de l’énergie, mais qui a été oubliée avec l’avènement des écrans LCD, et leur rétroéclairage permanent, utilisant la même énergie quelle que soit la couleur réellement visible sur l’écran. Cependant, avec l’avènement des écrans OLED qui éclairent chaque pixel individuellement, l’utilisation de couleurs plus sombres est à nouveau une technique viable pour réduire l’énergie sur les appareils des utilisateurs finaux.

Alors, comment obtenir une note verte ?

À l’Agence Sésame, nous essayons de trouver les meilleurs compromis, autant du point de vue des fonctionnalités que du design. Nous pensons pratique, simple, efficace, sans négliger la satisfaction utilisateur.

Au stade de pré-production, votre site est soumis à différents services d’analyse qui permettent de valider l’écoconception. Nous faisons en sorte qu’il obtienne une note optimale sur les outils les plus exigeants en termes de rapidité d’affichage et de respect des bonnes pratiques.

Contactez-nous pour un projet durable

À bientôt !

Vous avez un projet ? Partagez-le avec nous !

Connexion

Mentions Légales

Déclaration environnementale