5 conseils open source pour réduire le gaspillage dans la conception Web

J’ai commencé ma carrière dans la conception de produits, quand “produit” signifiait une chose réelle que vous pouviez tenir dans votre main. Lorsque je suis passé au design numérique il y a 15 ans, j’étais ravi de concevoir des produits numériques qui ajoutaient de la valeur à la vie des gens sans aucun impact sur l’environnement. Ils n’ont pas gaspillé d’énergie, n’avaient pas d’emballages inutiles et n’ont pas fini comme déchets dans des décharges à la fin de leur vie.

Par conséquent, j’ai été surpris d’apprendre plus tard que les produits numériques peuvent être un gaspillage. Dans cet article, j’explore comment l’application d’un état d’esprit zéro déchet à la conception et au développement numériques peut vous aider à créer un Internet meilleur pour les gens et la planète.

Les déchets ne sont pas normaux

Je pense qu’il est juste de dire que même si nous n’aimons pas cela, la plupart d’entre nous acceptons les déchets comme faisant partie de la vie quotidienne. Cependant, les déchets sont tout sauf normaux. Dans la nature, aucune ressource n’est gaspillée et tout a de la valeur. Le type de déchets que nous considérons maintenant comme étant si normal est un concept relativement nouveau.

Dans les années 1980, l’accumulation de déchets dans les décharges était déjà un problème mondial. Daniel Knapp a décidé qu’il fallait faire quelque chose. Il a proposé le concept de recyclage total, dans lequel rien ne devrait jamais aller dans une décharge ou une incinération. Il a inventé le terme Zero gaspillage comme objectif et a cofondé une opération de récupération appelée Urban Ore. Il s’agissait d’une expérience réelle pour démontrer comment tous les types de déchets pouvaient être détournés des sites d’enfouissement et réutilisés dans la communauté.

Bien que l’initiative de Knapp ait connu un certain succès, le problème mondial des déchets n’a cessé de croître et au milieu des années 2000, un nombre croissant d’individus ont commencé à prendre les choses en main, essayant de vivre des modes de vie zéro déchet. Ce concept a été popularisé par des blogueurs tels que Béa Johnson et Laurent Chanteur qui ont partagé leurs expériences en essayant de vivre sans gaspillage et ont inspiré d’autres personnes à suivre leur exemple.

Comment cela s’applique-t-il à la conception Web?

Il y a plusieurs années, j’ai entrepris des recherches pour comprendre si les produits web ont ou non un impact environnemental. J’ai été choqué par ce que j’ai trouvé. Pris dans son ensemble, Internet produit chaque année plus d’émissions de carbone que l’industrie aéronautique mondiale, grâce à l’énorme quantité d’électricité nécessaire pour alimenter les centres de données, les réseaux de télécommunications et des milliards d’appareils d’utilisateurs finaux. Sans parler du fait que tout cet équipement doit être fabriqué et entretenu. Internet n’est pas du tout virtuel, il est très physique.

Notre équipe a alors développé un calculateur de carbone pour les sites Web pour contribuer à la sensibilisation à ce problème. Nous avons testé des millions de pages Web et identifié un modèle à mesure qu’il gagnait en popularité. Les sites Web les plus économes en énergie étaient ceux qui ressemblaient à ceux des années 1990, tandis que de nombreux nouveaux sites Web étaient très polluants.

Il s’avère que malgré leurs fonctionnalités et leur apparence de base, les premiers sites Web étaient extrêmement efficaces, avec des fichiers de petite taille et ne nécessitant pratiquement aucune puissance de calcul. À mesure que les ordinateurs devenaient plus puissants et que les vitesses d’Internet augmentaient, les sites Web devenaient de plus en plus gonflés, érodant les avantages des progrès du matériel informatique. En conséquence, le Web moderne n’est pas plus rapide qu’il y a 10 ans et est beaucoup plus polluant.

Dans un article pour National Geographic sur les personnes vivant des modes de vie zéro déchet, le journaliste Stephen Leahy a écrit que contrairement à son hypothèse précédente, “Ce ne sont pas des hippies en herbe, mais des gens qui adoptent un style de vie minimaliste moderne. Ils disent que cela leur fait gagner du temps et de l’argent et enrichit leur vies.”

Et si nous appliquions un état d’esprit zéro déchet à la conception numérique ? Pourrait-il nous aider à créer un Web moderne et minimaliste qui fait gagner du temps, de l’argent et enrichit la vie des gens ? Je pense que ça pourrait.

1. Les images valent plus que mille mots

Une image vaut mille mots, mais la vérité est qu’une image utilise beaucoup plus de données que 1000 mots de texte, et à son tour, elle utilise beaucoup plus d’énergie pour stocker, transmettre et restituer.

Une étude menée par NielsenNorman Group a révélé que les visiteurs du site Web ignorent complètement les images qui ne sont pas pertinentes pour le contenu, faisant des photos génériques sur les sites Web un véritable gaspillage d’espace et de données. Il est préférable d’utiliser les images avec attention et de ne les inclure que dans des conceptions qui ajoutent vraiment de la valeur.

Même si vous allez inclure des photos dans vos conceptions, la façon dont vous les utilisez peut souvent être un gaspillage. Par exemple, il existe à peu près une loi carrée en ce qui concerne les dimensions de l’image et la taille du fichier. Si vous doublez la largeur et la hauteur, vous quadruplez presque la taille du fichier. Et cela suppose que vous avez écrit le code pour charger la bonne taille d’image plutôt que de charger de gros fichiers image et de les afficher sur apparaître petit.

