Le web design écologique

1. Le web, gros consommateur d’énergie
2. Tester le bilan carbone de votre site
3. Optimisation du site
   1. Des quick wins pour commencer
   2. Migration vers un site statique
   3. SEO
   4. Analytics
4. Accessibilité
5. Optimisation des contenus
   1. Optimisation des images
6. Opportunités à apprendre
7. Des sites qui m’inspirent
8. Hébergement
9. Bilan des changements

Le web, gros consommateur d’énergie

On nous vend toujours du rêve avec la dématérialisation: on coupera moins d’arbres, c’est mieux pour la planète, et plus pratique et rapide pour tout le monde. Mais finalement, l’internet consomme désormais 10% de la production globale d’électricité : c’est trois fois plus que l’énergie renouvelable qu’on produit.

Avec un traffic qui double environ chaque année, et dans un monde où on reste toujours connecté, la consommation énergétique du web croit plus vite que notre capacité à en améliorer l’efficacité énergétique.

Infos sur Research Gate

Depuis 2011, le poids des sites web a plus que triplé sur ordinateur et s’est multiplié par plus de 10 sur mobile. Archive poids des pages

Tester le bilan carbone de votre site

Website Carbon

Avec un score ecograder de 49/100 (…peut mieux faire…), Realites-paralleles pollue mois que 70% des sites testés en émettant 0.49g de carbone par vue de la page d’accueil. Ca tombe bien, je viens de planter 3 arbres. Pas si mal, mais peut mieux faire si je prenais un hébergeur écolo.

Eesultat de ce site

Optimisation du site

La plupart de mes optimisations reviennent à ne plus faire un travail qui m’apporte peu mais que j’ai automatisé avec un outil dont le coût est porté par mes visiteurs sous forme de lenteur, collecte de données, etc.

Des quick wins pour commencer

En désactivant et désinstallant les plug-ins inutilisés, Realites-paralleles pollue mois que 79% des sites testés en émettant 0.32g de carbone par vue de la page d’accueil. C’est 9% et 17g de moins en seulement quelques clics! Avec un peu de remaniement, j’arrive à descendre à 0.23g.

Wordpress en particulier est inutilement lourd dans mon cas, pour plusieurs raisons:

• la plupart des plug-ins et thèmes que j’utilise viennent avec une palanquée de fonctionnalités que je n’utilise pas, mais qui sont là et utilisent de l’énergie pour rien.
• la plupart des plug-ins et thèmes viennent avec des scripts qui n’apportent rien à mes lecteurs ou à moi-même mais bénéficient principalement à leurs auteurs.
• éditer en ligne via le back office passe inutilement par des requêtes serveurs alors qu’éditer du texte localement est bien plus économe et pas plus compliqué.
• c’est sans compter la surcharge de bordel inutile que chaque plug-in ajoute aussi dans le back end.

Cela m’apprend aussi quelque chose: même inactifs, il semble donc que certains plugins rajoutent du caca au site.

Second problème: je trouve qu’éditer des contenus en ligne est du gaspillage d’énergie par rapport à écrire localement, puis publier le tout.

Alors que ce soit clair, je ne dis pas qu’il est impossible de faire un site “écolo” avec wordpress au contraire, mais j’utilise trop peu des fonctionnalités du CMS pour que ce soit indispensable dans mon cas - et plus on utilise de fonctionnalités avancées, plus le site devient gourmand en énergie. Mais pour donner un contre exemple, le thème sustywp est très léger pour le front-end.

Migration vers un site statique

J’opte pour moins de code, moins de problèmes, un site plus rapide et une meilleur expérience en migrant vers Jekyll.

C’est long car je me remet au code en même temps que j’apprend à l’optimiser, et je me pose beaucoup de questions sur ce qui est essentiel, utile, ou superflu. Mon but, c’est de coder le moins possible:

• du html simple sans div et classes superflues, qui suit au mieux les bonnes pratiques du web sémantique.
• du css minimaliste, mobile first, qui laisse largement le contrôle sur l’affichage à l’utilisateur tout en donnant une identité unique et cohérente au site.
• fonctionnel 100% sans javascript, avec une sur-couche minimaliste optionnelle pour ajouter du confort

J’abandonne ce faisant la plupart des fonctionnalités communautaires et la possibilité de poster des commentaires dynamiquement sur le site. De toute façon, ça servait plus aux robots qu’aux gens.

Dans mon code, j’utilise au maximum les forces de CSS. je choisis des polices disponibles pour l’utilisateur. Tout élément caché ne sera pas vu, alors autant le retirer. Si c’est important qu’il soit vu, alors tout élément présent sur la page a une place visible. Tout code inutilisé est supprimé.

