Traduction automatique de l'original anglais · Voir l'original
Philosophie du site
Introduction
L’informatique a énormément progressé au cours des dernières décennies, mais une chose me sidère : à quel point les choses ont fini par devenir inefficaces. Comme les performances sont si élevées et le stockage si bon marché, les logiciels se sont alourdis de code mort qui ne sert jamais, ou pire de ressources gaspillées. Je trouve que les meilleurs exemples sont ceux où un logiciel moderne met plus de temps à se charger sur un matériel 100X plus puissant que ce qui existait il y a peut-être 2 décennies
Le web est l’un des pires coupables, et le javascript est en cause. Des pages web chargent parfois plus de 10 mégaoctets de contenu juste pour partager un simple article de blog avec quelqu’un. Les images ne sont pas compressées, plusieurs traqueurs lourds tournent en arrière-plan, et de nombreuses fonctionnalités sont chargées sans jamais servir. Cela dégrade l’expérience utilisateur, provoque du trafic réseau inutile, gaspille de l’énergie, et constitue globalement une mauvaise pratique. La sale vérité cachée derrière l’interface soignée de la plupart des pages web
Ma quête avec ce site est donc de prouver jusqu’où on peut aller en gardant la technologie simple.
La technique
Ce site a été construit avec Hugo et sert des fichiers statiques partout où c’est possible
La feuille de style est écrite à la main, et ne contient que les morceaux que ce site utilise réellement. Minifiée et compressée, elle fait environ 5 kb, et la page d’accueil entière, balisage, styles et statistiques compris, arrive en moins de 10 kb
Les statistiques sont assurées par une instance auto-hébergée de Plausible, qui n’ajoute qu'1 kb au navigateur
Les fichiers statiques viennent directement d’un seul petit serveur, compressés en brotli à l’avance pour que rien ne soit compressé à chaque requête
Même les petites fioritures sont faites pour ne presque rien coûter. La couleur qui change avec la saison et l’heure ajoute environ un demi-kilooctet à la feuille de style mise en cache. La lune ajoute à peu près deux cents octets à chaque page. Les deux sont dessinées avec des dégradés plutôt que des images, elles remplacent donc un téléchargement au lieu d’en ajouter un
La couleur d’accentuation ici n’est pas fixe. Elle change avec le calendrier et l’horloge : le mois définit une teinte de base (le printemps tire vers le magenta, l’été vers le vert, l’automne vers l’orange, l’hiver vers le violet) et l’heure de la journée la nuance (jaune chaud à l’aube, aucune à midi, indigo au crépuscule, bleu la nuit). Chaque combinaison est ajustée pour rester lisible, et cela ne coûte aucune requête supplémentaire, seulement la poignée d’octets qui contient la paletteCouleur changeante
Choisissez un mois et une heure de la journée et toute la page se recolore. Recharger la ramène à maintenant
En mode sombre, une lune discrète se tient dans le coin supérieur. Ce n’est pas une image : ce sont deux dégradés et un masque, elle ne coûte donc aucune requête. Sa plénitude suit la vraie phase lunaire, calculée à partir de la date car le mois lunaire est fixé à 29,53 jours, la phase n’est donc qu’une affaire d’arithmétique. Elle décrit un arc au-dessus de l’en-tête avec l’heure, se couche bas dans la page, et s’éclipse pendant quelques heures autour de midi, comme le fait la vraie luneLa lune
Levez les yeux par une nuit dégagée et cela devrait plus ou moins correspondre. La phase et la position réunies représentent environ deux cents octets dans le même script d’en-tête qui définit la couleur
Faites glisser pour la piloter. En mode sombre, la lune discrète du coin suit aussi, et recharger la ramène à maintenant
Optimisations de performance
Garder la page légère n’est que la moitié du travail. Le site est réglé à chaque couche entre le fichier et l’écran : la façon dont les choses sont construites et compressées, la façon dont elles sont mises en cache, et la façon dont la connexion elle-même est établie. Presque tout le travail se fait une seule fois, à l’avance, si bien qu’un visiteur n’en paie presque rien
Chaque fichier texte est compressé une fois à la construction du site, avec les réglages brotli et gzip les plus forts, et les deux copies sont livrées. Le serveur transmet le fichier compressé fini, rien n’est donc compressé à nouveau pour chaque visiteur. Les fichiers de moins de 256 octets environ sont laissés tels quels, puisqu’une copie compressée d’un fichier aussi petit ne ferait que grossir. Les feuilles de style et les scripts sont nommés à partir d’une empreinte de leur propre contenu et mis en cache pendant un an, un navigateur ne les récupère donc qu’une fois et le nom ne change que quand le fichier change. Même l’icône du site est écrite directement dans la page au lieu d’être récupérée comme un fichier séparéConstruction et livraison
Les fichiers viennent d’un seul petit serveur sans CDN devant, la connexion est donc réglée pour rendre cette origine rapide. Elle parle à la fois HTTP/2 et HTTP/3 sur QUIC. Un visiteur de retour reprend la session chiffrée à partir d’un ticket plutôt que de refaire toute la poignée de main, ce qui est de loin la plus grosse économie. Le certificat de sécurité est émis sous deux formes, RSA et ECDSA, chaque navigateur reçoit donc le plus rapide qu’il puisse utiliser. La compression au niveau du proxy est réglée à un niveau intermédiaire plutôt qu’au maximum, et c’est délibéré : le maximum a été mesuré à environ 44 millisecondes par requête pour quelques centaines d’octets, un mauvais compromis sans CDN pour l’absorber, et les fichiers construits à l’avance portent déjà le réglage le plus fort. Un raccourci, le 0-RTT, a été volontairement laissé désactivé, son risque de rejeu ne valant pas la petite économie. Les liens que vous êtes susceptible d’ouvrir ensuite sont discrètement récupérés à l’avance pour que la page suivante apparaisse aussitôtLa connexion
Le css est écrit à la main, et ne contient que les morceaux que le site utilise réellement. Le style de la zone de commentaires vit dans un fichier séparé qui ne se charge que si quelqu’un ouvre les commentaires, il ne gêne donc jamais le premier rendu. La feuille de style du système de commentaires lui-même, environ 14 kb, était récupérée non compressée depuis son serveur à chaque chargement des commentaires ; elle est maintenant repliée dans ce même fichier mis en cache et compressé. Les petites touches comme la flèche de dépliage sont dessinées avec des formes css plutôt que des images intégréesLa feuille de style
Il n’y en a presque pas, et le peu qui existe reste à l’écart. Les statistiques ne se chargent qu’une fois la page terminée, elles ne retardent donc jamais quoi que ce soit que le visiteur voit. L’unique petit script en ligne est placé avant la feuille de style à dessein, pour ne pas avoir à attendre l’arrivée du css. Les commentaires ne se chargent que sur demande, par un clic, sauf si vous êtes déjà connecté. Les icônes sont dessinées une fois dans un sprite caché et référencées depuis là plutôt que répétées à chaque usageJavaScript
Chaque image est préparée en plusieurs tailles et le navigateur choisit celle qui convient à l’écran. Tout ce qui est sous la ligne de flottaison attend d’être approché par le défilement, et chaque image réserve sa largeur et sa hauteur pour que la page ne saute pas pendant le chargement. Les galeries montrent leur première photo tout de suite et chargent le reste au fil du défilement. Les vidéos ne récupèrent que leurs métadonnées jusqu’à la lectureImages
Chaque nouvelle fioriture est tenue à la même règle : elle ne peut ajouter des octets que si elle ajoute quelque chose de réel, et partout où c’est possible elle remplace un téléchargement au lieu d’en ajouter un
Réalité
Je veux juste être clair : ce n’est pas censé être un plaidoyer pour que nous passions tous des heures à nous obséder sur de petits détails. Les entreprises ont besoin de gagner de l’argent ; ce n’est ni nécessaire ni le plus gros problème à régler. J’espère qu’un jour les choses pourront être aussi efficaces que MenuetOS