L’éco-responsabilité est-elle l’ennemie de la performance ?

Au premier abord ça peut ne pas paraître évident mais l’éco-responsabilité dans le web et la performance vont de pair. Et oui il suffit de réfléchir quelques secondes :

Performance = site plus rapide = site qui utilise moins de ressources = site éco-responsable = tout le monde est content.

D’ailleurs c’est même l’aspect majeur d’un site éco-responsable. Un site performant réduit de façon significative sont émission carbone. Et la planète n’est pas la seule à en bénéficier, en effet les utilisateurs eux même aurons une meilleur expérience lorsqu’ils parcourrons le site.

Alors comment rendre un site plus performant et éco-responsable ?

Voici une liste de choses à prendre en compte lors du développement du site / application web.
Cette liste s’inspire du guide W3C sur le web éco-responsable ici

Nous allons les classer par impact sur l’environnement de Fort à Faible

Impact Fort

1. Évaluer rigoureusement les services fournis par des tiers
   
   

   Qu’il s’agisse de publicité, de chatbots, de cartes ou d’autres outils, l’externalisation de votre service auprès d’un fournisseur tiers peut être utile. Dans certains scénarios il peut réduire le temps de conception ou de développement. (ce qui peut être un avantage pour la durabilité). Les services tiers présentent toutefois des inconvénients, tels que l’absence de contrôle sur les émissions, et ils peuvent souvent souffrir de latence et de fichiers volumineux, ce qui n’est pas le cas si vous hébergez ou les créez vous-même.
   
   

   Comment faire?
   
   • Évaluer les services tiers (y compris les plugins, les widgets, les flux, les cartes, les carrousels, etc.) le plus tôt possible dans le processus d’idéation et en utiliser le moins possible afin de réduire l’impact écologique global.
   
   • Les grandes bibliothèques CSS et les frameworks JavaScript ne devraient être utilisés que si une alternative plus performante permettant d’atteindre le même objectif ne peut pas être utilisée à la place.
   
   • Privilégier les contenus auto hébergé plutôt que les contenus intégrés provenant de services tiers.
   
   • Créez vos propres icônes et widgets cliquables, plutôt que de compter sur des services tiers pour héberger. Sinon, permettre l’intégration dans votre produit ou service.
   
   

   Articles intéréssant :
   
   • React is slow at it’s very core

2. Utiliser JavaScript et des API que quand utiles
   
   

   Lorsqu’il existe de nouvelles bonnes pratiques ou des indications sur l’utilisation des scripts, il convient de les suivre en priorité (seule l’utilisation éthique des scripts doit être encouragée).
   
   

   Comment faire?
   
   • Lorsque vous utilisez une API, veillez à ne l’appeler qu’en cas de nécessité. D’autre part, assurez-vous qu’aucune donnée non requise n’est envoyée par l’API.
   
   • Améliorer la durabilité grâce à du code accessible et performant.
   
   

   Outils utiles :
   
   • Page visibility API

Impact Moyen

1. Utiliser le « Code Splitting »
   
   

   Lorsqu’il s’agit de composants lourds (tels que JavaScript), la possibilité de les modulariser en éléments plus petits qui peuvent être chargés au fur et à mesure des besoins réduit la redondance et constitue un excellent moyen de rendre vos scripts plus durables.
   
   

   Comment faire?
   
   • Décomposer les composants lourds en segments qui peuvent être chargés en fonction des besoins.
   
   

   Articles intéréssant :
   
   • Web Performance and parallel vs waterfall downloads
   
   • Modular CSS and different ways to structure your stylesheets
   
   

   Outils utiles :
   
   • Dynamic Imports

2. Appliquer la méthode du « Tree Shaking »
   
   

   Souvent les projets peuvent accumuler du désordre et des fonctions qui ne sont plus utilisées. En utilisant des techniques de « Tree Shaking », tout le “bois mort” sera automatiquement supprimé lors de la compilation, réduisant ainsi la taille d’un fichier.
   
   

   Comment faire?
   
   • Identifier et éliminer les codes inutilisés et morts dans les feuilles de style CSS et JavaScript.
   
   

   Articles intéréssant :
   
   • Tree Shaking
   
   • Tree Shaking reference guide
   
   

   Outils utiles :
   
   • Webpack

3. Éviter la duplication de code
   
   

   La redondance est l’ennemi de la durabilité. En mettant en place des systèmes permettant à chacun de travailler à partir de modèles établis, le site web ou l’application reste propre et facile à utiliser.
   
   

   Comment faire?
   
   • N’ayez pas peur de supprimer ou de simplifier votre code afin de vous concentrer sur les fonctionnalités essentielles et d’obtenir un produit plus propre et moins redondant.
   
   • Améliorer (itérer) une création existante plutôt que de redévelopper et reconcevoir constamment des produits à partir de zéro.
   
   • En ce qui concerne CSS et JavaScript, utilisez des méthodologies (comme BEM) et des systèmes comme DRY et WET pour optimiser l’agencement et la sortie de votre code source.
   
   

   Outils utiles :
   
   • BEM
   
   • PMD

