Par Estelle
3 octobre 2024
8 minutes

L’éco-conception pour votre site internet : un mix de bon sens et de choix technologiques

Éco-conception de site web : le guide complet

On entend beaucoup parler d’éco-conception des sites internet depuis quelques années. Vous trouverez beaucoup d’articles sur le sujet pour vous inciter à réduire votre empreinte écologique sur le web avec des mesures qui sont pertinentes en théorie, mais parfois difficilement applicables en pratique.

Si l’on écoute la tendance actuelle, elle tend à dire que pour avoir un site « green », il doit être peu énergivore, avec des fonctionnalités et un design frugal. Sans aller dans l’extrême, il est possible avec du bon sens d’améliorer la qualité énergétique de votre site tout en conservant l’attractivité nécessaire à vos activités marketing. Nous allons passer en revue les différents points sur lequel vous pouvez mettre en place des actions concrètes, que vous soyez dans une phase de réflexion de refonte de votre site web ou que vous vouliez améliorer progressivement votre site web actuel.

Le choix de la technologie

La technologie sur laquelle va reposer votre site internet est importante, car déterminante pour la pérennité de votre site et votre stratégie de création ou de refonte. L’idéal est d’avoir un code propre sans code superflu. Alors quelle est la meilleure option : un CMS (WordPress, Webflow, Drupal, etc.) ou un développement spécifique ?

Bien évidemment, un développement spécifique permet de tendre vers un code plus propre et qui va à l’essentiel en collant à vos besoins. Mais attention à sa maintenabilité et ses capacités d’évolution qui seront plus complexes puisqu’il faudra faire appel à une développement à chaque nouveau besoin.

Pour faire votre choix, il est important de penser à la maintenabilité de votre site internet ainsi qu’à son accessibilité. Le choix d’un CMS est, dans la majorité des cas, la bonne option pour que votre équipe marketing puisse être autonome. Certains peuvent penser que ces solutions alourdissent le code du site internet, notamment avec des thèmes qui embarquent de multiples widgets, mais il est possible de faire le « ménage » dans le thème et ses widgets pour alléger le code source. Pour la refonte récente de notre propre site internet, nous avons fait le choix de continuer à utiliser notre CMS WordPress, et avons réussi à améliorer notre empreinte carbone en atteignant la note « A » sur Website Carbon.

Site web développé en WordPress léger avec une faible empreinte carbone

Le CMS n’est donc pas l’unique responsable des performances de votre site, il suffit d’avoir les bonnes clés pour optimiser son utilisation.

Le choix de l’hébergement

Un élément important à évaluer est le choix de l’hébergement de votre site internet. En effet, choisir un hébergement « eco-friendly » est un premier pas vers l’éco-conception. Mais comment évaluer leur efficacité énergétique ?

Connaissez-vous le « PUE » ? Le PUE est le « Power Usage Effectiveness » ou indicateur d’efficacité énergétique. Cet indicateur international a été mis au point en 2017 par le Green Grid. Il mesure le ratio entre l’énergie totale nécessaire au bon fonctionnement général du centre d’hébergement et l’énergie nécessaire au bon fonctionnement des serveurs uniquement.

Le ratio de 1 mesure une efficacité maximale mais à ce jour la moyenne mondiale se situe entre 1,2 et 1,4.

Pour exemple, en ce qui concerne notre site et les sites de nos clients, nous avons fait le choix du leader mondial de l’hébergement WordPress mutualisé Kinsta qui utilise les datacenters de Google Cloud et qui publie régulièrement le PUE de ses centres de données.

Hébergement mutualisé WordPress Kinsta et PUE Google Cloud

N’oubliez donc pas de penser au PUE pour évaluer votre hébergement actuel ou lorsque vous devrez faire le choix d’un nouvel hébergeur. Il est donc parfaitement possible d’utiliser un CMS du marché et de s’améliorer en travaillant sur d’autres éléments essentiels. Mais lesquels ?

Les bonnes pratiques et conseils de nos graphistes et webdesigners

