View transitions et speculation rules : gains mesurés
Ce que le prérendu spéculatif et les transitions de vue apportent réellement, comment mesurer le gain de l'un et le coût de l'autre, et les cas où ils dégradent le site au lieu de l'améliorer.
Par Elias Varen8 min de lectureMembres
Ces deux API arrivent souvent dans la même demande : « on veut que le site ait l'air d'une application ». Elles font pourtant des choses opposées. Les speculation rules rendent la navigation réellement plus rapide, en dépensant du calcul sur des pages que personne ne verra peut-être. Les view transitions n'accélèrent rien ; elles ajoutent une animation, donc du temps, pour que le changement de page soit lisible. La première se juge en millisecondes gagnées contre requêtes gaspillées. La seconde se juge à l'œil, et se paie en millisecondes.
Les traiter ensemble a quand même un sens, parce qu'une transition entre deux documents n'est agréable que si le document suivant est déjà prêt. Sans prérendu, on anime une attente.
Speculation rules : acheter du temps avec du gaspillage
Le principe consiste à déclarer au navigateur quelles navigations sont probables, pour qu'il les prépare avant le clic. Il y a deux niveaux. prefetch télécharge le document. prerender va au bout, charge les sous-ressources, exécute le JavaScript et construit la page dans un onglet invisible. Au clic, le navigateur active cette page au lieu de la charger.
<script type="speculationrules">
{
"prerender": [{
"where": {
"and": [
{ "href_matches": "/guides/*" },
{ "not": { "selector_matches": "[data-no-speculation]" } }
]
},
"eagerness": "moderate"
}]
}
</script>eagerness règle le compromis. immediate spécule dès que la règle est lue ; moderate attend un survol de quelques fractions de seconde ou le début de l'appui ; conservative attend l'appui. Plus la spéculation part tôt, plus le gain est grand, et plus on gaspille.
Seuls les navigateurs Chromium appliquent ces règles. Les autres ignorent le bloc, ce qui en fait une amélioration progressive sans risque de casse, mais aussi un gain limité à une partie du trafic. Et le navigateur garde le dernier mot : il plafonne le nombre de prérendus simultanés et n'en lance aucun en mode économie de données ou de batterie.
À lire ensuite
Toute la rubrique WebWeb
CSS moderne : ce qui remplace votre JavaScript
Ce que les container queries, :has() et l'anchor positioning permettent de supprimer comme JavaScript de mesure et de mise en page, où chacun s'arrête, et comment décider si votre cible de navigateurs vous laisse retirer la bibliothèque.
8 minMembres
Web
La performance comme incident
Quels budgets de performance tiennent en CI et lesquels deviennent du bruit, comment traiter une régression de terrain avec les mêmes règles qu'une panne, et à partir de quel trafic ce dispositif a un sens.
8 minMembres
Web
Scripts tiers : le budget que personne ne tient
Comment mesurer ce que chaque script tiers coûte réellement sur le thread principal, lui attribuer un budget et un propriétaire, et quelles clauses obtenir d'un fournisseur pour que ce budget tienne après la signature.
8 minMembres