Écologie de mon site

Bonjour

Je rencontre de nombreuses personnes qui souhaitent avoir le site le plus écologique possible.
Par exemple, on m’a parlé de cette maison d’édition qui explique sa démarche

De ce cadre, je souhaitais avoir vos retours d’expérience, vos pensées…

C’est sans doute naïf mais voici mes premiers éléments de réponses.

Sur la réflexion

  • l’écologie c’est un tout. Il y a le site, mais aussi l’hébergement, les services tiers, les mises à jour, le volume des backups …
    il faudrait chiffrer l’ensemble pour avoir les ordres de grandeur et quantifier ce qui est réellement efficace et ce qui tient du discours.

  • en terme de trafic un site semble petit par rapport à un streaming ou même l’utilisation du cloud

En terme techniques
La problématique est assez proche de la démarche de performance:
Avoir les pages les légères et les plus faciles à consulter.

L’utilisation de SPIP me semble pertinente

  • C’est un logiciel développé pour des petites structures, pour des hébergements légers.
  • Le core logiciel pèse 2 fois moins que wordpress par exemple. On n’a pas de plugins qui pèse 200 Mo. Mais bon en terme de complexité, d’appel aux ressources serveurs, requêtes SQL, je ne sais pas, …
  • Le logiciel utilise un cache. Les pages ne sont pas calculées en permanence. C’est moins gourmand.
  • Le logiciel utilise la compression des javascripts et feuilles de style. Donc on économise les appels réseaux
  • Le cycle des mises à jour est humain.On ne change pas de version chaque semaine. Quoi que récemment … (troll)

En terme de bonnes pratiques

  • limiter le nombre de plugins pour limiter la complexité
  • simplifier la mise en page
  • limiter les js
  • optimiser les CSS …éviter les frameworks, beaucoup d’éléments ne sont jamais utilisés.
  • ne pas utiliser de ressources tierces (fonts, trackers).
  • ne pas utiliser de CDNs

Quoi d’autre ?

En terme d’améliorations sur des sites existants

  • Le gros du volume d’un site est pris par les images

Il y aura peut être des optimisations à faire sur le balisage des images avec une utilisation du javascript
pour n’afficher que les images vraiment nécessaires et avoir le bon viewport (ce que font déjà certains plugins non ?)

Il est sans doute pertinent de généraliser l’usage du format .webp pour gagner de la bande passante
Je crois que les filtres images de SPIP le proposent maintenant.

  • Il y a des sites qui ne changent pas beaucoup dans le temps (typiquement des portfolios ou des sites vitrines)
    On a déjà le système de cache mais on pourrait créer un site statique ce qui économiserait l’appel à PHP et à SQL à la façon d’un Jekyll https://jekyllrb.com/

Lorsque le site évoluerait beaucoup, on passerait un coup de moulinette et on obtient un nouvel export.
Il me semble avoir vu un contrib sur ce sujet.

Je suis ouvert à toutes les remarques sur le sujet
Merci :slight_smile:

1 « J'aime »

Yo, vaste sujet, on a échangé à ce sujet avec @jeanmarie dernièrement, il pourra certainement partager nos réflexions ici.

Sur certains points :

À ce sujet je m’étais amusé à pondre un filtre image_tramer pour générer des images « à la low tech magazine » cf Suite à la discussion à propos du site LOW←TECH MAGAZINE et du format d'image qu'il utilise cf

Je l’avais fait pour le fun, sans en avoir vraiment besoin, puis un jour l’occasion s’est présentée pour que je l’utilise dans le cadre d’un projet pro sur ce site https://www.fababrest.net/

Pour ça, plus besoin de JS, l’attribut loading est natif maintenant cf Le chargement différé - Web Performance | MDN

Sur le sujet « en général » il y a quelques liens intéressants sur seenthis cf :

Un site Web parlant de basse technologie et qui est lui-même « basse-technologie ». Très peu de… (qui cause de low tech mag)

Éco-conception web - Comment coder un site écologique 🌱 – Alex so yes (qui cause d’éco-conception web)

Également Vers la sobriété numérique - François ZANINOTTO - Forum PHP 2021 avec un tl;dr de Rasta.

