Bien qu’il y ait de quoi occuper la communauté Web cette semaine sous la forme de l’implosion de Twitter, quelque chose de bien plus important se passe également en ce moment : le sommet sur le climat COP27, qui se déroule à Charm el-Cheikh, où les dirigeants mondiaux se réunissent pour conclure des accords pour (espérons-le) limiter le changement climatique catastrophique.
Il y a beaucoup de débats cette année sur l’écoblanchiment des entreprises, la justice climatique et l’éthique de la tenue du sommet dans un pays où le gouvernement est connu pour ses violations des droits de l’homme et sa répression sévère des manifestations pacifiques, de nombreux militants boycottant complètement le sommet. Mais quels que soient les résultats, nous, les développeurs Web, devons être conscients de l’impact écologique de notre profession et commencer à examiner notre travail sous l’angle de la durabilité. Il semble donc opportun de partager quelques ressources qui ont traversé mon radar cette semaine.
Examen de la durabilité de la page d’accueil de la COP27
L’année dernière, Fershad a analysé l’impact climatique de la page d’accueil de la COP26. Cette année, il a jeté un coup d’œil au site COP27, mais avec une inclinaison différente – et a présenté quelques outils pour aider à mesurer l’empreinte carbone d’un site Web. Fershad contient de nombreux conseils utiles pour rendre tout site Web plus durable.
Lire l’analyse de Fershad →
Numérique = Physique
Cet article réfléchi de Jon Friedman et Rachel Romano de l’équipe Microsoft Design fait un excellent travail pour mettre en évidence les impacts physiques de nos modes de vie numériques (dont nous, dans les pays riches, sommes largement à l’abri), et souligne vraiment l’importance de l’intersectionnalité. Les principes de conception écologique de Microsoft (référencés dans l’article) valent également la peine d’être lus.
Lire l’article →
Rendre WordPress durable
Les sites WordPress représentent environ 40 % du Web, selon certaines estimations. Les membres de la communauté WordPress ont récemment lancé une chaîne Slack axée sur la durabilité. Hannah Smith explique comment la durabilité signifie bien plus que des gains de performances Web et invite les membres de la communauté à contribuer à la discussion.
Lisez l’article d’Hannah et impliquez-vous →
Transfert de police incrémentiel
Les polices Web peuvent être responsables d’une grande quantité de transfert de données sur un site Web. J’ai appris cette semaine (via le groupe ClimateAction.Tech Slack) que certaines fonderies de polices n’autorisent pas les sous-ensembles, ce qui est une étape que nous, en tant que développeurs, pouvons prendre pour minimiser la taille du fichier de police. (Voici une liste des fonderies et des détails indiquant si elles autorisent les sous-ensembles, si vous avez besoin d’une référence rapide.)
Au cours de la discussion qui a suivi, j’ai également découvert la spécification Incremental Font Transfer. La spécification propose une nouvelle méthode de chargement des polices de manière incrémentielle, où des parties de la police sont chargées via plusieurs requêtes au fur et à mesure des besoins. La spécification est actuellement en projet de travail, mais ce sera formidable de la voir évoluer vers quelque chose que nous pourrons utiliser pour améliorer les performances et l’empreinte carbone de nos sites Web.
Lire la spécification →
Astro
J’ai finalement commencé à jouer avec Astro, le nouveau générateur de site statique du quartier, et je dois dire que je suis plutôt époustouflé. C’est un outil que je surveille depuis un certain temps, mais ce n’est que récemment qu’il a mûri à un niveau où il vaut (pour moi) l’investissement en temps.
En plus d’être ultra-rapide, léger et sans JS par défaut, il est également très simple à utiliser, avec pratiquement aucune configuration requise. J’ai pu créer un site simple et opérationnel en 20 minutes. Dans l’ensemble, cela semble être un excellent outil pour créer des sites Web plus durables. Je vais certainement l’utiliser pour certains projets parallèles dans un avenir proche.
Explorer Astro →
Désencombrement numérique à grains entiers
Ce site agréablement conçu par Wholegrain Digital offre un tas de conseils pour désencombrer votre vie numérique et réduire votre empreinte carbone dans le processus.
Visiter le site →
Penser au HTML et au CSS pour sauvegarder les données
Comme Šime a soulignétandis que le <picture> nous permet de diffuser l’image la plus appropriée en fonction de la taille ou de la résolution de l’appareil, nous n’avons aucun moyen de dire au navigateur de diffuser une image différente en fonction de la bande passante ou des préférences de données d’un utilisateur. Cela m’a fait penser à la prefers-reduced-data requête médiatique.
Il existe des tonnes de raisons pour lesquelles un utilisateur peut souhaiter définir les préférences de son appareil en mode d’économie de données. Cette requête multimédia permettrait aux développeurs de dire, charger conditionnellement une police Web. Ou nous pourrions désactiver les animations dans notre CSS lorsqu’un utilisateur souhaite enregistrer des données, ou définir un jeu de couleurs plus sombre, comme une sorte de “mode éco”. Nous en avons sans doute besoin maintenant plus que jamais, mais malheureusement aucun navigateur ne le prend encore en charge.
Cette requête média pourrait également nous aider à proposer des images et des médias appropriés. Le <picture> L’élément permet de diffuser des images en fonction de conditions de support autres que la taille – la démonstration suivante affiche une image plus sombre à l’aide de l’élément prefers-color-scheme requête médiatique.
Voir le Pen Untitled de Michelle Barker (@michellebarker) sur CodePen.
En théorie, on pourrait utiliser prefers-reduced-data de même, pour servir une image de résolution inférieure aux utilisateurs qui la préfèrent. Ou peut-être servir une image en noir et blanc ou en demi-teintes ?
<picture>
<source srcset="low-res-image.webp" media="(prefers-reduced-data: reduce)" />
<img src="high-res-image.webp" alt="" width="1600" height="1068" />
</picture>Peut-être est-il temps pour nous de commencer à demander aux fournisseurs de navigateurs de commencer à prioriser cela ?
Lire la spécification →