Numérique responsable

Un site internet
éco-conçu

Le site internet de l’Asder a été repensé dans une logique d’éco-conception en accord avec les missions et les valeurs portées par notre structure. Nous avons choisi de prioriser la sobriété numérique au travers du design, de la technique, des contenus et de l’hébergement. Retour sur cette création qui offre beaucoup d’informations, mais consomme peu de ressources.

Qu’est–ce que l’éco-conception numérique ?

Nous sommes conscients que l’impact sur l’environnement de notre site web n’est pas neutre. Il était donc indispensable d’atténuer au maximum l’empreinte de ce service numérique. Pour cela, il fallait limiter le poids de chaque page web. L’objectif ? Réduire la consommation d’énergie liée à leur chargement, tout en offrant une expérience utilisateur engageante. Pour réaliser ce travail, nous avons confié l’éco-conception de notre site Internet à l’agence web Here we com.

Webdesign et fonctionnalités durables 

Notre site internet est un véritable outil au service de nos visiteurs, qui doivent trouver rapidement et facilement l’information souhaitée. Nous avons voulu proposer une expérience utilisateur fluide, intuitive et agréable en respectant une logique de sobriété en matière de fonctionnalités et de design. Chaque choix a donc été fait en mesurant la valeur ajoutée au vu de l’impact sur l’environnement. 

Très concrètement, voici quelques exemples de partis pris :

  • Une page d’accueil sans slider photos et sans vidéo
  • Pas de photos miniatures illustrant les listes d’actualités et d’événements
  • Une utilisation limitée et toujours optimisée des visuels, vidéos, animations et ressources énergivores
  • Une seule police de caractères
  • Des aplats de couleurs et du flat design
  • Pas d’inclusion des flux de réseaux sociaux (Facebook, Instagram, LinkedIn)
  • Pas de carte interactive pour présenter l’adresse

L’enjeu de la technique

Notre site web s’appuie sur le CMS open-source (système de gestion de contenu) WordPress. Cela nous permet d’avoir la main sur le backoffice et de disposer d’un outil facile à utiliser au quotidien, flexible et peu consommateur d’énergie.
Les développeurs de l’agence web Here we com ont appliqué les bonnes pratiques afin d’optimiser leur code et améliorer les performances du site. Ils ont notamment veillé à :

Proposer un chargement différé

Utiliser le lazy loading pour les images restantes et ne charger les vidéos que si le visiteur interagit avec le bouton lecture. Cela permet de ne charger que les éléments nécessaires à l’affichage immédiat, réduisant ainsi l’empreinte énergétique.

Optimiser les images

Afficher la bonne image suivant le support utilisé par le visiteur lors de sa visite du site.

Compresser et minimiser

Les fichiers HTML, CSS, JavaScript, permettant des temps de chargement plus courts.

Faire simple

Éviter d’utiliser de lourdes librairies d’animations Javascript qui ralentiraient le chargement.

Réduire les requêtes HTTP

Regrouper les fichiers CSS, JavaScript, et utiliser des svg pour tout ce qui est iconographique.

Utiliser des systèmes de cache

Afin de réduire les appels à des ressources qui ont déjà pu être chargées durant la navigation dans le site.

Fusionner certains appels de ressources

Afin de limiter le nombre de requêtes.

Optimiser et nettoyer

Désactiver et/ou supprimer tout ce qui pouvait être inutile au bon fonctionnement du site.

Mobile first

Proposer un site mobile first et responsive.

Optimisation des contenus

Nous avions conscience de la densité d’informations à traiter, nous avons donc pris soin de les optimiser en réalisant différentes opérations :

  • Création de niveaux de lecture et de profondeur
    Il s’agissait sans doute de l’enjeux majeur de cette refonte ! Pour permettre une navigation fluide et un accès clair et rapide à l’information, l’agence web a joué sur ces niveaux de lecture et a imaginé différents niveaux de profondeur “pour aller plus loin”, “découvrez aussi”, etc. Ils introduisent des contenus complémentaires et donnent accès aux détails sans surcharger les pages. Ils ciblent aussi des usages plus précis.
  • Compression et optimisation des images
  • Suppression des pages et médias obsolètes

Un impact positif sur la visibilité et le référencement

Les sites web éco-conçus, souvent plus légers et rapides, répondent de mieux en mieux aux critères de référencement des moteurs de recherche. En adoptant cette approche, notre site Internet devrait bénéficier d’une meilleure visibilité en ligne, contribuant à faire connaître nos actions de manière plus efficace.

En optimisant les ressources web (design, contenus, code, médias, hébergement, etc.), nous avons allégé le poids des pages, ce qui se traduit par des temps de chargement ultra-rapides et une consommation d’énergie réduite. Pour analyser les performances du site nous avons utilisé PageSpeed.

Page Score desktop
avant refonte		 Score desktop
après refonte		 Score mobile
avant refonte		 Score mobile
après refonte
Accueil 74 (C) 99 (A) 33 (E) 78(B)
Service local de l’énergie 77 (C) 99 (A) 35 (E) 85(B)
École du bâtiment durable 72 (C) 100 (A) 55 (D) 88(B)

Afin d’évaluer les impacts environnementaux des pages web les plus visitées, nous avons utilisé l’outil de mesure GreenIT Analysis.

Page EcoIndex Eau (cl) GES (gCO2e) Nombre de requêtes Taille de page (Ko)
Accueil 35.14 3.45 2.30 106 4203 (8139)
Service local de l’énergie 54.09 2.88 1.92 69 2747 (5542)
École du bâtiment durable 53.00 2.91 1.94 68 2597 (5018)

Une nouvelle estimation de l’empreinte environnementale du site après sa refonte nous donne le résultat suivant :

Page EcoIndex Eau (cl) GES (gCO2e) Nombre de requêtes Taille de page (Ko)
Accueil 54.53 2.86 1.91 14 701 (1603)
Service local de l’énergie 55.14 2.85 1.90 17 803 (1674)
École du bâtiment durable 56.89 2.79 1.86 15 675 (1542)

En conclusion : une refonte qui a du sens

La refonte du site de l’Asder n’est pas seulement une modernisation, c’est une affirmation de nos valeurs, traduites dans un outil numérique à la fois performant et le plus respectueux possible de notre planète !
Pour en savoir plus, vous pouvez consulter la page « éco-conception » de l’agence Here we com.