Un site internet conçu dans le respect des normes numérique responsable, c’est quoi ?

C’est quoi déjà le numérique responsable ? 🙄

Le numérique responsable consiste à améliorer l’empreinte écologique et sociale du numérique en réduisant ses impacts environnementaux et sociaux. Il recouvre :

• le Green IT pour réduire l’empreinte environnementale à l’échelle de la DSI,
• l’IT for green qui met le numérique au service du développement durable et
• la conception responsable des services numériques. Pour en savoir plus, je vous invite à lire la thématique Numérique Responsable.

Sur ces 3 pans, le site Seme-et-Reverdis.com a été challengé et cela a d'ailleurs challengé la webdeveloppeuse mais surtout … la cliente c’est-à-dire moi 😉. Cela implique des choix mais je vous rassure : ces choix sont faciles quand on est aussi bien accompagnée que je l’ai été et que l’on est convaincu de la nécessité de la démarche.

Alors qu’avons-nous fait pour le site seme-et reverdis ?

Tout d’abord, je devais sélectionner le ou la bonne partenaire pour ce projet. Si de plus en plus de développeur⸱se⸱s sont formé⸱e⸱s à ce sujet, c'est encore trop peu... J’ai eu beaucoup de chance : j’ai trouvé à la fois une développeuse experte sur ce sujet et impliquée dans les projets de transitions solidaires et écologiques ! Vraiment un très grand MERCI Emeline 🙏💚!

Une fois la bonne partenaire trouvée, la conception a pu débuter !

Concrètement ?

La solution a été développée sur mesure, performante, réduite aux fonctionnalités strictement nécessaires. En bref, une solution légère !

Tout a commencé par le choix des outils.

L’ensemble des technologies utilisées sont des technologies open-source comme cockpit pour la partie administration et le micro-Framework Slim complété par le générateur de rendu Twig pour la parte visible du site par le public.
Ces solutions ont été sélectionnées car elles garantissaient le bon équilibre c'est à dire : réponse aux besoins / performances / contraintes.

Tout est connecté pour garantir à la fois une meilleure accessibilité, de meilleures performances et bien entendu un meilleur impact environnemental 🌍.

Ensuite, pour la conception du site, de nombreux éléments ont été pris en compte pour que celui-ci soit écoconçu en s'appuyant sur la checklist écoconception du GreenIT regroupant 115 éléments à prendre en compte.

Prenons quelques exemples :

• Réduire la complexité pour limiter l’obsolescence technologique et psychologique

Cela se matérialise notamment par la réduction du nombre d’interfaces vers un document html (appelé le DOM) car plus une page web est complexe, plus le terminal de l’utilisateur doit être puissant pour l’afficher.

• Limiter la consommation du réseau en limitant le volume de données transférées

Pour cela, les pages sont pensées pour être simples avec des paginations, des grandes sections… et évidemment, il est indispensable de réduire la charge des éléments en réduisant le poids des pages et des ressources. Pour le logo et les images, ils ont été préférés au format vectoriel qui permet de créer fichiers graphiques avec un poids limité qui s’adaptent sans perte de qualité jusqu’aux plus grandes tailles d’écrans.

• Limiter les appels aux serveurs :

Toutes les ressources sont hébergées en interne sur le même serveur. Le seul autre serveur appelé est le website carbon pour mesurer l’empreinte carbone des pages du site. Et pour limiter l’impact, les données sont en cache, c’est-à-dire que les données sont stockées après la première visite du site.

• Choisir un bon hébergeur :

Le critère environnemental et lieu physique de stockage des données ont été des critères majeurs dans la sélection de l’hébergement (et bien-sûr les critères de sécurité, les performances, le taux de disponibilité…). J’ai choisi Infomaniak pour son hébergement en Suisse et pour son engagement à réduire son empreinte carbone depuis 2007, notamment par son utilisation d’énergies renouvelables et d'air naturel pour refroidir les centres de données.

Et les résultats ?

Après tout ça, le temps de la mesure était venu ! Pour cela, différents outils ont été utilisés en testant à chaque fois la page d’accueil, en version mobile et bureau (c'est à dire à partir d'un ordinateur).

• EcoIndex

L’EcoIdex est un outil de mesure de l’empreinte environnemental de la page. C’est l’outil du GreenIT, basé sur la checklist d'écoconception partagé plus haut.

A étant la meilleure note avec le plus faible impact, la page d’accueil ressort avec un résultat à 81,07 soit un écoindex A ! Et là, nous sommes contentes !

En détail (allez un peu de technique 😉): 16 requêtes http, 2 feuilles de styles dont une print css, et toutes les ressources compressées !!

• Lighthouse

Lighthouse est un outil open source proposé par Google pour mesurer les performances d'une page. Il mesure notamment ce qu'on appelle les web core vitals : le temps de chargement, l'interactivité et la stabilité visuelle. L'analyse montre que le site a de très bonnes performances, aucun audit en erreur : les bonnes pratiques sont respectées !
Si vous voulez voir en détail le résultat : le voici pour l'accès via ordinateur accueil_bureau.pdf

Nous sommes encore plus contentes !!!

• Website carbon

L'outil mesure l'empreinte carbone de la page du site web. J'ai choisi de vous partager le résultat sur chaque page, comme sur celle-ci. La transparence est primordiale et contribue à la sensibilisation.

Et ça ne s'arrête pas là !

J'espère que ces lignes vous ont démontré que : oui c'est possible d'avoir un site internet dont l'impact environnemental sera limité en appliquant un ensemble de bonnes pratiques. Mais ça ne peut se faire seule : être accompagnée d'une personne experte est indispensable. Elles sont encore trop peu. Espérons que l'écoconception deviendra très bientôt un module obligatoire de toutes les écoles de développement.

Et oui ça ne s'arrête pas là car une autre dimension peut et se doit d'être prise en compte dans la lignée du numérique responsable sur la notion d'inclusivité : il s'agit de l'accessibilité au plus grand nombre de personnes.

Ce sera l'objet de l'épisode 2... A suivre 😉