Conception de sites web durables

Sustainable Web Design : comment concevoir des sites web durables

Que signifie exactement "Sustainable Web Design" ? Comment sais-tu à quel point ton site est écologique ? Comment peux-tu rendre ton site web plus durable et quels en sont les avantages pour tes clients ? J'ai réuni les réponses à ces questions ainsi que quelques outils importants à cet effet dans cet article.

Faits sur le gouffre à électricité qu'est Internet

Ce que notre consommation numérique coûte en énergie

Selon Websitecarbon, Internet consomme 416,2 térawattheures (TWh) par an. C'est à peu près la consommation de l'Allemagne à elle seule. Si Internet était un pays, il aurait déjà aujourd'hui la sixième plus grande consommation d'électricité au monde.

Mais comment cela est-il possible ? Ne sommes-nous pas passés au numérique spécialement pour préserver notre environnement ? La réalité est ici quelque peu différente : Malheureusement, numérique ne signifie pas automatiquement "vert". Des fermes de serveurs aux centres de calcul en passant par les terminaux proprement dits, tout consomme de l'énergie pour fonctionner.

On estime qu'un site web moyen produit 1,76 gramme de CO₂. Avec 10.000 visiteurs par mois, on arrive à 211 kg de CO₂ par an - pour un seul site ! 

As-tu déjà réfléchi à la quantité de ressources nécessaires pour ton site web ? Certainement plus que tu ne le penses ! Chaque requête que ton site web envoie est reçue à un endroit quelconque, traitée, renvoyée et éventuellement enregistrée. C'est ainsi qu'un grand nombre de choses s'accumulent.

Nos sites web doivent devenir plus verts

1. hébergement WordPress et Sustainable Web Design

Entre-temps, de nombreux fournisseurs d'hébergement WordPress s'y mettent et misent sur les énergies renouvelables. Car il est clair que l'hébergement WordPress consomme de l'énergie et génère des émissions considérables de CO₂. Chez Raidboxes , la durabilité et la protection du climat ne sont pas des phrases vides, mais font partie intégrante de la culture d'entreprise.

Hébergement WordPress vert pour WordPress chez Raidboxes

Lorsque tu gères un site web ou une boutique en ligne, tu consommes beaucoup de ressources. Raidboxes s'y oppose - avec un hébergement WordPress climatiquement positif.

Tu peux facilement déterminer si ton site web est "vert" à l'aide de cet outil de The Green Web Foundation. Si le résultat est négatif, il est conseillé de changer de fournisseur d'hébergement WordPress. Tu peux consulter une comparaison ici

The Green Web Foundation
Raidboxes mise sur l'électricité verte durable et certifiée d'origine hydraulique.

2. design et conception de sites web durables

Un design adéquat peut éviter de consommer inutilement de l'énergie, par exemple si ton site web ne charge pas du tout les contenus inutiles et non souhaités. Comment peux-tu concilier design et durabilité et préserver les ressources ?

Mobile First

Avec Mobile First, tu optimises dès le départ ton contenu pour l'utilisation des smartphones. Les pages optimisées ne doivent pas charger de médias surdimensionnés sur les appareils mobiles. Elles sont programmées de manière à ce que les styles desktop ne doivent pas être écrasés, mais sont directement conçues pour le plus petit appareil.

Expérience utilisateur

Je t'ai déjà parlé précédemment des avantages d'une usability bien planifiée. Une expérience utilisateur qui fonctionne bien t'aide, ainsi que tes clients, à rendre ton site web plus durable. Tu minimises les détours involontaires de tes utilisateurs. En effet, dans l'idéal, seules les pages que l'utilisateur souhaite réellement visiter sont chargées. Si tu réduis les clics involontaires, tu envoies moins de Data Requests et tu utilises donc moins d'énergie.

Nombre de pages

Là encore, tu peux travailler sur ta durabilité dès la planification du site. En règle générale, moins il y a de pages à charger, moins il y a de demandes de données à envoyer. Outre le fait que ton site est ainsi plus facile à naviguer, il est également judicieux d'un point de vue écologique de regrouper le contenu et de réduire le nombre de pages.

Nous devrions utiliser les médias tels que les images, les animations et les vidéos de manière plus consciente et plus ciblée. Toutes les images, vidéos, icônes et animations que tu as prévues pour ton site apportent-elles vraiment une valeur ajoutée ? Ou peux-tu te passer de certaines d'entre elles ?

3. développement et conception de sites web durables

Vitesse de page

La vitesse de la page fait depuis longtemps partie du petit 1×1 du design web. Pourquoi est-il également bon pour la protection de l'environnement de veiller à une bonne performance ? Une page qui se charge plus rapidement est la conséquence de peu de données à charger !

