Comment l'amélioration des performances d'un site Web peut aider à sauver la planète

Le changement climatique ne semble pas être une question qui devrait préoccuper les développeurs Web, mais la vérité est que notre travail a une empreinte carbone et qu’il est temps que nous commencions à y penser.

Vous n'y pensez peut-être pas souvent, mais Internet consomme une quantité colossale d'électricité. Cette électricité doit être produite quelque part. Dans la plupart des pays, cela signifie la combustion de combustibles fossiles. Ceci, à son tour, signifie que l'empreinte carbone de l'Internet a augmenté au point où peut avoir éclipsé les voyages aériens mondiaux ce qui fait d'Internet la plus grande machine au charbon du monde.

Le Le Rapport sur la santé de Mozilla Internet 2018 indique que, notamment à mesure qu'Internet se développe sur un nouveau territoire, «la durabilité doit être une priorité plus grande». Mais, dans l'état actuel des choses, les sites Web deviennent de plus en plus obèses, ce qui signifie que la demande énergétique de Internet continue de croître de façon exponentielle.

Parallèlement, les effets du changement climatique s'aggravent et se multiplient d'année en année. La grande majorité des climatologues attribuent la férocité et la fréquence croissantes des phénomènes météorologiques extrêmes dans le monde au changement climatique, qu’ils attribuent en grande partie à l’activité humaine. Bien que certains remettent en cause la science, même les plus grandes sociétés pétrolières du monde l'acceptent maintenant et admettent que leurs modèles commerciaux doivent changer.

Tous les pays de la Terre (à l'exception des États-Unis) sont signés. jusqu’à l’accord de Paris sur le climat. Bien que les États-Unis se soient retirés de manière controversée, de nombreux citoyens, villes, États et entreprises parmi les plus influents – représentant plus de la moitié de la population et de l'économie des États-Unis – ont maintenu leur engagement en faveur de l'accord par le biais du America's Pledge initiative.

En tant que développeurs Web, il est compréhensible de penser que ce n’est pas un problème sur lequel nous avons une quelconque influence, mais ce n’est pas vrai. De nombreux efforts sont en cours pour améliorer la situation sur le Web. La Green Web Foundation gère une base de données sans cesse croissante d’hébergeurs Web entièrement alimentés par des énergies renouvelables ou, au moins, déterminés à être neutres en carbone. En 2013, A List Apart a publié Sustainable Web Design de James Christie. Au cours des trois dernières années, la conférence SustainableUX a réuni des experts en développement durable du Web partageant leurs connaissances dans de nombreuses disciplines basées sur le Web.

Depuis 2009, Greenpeace fait pression sur les grandes sociétés Internet pour qu'elles nettoient leur mix énergétique par le biais de leur campagne Clicking Clean . En partie à cause de cette campagne, Google a annoncé l'année dernière que, pour la première fois, elle avait acheté suffisamment d'énergie renouvelable pour couvrir la totalité de sa consommation mondiale .

Ainsi, mis à part alimenter des serveurs avec L'énergie renouvelable, que peuvent faire les développeurs web contre le changement climatique?

«Vous ne pouvez pas gérer ce que vous ne pouvez pas mesurer»

Le gain le plus important pour rendre les sites Web plus durables est peut-être la performance, l'expérience utilisateur. et la durabilité sont tous étroitement liés. La mesure clé pour mesurer la durabilité d'un produit numérique est sa consommation d'énergie. Cela inclut le travail effectué par le serveur, le client et les réseaux de communication intermédiaires qui transmettent des données entre les deux.

Dans cet esprit, la première chose à considérer est peut-être comment mesurer la consommation énergétique de notre site Web? C’est en réalité une entreprise plus délicate que vous ne le pensez et il est difficile d’obtenir des données précises ici. Cependant, nous pouvons utiliser quelques bonnes solutions de rechange pour démontrer la consommation d'énergie. Celles-ci incluent le transfert de données (c'est-à-dire la quantité de données que le navigateur doit télécharger pour afficher votre site Web) et l'utilisation des ressources du matériel servant et recevant le site Web. L'utilisation du processeur est une mesure évidente, mais l'utilisation de la mémoire et d'autres formes de stockage de données jouent également un rôle.

Le transfert de données est une chose que nous pouvons mesurer assez facilement. Tous les principaux navigateurs fournissent des outils de développement qui nous permettent de mesurer l’activité du réseau. Dans cette capture d'écran ci-dessous, par exemple, nous pouvons voir que le chargement du site Web de Smashing Magazine pour la première fois entraîne un peu moins d'un mégaoctet de transfert de données. Les outils de développement de Firefox nous fournissent en fait deux chiffres: le premier est la taille non compressée des fichiers transférés et le dernier est la taille compressée.