Les plugins et extensions Wordpress :

  • Limiter l’utilisation des plugins et désactiver tous ceux qui ne sont pas ou plus utilisés.
  • Pour gagner des points, n’oubliez pas que certains plugins peuvent être utilisés de façon ponctuelle, il n’est pas forcément nécessaire de les laisser activés en continu. Ceci vous permettra d’éviter les scripts qui se lancent toutes les minutes, les recherches de mises à jour automatiques qui alourdissent les tâches de fond.

Les images et vidéos affichées sur le site :

  • Privilégier l’utilisation du format SVG pour les illustrations.
  • Optimiser, recadrer et vérifier la taille des images, inutile d’intégrer des images d’1 Mo comme nous le voyons régulièrement ! L’objectif pour une photo d’illustration classique est de ne pas dépasser 300 Ko. Les images pleine largeur ou utilisées en background peuvent exceptionnellement dépasser cette taille pour présenter une meilleure qualité, mais il faut essayer de ne pas dépasser 5/600 Ko malgré tout.
  • N’intégrer que les vidéos indispensables et privilégier le format webp et webm.

La police du site :

  • Héberger votre police au même endroit que le site pour ne pas lancer d’appel en dehors du site.
  • Lorsque vous importez votre police, vous pouvez peut-être supprimer des sous-ensembles dans votre dossier pour l’alléger (ex. : sous-ensemble de caractères étrangers).

La longueur et la composition des pages :

  • Avoir recours à des pages très longues avec des sections multiples peut être pénalisant car le code source Dom (Document – Object – Model) de votre page sera alourdi.
  • Si vous avez besoin de rédiger des pages longues, notamment pour l’optimisation SEO du site, attention aux sections et essayer, par exemple, de restreindre l’utilisation des images à des formats légers comme SVG.

La navigation :

  • Attention aux menus trop complexes (ex. : mega menu) qui permettent d’avoir une UX réussie sur desktop mais qui sont souvent lourds et qui nécessitent de gérer des versions alternatives allégées pour les affichages mobiles.
  • L’utilisation des sliders n’est plus recommandée aujourd’hui, s’ils permettent de faire varier les affichages sur la page d’accueil et de promouvoir plusieurs contenus phares, les slides 2 et suivantes sont peu vues en réalité alors qu’elles sont bien chargées. Ce dispositif alourdit le site et les versions mobiles sont toujours complexes à gérer au niveau de l’affichage.

Le cache du serveur web :

Le thème Wordpress :

  • Désactiver tous les widgets et composants dont vous n’avez pas besoin, quitte à réactiver au fur et mesure ceux dont vous pourriez avoir besoin par la suite.
  • Et bien sûr optimiser votre CSS.

Comment évaluer l’impact environnemental de votre site internet ?

Plusieurs sites en ligne permettent d’évaluer l’efficacité énergétique de votre site internet.

Tous n’utilisent pas les mêmes critères d’évaluation et les résultats ne seront donc pas identiques d’un site à l’autre. Vous pourrez malgré tout avoir une tendance globale et des premières pistes d’amélioration à étudier. Parmi les sites gratuits que vous pouvez consulter :

Enfin, quelques ressources pour vous aiguiller :

Notre webinar : « les étapes incontournables pour réussir la refonte de votre site web IT B2B »

Nous avons animé il y a peu un webinar sur ce sujet. Si vous souhaitez voir la vidéo du replay, il est accessible directement ici.

Des guides en libre accès à télécharger :

  • Le référentiel général d’écoconception de services numériques (RGESN) : télécharger ici
  • Le guide d’écoconception des services numérique de designers éthiques : télécharger ici
  • Le guide de référence de conception responsable de services numériques GR491 : consulter ici

Pour conclure, nous vous partageons notre vision du sujet : l’éco-conception de votre site web repose davantage sur du bon sens dans vos choix et vos actions, que dans le suivi de guides bien souvent complexes voire dogmatiques

Partager cet article sur
Estelle Lamarre J'accompagne les éditeurs de logiciel et ESN dans leurs stratégies de génération de leads au travers de mon expertise SEA, SMA et Marketing Automation.
Retour en haut