Le travail est toujours en cours, mais pour donner une idée de la différences:

• la page d’accueil passe de 1.05Mo à 33ko.
• une page de contenu typique, pauvre en images passe de 900ko à 35ko.

SEO

Je suis passée par différentes phases d’optimisation du SEO pour ce site. Cela change tout le temps, c’est un peu comme faire la vaisselle:

• ça devient ingérable si on la fait pas au fur et à mesure.
• c’est un travail qui n’en finit jamais.
• on délègue ça à une machine (lave vaisselle, plug-in) et finalement, ce n’est pas magique, il faut quand même faire des ajustements manuels et surveiller que ça marche.

Bon le SEO, parait que c’est important pour que les gens trouvent votre site. Parait aussi que c’est fait de façon à faire remonter les contenus pertinents parmi la masse de contenus existants en utilisant des règles pour identifier la qualité d’un contenu. Le problème, c’est que cela crée une course à l’optimisation pour prouver que son site est plus pertinent qu’un autre. Les contenus qui remontent ne sont plus les bons contenus, mais les mieux optimisés. Les règles changent pour empêcher la triche. c’est un cycle sans fin.

Sans être experte en SEO, j’ai fait un peu d’effort pour optimiser mon site. Avec le recul, je me dis que ce temps passé à améliorer le site pour des machines aurait été mieux passé à produire des contenus de meilleure qualité.

Appelez-moi cynique ou optimiste, j’ai décidé:

• d’ignorer le SEO et de le laisser faire son travail. Cela signifie que j’ajoute des métadonnées minimales, mais je ne structurerai plus les contenus en fonction des recommandations changeantes.
• d’investir cette énergie dans des contenus de qualité pour des humains, en me préoccupant moins de l’expérience utilisateur des robots.

Analytics

J’ai décidé d’arrêter les analytics.

J’ai appris à utiliser les analytics, car c’était une fonction par défaut des premières plateformes de blog: on avait les vues, les liens entrant et mots clés de recherche pour s’inspirer et comprendre les visiteurs.

Avec le temps, les plateformes de blog ont changé et les analytics aussi. En passant par la case blogger, j’ai installé Google Analytics, que j’ai gardé pour la continuité des données. Il me restait alors comme infos utile des nombres de visiteurs, vues, taux de rebond, langue et OS/navigateurs.

Mais à la place des mots clés et liens entrant, j’eu l’option de voir les centres d’intérêts et sites visités par mes lecteurs - à condition bien sûr de collecter des données sur mon site également. Je ne l’ai jamais fait, car je ne vois pas l’intérêt pour moi: je ne compte pas utiliser de pubs ciblées.

Récemment, j’ai installé une piehole, et commencé mon sevrage de Google. En cherchant une alternative à Google Analytics, je me suis rendue compte que mon serveur captait déjà ces données pour afficher le site quand un visiteur en fait la requête.

Pourquoi envoyer des données sur mes visiteurs à un tiers alors que j’ai l’information moi-même? Le confort, me direz-vous, de ne pas avoir à faire le travail. Certes, mais à quel prix? Et surtout, ce prix, qui le paye pour moi? Est-ce juste? Est-ce important?

Ayant le privilège (le savoir-faire) de pouvoir obtenir des statistiques depuis des logs serveur, je le fais. Bye bye GA.

Accessibilité

Moins de code et moins de fioritures signifie aussi moins de barrières d’accessibilité. Effet secondaire heureux de ma migration: une page typique passe de 90% à 100% de compatibilité avec les liseuses et autres outils d’accessibilité.

Ca me motive pour faire l’effort de rendre les contenus et css accessibles pour rester à 100%, puisque c’est si bien parti!

Optimisation des contenus

Je dois faire du ménage dans mes contenus. La meilleure façon de réduire le poids d’un site, c’est d’avoir moins de contenus à charger.

Le texte n’est certainement pas le contenu le plus lourd, mais c’est le coeur du site: ce qui le rend intéressant, digeste, utile.

Mes contenus sont homogène. Ils reflètent mon style d’écriture à un moment donné:

• long formats peu structurés issus d’une naive volonté de partager des informations au gré de la pensée, inspiré des sites persos/blogs à l’ancienne - comme celui-ci à ses débuts.
• longs formats structurés inutilement verbeux et très jargonneux pendant mes années universitaires.
• articles plus courts écrit pour le web après mes débuts en agence comme ergonome web.

Ils reflètent aussi des objectifs en évolution:

