Conception de sites web durables : comment concevoir des sites web durables

Sonja Hoffmann Dernière mise à jour le 21.12.2020
7 Min.
Conception de sites web durables
Dernière mise à jour le 21.12.2020

Que signifie exactement "conception durable du Web" ? Comment savoir si votre site est écologique ? Comment pouvez-vous rendre votre ou vos sites web plus durables et quels sont les avantages pour vos clients ? J'ai compilé les réponses à ces questions et quelques outils importants dans ce billet.

Faits concernant l'Internet, grand consommateur de pouvoir

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

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

Mais comment cela peut-il être vrai ? Ne sommes-nous pas passés au numérique pour sauver notre environnement ? La réalité est quelque peu différente ici : Malheureusement, numérique ne signifie pas automatiquement "vert". Des fermes de serveurs aux centres de données, en passant par les appareils finaux, tout consomme de l'énergie pour fonctionner.

On estime qu'un site web moyen produit 1,76 grammes de CO2. Avec 10 000 visiteurs par mois, cela représente 211 kg de CO2 par an - pour une seule page ! 

Avez-vous déjà pensé au nombre de ressources nécessaires pour votre site web ? Plus que vous ne le pensez, c'est garanti ! Chaque demande envoyée par votre site web est reçue quelque part, traitée, renvoyée et stockée si nécessaire. Cela fait beaucoup.

Nos sites web doivent devenir plus écologiques - mais comment ?

1. l'hébergement

En attendant, de nombreux fournisseurs d'hébergement se joignent à eux et s'appuient sur les énergies renouvelables. Car une chose est claire : l'hébergement web consomme de l'énergie et provoque une quantité considérable d'émissions de CO2. Sur RAIDBOXES , la durabilité et la protection du climat ne sont pas de simples phrases creuses, mais font partie intégrante de la culture d'entreprise.

Green Hosting pour WordPress à l'adresse RAIDBOXES

Si vous gérez un site web ou une boutique en ligne, vous consommez beaucoup de ressources. RAIDBOXES contrecarre cela - avec un hébergement climatiquement positif pour WordPress et WooCommerce.

Vous pouvez facilement déterminer si votre site web est "vert" à l'aide de cet outil de la Green Web Foundation. Si le résultat est négatif, vous devez changer de fournisseur d'hébergement. Vous pouvez voir une comparaison ici

La Fondation du web vert
RAIDBOXES s'appuie sur une électricité durable et certifiée verte provenant de l'énergie hydraulique.

2. la conception

Une bonne conception peut éviter une consommation d'énergie inutile, par exemple si votre site web ne charge pas de contenu inutile et indésirable au départ. Comment combiner conception et durabilité et économiser les ressources ?

Mobile First

Sur Mobile First , vous optimisez dès le départ votre contenu pour l'utilisation des smartphones. Les pages optimisées n'ont pas à charger des médias surdimensionnés sur les appareils mobiles. Ils sont programmés de manière à ce que les styles de bureau n'aient pas à être écrasés, mais soient conçus directement pour le plus petit appareil.

l'expérience des utilisateurs

Je vous ai déjà parlé des avantages d'une utilisation bien planifiée. Une expérience utilisateur qui fonctionne bien vous aide, vous et vos clients, à rendre votre site web plus durable. Vous minimisez les détours indésirables de vos utilisateurs. Car idéalement, seules les pages que l'utilisateur veut réellement visiter sont chargées. Si vous réduisez les clics indésirables, vous envoyez moins de demandes de données et vous consommez donc moins d'énergie.

Nombre de pages

Ici aussi, vous pouvez travailler sur votre durabilité tout en planifiant le site web. En général, moins il y a de pages à charger, moins il y a de demandes de données à envoyer. Outre le fait de faciliter la navigation sur votre site, il est également judicieux, d'un point de vue écologique, de combiner les contenus et de réduire le nombre de pages.

Nous devrions utiliser les médias comme 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 vous avez prévues pour votre site ont-elles vraiment une valeur ajoutée ? Ou pouvez-vous vous passer de certains d'entre eux ?

3. le développement

Pagespeed

La vitesse des pages a longtemps fait partie du petit 1×1 de la conception web. Pourquoi est-il également bon pour l'environnement de prêter attention à une bonne performance ? Une page qui se charge plus vite est la conséquence du peu de données à charger !

Des sites web plus rapides - meilleurs pour le climat

Il est donc d'autant plus important que vous optimisiez bien votre site web et votre boutique. Il s'agit de votre contribution personnelle à la protection du climat. Pour en savoir plus, consultez notre pagee-book Vitesse et performance.

