Un site éco-conçu pour l’ATLASS 2

L'écoconception du site ATLASS 2

Le projet ATLASS 2 a pour ambition de valoriser des recherches et analyses effectuées sur les systèmes agro-écologiques et alimentaires de 6 territoires ruraux. L’enjeu est de trouver de nouvelles méthodes pour répondre auxenjeux de création d’emplois, de préservation du foncier pour des productions consommées localement, et de maintiend’une agriculture vivante, plus économe et autonome.

En toute cohérence, son site internet se devait d’être développé dans une démarche de sobriété numérique. Car oui, le secteur du numérique a des impacts sur l’environnement !

  • Le numérique est responsable de 3 à 4% des émissions de Gaz à Effet de Serre (GES) dans le monde. Ce chiffre risque de doubler d’ici à 2025 du fait de son fort taux de croissance annuel (+6%/an). C’est un des plus forts taux de croissance, tous secteurs confondus et cette évolution est incompatible avec la trajectoire +2°C. Mars 2021, The Shift Project
  • 53 millions de tonnes de déchets d’équipement électriques et électronique ont été générées dans le monde en 2019 (2020, Global E-Waste Monitor - ONU, ITU)
  • Un taux de collecte pour recyclage très faible — seulement 20% — impliquant des pollutions, des trafics, etc.

Et si le secteur du numérique a autant d’impacts, c’est qu’il repose sur un nombre faramineux d’infrastructures (réseaux, data centers, etc.) et d’équipements (ordinateurs, téléphones, et autres appareils connectés.) ! Et même s’il est difficile de s’en rendre compte, ces outils consomment énormément de ressources matérielles et énergétiques. Il faut plus de 800kg de ressources pour fabriquer un ordinateur de 2kg !

Alors parce que la majeure partie de l’impact provient du matériel, nous ne sauverons pas la planète avec des sites éco-conçus. En revanche, ce que nous pouvons faire, faisons-le. Car toutes les démarches démontrant d’une possibilité de faire autrement encourageront la considération des enjeux environnementaux et sociétaux et inspireront d’autres acteurs
dans leurs projets.

Mais alors, pourquoi éco-concevoir un site internet ?

Éco-concevoir un site internet, c’est notamment réfléchir à la pertinence de son existence (et de ses fonctionnalités), maîtriser sa consommation d’énergie à l’usage et garantir la pérennité des infrastructures et des équipements numériques qui le font fonctionner.

Il s’agit donc de choisir les bonnes méthodes et les bons outils de conception pour limiter :

  • La création de contenus et de fonctionnalités inutiles → questionner les besoins, déconstruire les automatisme (UI/UX, développement, etc.)
  • L’obsolescence du site → assurer la compatibilité du service avec les différentes technologies, veiller à la durabilité des informations, faciliter la maintenance, etc.
  • Le chargement et le transfert de données → réduire le recourt aux images, limiter les contenus, réduire le nombre de requêtes entre le site et des outils externes, ne pas chercher à retenir l’internaute à tout prix, etc.

Mais pas seulement. Contribuer à un numérique plus responsable, c’est aussi :

  • rendre les services inclusifs et accessibles au plus grand nombre → assurer la compatibilité avec des équipements anciens ou des réseaux dégradés, rendre les contenus accessibles aux personnes en situation de handicap, faciliter la prise en main des services, etc.
  • respecter les individus dans leur navigation : gérer correctement les données personnelles, récolter uniquement les statistiques nécessaires, etc.
  • soutenir le déploiement d’un internet libre et décentralisé : privilégier les logiciels libres, documenter les démarches, vulgariser et sensibiliser aux notions et impacts, etc.

La démarche appliquée au site

Le site d’ATLASS 2 s’inscrit dans la démarche de développement web responsable par la mise en oeuvre des bonnes pratiques recommandées par le référentiel RGAA sur la question de l’accessibilité et par Green IT pour la question de la sobriété numérique.

Voici quelques-unes des optimisations appliquées au site :

La structure du site est organisée autour d’un objectif de communication et de cibles précises :

  • Le cahier des charges du site a été dimensionné relativement à sa durée de vie et à sa cible restreinte
  • Un nombre de pages est limité et le parcours utilisateur facilité pour diminuer le nombre de pages visitées.

Le graphisme contribue à l’accessibilité et à la réduction du poids des pages :

  • Des noms de liens et des boutons explicites
  • Des couleurs aux contrastes suffisants pour garantir la simplicité de lecture