gzip est l’outil le plus utilisé pour compresser les éléments lorsqu’ils se déplacent sur le réseau. La différence entre ces deux nombres est généralement le résultat du travail de gzip. Ce dernier chiffre représente la quantité de données réellement transmise et doit être surveillé.

Note : De nombreux autres outils nous fournissent un métrique pour le transfert de données. WebPagetest .

Pour mesurer l’utilisation du processeur, Chrome fournit un gestionnaire de tâches granulaire qui affiche l’empreinte mémoire, l’utilisation du processeur et l’activité réseau de différents onglets. Pour les plus aventureux / techniques, la commande top (table des processus) fournit des métriques similaires sur la plupart des systèmes d'exploitation de type Unix, tels que macOS et Ubuntu. De manière générale, nous pouvons également exécuter la commande top sur n’importe quel serveur auquel nous avons accès au shell.

Heureusement, des efforts tels que WebsiteCarbon et Ecograder ont pour but de les traduire. métrique en CO2 (dans le cas de WebsiteCarbon) ou score (dans le cas d'Ecograder).

Sustainable Web Design

Nous savons maintenant comment mesurer l'impact de notre site, il est temps de réfléchir comment optimiser les choses pour rendre l'expérience plus durable, plus performante et généralement meilleure expérience.

Nous pouvons nous appuyer sur quelques travaux existants pour nous aider ici. En 2016, O’Reilly a publié « Designing For Sustainability » de Tim Frick. Dans ce livre, Tim nous fait découvrir le pourquoi et le comment du design durable. Mais nous pouvons également nous appuyer sur une profusion d'idées existantes, de conférences et d'articles qui, tout en n'étant pas explicitement axés sur la durabilité, recoupent énormément la philosophie de la conception Web durable. Le projet parallèle de Brad Frost, « Death To Bullshit », les articles et discussions de Heydon Pickering sur l'entretien de au sujet de l'écriture de code moins sacré de Adam Frans, et du blog d'Adam Silver, « Designing For Real Performance . ”

Si nous modifions complètement un site Web ou en créions un nouveau à partir de zéro, nous pouvons commencer par poser des questions de très haut niveau. Par exemple, qu'est-ce qui mérite ou doit être sur une page d'accueil? Et plus précisément, quelle est la valeur de chaque élément d'une page d'accueil comme le dit Heydon Pickering:

«La fonctionnalité la plus performante, accessible et facile à gérer d'un site Web est celle que vous ne make in the first place. ”

Je travaille sur l'équipe VIP de WordPress.com. C'est dans cet esprit que j'ai décidé de me lancer un défi en mettant sur pied un thème WordPress minimaliste afin de voir jusqu'où je pourrais mener les techniques de conception de sites Web durables. . Le résultat est un thème appelé Susty et on peut le voir en action sur le site Web d’accompagnement que j’ai réuni: sustywp.com . Dans cet exemple particulier, le site Web est livré avec un peu plus de 6 Ko de transfert de données, ce qui est une bonne chose étant donné que le site Web médian fait environ 1,5 Mo .

Alors, qu'est-ce que j'ai fait? Eh bien, je vais vous le dire.

Réduire les demandes de réseau

Comme je l’ai expliqué ci-dessus, les demandes de réseau sont un élément que nous pouvons facilement mesurer, elles constituent donc un bon point de départ. En assemblant Susty, j’ai remarqué que de nombreuses requêtes HTTP ne semblaient pas nécessaires. Par exemple, WordPress regroupe des fichiers CSS et JavaScript qui détectent l’utilisation d’emojis et veillent à ce qu’ils ne s'affichent pas comme des caractères illégaux. Il n’ya rien de mal à cela, mais si vous n’avez pas l’intention d’utiliser des émoticônes, ou si vous êtes heureux et confiant que les divers défauts du système vous protégeront, vous pouvez empêcher leur chargement . [19659005] Cela représente une économie relativement modeste, mais en adoptant une philosophie consistant à supprimer le code et les requêtes indésirables de nos pages, nous pouvons améliorer de beaucoup plus les performances. Par exemple:

• Est-ce que nous chargeons la totalité de jQuery pour certaines opérations de base du DOM?
  Pourrions-nous atteindre les mêmes objectifs avec du JavaScript pur ? Vous pouvez lire plus d'informations sur l'élimination plus avancée du code mort (aka arbre shaking) dans ce billet de Jeremy Wagner pour Google .
• Avons-nous un carrousel d'images?
  Avons-nous vraiment besoin de toutes ces images? ? Améliorent-ils considérablement l'expérience utilisateur? Ou pourrions-nous le réduire à une seule image forte? Ou même montrer au hasard une image parmi une sélection d’images, pour donner une impression de dynamisme aux utilisateurs qui reviennent? En passant, les recherches effectuées ici montrent que la plupart des utilisateurs n'apprécient ni ne s'engagent dans les carrousels .
• Si nous utilisons beaucoup d'images, aurions-nous avantage à fournir nos images à l'aide du WebP format pour les navigateurs qui le prennent en charge?
  Pendant longtemps, le support de WebP a été frustrant et limité. Mais avec Firefox qui devrait commencer à prendre en charge cette version 65 (janvier 2019), ce n'est qu'une question de temps avant que les retardataires comme Safari rattrapent leur retard.
• Chargementons-nous des centaines de kilo-octets de polices Web?
  utilise-t-on toutes les polices Web que nous chargeons? Avons-nous même besoin de polices Web? De nos jours, la plupart des appareils ont une pile de polices à la moitié décente. Pourrions-nous simplement spécifier une liste de polices que nous aimerions voir classées par préférence ? Si nous devons utiliser des polices Web, nous devons nous assurer que nos polices sont aussi performantes que possible .
• Nous intégrons des vidéos YouTube
  Une vidéo YouTube intégrée ajoute généralement environ un mégaoctet de données. transférer avant même que quiconque interagisse avec elle. Si seulement une fraction de nos utilisateurs vont réellement s'asseoir et regarder la vidéo intégrée sur notre site Web, pourrions-nous simplement créer un lien vers celle-ci?

Tout contrôler

Dans cet ordre d'idées, nous pouvons également interroger tous les aspects de nos pages. . Qu'est-ce que mérite vraiment ? Notre barre latérale ajoute-t-elle une valeur réelle, ou en avons-nous simplement ajouté une parce que la convention dicte que les sites Web ont des barres latérales? Donc, nous en avons ajouté un et nous l’avons rempli de merde.

Avec Susty, j’ai expérimenté l’approche peu orthodoxe consistant à reléguer la navigation à sa propre page. Cela me permet d’avoir des pages réduites à l'essentiel, le contenu supplémentaire n'étant chargé qu'à la demande explicite de l'utilisateur. Susty est si léger et si rapide que j’ai réalisé, à la suite de certaines recherches d’utilisateur (mon partenaire), que le chargement du menu ne me paraissait pas vraiment comme une nouvelle page. J’ai donc décidé de faire en sorte qu’elle apparaisse comme une superposition. licencier qui ne fait que vous ramener à la page précédente.

En plus de m'aider à créer des pages agréablement légères, la navigation reléguée élimine également le besoin d'un code de masquage / révélation sophistiqué pour le montrer. À ce stade, je tiens à préciser que Susty est un exemple qui poussait à l'extrême les techniques de conception de sites Web durables (je ne suggère pas qu'il s'agisse de l'archétype d'un bon site Web).

Write CSS Like Your Grandmother [19659030] Lorsqu'il s'agit d'améliorer sérieusement les performances, il ne faut pas oublier que chaque caractère du code compte. Chaque caractère représente un octet et même après avoir été compressé par gzip, il prend toujours du poids. CSS est un domaine où nous voyons souvent beaucoup de ballonnement. Heureusement, il existe un nombre croissant d'outils de plus en plus complexes qui peuvent vous aider à éliminer les CSS non utilisées. Cet article fantastique de Sarah Dayan explique comment elle a réduit son ensemble de CSS de 259 Ko à 9 Ko!

Si nous partons de zéro, nous devrions peut-être réfléchir davantage à la façon dont nous écrivons le CSS au départ. . Heydon Pickering a écrit un excellent article sur la manière dont nous pouvons écrire le CSS de manière à exploiter les atouts de la conception de la syntaxe et sur la manière dont cela peut aider les développeurs à éviter les répétitions. Heydon souligne également le gaspillage lié à l'utilisation excessive de divs et de classes, aussi bien en HTML qu'en CSS.

Qu'est-ce que vous analysez?

Il semble être devenu plus ou moins omniprésent sur le Web pour tout le monde. pour analyser ce que les visiteurs de leur site Web font via des outils tels que Google Analytics, KISSmetrics, Piwik, etc. Bien que je ne doute pas qu'il existe des cas d'utilisation légitimes, avons-nous vraiment besoin d'analyses sur chaque site? Pour ma part, j'ai généralement ajouté Google Analytics à chaque site que je gère naturellement. Mais il m'est apparu assez récemment que pour la plupart des sites Web en question, cela représentait une tentative presque totalement inutile: «Oh, six personnes sont parvenues à ce message via Facebook aujourd'hui.» Qui s'en soucie?

À moins d'en avoir vraiment besoin et vous allez analyser et exploiter les données, abandonner simplement l'analyse et trouver un meilleur moyen de passer votre temps que de regarder le monde de savoir combien de personnes ont visité le site Web X aujourd'hui.

En plus d'ajouter à votre page Google Analytics soulève des questions éthiques concernant les données que vous collectez pour vos utilisateurs pour le compte de Google, c’est-à-dire qu’il existe une raison pour que Google vous fournisse gratuitement Analytics.

N'oublions pas les bases

Beaucoup d'informations à propos de ce qui se passe ces jours-ci, mais nous ne devrions jamais nous laisser aller et les oublier. En plus de tout ce qui précède, nous devrions toujours minifier HTML, CSS et JavaScript et les concaténer le cas échéant. Nous devrions aussi compresser toutes les images pour qu'elles soient aussi petites que possible utiliser les bons formats dans les bons réglages et utiliser le rendu progressif .

. Performances côté serveur

Jusqu'à présent, nous nous sommes concentrés presque entièrement sur le front-end, mais cela est en grande partie inutile si nous n'optimisons pas également les choses côté serveur. Je l’ai déjà mentionné à quelques reprises, mais nous devons absolument activer la compression gzip à tout moment.

Nous devons simplifier au maximum la gestion de notre site Web pour notre serveur. J'utilise principalement Nginx, et j'ai un penchant particulier pour le cache FastCGI, que je trouve particulièrement efficace. Si vous avez un accès shell à votre propre serveur, voici un article qui explique comment le configurer . Il y a moins d’options techniques si vous n’avez pas (ou ne voulez pas) autant de contrôle sur votre serveur. Un domaine de prédilection dans l'espace WordPress est WP Super Cache .

Nous devrions utiliser HTTP2 par rapport à HTTPS . L’utilisation du protocole HTTPS ouvre un monde de nouvelles technologies Web, telles que les opérateurs de services, qui nous permettent de traiter le réseau lui-même comme un outil agréable à utiliser. Si vous souhaitez en savoir plus à ce sujet, je vous recommande vivement le nouveau livre de Jeremy Keith, " Going Offline ."

Note : Vous voudrez peut-être également enquêter sur ] Le module PageSpeed ​​de Google disponible pour Apache et Nginx.