• Séries d’articles courts pour optimiser le SEO, résultant en répéitions.
• Contenu parfois moins pertinent dans un effort de publier régulièrement, même quand je n’avais pas grand chose à dire d’intéressant.
• Fioritures, gifs et videos quand j’explorais des nouvelles technologies.
• Messages communautaires dont l’intérêt diminue rapidement avec le temps.
• Des contenus en Français, d’autres en Anglais, d’autres en Franglais.

Je compte donc faire le travail gargantuesque d’homogénéiser tout cela avec des critères bien clairs:

• 1 article par sujet, structuré, aussi long que nécessaire, avec un sommaire pour naviguer rapidement s’il y a un sommaire.
• Pas d’articles pour un message éphémère. Au pire, peut-être une section sur la page d’accueil, ou une page archivant toutes les “news”.
• Un style d’écriture naturel, relativement succinct.
• Des medias informatifs et optimisés qui aident à comprendre le contenu. Peu de médias purement décoratifs.
• Séparer les contenus par langue.
• Pas de dépendances largement inutilisées quand c’est géré par le navigateur

En termes de webdesign, je favorise les principes de:

• A DAO of web design
• unprogressive non-enhancement
• information scent + progressive disclosure

Optimisation des images

Quel format d’image utiliser? Comment optimiser la taille des images? Pourquoi charger toute une police pour en utiliser quelques caractères seulement? Le format d’image webp est super léger, mais pas encore supporté partout Utiliser des sprites CSS réduit le nombre de requêtes serveur

Opportunités à apprendre

Optimiser mon site est aussi l’occasion d’apprendre des choses qui jusque là se faisaient magiquement. Par exemple: Compression GZip du site sur le serveur et minification des ressources Rendu progressif des images

Des sites qui m’inspirent

Mon but cependant, est d’arriver à un bilan proche du site de test lui-même, tout en gardant un style assez visuel. Un site plus propre que 93% des sites testés en produisant seulement 0.06g de carbone par vue. https://www.websitecarbon.com/website/websitecarbon-com-3/

Low tech magazine, un site 100% solaire https://solar.lowtechmagazine.com/about.html

Un site de conférences https://dotyork.com

Un site d’agence https://www.wholegraindigital.com

Un site de bonne bouffe https://ecotable.fr/fr

Comme quoi on peut faire des sites efficaces et esthétiquement plaisants à la fois, avec un style qui leur est propre.

Hébergement

Changer d’hébergeur est un des moyens d’améliorer le bilan carbone de réalités-parallèles. J’ai donc regardé les recommandations faites via le site de test. Et quand le premier que j’ai ouvert s’est immédiatement mis à ramer, je me suis dit que ça n’avait pas l’air si écolo que ça. J’ai donc testé les sites des hébergeurs recommandés.

J’étais surprise de voir que la plupart des sites des hébergeurs verts “polluent” plus avec leur hébergement vert que mon site hébergé sur un serveur “sale”!

positive-internet.com pollue plus que 84% des sites testés en émettant 2.77g de carbone par vue de la page d’accueil. https://www.websitecarbon.com/website/positive-internet-com-2/

kualo.co.uk pollue plus que 81% des sites testés en émettant 2.40g de carbone par vue de la page d’accueil. https://www.websitecarbon.com/website/kualo-co-uk-3/

raidboxes.io pollue plus que 61% des sites testés en émettant 1.27g de carbone par vue de la page d’accueil. https://www.websitecarbon.com/website/raidboxes-io-2/

Parmi les hébergeurs listés par le site, leur datacenter est comparable, par contre, leur sites en disent long sur leur degré d’engagement en durabilité. Certains font des efforts sur toute la ligne, d’autres semblent utiliser l’écologie comme argument de vente sans vraiment y croire.

Pour ma part, je recommande donc les hébergeurs de la liste qui optimisent aussi leur site, et démontrent ainsi un réel engagement. Ils méritent d’être soutenus :

Wunderism pollue moins que 80% des sites testés en produisant 0.29g de carbone par vue de la page d’accueil. https://www.websitecarbon.com/website/wunderism-com-3/

Krystal uk pollue moins que 58% des sites testés en produisant 0.74g de carbonne par vue de la page d’accueil. https://www.websitecarbon.com/website/krystal-uk/

Autres sources et conseils https://www.smashingmagazine.com/2019/01/save-planet-improving-website-performance/

Bilan des changements

• La page d’accueil passe de 28 requêtes, 941.2kb de données chargées en 926ms à 6 requêtes pour 31.5Kb de données chargées en 27ms.
• Un article riche en images passe de 47 requêtes, pour 6.6mb téléchargés en 3.2s à14 requêtes pour 5.43mb de données chargées en 118ms.