Des sites web plus rapides, c'est mieux pour le climat

Il est donc d'autant plus important que tu optimises bien ton site web et ta boutique. C'est ta contribution personnelle à la protection du climat. Tu en apprendras plus à ce sujet dans notre e-book Page Speed & Performance.

Il peut y avoir différentes raisons pour lesquelles ton Pagespeed est lent. De nombreux outils te fournissent, en plus de l'analyse, des solutions pour améliorer les performances.

Pour cet article, j'ai examiné mon propre site sous toutes les coutures. Comme tu le verras dans mon auto-test, une analyse peut même être complètement opposée - en fonction de l'application utilisée pour le test. Tu devrais donc réfléchir aux objectifs que tu poursuis avec les tests.

google lighthouse
Ce résultat m'est fourni par l'outil populaire PageSpeed Insights.
gllighthouse
Google Lighthouse teste entre autres l'accessibilité de mon site.

Voici une comparaison entre l'outil pour développeurs Chrome Google Lighthouse et Google PageSpeed Insights. Ces deux outils sont des points de repère utiles pour l'optimisation on-page.

ecograder
Ecograder fournit de bonnes approches pour l'optimisation on-page.

Ecograder a été créé spécialement pour tester la durabilité des sites web. Personnellement, je trouve qu'Ecograder est le plus convivial. Les informations sont présentées de manière concise et compréhensible, les conseils pour améliorer la vitesse de la page sont utiles.

Le site Web Carbon Calculator est lui aussi principalement axé sur la durabilité. Je trouve positive la présentation imagée du résultat. Les comparaisons avec des unités de mesure moins abstraites permettent de se rendre un peu mieux compte de l'ampleur de son travail.

Bien que je trouve le service de Website Carbon généralement informatif, il me manque les détails personnalisés que je connais des outils Google et d'Ecograder. De plus, je trouve que la comparaison avec d'autres sites testés comme unité de mesure pour des projets et des raisonnements professionnels est insuffisante.

test de la page web
L'outil populaire Webpagetest va très en profondeur.

Webpagetest est un excellent outil, en particulier pour les développeurs, car il va très loin dans les détails. Tu peux tester ici à partir de différents paramètres. De "Simple Testing" à "Advanced Settings", qui te permettent d'exclure différents composants de ton site web, ou plus exactement de les ajouter par code snippet, et de fournir en même temps un rapport Google Lighthouse, jusqu'au test comparatif de deux sites web, "tout" est possible ici. Les résultats sont également détaillés techniquement dans les moindres détails. Ce site web sert donc au testing avancé, alors que Google et consorts font leur analyse de manière plus générale.

Images et autres médias

J'ai déjà évoqué précédemment la nécessité de repenser les contenus proposés. Il s'agit maintenant d'intégrer les images de manière optimale. 

Tinypng fonctionne à merveille pour comprimer des images - et ce, généralement sans perte de qualité visible. Tu obtiens le même résultat avec Photoshop et le paramètre "Exporter pour le web". Si tu as déjà intégré tes images dans un CMS, comme par exemple WordPress, tu peux encore optimiser la résolution après coup à l'aide d'un plugin, comme par exemple Smush.

Ceux qui ont beaucoup d'images ou d'icônes peuvent s'intéresser aux sprites CSS. Ils fonctionnent de la même manière que les sprites dans le développement de jeux informatiques. Ici, les images sont intégrées une fois par feuille de sprites. Ensuite, on définit par CSS sous quelles coordonnées se trouve chaque image. Tu trouveras plus d'informations sur ce thème ici.

Les feuilles de sprites sont plusieurs images/icônes qui sont réunies dans un seul fichier. Souvent, les concepteurs regroupent leurs images par thème. En fonction des coordonnées x et y correspondantes, les sheets sont divisés et intégrés en conséquence. Ainsi, un seul document est chargé et affiche différents composants visuels.

Lazy Load est une autre variante pour un chargement optimal des images. Les images sont chargées au moment où le visiteur en a besoin. Il existe aujourd'hui d'innombrables plugins (gratuits ou payants) pour WordPress.

WordPress

Bien sûr, nous nous demandons aussi quand les approches écologiques des entreprises sont authentiques : Existe-t-il vraiment un Internet durable ? Dans quelle mesure WordPress peut-il être réellement "vert" ? Dans l'article WordPress et la durabilité, tu trouveras un état actuel de la discussion au sein de la communauté WP germanophone.

WordPress durable : sois de la partie