Enfin, l’impact le plus important que nous puissions avoir ici est d’héberger nos sites Web dans des datacenters fonctionnant à l’énergie renouvelable. Au Royaume-Uni, je peux fortement recommander Krystal et Kualo en termes de sociétés avec lesquelles je héberge directement mes sites. (Pour un répertoire complet des hôtes Web verts, consultez The Green Web Foundation .)

En conclusion

J'espère vous avoir convaincu qu'il valait la peine de faire l'effort de créer davantage nos sites Web. durable. Surtout étant donné que, dans le processus, nos sites Web sont également créés:

• Plus performant,
• Plus convivial,
• Plus accessible,
• Plus convivial pour les serveurs,
• Optimisé pour les moteurs de recherche. 19659068] Certaines personnes ont répondu à l'idée d'une conception Web durable – ce qui n'est pas déraisonnable – est qu'il semble s'agir d'une très petite concession à la cause environnementale. Bien entendu, l’impact que vous pouvez avoir dépend de l’occupation des sites Web sur lesquels vous travaillez. Mais en plus d’aider le Web à devenir un peu plus écologique, la conception Web durable est fondamentalement la meilleure pratique en matière de conception de sites Web.

  Il est également utile de penser à compenser les émissions de carbone que vous ne pouvez pas éviter. La compensation de carbone est parfois ridiculisée, et pour de bonnes raisons. Le problème principal avec la compensation est que le terme sur lequel le carbone sera compensé est généralement assez long. Par exemple, dans le cas de la plantation d'arbres, le chiffre indiqué pour la quantité de séquestration du carbone est généralement basé sur une période de 100 ans. Donc, en termes de réduction des émissions de carbone, ce n’est pas vraiment une solution. Mais c'est mieux que rien.

  La devise de myclimate est de faire de son mieux et de compenser le reste. J'ai écrit un article de blog sur l'application de votre propre programme de compensation des émissions de carbone . Je recommande également fortement l'initiative 1% pour la planète . Enfin, si vous êtes propriétaire d’une entreprise et souhaitez rejoindre une alliance d’entreprises qui souhaitent une meilleure justice sociale, environnementale et économique, consultez le programme Certified B Corporation .

  
  Le meilleur outil 2023 pour ta croissance Instagram !
  
  
  
  Source link

  Partager :

  • Cliquez pour partager sur Twitter(ouvre dans une nouvelle fenêtre)
  • Cliquez pour partager sur Facebook(ouvre dans une nouvelle fenêtre)