Les règles de spéculation, et pourquoi nous ne les mettons pas ici
Le navigateur sait charger la page suivante avant qu'on ait cliqué. La démonstration est spectaculaire. Sur un site déjà rapide, le calcul ne tombe pas du bon côté.
Un petit bloc dans l’en-tête suffit désormais à dire au navigateur : quand le curseur s’approche d’un lien, va chercher la page derrière, et si tu as de la marge, construis-la entièrement à l’avance.
<script type="speculationrules">
{
"prerender": [{
"where": { "href_matches": "/*" },
"eagerness": "moderate"
}]
}
</script>
Le résultat, la première fois qu’on le voit, est déroutant. Le clic n’a plus de latence du tout. Pas « rapide » : instantané, parce que la page était déjà construite, invisible, dans un onglet fantôme. C’est l’une des rares nouveautés du web dont un visiteur non technicien remarque l’effet sans qu’on le lui signale.
Nous ne l’avons pas mise sur ce site, et voici le raisonnement complet, y compris ce qui pourrait le renverser.
Ce que cela dépense, et chez qui
Précharger, c’est aller chercher le document. Préconstruire, c’est autre chose : le navigateur exécute réellement la page, dans son coin, avec tout ce qu’elle contient.
La facture n’est pas payée par le serveur, elle est payée par l’appareil du visiteur. Données mobiles consommées pour des pages qu’il n’ouvrira pas, processeur mobilisé, batterie. Sur une connexion mesurée ou un téléphone d’entrée de gamme, la promesse s’inverse : on a rendu instantanée une page sur quatre en faisant payer les trois autres.
Le réglage eagerness sert exactement à cela, et il mérite d’être lu avant d’être copié. immediate préconstruit tout ce qui est déclaré, tout de suite. moderate attend un survol d’environ deux cents millisecondes. conservative attend que le bouton de la souris soit enfoncé, ce qui ne gagne que quelques dizaines de millisecondes mais ne gaspille jamais rien. La valeur par défaut n’est pas celle qu’on veut : le survol d’un menu, sur un site à cinquante liens, déclenche une longue série de chargements dont presque aucun ne servira.
Ce que cela dit à un tiers
Une page préconstruite est une page chargée. Ses appels partent, ses mesures d’audience comptent une visite qui n’a pas eu lieu, ses cookies s’écrivent.
Le web dispose d’un correctif pour cela, l’API Document.prerendering, qui permet à un script de savoir qu’il tourne dans un onglet fantôme et d’attendre. Encore faut-il que chaque script embarqué l’utilise. Sur un site qui charge une mesure d’audience, une carte, un fil de réseau social et un module de consentement, c’est-à-dire sur la plupart des sites, l’hypothèse est douteuse.
Nous fabriquons des sites qui n’appellent aucun tiers. Le problème ne se pose donc pas chez nous, et c’est précisément ce qui affaiblit l’argument inverse : sur un site sans tiers, il n’y a plus grand-chose à gagner non plus.
Ce que cela apporte ici : rien de mesurable
Une page de ce site pèse un peu plus de six kilo-octets de HTML, cinq de CSS, aucun JavaScript, et elle est servie depuis un serveur en Suisse. Le temps de navigation d’une page à l’autre est déjà sous le seuil où l’œil perçoit une attente.
Préconstruire ferait passer une attente imperceptible à une attente nulle, en échange d’une consommation de données bien réelle sur l’appareil du visiteur. Ce n’est pas un arbitrage difficile.
Et un dernier point, moins discutable
Les règles de spéculation ne fonctionnent aujourd’hui que dans les navigateurs fondés sur Chromium. MDN le dit sans détour : la fonctionnalité n’appartient pas au socle commun, parce qu’elle manque à certains des navigateurs les plus utilisés. WebKit y travaille, Firefox non.
Cela ne l’interdit pas : c’est une amélioration progressive au sens strict, ceux qui ne la comprennent pas ne perdent rien. Mais cela change la question. On ne se demande plus « est-ce que je veux ce gain », on se demande « est-ce que je veux ce gain pour une partie de mes visiteurs, au prix d’une consommation réelle sur leurs appareils ».
Là où nous la poserions
Sur une boutique, un catalogue, une documentation : beaucoup de pages, une navigation en profondeur, un visiteur qui enchaîne. Avec prefetch plutôt que prerender, et eagerness en moderate. Le gain y est net et la dépense reste bornée au document.
Sur un site de dix pages déjà servies en quelques millisecondes, comme les titres de notre catalogue, la réponse honnête est qu’il n’y a rien à gagner. Nous préférons l’écrire que la déployer pour pouvoir dire que nous l’avons déployée.
Qui écrit ces notes
Ce journal est tenu par l’atelier qui conçoit et entretient les sites de la maison. Tout ce qui est décrit ici, la Search Console, le maillage, la fiche d’établissement, fait partie du travail livré avec un site : si vous préférez que quelqu’un s’en charge, c’est précisément le métier.