Ouais la conf de Zaninotto avait l’air bien sourcée, la priorité c’est surtout moins de kikou lol côté client, car c’est la machine client qui consomme vraiment le plus. Donc pas de trucs 3D et d’animation complexe en javascript, pas de vidéo si possible, etc. Du texte, de la déco en CSS, et quelques images bien senties.

De même l’ergonomie, l’UX, doit être pensée pour que les visiteurs passent le MOINS de temps sur ton site (alors que d’habitude on cherche à capter l’attention, le temps de cerveau) tout en trouvant les informations qu’illes cherchaient bien sûr. Car encore une fois c’est le temps passé sur la machine client qui est le plus polluant, pas spécialement au moment de l’utilisation, mais parce que plus on y reste, plus on use la machine et plus on va devoir en racheter souvent.


RastaPopoulos

D’autres références …

Livre Eco-conception web les 115 bonnes pratiques chez Eyrolles

Annuaires d’hébergeurs « verts »: The Green Web Foundation et leur annuaire (pas bcp de français).

Des outils de mesure (ça amuse un peu) mais c’est intéressant pour mesurer, car c’est souvent là le souci, comment mesurer:
Muchas Glacias
Website Carbon
GreenIT

En novembre 2019, j’avais tenté un article nommé « SPIP & Ecoresponsabilité »

Il m’avait semblé avoir vexé certaines personnes par cette question, mais maintenant c’est ouvert !
++

[SPIP Zone] SPIP & Eco-responsabilité donc a priori.

Super tous ces liens, ça fait de la lecture sur le sujet :slight_smile:

Un lien trouvé sur Seenthis : L’impact environnemental du volume de données, une arnaque intellectuelle | Signal (source + discussion)

De ce que j’en ai compris, il y a une question d’échelle entre l’utilisation d’un site (transfert de données, calcul…) et l’infrastructure qui l’héberge et principalement la production des serveurs.

Voir par ex Infomaniak : Écologie - Découvrez pourquoi nous polluons | Infomaniak
78% de leur production de CO² vient de l’achat/fabrication des serveurs, donc autant dire que la compression/concaténation des js/css sur un SPIP, c’est peanuts.

En gros, c’est bien d’éteindre la lumière quand on sort d’une pièce mais acheter son électricité chez Enercoop aura beaucoup plus d’impact :grin:

Au cas où

https://click.convertkit-mail2.com/qduqzxe78qb7hx3ge7tl/25h2hoh763re77a3/aHR0cHM6Ly93d3cud2Vic2l0ZWNhcmJvbi5jb20v

https://gomakethings.com/your-website-is-a-pollution-machine/

7 avr. 2022 09:21, erational via Discuter de SPIP <noreply@discuter.spip.net> a écrit :

erational
Avril 7

Bonjour

Je rencontre de nombreuses personnes qui souhaitent avoir le site le plus écologique possible.
Par exemple, on m’a parlé de cette maison d’édition qui explique sa démarche

Éditions Wildproject

La Maison – Éditions Wildproject

Comment réorganiser les sociétés humaines dans leurs relations au vivant? – La Maison

De ce cadre, je souhaitais avoir vos retours d’expérience, vos pensées…

C’est sans doute naïf mais voici mes premiers éléments de réponses.

Sur la réflexion

  • l’écologie c’est un tout. Il y a le site, mais aussi l’hébergement, les services tiers, les mises à jour, le volume des backups …
    il faudrait chiffrer l’ensemble pour avoir les ordres de grandeur et quantifier ce qui est réellement efficace et ce qui tient du discours.

  • en terme de trafic un site semble petit par rapport à un streaming ou même l’utilisation du cloud

En terme techniques
La problématique est assez proche de la démarche de performance:
Avoir les pages les légères et les plus faciles à consulter.

L’utilisation de SPIP me semble pertinente

  • C’est un logiciel développé pour des petites structures, pour des hébergements légers.
  • Le core logiciel pèse 2 fois moins que wordpress par exemple. On n’a pas de plugins qui pèse 200 Mo. Mais bon en terme de complexité, d’appel aux ressources serveurs, requêtes SQL, je ne sais pas, …
  • Le logiciel utilise un cache. Les pages ne sont pas calculées en permanence. C’est moins gourmand.
  • Le logiciel utilise la compression des javascripts et feuilles de style. Donc on économise les appels réseaux
  • Le cycle des mises à jour est humain.On ne change pas de version chaque semaine. Quoi que récemment … (troll)

