EN

Réalités Parallèles

Ergonomie et conception de jeu vidéo

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:

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:

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:

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:

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é:

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é:

Ils reflètent aussi des objectifs en évolution:

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

En termes de webdesign, je favorise les principes de:

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

Posté par Cornelia le 2020-07-11. Dernière mise à jour le 2020-07-10

Articles sur des sujets connexes

Plug-ins Wordpress

Création de sites web, Wordpress,