La lenteur de votre vitesse de page peut avoir plusieurs raisons. De nombreux outils vous fournissent non seulement l'analyse, mais aussi des solutions pour une meilleure performance.

Pour cet article, j'ai mis mon propre site à l'épreuve. Comme vous le verrez dans mon autotest, une analyse peut même s'avérer complètement opposée - selon l'application testée. Vous devez donc réfléchir aux objectifs que vous vous fixez avec les tests.

google lighthouse
Ce résultat me donne l'outil populaire PageSpeed Insights.
gllighthouse
Google Lighthouse teste également mon site pour en vérifier l'accessibilité, entre autres choses.

Voici, à titre de comparaison, le Chrome Developer Tool Google Lighthouse et Google PageSpeed Insights. Ces deux outils sont des points de repère utiles pour l'optimisation des pages.

ecograder
Ecograder fournit de bonnes approches pour l'optimisation des pages.

Ecograder a été créé spécifiquement 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 lecture des pages sont utiles.

Le calculateur de carbone du site web teste aussi principalement la durabilité. Je trouve que la représentation picturale du résultat est positive. Les comparaisons avec des unités de mesure moins abstraites permettent de prendre plus facilement conscience de l'étendue de son travail.

Je trouve le service de Website Carbon généralement instructif, mais les détails personnalisés me manquent, car je les connais grâce aux outils de Google et d'Ecograder. En outre, je trouve que la comparaison avec d'autres sites web testés comme mesure des projets professionnels et de l'argumentation est insuffisante.

webpagetest
L'outil populaire Webpagetest est très complet.

Surtout pour les développeurs, Webpagetest est un excellent outil car il va dans les moindres détails. Vous pouvez tester ici à partir de différents préréglages. Du "Test simple" aux "Paramètres avancés", qui vous donnent la possibilité d'exclure divers composants de votre site web, ou de les ajouter via des extraits de code, et de fournir en même temps un rapport Google Lighthouse, jusqu'au test de comparaison de deux sites web, "tout" est possible ici. Les résultats sont également décomposés techniquement dans les moindres détails. Ce site web est donc utilisé pour des tests avancés, tandis que Google et Cie rendent leur analyse un peu plus générale.

Images et autres médias

Pour repenser le contenu proposé, j'ai déjà abordé la question auparavant. Il s'agit maintenant d'intégrer les images de façon optimale. 

Letinypng fonctionne à merveille pour la compression des images - et généralement sans perte de qualité notable. Vous pouvez obtenir le même résultat avec Photoshop et le paramètre "Export for Web". Si vous avez déjà intégré vos images dans un CMS, tel que WordPress , vous pouvez encore optimiser la résolution par la suite avec un Plugin, tel que Smush.

Si vous avez beaucoup d'images ou d'icônes, vous pouvez regarder dans les sprites CSS. Ils fonctionnent comme des sprites dans le développement de jeux vidéo. Ici, les images sont intégrées une fois par feuille de sprite. Ensuite, le CSS détermine sous quelles coordonnées se trouve l'image. Pour en savoir plus sur ce sujet, cliquez ici.

Les feuilles Sprite sont des images/icônes multiples qui sont fusionnées dans un seul fichier. Les designers regroupent souvent leurs images par thèmes. Sur la base des coordonnées x et y associées, les feuilles sont divisées et incluses en conséquence. De cette façon, un seul document est chargé qui affiche divers éléments visuels.

Lazy Load est une autre variante pour un chargement optimal des images. Ici, les images sont chargées lorsque le visiteur en a besoin. Pour WordPress il y a maintenant aussi d'innombrables (gratuits et payants) Plugins.

WordPress

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

Durable WordPress : Faites-en partie

RAIDBOXES s'est engagé dès le début en faveur d'un WordPress durable. Voir, entre autres, nos conseils sur WordPress & la durabilité et sur les boutiques écologiques en ligne. Vous voulez prendre plus de responsabilités vous-même ? Lisez ensuite notre article Green Hosting pour WordPress .

Quelle contribution pouvons-nous apporter à une conception web durable et efficace ? Quels sont les leviers les plus importants dans la conception quotidienne pour économiser les ressources ? Peu de Plugins et un Theme léger sont les meilleurs conseils ici.

La taille moyenne des sites WordPress est d'environ 600 KB. En choisissant le bon Themes et en tenant compte de l'approche expliquée précédemment, vous pouvez économiser 50 % ou plus. Vous trouverez ici une petite sélection de sites testés Themes .