Une optimisation lors de la création technique du site :

  • Pas de services des GAFAM installés
  • Aucun tracking imposé à l’utilisateur
  • Optimisation du code HTML et CSS pour limiter le poids des fichiers (organisation du CSS, minification)
  • Gestion optimisée du cache des ressources
  • Limitation du nombre de requêtes et du nombre d’éléments structurant la page
  • Un webdesign responsive, c’est-à-dire adapté aux formats mobile
  • Un guide pour l’usage de l’administration comprenant des guides pour la compression des images et PDFs.
  • Des limites de poids pour l’ajout de ressources (PDF et images) pour éviter de surcharge une page. Ainsi que des informations visuelles dans l’administration du site pour informer sur le poids des ressources.
  • La structure du gestionnaire de contenu utilisé (Kirby CMS) sans base de données évite une complexité technique (performance, sécurité) qui n’est pas nécessaire pour ce site.
  • La phase de développement a limité l’usage d’outils complexes de plus en plus couramment utilisés pour la création de page web pour préférer des outils plus conviviaux pouvant fonctionner sur des ordinateurs anciens (terminal, ligne de commande, sans dépendances). La maintenance est faite aussi avec des outils basiques pour éviter une complexité inutile.
  • Le site est hébergé chez Infomaniak, un hébergeur vert proposant des services plus éthiques.

Cette démarche de conception permet d’obtenir un site globalement peu consommateur d’énergie et qui offre à tout le monde la possibilité d’y accéder, quel que soit le contexte d’usage, la qualité du réseau et l’outil de navigation utilisé !

Ce qui pourrait encore être optimisé :

  • Utilisation d’un hébergeur breton, Infomaniak est basé en Suisse à la frontière française.
  • Utiliser une seule typographie sur l’ensemble du site (l’utilisation d’une font responsive est à l’étude)
  • La conversion des illustrations au format SVG au lieu de PNG

Des outils pour tester les performances du site :

Données

Différents outils permettent de calculer les performances environnementales du site. En voici quelques-uns :

  • Website Carbon Calculator

    • Cette page web est plus propre que 94 % des pages Web testées
    • Seulement 0,06 g de CO2 est produit chaque fois qu'une personne visite cette page web (ce chiffre peut énormément varié en fonction du lieu de connexion).

  • Yellow Lab Tools (mesure la qualité technique du site)

    • 98/100 (note la plus basse, moyenne à 98,91)

  • Google page speed

    • 98/100 sur mobile
    • 100/100 sur ordinateur

  • Tools.pingdom.com

    • 94/100
    • 23 requêtes sans lazy loading
    • 12 avec lazy loading

D’un outil à l’autre, des écarts peuvent être constatés car leurs algorithmes respectifs ne prennent pas tous en compte les mêmes paramètres, et ne délivrent pas les mêmes indicateurs ! Si l’écart n’est jamais faramineux, la comparaison reste pertinente.

Par ailleurs, si ces chiffres donnent une tendance générale, ils sont à mettre en regard de points de références comme par exemple :

  • Les données obtenues sur votre précédent site, pour s’assurer que la refonte a bien permis l’optimisation !
  • Les moyennes mondiales : par exemple, la moyenne mondiale du poids d’une page web en 2022 est de 2000ko sur mobile et 2300ko sur desktop, le nombre de requête de 70, etc.

Les résultats

Données d'analyse

Ces résultats sont tirés d’une observation réalisée à partir des contenus publiés sur le site au mois de décembre 2022 et ne tiennent pas compte des éventuelles modifications apportées par les webmaster depuis et dans le futur.
Le poids moyen des pages est de 187.1 ko. La plus légère étant de 130 ko et la plus lourde de 320 ko (valeurs des données transférées). Elles comptent en moyenne 10 requêtes avec le lazy loading et 14.5 requêtes pour un chargement complet de la page. Les données ne prennent en compte le cache lors d’une navigation sur plusieurs pages.
La page d’accueil se charge en moyenne en 0.941 secondes (FCP), avec un Time to Interactive de 1 seconde sur ordinateur.

Lexique

  • Le FCT / First Contentful Paint mesure le temps entre l’arrivée du navigateur sur la page et le moment où il affiche les premiers éléments de contenus.
  • Time to Interactive correspond au temps nécessaire pour rendre actifs l'ensemble des éléments de la page : liens, bouton, etc.
  • Lazy loading est une méthode de développement qui permet de différer le chargement d’un élément (des images par exemple) jusqu’au moment où celui-ci apparaît dans la zone de visualisation de l’utilisateur.
  • Lors de la consultation d’une page web, le navigateur garde en mémoire les données. C’est ce que l’on appelle la mise en cache, qui se fait dans une zone de stockage temporaire (la mémoire cache).

Où aller chercher les données :

Rédigé par Les Raisonné·e·s et Derek Salmon (Pikselkraft)