En terme de bonnes pratiques

  • limiter le nombre de plugins pour limiter la complexité
  • simplifier la mise en page
  • limiter les js
  • optimiser les CSS …éviter les frameworks, beaucoup d’éléments ne sont jamais utilisés.
  • ne pas utiliser de ressources tierces (fonts, trackers).
  • ne pas utiliser de CDNs

Quoi d’autre ?

En terme d’améliorations sur des sites existants

  • Le gros du volume d’un site est pris par les images

Il y aura peut être des optimisations à faire sur le balisage des images avec une utilisation du javascript
pour n’afficher que les images vraiment nécessaires et avoir le bon viewport (ce que font déjà certains plugins non ?)

Il est sans doute pertinent de généraliser l’usage du format .webp pour gagner de la bande passante
Je crois que les filtres images de SPIP le proposent maintenant.

  • Il y a des sites qui ne changent pas beaucoup dans le temps (typiquement des portfolios ou des sites vitrines)
    On a déjà le système de cache mais on pourrait créer un site statique ce qui économiserait l’appel à PHP et à SQL à la façon d’un Jekyll https://jekyllrb.com/

Lorsque le site évoluerait beaucoup, on passerait un coup de moulinette et on obtient un nouvel export.
Il me semble avoir vu un contrib sur ce sujet.

Je suis ouvert à toutes les remarques sur le sujet
Merci :slight_smile:


Voir le sujet ou répondre à ce courriel pour répondre.

Pour vous désabonner de ces courriels, cliquez ici.

J’ai toujours été mal à l’aise avec la notion d’éco-conception pour le Web, c’est un sujet complexe qui frôle souvent le green-washing. En revanche il y’a un point sur lequel je suis assez sûr de moi : quand on fait de la webperf, on améliore l’éco-conception d’un site. Les deux sujets sont intrinsèquement liés.
Trois articles que j’aime beaucoup sur la Webperf :

Il y’a quelques pistes de réflexion supplémentaires chez Opaquast :
Check-list Qualité Web : la checklist de référence (filtre « éco-conception »).
Il y’a des angles intéressants où on ne parle pas de technique et on cherche à respecter l’utilisateur (donner les poids de fichiers, durées de vidéos, ne pas déclencher les vidéos automatiquement, aider l’utilisateur à s’y retrouver…).

1 « J'aime »

2 hébergeurs qui ont (semble t’il) une réflexion poussée sur leur empreinte environnementale :

Si vous en avez d’autres sous le coude…

Comme toi, je suis aussi toujours mal à l’aise, car le sujet est flou, et quand on voit que déjà tout et son contraire circule sur l’impact CO2 de garder ses mails dans sa boite mail (et notamment des estimations délirantes de l’ADEME), on part de loin.

Cependant, en effet je suis assez d’accord avec le fait que le premier ordre de grandeur est l’énergie dépensée par le navigateur de l’utilisateur, surtout si le site a beaucoup de visites. Mais même là il y a piège, car la webperf c’est en général « faire en sorte que le site s’affiche le plus vite possible chez l’utilisateur ».

Au début ça converge en effet (réduire le poids des fichiers, éviter les requetes inutiles), mais si on va un peu loin dans l’optimisation, alors ce n’est plus le même objectif et la poursuite d’un temps de réponse rapide peut être contreproductive du point de vue CO2 (placeholders avec images basse def en plus à charger, prefetch dns, preload de pages ou d’images etc.)

Donc c’est clairement une pente glissante et complexe.

Du point de vue serveur et hébergement, là aussi il y a plusieurs manières de faire ou pas de l’eco hebergement, de le dire ou pas etc. etc. On peut dire de manière certaine qu’utiliser SPIP est bien plus économes en ressources serveur que wordpress, et plus encore si on mutualise le code entre plusieurs sites (mise en cache PHP plus efficace, moins de code à évaluer).

Mais comme, en effet, au final il est très compliqué d’avoir une métrique fiable, même avec la meilleure volonté il est toujours compliqué de savoir si on va dans le bon sens ou non, si on arbitre bien sur les choix techniques…

3 « J'aime »