Si votre site web est déjà opérationnel et qu'il est hors de question de passer à Themes pour l'instant, vous pouvez améliorer les performances deWordPress à l'aide de ces 10 mises au point.

Comment convaincre vos clients de participer

 En fait, les mots-clés suivants devraient déjà suffire à convaincre vos clients de la conception durable de sites web : 

  • Amélioration de la convivialité et de l'expérience de l'utilisateur,
  • des dessins clairs et faciles à comprendre, 
  • un meilleur classement SEO, 
  • un temps de chargement plus court et 
  • Pages optimisées pour les téléphones portables. 

Si vous avez encore besoin d'arguments supplémentaires, diverses fondations proposent également des "badges", que vous pouvez intégrer sur les pages de vos clients.

Ce badge peut être inclus dans le choix d'un hébergeur qui utilise de l'énergie verte durable et certifiée :

Par exemple, WebsiteCarbon propose également un badge que vous pouvez intégrer dans vos pages pour montrer que votre contenu est construit de manière durable et écologique.

Conclusion, approches plus extrêmes et matériel de lecture

Au cours de mes recherches sur ce sujet, je suis tombé sur d'innombrables statistiques. L'envoi d'un courriel a le même impact sur notre environnement que l'utilisation d'un sac en plastique. Les livres sont souvent plus respectueux de l'environnement que les livres électroniques. Acheter des albums de musique est plus avantageux pour nos ressources que de les diffuser en continu. La liste est infinie. Surtout, ces statistiques ébranlent notre compréhension commune du fait que numérique signifie aussi "vert".

Outre le fait qu'en tant que concepteurs et développeurs de sites web, nous jouons évidemment un grand rôle dans la façon dont le web se développera à l'avenir, nous pouvons également commencer par nous-mêmes et utiliser l'internet un peu plus consciemment.

Découvrez quelles sont les applications qui sont vertes et celles qui ont besoin d'un nettoyage urgent : Avec l'outil ClickClean de Greenpeace, vous pouvez obtenir un aperçu intéressant de vos applications (favorites) et découvrir leur valeur écologique.

Des contributions qui sensibilisent à un avenir plus vert : 

  • Jack Lenox a donc construit un WordPress -Theme qui ne fait que 7 KB de lumière. 
  • Brad Frost, sur son blog DeathToBullshit, nous encourage à nous en passer avec une touche d'humour. 
  • Heydon Pickering donne des conseils de codage pour alléger votre site.

Nous ne devons pas non plus oublier les effets positifs de l'internet sur notre environnement. Par exemple, l'utilisation de la vidéoconférence nous évite de nous déplacer. Au cours des derniers mois, tout le monde aurait dû prendre conscience de la manière dont, grâce à Internet, nous pouvons éviter d'utiliser les moyens de transport et ainsi réduire les émissions de CO2. 

En outre, nous disposons d'espaces de bureaux qui peuvent être réduits grâce aux bureaux à domicile. En outre, le réseau nous offre la possibilité de nous associer à d'autres : Par exemple, nous pouvons utiliser des plateformes de covoiturage et réserver des "séjours chez l'habitant" comme AirBnB, qui sont plus écologiques que les hôtels.

L'internet facilite également la diffusion d'informations sur la durabilité et la protection de l'environnement. L'offre et l'achat de produits écologiques (auxquels nous aurions peut-être moins accès autrement) font bien sûr aussi partie des effets positifs de l'industrie numérique - pour n'en citer que quelques-uns.

Si vous souhaitez approfondir le sujet, je vous recommande le site web sustainablewebdesign.org comme point de départ. Dans des paragraphes clairs, les points les plus importants sont expliqués ici et des solutions techniques possibles pour leur mise en œuvre sont proposées.

Conception de sites web durables : Quelles questions avez-vous pour Sonja ?

N'hésitez pas à utiliser la fonction de commentaire. Vous voulez être informé des nouveaux articles sur la conception et le développement de sites web ? Alors suivez-nous sur Twitter, Facebook ou via notre newsletter.

Après avoir étudié la conception de jeux et la création littéraire dans la ville verdoyante d'Auckland, Sonja Hoffmann s'est spécialisée dans la conception et le développement de sites web et d'applications. Elle se concentre sur la ludification et les causes derrière la motivation et l'expérience des utilisateur·rice·s, et y combine une passion et une curiosité pour les tendances technologiques.

Articles connexes

Commentaires sur cet article

Laisse un commentaire

Ton adresse électronique ne sera pas publiée. Les champs obligatoires sont marqués d'un *.