La page d'accueil s'est allégée

Un site vitrine se juge en quelques secondes, et une partie de ces secondes se passait à télécharger des choses que personne ne regardait. Voici les trois qui coûtaient le plus, mesurées sur la compilation de production et non estimées.

70 Ko de police, pour six faux numéros de facture

La page téléchargeait 244 Ko de polices, soit plus que tout son JavaScript. Sur ce total, 70 Ko de police à chasse fixe étaient réclamés en priorité, avant même que le navigateur sache s’il en aurait besoin. Or le site n’écrit aucun texte dans cette police : les seuls éléments concernés étaient les faux numéros de facture de la maquette décorative du haut de page.

Elle n’est plus demandée en priorité, et cela vaut pour toutes les pages publiques : l’accueil, la connexion, la base de connaissances, les liens de facture partagés. Là où elle sert vraiment, dans l’espace de gestion, elle part comme avant.

Un tiers du budget d'image, pour du bruit à 3 %

Le léger grain de la page était un calque qui se mélangeait au fond. Comme le fond change à chaque pixel de défilement, le navigateur devait refaire ce mélange à chaque image, sur toute la surface visible, pour une texture qui, elle, ne bouge jamais.

Mesure au défilement : 10,5 millisecondes par image avec le mélange, 7,2 sans. Un tiers du temps disponible pour une image fluide, dépensé sur un moucheté à 3 % d’opacité. Le grain est désormais simplement posé par-dessus, et il se voit exactement pareil.

Un chargement différé qui ne différait rien

Quatre blocs de l’accueil étaient déclarés « chargés plus tard ». À la mesure : 28 ressources au chargement, 28 après avoir fait défiler la page entière. Aucune requête n’avait été repoussée, seule la découpe du paquet avait changé.

La maquette animée du téléphone ne se construit maintenant qu’à l’approche de l’écran, et la place qu’elle occupera est réservée d’avance : rien ne saute quand elle arrive.