4. Résoudre le problème de blocage de rendu de contenu
   
   

   La possibilité de contourner les problèmes de blocage de rendu est un atout majeur pour le web. Qu’il s’agisse du report de code, du chargement « lazy-loading » ou du chargement asynchrone, chacun a son propre cas d’utilisation et chacun peut potentiellement réduire ou améliorer les performances d’un site web ou d’une application.
   
   

   Comment faire?
   
   • Toutes les ressources externes doivent être différées ou configurées en mode asynchrone (sauf si cela est nécessaire) afin d’éviter le FOUC (Flash Of Unstyled Content - Flash de contenu non stylisé).
   
   • Si des ressources externes sont requises en charge, assurez-vous que leurs priorités (“delivery route”) sont définies correctement.
   
   

   Articles intéréssant :
   
   • Eliminate render blocking ressources
   
   

   Outils utiles :
   
   • Lazy-loading

5. Gérer les dépendances de manière appropriée
   
   

   Le JavaScript peut être à l’origine d’émissions très élevées en termes de CPU en raison du processus de rendu, et il est donc judicieux d’examiner attentivement l’utilisation de dépendances et de code tiers.
   
   

   Comment faire?
   
   • Empêchez les développeurs de télécharger et d’installer des bibliothèques JavaScript pour les exécuter localement (côté client) lorsqu’elles ne sont pas nécessaires en vérifiant les dépendances inutilisées et en désinstallant celles qui ne sont pas nécessaires et en les supprimant de votre fichier package.json.
   
   • Réduisez la quantité de JavaScript qui doit être téléchargée et analysée par le navigateur en n’utilisant des bibliothèques que lorsque cela est nécessaire. Examinez la possibilité d’utiliser une API JavaScript native à la place. Vérifiez la taille du paquet à l’aide d’un outil comme Bundlephobia, et vérifiez si des modules individuels peuvent être installés et importés plutôt que la bibliothèque entière.
   
   • Vérifier régulièrement les dépendances et les maintenir à jour.
   
   

   Articles intéréssant :
   
   • Uninstalling packages and dependencies

6. Utiliser la dernière version stable du langage
   
   Les langages évoluent régulièrement et il est important, pour des raisons de sécurité et de performance, de rester à la pointe du stack technologique que vous utilisez.
   
   

   Comment faire?
   
   • Utilisez le dernier build du langage que vous avez choisi et le framework qui lui est associé.
   
   

7. Exécuter des requêtes simples et peu nombreuses
   
   

   Le fait d’effectuer de multiples requêtes, que ce soit par HTTP ou dans une base de données, a un coût en carbone puisque l’infrastructure doit envoyer des allers-retours d’informations. C’est pourquoi la gestion du stockage et de l’utilisation des données au niveau local pour un visiteur contribuera à réduire les cycles inutiles
   
   

   Comment faire?
   
   • Si vous avez besoin d’informations stockées dans une base de données et que vous en avez besoin plusieurs fois dans votre code, n’accédez à la base de données qu’une seule fois et stockez les données dans une variable en vue d’un traitement ultérieur.

Impact Faible

1. Minifiez votre HTML, CSS et JavaScript
   
   La minification permet de réaliser de précieuses économies de données et de réduire les temps de chargement.
   
   

   Comment faire?
   
   • Tout le code source est minifié lors de la compilation (y compris le code en ligne).
   
   

   Articles intéréssant :
   
   • Minify Javascript
   
   

   Outils utiles :
   
   • JS compress
   
   • CSS Minify
   
   

2. Utiliser des formats plainText lorsque c’est possible
   
   

   Il existe plusieurs petits actifs qui peuvent être inclus dans un site web et qui confèrent une série d’avantages au site web ou à l’application qui les utilise. Ils ont tous une faible empreinte carbone et, bien qu’ils génèrent des émissions, ils sont intéressants à inclure pour les avantages qu’ils procurent.
   
   Comment faire?
   
   • Utiliser des normes telles que ads.txt, carbon.txt, humans.txt, security.txt et robots.txt.
   
   

   Outils utiles :
   
   • Human txt quick start

3. Éviter d’utiliser du code déprécié ou propriétaire
   
   

   Le web est rempli de code mort, souvent propriétaire, créé à l’aide de normes qui ont été remplacées ou par des groupes qui ne sont pas reconnus. En respectant les normes de codage reconnues, vous vous assurez que votre code sera rendu correctement par les navigateurs (et vous réduisez le risque d’émissions supplémentaires dues à des processus de rendu non mis à jour).
   
   

   Comment faire?
   
   • Il est important de mettre à jour ou d’éviter les formats obsolètes, à la seule exception des cas où le support consommateur exige le maintien de normes plus anciennes pour fournir un produit fonctionnel.
   
   • N’utilisez pas de norme ancienne si une recommandation plus récente permet d’effectuer le même travail ou d’être plus efficace.