Aller au contenu
View transitions et speculation rules : gains mesurésLecture : 0 %

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.

html
<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.

View transitions et speculation rules : gains mesurés · Deepstack