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 sont les avantages pour tes clients ? J'ai rassemblé les réponses à ces questions ainsi que quelques outils importants dans cet article.

Faits sur le dévoreur d'énergie qu'est Internet

Mais comment cela peut-il être vrai ? Ne sommes-nous pas passés au numérique exprès pour préserver 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 le terminal lui-même, tout consomme de l'énergie pour fonctionner.

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

As-tu déjà pensé à 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 à n'importe quel endroit, traitée, renvoyée et éventuellement enregistrée. Cela fait beaucoup de choses.

Nos sites web doivent devenir plus verts

1. hébergement de WordPress et conception de sites web durables

Aujourd'hui, de nombreux fournisseurs d'hébergement WordPress suivent le mouvement 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 de CO₂ considérables. 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.

Pour savoir si ton site web est "vert", tu peux facilement utiliser 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. 

2. design et conception de sites web durables

Un bon design peut éviter de consommer de l'énergie inutilement, 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 ton contenu dès le début pour l'utilisation des smartphones. Les pages optimisées ne doivent pas charger des médias surdimensionnés sur les appareils mobiles. Elles sont programmées de manière à ce que les styles de bureau n'aient pas à être écrasés, mais soient directement conçues pour le plus petit appareil.

Expérience utilisateur

Je t'ai déjà parlé précédemment des avantages d'une ergonomie bien planifiée. Une expérience utilisateur qui fonctionne bien t'aide, toi et 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 demandes de données et tu utilises donc moins d'énergie.

Taille de la page

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 logique 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, toutes les animations et les vidéos de manière plus consciente et plus ciblée. Est-ce que toutes les images, vidéos, icônes et animations que tu as prévues pour ton site apportent vraiment une valeur ajoutée ? Ou peux-tu te passer de certains d'entre eux ?

3. développement et conception de sites web durables

Vitesse de la page

La vitesse de page fait depuis longtemps partie du petit 1×1 du design web. Pourquoi il est é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 !

Il peut y avoir différentes raisons pour lesquelles ta vitesse de page est lente. En plus de l'analyse, de nombreux outils te fournissent également des solutions pour améliorer les performances.

Pour cet article, j'ai passé mon propre site au crible. Comme tu le verras dans mon auto-test, l'analyse peut même être complètement opposée, selon l'application utilisée pour le test. Tu dois donc réfléchir aux objectifs que tu poursuis avec les tests.

Voici en comparaison 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 a été créé spécialement pour tester la durabilité des sites web. Personnellement, je trouve Ecograder 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.

Sur le site web Carbon Calculator aussi, la durabilité est principalement testée. 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 plus compte de l'ampleur de son travail.

Je trouve que le service de Website Carbon est généralement informatif, mais il manque les détails personnalisés que je connais des outils de 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 arguments professionnels n'est pas suffisante.

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 prédéfinis. De "Simple Testing" à "Advanced Settings", qui te permettent d'exclure différents composants de ton site web, ou plus exactement de les ajouter via un 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 techniquement détaillés dans les moindres détails. Ce site est donc destiné à un test avancé, tandis que Google et autres font une analyse plus générale.

Images et autres médias

Repenser le contenu proposé, j'en ai déjà parlé précédemment. Il s'agit maintenant d'intégrer les images de manière optimale. 

Tinypng fonctionne à merveille pour compresser les images - et ce, généralement sans perte de qualité apparente. 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 WordPress par exemple, tu peux encore optimiser la résolution après coup avec un plugin comme Smush.

Si tu as beaucoup d'images ou d'icônes, tu peux te pencher sur les sprites CSS. Ils fonctionnent de la même manière que les sprites dans le développement de jeux vidéo. Ici, les images sont intégrées une fois par feuille de sprites. Ensuite, les coordonnées de l'image sont définies par CSS. Tu trouveras plus d'informations sur ce sujet 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 feuilles sont divisées et intégrées en conséquence. Ainsi, un seul document est chargé, qui présente différents composants visuels.

Lazy Load est une autre variante pour charger les images de manière optimale. Les images sont chargées au moment où le visiteur en a besoin. Il existe aujourd'hui d'innombrables plugins (gratuits et payants) pour WordPress.

WordPress

Bien sûr, nous aussi, nous nous demandons 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.

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

Les sites WordPress moyens atteignent environ 600 Ko. En choisissant le bon thème et en tenant compte de l'approche expliquée précédemment, tu peux économiser 50 pour cent 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 tes performances WordPress à l'aide de ces 10 vis de réglage.

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 l'utilisabilité et de l'expérience utilisateur,
• des designs clairs et faciles à comprendre 
• de meilleurs classements SEO, 
• temps de chargement plus court et 
• Pages optimisées pour les mobiles. 

Si tu as besoin d'arguments supplémentaires, plusieurs fondations proposent également des badges que tu peux intégrer sur les pages de tes clients.

Si tu choisis un fournisseur d'hébergement WordPress qui utilise de l'énergie verte durable et certifiée, tu peux intégrer ce badge :

• https://www.thegreenwebfoundation.org/ (par code)
• https:// wordpress.org /plugins/the-green-web-widget/ (par plugin)

Par exemple, WebsiteCarbon propose également un badge que tu peux intégrer à tes pages pour montrer que ton contenu est construit de manière durable et écologique.

Conclusion sur le design web durable

Pendant mes recherches sur ce sujet, je suis tombée sur d'innombrables statistiques. L'envoi d'un e-mail a le même impact sur l'environnement que l'utilisation d'un sac 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. Avant tout, ces statistiques ébranlent un peu notre compréhension générale actuelle selon laquelle numérique signifie aussi "vert".

Outre le fait qu'en tant que concepteurs et développeurs de sites Web, nous avons bien sûr un rôle important à jouer dans la manière dont le Web se développera à l'avenir, nous pouvons aussi commencer par nous-mêmes et utiliser Internet de manière un peu plus consciente.

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 : 

• Jack Lenox a ainsi construit un thème WordPress qui ne pèse que 7 Ko. 
• Sur son blog DeathToBullshit, Brad Frost nous encourage avec un twist humoristique à renoncer justement à cela. 
• Pickering donne des conseils de codage pour rendre ton site plus léger.

Il ne faut pas non plus oublier les effets positifs d'Internet sur notre environnement. L'utilisation de la vidéoconférence nous évite de nous déplacer. Ces derniers mois, tout le monde a dû se rendre compte que grâce à Internet, nous pouvons éviter d'utiliser les transports et ainsi réduire les émissions de CO2. 

De plus, les bureaux peuvent être réduits grâce au travail à domicile. De plus, le réseau nous offre la possibilité de nous associer à d'autres : Par exemple, nous pouvons utiliser des plateformes de partage de voitures et réserver des "homestays" comme AirBnB, qui sont plus respectueux de l'environnement que les hôtels.

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

Si tu souhaites approfondir le sujet, je te recommande le site 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.