S’engager à éco-concevoir un site web revient à agir pour en diminuer l’impact environnemental. Au fur et à mesure de notre conception, il est primordial de mesurer son site avec des outils. Ainsi, les concepteurs peuvent adapter leur design et développement. L’échange constant entre mesure et actions permet de diminuer continuellement la pollution du site.

Beaucoup d’outils existent pour mesurer les performances et l’impact de son site. Ici, sont présentés les outils utiles à l’éco-conception web ainsi que ceux qui mesurent l’impact environnemental d’un site et proposent des axes d’améliorations. Pour voir plus en détails comment éco-concevoir un site web, je vous invite à lire cet article.

Les outils d’éco-conception web : concevoir

Éco-concevoir un site web se traduit par intégrer l’aspect environnemental du site dans sa phase de design, de développement ainsi que dans son hébergement. Les avantages de ce type de réalisation web sont multiples, tant pour le propriétaire du site, ses utilisateurs et la planète. Voici donc plusieurs outils pouvant vous accompagner dans cette démarche.

Créer des contenus plus légers

L’un des aspects du design plus écologique est de compresser ses images et médias au maximum. Ainsi, réduire leur poids permettra de limiter l’énergie nécessaire à leur téléchargement lors de chaque nouvelle visite sur votre site. Plusieurs outils existent :

  • Pour les détenteurs de la suite Adobe, il y a la possibilité dans Photoshop d’exporter son fichier pour le web : Exportation > Enregistrer pour le web. Nous avons accès aux paramètres du type de fichier, de sa taille et qualité.
  • D’autres alternatives sont présentes en ligne comme Toolur. L’outil donne la possibilité de compresser une image jpeg ou png via des paramètres de qualité et de taille de l’image. D’autres outils existent comme Compress png mais ne permettent pas une personnalisation de la compression.

Diminuer le poids du site et augmenter sa rapidité

Beaucoup d’outils utilisés au quotidien par les webmasters sont utiles dans le cadre d’une éco-conception web. Les tests de rapidité de chargement et de poids des pages sont notamment efficaces pour comprendre et diminuer l’impact environnemental d’un site. Nous pouvons en effet les exploiter pour adapter notre conception afin de réduire l’impact et la consommation d’énergie des serveurs.

  • L’extension connue de Google, LightHouse, permet notamment de mesurer la performance, l’accessibilité et le SEO d’un site. Pour chaque catégorie, plusieurs tests sont effectués et des axes d’améliorations y sont détaillés. Prenons l’exemple d’un site où les images sont chargées à une taille trop grande pour être ensuite diminuées dans le navigateur. L’extension va détailler quelles images sont concernées, leur poids et celui potentiel après compression. Le détail et la compréhension des recommandations font de LightHouse un bon outil pour mesurer l’état du site à un stade A de la conception puis pour l’améliorer.
  • GTmetrix est une plateforme en ligne dont la mission est de mesurer le temps de chargement d’un site web. Dans une démarche d’éco-conception web, le temps de chargement est un indicateur clé démontrant l’efficacité d’actions menées dans la conception. Si vous avez tout fait pour que votre site ait un impact environnemental moindre, son temps de chargement doit être rapide. 

Ici, le score de chargement est défini par une note de A à F via deux types de calculs : PageSpeed et Yslow. Vous aurez accès à tous les détails des calculs et pourrez constater quels éléments prennent le plus de temps à charger sur votre page.

Les outils de mesure d’éco-conception web

Lors de la phase de conception et après celle-ci, les tests d’éco-conception web permettent de mesurer concrètement l’impact environnemental de votre site. Il est aussi intéressant de faire de l’A/B testing en testant l’impact de votre page avec ou sans telle fonctionnalité.

  • EcoIndex est la première version d’un outil dédié à l’éco-conception web, notamment réalisé par GreenIT.fr et Nxtweb. Cette plateforme en ligne propose un audit sur l’url que vous entrez. Vous trouverez le score X de la performance environnemental de votre site. Il y a aussi l’empreinte environnementale du site en CO2 et cL d’eau. 
  • L’extension GreenIT Analysis est la deuxième version de l’outil proposé par la communauté GreenIT. Disponible depuis l’onglet “Inspecter”, elle permet de lancer une analyse sur votre page en lui donner un score X et une empreinte environnementale en cL d’eau et en CO2. Il est également possible d’avoir une analyse de bonnes pratiques avec des recommandations d’améliorations précises.

Les deux premiers outils de GreenIT.fr sont disponibles en open-source sur Github. Actuellement, une troisième version de l’outil est en cours de conception.

Conclusion

Dans une éco-conception de site web, il y a toujours la possibilité de s’améliorer. C’est le cas pour le blog, où des retouches sont à faire. J’espère que ces quelques outils vous aideront dans votre démarche d’éco-conception et qu’ensemble, à force de petites améliorations, nous construirons un numérique plus responsable.

Bonnes pratiques, Green IT

A propos de l'auteur

Alizée Colin

Fondatrice & rédactrice

UX/UI designeuse, j’aspire à recentrer le web et ses outils dans un objectif de bien commun, tant bien environnemental que social. Nous sommes dans une ère où nous nous devons de réinventer notre manière de concevoir et de communiquer. Le numérique responsable en fait partie. Changeons les choses.

Voir tous les articles