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

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 d'Internet a augmenté au point d'éclipser le transport aérien mondial, ce qui fait d'Internet la plus grande machine à charbon sur Terre.

Le Mozilla Internet Health Report 2018 indique que, d'autant plus qu'Internet s'étend sur de nouveaux territoires, "la durabilité devrait être une plus grande priorité". 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 d'Internet continue de croître de façon exponentielle.

Pendant ce temps, les impacts 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. Alors que certains remettent en question la science, même les plus grandes compagnies pétrolières du monde l'acceptent maintenant et admettent que leurs modèles commerciaux doivent changer.

Tous les pays du monde (à l'exception des États-Unis) sont signataires de l'Accord de Paris sur le climat. Bien que les États-Unis se soient retirés de manière controversée, de nombreux individus, villes, États et entreprises américains parmi les plus influents - représentant plus de la moitié de la population et de l'économie américaines - ont conservé leur engagement envers l'accord par le biais de l'initiative America's Pledge.

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 maintient une base de données sans cesse croissante d'hébergeurs Web qui sont entièrement alimentés par des énergies renouvelables ou qui se sont au moins engagés à être neutres en carbone. En 2013, A List Apart a publié Sustainable Web Design by James Christie. Au cours des trois dernières années, la conférence SustainableUX a vu des experts en durabilité du Web partager leurs connaissances dans un éventail de disciplines basées sur le Web.

Depuis 2009, Greenpeace fait pression sur les grandes entreprises de l'Internet pour qu'elles nettoient leur mix énergétique via leur campagne Clicking Clean. En partie à la suite de cette campagne, Google a annoncé l'année dernière que, pour la première fois, il avait acheté suffisamment d'énergie renouvelable pour couvrir 100 % de sa consommation mondiale pour ses opérations.

Donc, à part alimenter les serveurs avec de l'énergie renouvelable, que peuvent faire d'autre les développeurs Web contre le changement climatique ?

"Vous ne pouvez pas gérer ce que vous ne pouvez pas mesurer"

Peut-être que la plus grande victoire lorsqu'il s'agit de rendre les sites Web plus durables est que les performances, l'expérience utilisateur et la durabilité sont étroitement liées. L'indicateur 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 les données entre les deux.

Dans cet esprit, la première chose à considérer est peut-être comment mesurer la consommation d'énergie de notre site Web ? C'est en fait une entreprise plus délicate que vous ne l'imaginez, et il est difficile d'obtenir des données précises ici. Il existe cependant de bonnes solutions de repli que nous pouvons utiliser pour démontrer la consommation d'énergie. Ceux-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. Une mesure évidente ici est l'utilisation du processeur, mais l'utilisation de la mémoire et d'autres formes de stockage de données jouent également leur 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 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 qui ont été transférés, et le second est la taille compressée.

L'outil le plus courant pour compresser les actifs lorsqu'ils voyagent sur le réseau est gzip, donc 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 c'est celui qu'il faut surveiller.

Remarque : Il existe de nombreux autres outils qui nous fournissent une métrique pour le transfert de données, y compris le très apprécié WebPagetest.

Pour mesurer l'utilisation du processeur, Chrome nous fournit un gestionnaire de tâches granulaire qui affiche l'empreinte mémoire, l'utilisation du processeur et l'activité réseau des onglets individuels. 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 un accès shell.

Heureusement, il existe des efforts tels que WebsiteCarbon et Ecograder qui cherchent à traduire ces mesures en un chiffre spécifique de CO2 (dans le cas de WebsiteCarbon) ou en un score (dans le cas d'Ecograder).

Conception Web durable

Maintenant que nous savons mesurer l'impact de notre site, il est temps de réfléchir à la façon dont nous pouvons optimiser les choses pour le rendre plus durable, plus performant et généralement une meilleure expérience à utiliser.

Il y a quelques travaux existants sur lesquels nous pouvons nous appuyer 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 multitude d'idées existantes, de conférences et d'articles qui, sans se concentrer explicitement sur la durabilité, recoupent énormément la philosophie de la conception Web durable. Les exemples particulièrement bons ici sont le projet parallèle de Brad Frost, "Death To Bullshit", les articles et les discussions de Heydon Pickering sur l'écriture de code moins maudit, et le billet de blog d'Adam Silver, "Designing For Actual Performance".

Si nous effectuons une refonte complète d'un site Web ou en commençons un nouveau à partir de zéro, nous pouvons commencer par quelques questions de très haut niveau ici. Par exemple, qu'est-ce qui mérite ou doit réellement figurer sur une page d'accueil ? Et plus précisément, quelle valeur apporte chaque élément d'une page d'accueil ? Comme le dit Heydon Pickering :

"La fonctionnalité la plus performante, la plus accessible et la plus facile à entretenir d'un site Web est celle que vous ne créez pas en premier lieu."

Je travaille dans l'équipe VIP de WordPress.com, alors dans cette veine, j'ai décidé de me lancer un défi en remontant un thème WordPress minimaliste pour voir jusqu'où je pouvais pousser les techniques du webdesign durable. Le résultat est un thème appelé Susty, et il peut être vu en action sur le site Web d'accompagnement que j'ai créé : sustywp.com. Dans cet exemple particulier, le site Web est livré en un peu plus de 6 Ko de transfert de données, ce qui est bien é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 requêtes réseau

Comme je l'ai souligné ci-dessus, les demandes de réseau sont quelque chose que nous pouvons facilement mesurer, elles constituent donc un bon point de départ. En mettant Susty ensemble, j'ai remarqué qu'il y avait un certain nombre de requêtes HTTP en cours qui ne semblaient pas nécessaires. Par exemple, WordPress regroupe certains CSS et JavaScript qui détectent l'utilisation d'emojis et s'assurent qu'ils n'apparaissent pas comme des caractères illégaux. Il n'y a rien de mal à cela, mais si vous ne prévoyez pas d'utiliser des émoticônes, ou si vous êtes heureux et confiant que les différentes valeurs par défaut du système vous couvriront, vous pouvez empêcher leur chargement.

Cela représente une économie relativement maigre, mais en établissant une philosophie d'élagage du code et des requêtes indésirables de nos pages, nous pouvons apporter des améliorations de performances beaucoup plus significatives. Par exemple:

• Sommes-nous en train de charger l'intégralité de jQuery pour certaines opérations DOM de base ?
  Pourrions-nous atteindre les mêmes objectifs avec du JavaScript pur ? Vous pouvez en savoir plus sur l'élimination plus avancée du code mort (aka tree shaking) dans ce post pour Google par Jeremy Wagner.
• Avons-nous un carrousel d'images ?
  A-t-on vraiment besoin de toutes ces images ? Améliorent-ils considérablement l'expérience utilisateur ? Ou pourrait-on le réduire à une seule image forte ? Ou même montrer au hasard l'une d'une sélection d'images, pour donner un sentiment de dynamisme aux utilisateurs qui reviennent ? Soit dit en passant, les recherches qui ont été effectuées ici montrent que la plupart des utilisateurs n'aiment ni ne s'engagent avec les carrousels.
• Si nous utilisons beaucoup d'images, aurions-nous intérêt à fournir nos images au format WebP pour les navigateurs qui le prennent en charge ?
  Pendant très longtemps, le support de WebP a été extrêmement limité. Mais avec Firefox qui doit commencer à le prendre en charge dans la version 65 (prévue pour janvier 2019), ce n'est qu'une question de temps avant que les retardataires restants comme Safari ne rattrapent leur retard.
• Sommes-nous en train de charger des centaines de kilo-octets de polices Web ?
  Utilisons-nous toutes les polices Web que nous chargeons ? Avons-nous même besoin de polices Web? La plupart des appareils de nos jours ont une pile de polices à moitié décentes, pourrions-nous simplement spécifier une liste de polices que nous aimerions voir organisées par préférence ? Si nous devons utiliser des polices Web, nous devons nous assurer que nos polices sont aussi performantes que raisonnablement possible.
• Intégrons-nous des vidéos YouTube ?
  Une vidéo YouTube intégrée ajoute généralement environ un mégaoctet de transfert de données avant même que quiconque n'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 à la place ?

Tout scruter

Dans cette veine, nous pouvons également interroger tous les aspects de nos pages. Qu'est-ce qui mérite vraiment d'être là ? Notre barre latérale ajoute-t-elle une valeur réelle, ou en avons-nous juste mis une parce que la convention veut que les sites Web aient des barres latérales ? Donc, nous en avons ajouté un et l'avons rempli de conneries.

Avec Susty, j'ai expérimenté l'approche quelque peu peu orthodoxe de 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é grâce à des recherches d'utilisateurs (alias mon partenaire) que le chargement du menu ne ressemblait pas vraiment à une nouvelle page, alors j'ai décidé de le faire ressembler à une superposition, avec une croix pour rejeter qui vous ramène en fait à la page précédente.

En plus de m'aider à créer des pages agréablement légères, la navigation reléguée supprime également le besoin de tout code fantaisiste de masquage/révélation pour l'afficher. À ce stade, je voudrais préciser que Susty est un exemple de poussée des techniques de conception Web durable à l'extrême (je ne dis pas que c'est un archétype d'un bon site Web).

Écrivez CSS comme votre grand-mère

Lorsqu'il s'agit d'améliorer sérieusement les performances, nous devons garder à l'esprit que littéralement chaque caractère de code compte. Chaque caractère représente un octet, et même après avoir été compressé par gzip, il prend encore du poids. Le CSS est un domaine où l'on voit souvent beaucoup de ballonnements. Heureusement, il existe un nombre croissant d'outils de plus en plus complexes qui peuvent vous aider à éliminer les CSS inutilisés. Ce fantastique article de Sarah Dayan explique comment elle a réduit son bundle CSS de 259 Ko à 9 Ko !

Si nous partons de zéro, nous devrions peut-être réfléchir plus profondément à la façon dont nous écrivons le CSS en premier lieu. Heydon Pickering a écrit un excellent article sur la façon dont nous pouvons écrire du CSS d'une manière qui exploite les points forts 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, à la fois en HTML et en CSS.

Qu'analysez-vous ?

Il semble être devenu plus ou moins omniprésent sur le Web pour chacun d'analyser ce que font les visiteurs de son site Web 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 Web ? Pour ma part, j'ai généralement ajouté Google Analytics à chaque site que je gère naturellement. Mais il m'est apparu relativement récemment que pour la plupart des sites Web en question, cela a été une entreprise presque totalement inutile : "Oh, six personnes sont venues sur ce message via Facebook aujourd'hui." On s'en fout?

Sauf si vous en avez vraiment besoin, et que vous allez analyser et agir sur les données, abandonnez simplement l'analyse et trouvez une meilleure façon de passer votre temps que de rester bouche bée devant la banalité du nombre de personnes qui ont visité le site Web X aujourd'hui.

En plus d'augmenter le poids de votre page, l'utilisation de quelque chose comme Google Analytics soulève des questions éthiques concernant les données que vous collectez sur vos utilisateurs au nom de Google, c'est-à-dire qu'il y a une raison pour laquelle Google vous fournit Analytics gratuitement.

N'oublions pas les bases

Il y a tellement d'informations ces jours-ci sur ce qui suit, mais nous ne devrions jamais être complaisants et les oublier. Parallèlement à tout ce qui précède, nous devons absolument toujours minimiser HTML, CSS et JavaScript, et concaténer le cas échéant. Nous devons également compresser toutes les images pour nous assurer qu'elles sont aussi petites que possible, utiliser les bons formats dans les bons paramètres 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 une grande partie de cela devient inutile si nous n'optimisons pas également les choses côté serveur. Je l'ai déjà mentionné plusieurs fois, mais nous devons absolument activer la compression gzip à tout moment.

Nous devons rendre le service de notre site Web aussi simple que possible pour notre serveur. J'utilise principalement Nginx, et j'ai un penchant particulier pour le cache FastCGI et je l'ai trouvé 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 favori particulier dans l'espace WordPress est WP Super Cache.

Nous devrions utiliser HTTP2 sur HTTPS. L'utilisation de HTTPS ouvre un monde de nouvelles technologies Web telles que les service workers qui nous permettent de traiter le réseau lui-même comme un atout. Si vous voulez en savoir plus à ce sujet, je vous recommande vivement le nouveau livre de Jeremy Keith, "Going Offline".

Remarque : Vous pouvez également étudier le module PageSpeed ​​de Google, disponible pour Apache et Nginx.

Enfin, le plus grand impact que nous pouvons avoir ici est d'héberger nos sites Web dans des centres de données alimentés par des énergies renouvelables. Au Royaume-Uni, je peux fortement recommander Krystal et Kualo en termes de sociétés avec lesquelles j'héberge directement mes sites. (Pour un répertoire complet des hébergeurs Web verts, consultez The Green Web Foundation.)

En conclusion

J'espère vous avoir convaincu qu'il vaut la peine de faire des efforts pour rendre nos sites Web plus durables. D'autant plus que dans le processus, nous créons également nos sites Web :

• Plus performant,
• Plus convivial,
• Plus accessible,
• Plus convivial pour les serveurs,
• Mieux optimisé pour les moteurs de recherche.

Une réponse que certaines personnes ont à l'idée d'une conception Web durable - ce qui n'est pas déraisonnable - est qu'elle semble être une très petite concession à la cause environnementale. Bien sûr, l'impact que vous pouvez avoir dépend de la fréquentation des sites Web sur lesquels vous travaillez. Mais en plus d'aider le Web à devenir un peu plus respectueux de l'environnement, la conception Web durable est fondamentalement une conception Web exemplaire.

Cela vaut également la peine de penser à compenser les émissions de carbone que vous ne pouvez pas éviter. La compensation carbone est parfois tournée en dérision, et pour cause. Le principal problème de la compensation est que, généralement, la durée pendant laquelle le carbone sera compensé est assez longue. Par exemple, avec la plantation d'arbres, le chiffre donné pour une quantité de carbone séquestré est généralement basé sur une période de 100 ans. Donc, en termes de réduction des émissions de carbone maintenant, 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 la mise en place de votre propre programme de compensation carbone. Je recommande aussi vivement l'initiative 1% For The Planet. Enfin, si vous êtes propriétaire d'une entreprise et que vous souhaitez rejoindre une alliance d'entreprises qui souhaitent voir une meilleure justice sociale, environnementale et économique, consultez le programme Certified B Corporation.