La feuille de style de ce site est posée en clair dans le <head> de chaque page, par une ligne de configuration :

build: { inlineStylesheets: 'always' }

Le CSS bloque le rendu par nature : servi en fichier séparé, il coûte un aller-retour réseau complet avant le premier pixel, mesuré à environ 290 ms sur mobile 4G. En clair dans le HTML, il arrive avec lui. On paie environ 20 Ko gzip par page au lieu d’un fichier mis en cache entre les pages, et c’est le bon calcul pour un site dont la grande majorité des visites ne voit qu’une page.

Ce délai avant le premier pixel, Google le mesure et le classe. Un visiteur le sent sans le nommer : un site rapide inspire confiance, un site lent semble bâclé avant le premier mot.

La partie qui se décide avant d’écrire

Un site lent l’est par construction : trop de scripts, un rendu qui attend le serveur, des cadres qui chargent d’autres cadres. Compresser trois images à la fin ne rattrape pas une architecture.

Je pars donc du statique : le HTML arrive prêt, sans rien attendre. EVA CSS gère la mise à l’échelle en CSS pur, avec clamp() plutôt qu’une cascade de paliers : tout ce site tient sur une seule media query de largeur. Le peu de JavaScript restant se charge quand il faut, et l’admin n’est même pas téléchargé pour un visiteur ordinaire, faute de session.

La cascade d'un site lent et une page qui arrive prête, sur un même axe de chargement Deux bandes horizontales tracées depuis la même origine, à gauche. En haut, quatre blocs de même largeur mis bout à bout : attend le serveur, trop de scripts, des cadres, puis, une ligne plus bas et démarrant là où le troisième finit, d'autres cadres. Un trait vertical en accent tombe à la fin de ce quatrième bloc, et les mots « la page est vue » se lisent juste avant lui. En bas, un seul bloc de la même largeur, appelé « d'un coup », et le même trait vertical en accent tombe à sa fin, trois blocs plus tôt, avec les mêmes mots « la page est vue » juste après lui. Sous les deux bandes, un axe fléché vers la droite porte le mot chargement et ne comporte aucune graduation. UN SITE LENT PAR CONSTRUCTION attend le serveur trop de scripts des cadres d'autres cadres la page est vue LE HTML ARRIVE PRÊT SANS RIEN ATTENDRE d'un coup la page est vue LE CHARGEMENT
Ce qui sépare les deux repères n'est pas un réglage, ce sont trois blocs de plus.

Enlever plutôt qu’ajouter

Chaque dépendance, chaque script a un coût, et le total finit toujours par se voir. La bonne question, c’est « qu’est-ce que je retire ».

Cinq décisions le long du projet, et la hauteur de leur effet Un axe horizontal fléché vers la droite, entre deux étiquettes : à gauche « j'ai décidé avant », à droite « j'ai optimisé après ». Cinq barres verticales de hauteurs décroissantes sont posées sur cet axe, chacune à sa place. La première, la plus haute, est tracée en accent et porte le mot statique ; suivent EVA CSS, ce que je retire, quand il faut, et tout à droite, presque plate, trois images. Un axe vertical à gauche porte le mot effet et ne comporte aucune graduation. J'AI DÉCIDÉ AVANT J'AI OPTIMISÉ APRÈS L'EFFET le statique EVA CSS ce que je retire quand il faut trois images
Plus la décision est tardive, moins il lui reste de vitesse à changer.

Ce qu’on ne voit qu’en mesurant

Les scènes 3D de ce site paraissaient légères. Mesurées dans le navigateur, elles recopiaient une teinte fixe sur chaque sommet et la renvoyaient à la carte graphique à chaque image. Le trafic est passé de 5 Mo/s à 30 ko/s sur une page, de 3,3 Mo/s à 660 ko/s sur une autre, sans qu’un seul pixel change à l’écran. Sur la première, des points d’un pixel étaient dessinés comme des sphères de 468 triangles : la charge est tombée de 74 918 sommets par image à 41 222.