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

Sonja Hoffmann Mis à jour le 21.10.2020
7 Min.
Conception de sites web durables
Dernière mise à jour le 21.10.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 ? Les réponses à ces questions et certains outils importants que j'ai rassemblés pour vous dans cet article.

Faits concernant l'Internet, qui est très gourmand en énergie

Ce que coûte notre consommation numérique d'énergie

Selon leur Site web sur le carbone 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 l'Internet était un pays, il aurait sixième plus grande consommation d'électricité au monde.

Mais comment cela peut-il être vrai ? Ne sommes-nous pas passés au numérique pour protéger notre environnement ? La réalité est un 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 utilise de l'énergie pour fonctionner.

Un site web moyen produit environ 1,76 grammes de CO2. Avec 10 000 visiteurs par mois, vous obtenez 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 ? Garanti plus que vous ne le pensez ! Chaque demande envoyée par votre site web est reçue, traitée, renvoyée et, si nécessaire, enregistrée quelque part. C'est ainsi que beaucoup de choses se rejoignent.

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 se concentrent sur les énergies renouvelables. Car une chose est claire : l'hébergement de sites web dévore l'énergie et provoque des émissions de CO2 considérables. La durabilité et la protection RAIDBOXES du climat ne sont pas seulement une phrase vide de sens, mais font partie intégrante de notre culture d'entreprise.

Hébergement vert pour WordPress à RAIDBOXES

Si vous gérez un site web ou une boutique en ligne, vous consommez beaucoup de ressources.RAIDBOXES l'hébergement de WordPress et WooCommerce.

Si votre site web est "vert", vous pouvez facilement le savoir grâce à l'aide cet outil de la Green Web Foundation. Si le résultat est négatif, il est conseillé de changer d'hébergeur. Vous pouvez faire 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 du tout de contenu inutile et indésirable. Comment combiner conception et durabilité et économiser les ressources ?

Mobile First

Avec Mobile First vous, optimisez votre contenu pour l'utilisation des smartphones dès le départ. Les sites optimisés n'ont pas à charger des médias surdimensionnés sur les appareils mobiles. Ils sont programmés de telle sorte que les styles de bureau ne doivent pas être écrasés, mais sont conçus directement pour le plus petit appareil.

l'expérience des utilisateurs

Sur les avantages d'une utilisation bien planifiée, je vous ai dit signalé précédemment. 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. Idéalement, seules les pages que l'utilisateur souhaite 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

Vous pouvez également y 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 que cela facilite la navigation sur votre site, il est également judicieux, d'un point de vue écologique, de résumer 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 spécifique. Toutes les images, vidéos, icônes et animations que vous avez prévues pour votre site apportent-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 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. Vous pouvez en savoir plus à ce sujet dans notre livre électronique Vitesse et performance des pages.

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

Pour cet article, j'ai mis mon propre site à l'épreuve. Comme vous pourrez le constater lors de mon autotest, une analyse peut même s'avérer totalement contraire - selon l'application testée. Vous devez donc réfléchir à ce que vous voulez obtenir avec les tests.

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

Voici, à titre de comparaison, le Chrome Developer Tool Le phare de Google et Google PageSpeed Insights. Ces deux outils sont des points de référence utiles pour l'optimisation de la page d'accueil.

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. L'information est concise et facile à comprendre, les conseils pour améliorer la vitesse de la page sont utiles.

En outre, avec le Calculateur de carbone sur le site web est principalement testé pour sa 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, tels que je les connais par les outils Google et Ecograder. En outre, je trouve la comparaison avec d'autres sites web testés comme mesure des projets professionnels et de l'argumentation insuffisante.

test des pages web
L'outil populaire Webpagetest va très loin.

En particulier pour les promoteurs, c'est Webpagetest 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 permettent d'exclure divers composants de votre site web, ou de les ajouter via des extraits de code, et en même temps d'inclure un rapport Google Lighthouse, jusqu'au test de comparaison de deux sites web, "tout" est possible ici. Même les résultats sont techniquement décomposés dans les moindres détails. Ce site web est donc utilisé pour des tests avancés, tandis que Google et Cie sont plus généraux dans leur analyse.

Images et autres médias