Vous pouvez également trouver des déchets dans les images, sous la forme de détails qui n’ont pas besoin d’être là. Supprimer des détails en rendant floues certaines parties d’une image, utiliser la photographie avec une faible profondeur de champ, photographier des objets sur des arrière-plans unis ou utiliser des images monochromes ne sont que quelques façons de réduire la taille des fichiers image. Si le détail n’est pas nécessaire, alors c’est du gaspillage.

Même si vous concevez des images de manière efficace, il y a toujours un gaspillage potentiel dans les fichiers image eux-mêmes. L’utilisation de couleurs indexées dans votre application d’édition d’images peut éliminer les données inutiles des fichiers image sans perte visuelle de qualité.

2. Choisissez judicieusement votre format de fichier

Vous pouvez également utiliser des formats de fichiers plus efficaces. Par exemple, les fichiers image WebP sont généralement 30 % plus petits que les fichiers image JPEG et AVIF sont environ la moitié de la taille des fichiers JPEG.

Les graphiques vectoriels tels que SVG peuvent également être des alternatives beaucoup plus efficaces à la photographie sur les sites Web. Vous pouvez optimiser vos fichiers SVG en supprimant les couches inutiles dans les fichiers de conception et en simplifiant les chemins vectoriels. La taille d’un fichier SVG peut être réduite jusqu’à 97 % simplement en passant quelques minutes à nettoyer le fichier de conception.

3. Arrêtez la lecture automatique de la vidéo

Les vidéos en lecture automatique consomment beaucoup plus de données et d’énergie que les autres types de contenu. Le journaliste du New York Times, Brian Chen, a écrit un article sur le fléau des vidéos en lecture automatique sur le Web, déclarant qu’elles “exigent votre attention tout en brûlant votre plan de données et en aspirant vos batteries”. Ils gaspillent le forfait de données d’un utilisateur (et donc son argent), ils gaspillent de l’énergie et ralentissent les pages Web. Utilisez la vidéo avec parcimonie et placez-y un bouton de lecture pour permettre aux utilisateurs de s’inscrire.

4. Polices zéro déchet

Les polices système ne sont peut-être pas populaires auprès des concepteurs, mais elles existent déjà sur l’appareil de chaque utilisateur, elles n’ont donc pas besoin d’être chargées, ce qui les rend vraiment zéro déchet. Par exemple, un site Web de voyage peut utiliser une police système pour offrir une expérience utilisateur efficace à ses utilisateurs, dont beaucoup peuvent être à l’étranger et utiliser des données d’itinérance lentes et coûteuses.

Le font-family Propriété CSS fournit des noms de famille génériques que vous pouvez utiliser pour désigner les polices déjà installées sur le système hôte :

• serif
• sans-serif
• cursive
• system-ui

Si vous utilisez des polices Web, le moyen le plus simple de rechercher des déchets consiste à identifier les caractères du fichier de polices que votre site Web n’utilise pas. Par exemple, certaines polices fournissent des milliers de caractères, alors que la langue anglaise n’en a besoin que d’une centaine. Il existe un certain nombre d’outils de création de sous-ensembles de polices disponibles en ligne qui peuvent prendre n’importe quel fichier de police et supprimer les caractères non utilisés dans vos langues cibles.

Lors de la sélection de la police à utiliser, un navigateur ne s’arrête pas à la première police de votre liste CSS. La sélection de la police est en fait effectuée pour chaque caractère de la page Web en supposant que lorsqu’une police manque d’un glyphe spécifique, une autre police de votre liste peut le fournir. Si vous savez que vous avez besoin d’une police pour un ensemble de caractères spéciaux, ajoutez cette police uniquement après avoir défini le choix de police principal sur une police système.

Tout comme les images, vous pouvez enregistrer plus de données en utilisant des formats de fichiers efficaces. Les fichiers de police WOFF2 peuvent être environ 30 % plus petits que les fichiers WOFF et jusqu’à 75 % plus petits que les fichiers TTF.

5. Trouvez les déchets dans votre code

L’outil CSSstats.com vous permet de visualiser ce qui se trouve réellement dans vos fichiers CSS et de voir à quelle fréquence vous dupliquez les mêmes styles. Voir ce gaspillage peut vous aider à le nettoyer, et la mise en œuvre d’un langage de conception modulaire avec des styles reproductibles peut vous aider à maintenir un CSS propre et efficace sur le long terme.

Lorsque vous choisissez des bibliothèques, des frameworks ou des scripts de suivi, vous devez vous demander s’ils sont vraiment nécessaires et si des alternatives plus petites sont disponibles. Par exemple, jQuery peut ne faire que 30 Ko, mais il est possible de créer une page Web entière en moins de 30 Ko. Si vous pouvez éviter de l’ajouter, vous devriez. De même, le script de suivi de base de Google Analytics est de 17 Ko, mais une alternative comme l’open source Plausible Analytics fait moins de 1 Ko et est conçue pour respecter la vie privée des personnes.

Certains langages de programmation sont également plus gaspilleurs que d’autres en termes d’efficacité énergétique avec laquelle ils peuvent effectuer des tâches. JavaScript est sept fois plus économe en énergie que PHP. Vous devez garder cela à l’esprit lorsque vous décidez quelles nouvelles langues apprendre et quelles technologies spécifier pour les projets futurs.

Réduire les déchets sur le web est bon pour tout le monde

Il est vrai que l’élimination du gaspillage dans nos projets Web nécessite un peu plus d’attention aux détails, mais lorsque vous le faites, vous pouvez créer des expériences Web qui sont non seulement meilleures pour l’environnement, mais qui offrent également des expériences utilisateur plus rapides et plus accessibles. Qui ne veut pas ça ?

Alors peut-être devriez-vous vous poser cette question d’Urban Ore : “Si vous n’êtes pas pour le zéro déchet, vous êtes pour combien de déchets ?”