Raidboxes s'engage depuis le début pour un WordPress durable. Voir entre autres nos conseils sur WordPress & la durabilité ainsi que sur les boutiques en ligne vertes. Tu veux prendre plus de responsabilités ? Alors lis notre article Green Hosting for WordPress.

Quelle contribution pouvons-nous apporter à un design web durable et efficace ? Quels sont les principaux leviers dans le quotidien du design pour économiser les ressources ? Peu de plugins et un thème léger sont ici les meilleurs conseils.

En moyenne, les sites WordPress atteignent environ 600 Ko. En choisissant le bon thème et en respectant l'approche expliquée précédemment, tu peux économiser 50 % ou plus. Tu trouveras ici une petite sélection de thèmes testés.

Si ton site web est déjà en place et que le changement de thème est exclu pour le moment, tu peux améliorer les performances de ton WordPress à l'aide de ces 10 leviers.

Comment convaincre les autres de participer

 En fait, les mots-clés suivants devraient déjà suffire à convaincre tes clients d'opter pour un design web durable : 

  • Amélioration de la convivialité et de l'expérience utilisateur,
  • des designs clairs et faciles à comprendre, 
  • de meilleurs classements SEO, 
  • un temps de chargement plus court et 
  • Pages optimisées pour les mobiles. 

Si tu as néanmoins besoin d'arguments supplémentaires, différents fonds de teint proposent également des "badges" que tu peux intégrer sur les pages de tes clients.

Si vous choisissez un fournisseur d'hébergement WordPress qui utilise de l'électricité verte durable et certifiée, vous pouvez inclure ce badge :

WebsiteCarbon, par exemple, propose également un badge que tu peux intégrer à tes pages afin de montrer que tes contenus sont construits de manière durable et écologique.

Consentement*
Ce champ sert à la validation et ne doit pas être modifié.

Conclusion sur le Sustainable Web Design

Au cours de mes recherches sur ce sujet, je suis tombée sur d'innombrables statistiques. Il en ressort que l'envoi d'un e-mail a le même impact sur notre environnement que l'utilisation d'un sac en plastique. Les livres sont donc souvent plus écologiques que les e-books. Acheter des albums de musique est plus respectueux de nos ressources que de les écouter en streaming. La liste est infinie. Mais surtout, ces statistiques ébranlent quelque peu notre conception générale selon laquelle numérique signifie aussi "vert".

Outre le fait qu'en tant que concepteurs et développeurs de sites web, nous avons bien entendu un rôle important à jouer dans la manière dont le web évoluera à l'avenir, nous pouvons également commencer par nous-mêmes et utiliser Internet de manière un peu plus réfléchie.

Découvre lesquelles de tes applications sont vertes et lesquelles doivent être nettoyées d'urgence : Avec l'outil ClickClean de Greenpeace, tu obtiens un aperçu intéressant de tes applications (préférées) et tu découvres à quel point elles sont écologiques.

Des contributions qui créent une plus grande prise de conscience pour un avenir plus vert : 

Il ne faut pas non plus oublier l'impact positif d'Internet sur notre environnement. Ainsi, l'utilisation de la vidéoconférence nous évite de devoir nous déplacer. Ces derniers mois, tout le monde a pu se rendre compte qu'Internet nous permet de ne pas utiliser les transports et de réduire ainsi les émissions de CO2. 

A cela s'ajoutent des bureaux qui peuvent être réduits grâce au home office. En outre, le réseau nous offre la possibilité de nous associer à d'autres : Nous pouvons par exemple utiliser des plateformes de covoiturage et réserver des "homestays" comme AirBnB, qui sont plus respectueux de l'environnement que les hôtels.

La diffusion d'informations sur la durabilité et la protection de l'environnement est également facilitée par Internet. L'offre et l'achat de produits éco-responsables (auxquels nous aurions peut-être moins accès autrement) font bien sûr partie des effets positifs du secteur numérique, pour n'en citer que quelques-uns.

Si tu souhaites approfondir le sujet, je te recommande le site web sustainablewebdesign.org comme point de départ. Les points les plus importants y sont expliqués dans des paragraphes clairs et des solutions techniques possibles pour les mettre en œuvre y sont proposées.

Sustainable Web Design : Quelles questions poses-tu à Sonja ?

N'hésite pas à utiliser la fonction commentaire. Tu veux être informé(e) des nouveaux articles sur le webdesign et le développement ? Alors suis-nous sur Twitter, Facebook ou via notre newsletter.

As-tu aimé cet article ?

Tes évaluations nous permettent d'améliorer encore plus notre contenu.

Laisse un commentaire

Ton adresse e-mail ne sera pas publiée.