J'ai déjà mentionné précédemment de reconsidérer le contenu proposé. Il s'agit maintenant d'intégrer les images de manière optimale. 

Tinypng fonctionne très bien 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 "Exporter vers le Web". Si vous avez déjà intégré vos images dans un CMS, par exempleWordPress , vous pouvez optimiser la résolution par la suite avec un PluginSmush, par exemple.

Si vous avez beaucoup d'images ou d'icônes, vous pouvez utiliser des 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 est utilisé pour déterminer les coordonnées sous lesquelles chaque image est située. Vous pouvez trouver plus d'informations sur ce sujet ici.

Les feuilles Sprite sont des images/icônes multiples qui sont fusionnées dans un seul fichier. Souvent, les designers regroupent leurs images par thème. Sur la base des coordonnées x et y correspondantes, les feuilles sont divisées et intégrées en conséquence. De cette façon, un seul document est chargé, qui joue différents é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. Il existe également d'innombrables Pluginsversions (gratuites et payantes) pour WordPress ce type d'activités.

WordPress

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

Durabilité WordPress : Faites-en partie

RAIDBOXES s'engage dès le départ à durable WordPress un. Voir entre autres nos conseils sur WordPress & Durabilité ainsi qu'à Boutiques écologiques en ligne. Vous voulez prendre plus de responsabilités vous-même ? Lisez ensuite notre contribution Hébergement vert pour WordPress par.

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 ? Quelques-uns Plugins et un léger Theme sont les meilleurs conseils ici.

Les pages moyennes WordPress s'élèvent à environ 600 KB. En choisissant la bonne Themes approche et en tenant compte de l'approche expliquée précédemment, vous pouvez économiser 50 % ou plus. Vous trouverez une petite sélection de ceux qui ont été testésThemes ici.

Si votre site web est déjà en service et qu'il est impossible d'en changer unThemes , vous pouvez modifier votre WordPress Améliorez vos performances à l'aide de ces 10 vis de fixation.

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 sites web de vos clients.

Ce badge peut être intégré lors du choix d'un hébergeur qui utilise de l'électricité verte durable et certifiée :

Par exemple, également Site webCarbon un badge que vous pouvez intégrer dans vos pages pour montrer que votre contenu est 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 e-mail a le même effet sur notre environnement que l'utilisation d'un sac plastique. Les livres sont donc 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 générale antérieure selon laquelle numérique signifie aussi "vert".

Outre le fait qu'en tant que concepteurs et développeurs de sites web, nous jouons naturellement un rôle majeur dans la manière 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 vos applications qui sont vertes et lesquelles doivent être nettoyées d'urgence : Avec l'outil ClickClean de Greenpeace, vous obtenez un aperçu intéressant de vos applications (favorites) et vous apprenez à quel point elles sont précieuses sur le plan écologique.

Des contributions qui sensibilisent à un avenir plus vert : 

  • Ainsi, Jack Lenox a un WordPress -Theme ce qui ne représente que 7 KB de lumière. 
  • Brad Frost nous encourage sur son blog DeathToBullshit avec une touche d'humour pour se passer de cette chose. 
  • Heydon Pickering donne Conseils de codage comment affiner votre côté.

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 des déplacements. Ces derniers mois en particulier, tout le monde aurait dû se rendre compte de la manière dont Internet peut nous aider à éviter d'utiliser les transports et donc à réduire les émissions de CO2. 

En outre, il existe des bureaux dont la taille peut être réduite grâce au bureau à 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) est bien sûr aussi l'un 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 sustainablewebdesign.org comme point de départ. Les points les plus importants y sont expliqués dans des paragraphes clairement structurés et des solutions techniques possibles pour leur mise en œuvre y 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 nouvelles contributions à la conception et au développement du web ? Alors suivez-nous sur TwitterFacebook ou sur notre Newsletter.

Après avoir étudié la conception de jeux et la création littéraire dans la région verdoyante d'Auckland, il s'est spécialisé Sonja Hoffmanndans la conception de sites web et d'applications et leur développement. Elle se concentre sur la ludification et l'exploration de la motivation et de l'expérience des utilisateurs, associées à une passion et une curiosité pour les tendances technologiques.

Articles connexes

Commentaires sur cet article

Ecrire un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont marqués par * .