Parvenir à une navigation instantanée à l'aide de l'API Speculation Rules

1. Introduction

Une démo interactive et un atelier de programmation pour découvrir comment parvenir à une navigation instantanée en effectuant un prérendu à l'aide de l'API Speculation Rules.

La durée de cet atelier de programmation est estimée à 30 minutes. Le temps restant est indiqué en haut de l'écran.

Prérequis

  • Connaissances de base en HTML et JavaScript

Objectifs de l'atelier

  • Ajouter le chargement spéculatif à un site Web
  • Déboguer les problèmes de spéculation à l'aide des outils pour les développeurs Chrome

Ce dont vous avez besoin

  • Chrome 123 ou version ultérieure
  • Une plate-forme permettant d'exécuter ou de publier un site Web (Glitch est utilisé dans notre exemple, mais n'importe quel service similaire ou un serveur Web exécuté localement conviendra également).

Vous êtes prêts ? Alors allons-y !

2. Configurer votre environnement

La première étape de cette démo consiste à créer sur Glitch un site de test composé de trois pages :

  • La page 1 correspondant à la page d'accueil, avec des liens vers les deuxième et troisième pages.
  • La page 2 avec un script de blocage permettant de simuler une page qui se charge lentement. Vous allez également enregistrer dans la console le temps LCP (Largest Contentful Paint), qui désigne une mesure du temps de chargement de la page.
  • La page 3 proche de la page 2, mais avec en plus une image LCP. La démo aura ainsi deux liens.

Si vous préférez utiliser votre propre site de démonstration, vous pouvez y effectuer les étapes équivalentes.

Pour utiliser Glitch, vous aurez besoin d'un compte Glitch. Vous pouvez également diffuser ces pages depuis un serveur de développement local, ou utiliser un autre service ou une autre plate-forme si vous savez comment procéder (ces options ne sont pas traitées ici).

Pour créer votre site, remixez le site simplifié sur Glitch.

Le site simplifié devrait se présenter comme suit :

Site Hello World simplifié sur Glitch

Glitch attribue à votre projet un nom aléatoire (open-chalk-asparagus.glitch.me), lequel apparaît en tant que sous-domaine de glitch.me (https://open-chalk-asparagus.glitch.me/ dans cet exemple).

Vous pouvez sélectionner des fichiers et en ajouter dans la liste à gauche, et modifier le contenu correspondant à droite. Pour obtenir un aperçu dans un volet latéral ou dans une nouvelle fenêtre, cliquez sur le bouton Preview situé en bas de l'écran.

Votre environnement est désormais configuré. Vous pouvez passer à l'étape suivante pour créer le site de démonstration.

3. Créer le site de démonstration

Remplacez le contenu du fichier index.html de façon à créer une page de base comportant quelques liens :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">
    <title>Instant Loading Demo!</title>
  </head>
  <body>
    <h1>Instant Loading Demo!</h1>
    <p>This is a demo of the Speculation Rules API.</p>
    <ul>
      <li><a href="./page2.html">Page 2</a></li>
      <li><a href="./page3.html">Page 3</a></li>
    </ul>
  </body>
</html>

Dans Glitch, créez la page2.html en cliquant sur le bouton Files + (Fichiers +) situé à gauche, puis tapez page2.html et cliquez sur Add this file (Ajouter ce fichier).

Copiez et collez le contenu ci-dessous dans la page2.html :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">

    <title>Page 2</title>

    <!-- Load script as a classic script to allow it to be blocking -->
    <script src="./script.js"></script>

  </head>
  <body>
    <h1>This is page 2</h1>
    <h2>This is a demo of the Speculation Rules API.</h2>
    <button onclick="history.back();">Go back</button>
  </body>
</html>

Créez une page3.html en utilisant le contenu suivant (qui est à peu près identique à celui la page 2, si ce n'est que nous y avons ajouté une image) :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🚀</text></svg>">

    <title>Page 3</title>

    <!-- Load script as a classic script to allow it to be blocking -->
    <script src="./script.js"></script>

  </head>
  <body>
    <h1>This is page 3</h1>
    <p>This is a demo of the Speculation Rules API.</p>
    <button onclick="history.back();">Go back</button>
    <img src="./image.svg" alt="LCP image">
  </body>
</html>

La page 3 fait référence à un fichier image.svg. Créez-la avec le contenu suivant :

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0.0 0.0 384.0 288.0" fill="none" stroke="none" stroke-linecap="square" stroke-miterlimit="10"><clipPath id="p.0"><path d="m0 0l384.0 0l0 288.0l-384.0 0l0 -288.0z" clip-rule="nonzero"/></clipPath><g clip-path="url(#p.0)"><path fill="#000000" fill-opacity="0.0" d="m0 0l384.0 0l0 288.0l-384.0 0z" fill-rule="evenodd"/><path fill="#000000" fill-opacity="0.0" d="m47.99836 24.0l288.0 0l0 96.0l-288.0 0z" fill-rule="evenodd"/><path fill="#2979ff" d="m115.79305 40.46437l11.875 0l0 51.75l26.671867 0l0 11.265625l-38.546867 0l0 -63.015625zm76.99615 64.421875q-9.15625 0 -16.71875 -4.34375q-7.5625 -4.359375 -11.921875 -11.890625q-4.359375 -7.53125 -4.359375 -16.671875q0 -9.15625 4.359375 -16.671875q4.359375 -7.53125 11.921875 -11.890625q7.5625 -4.359375 16.71875 -4.359375q14.25 0 23.578125 10.296875l-8.359375 8.09375q-6.0625 -7.125 -15.125 -7.125q-5.90625 0 -10.75 2.6875q-4.828125 2.6875 -7.609375 7.625q-2.765625 4.921875 -2.765625 11.34375q0 6.421875 2.765625 11.359375q2.78125 4.921875 7.609375 7.609375q4.84375 2.671875 10.75 2.671875q9.9375 0 16.625 -8.265625l8.453125 8.0q-4.671875 5.640625 -11.046875 8.59375q-6.375 2.9375 -14.125 2.9375zm36.17192 -64.421875l22.171875 0q5.984375 0 10.90625 2.515625q4.9375 2.515625 7.75 7.046875q2.8125 4.53125 2.8125 10.328125q0 5.8125 -2.8125 10.390625q-2.8125 4.578125 -7.75 7.09375q-4.921875 2.5 -10.90625 2.5l-10.296875 0l0 23.140625l-11.875 0l0 -63.015625zm22.53125 28.609375q4.390625 0 6.890625 -2.546875q2.515625 -2.5625 2.515625 -6.171875q0 -3.609375 -2.515625 -6.109375q-2.5 -2.515625 -6.890625 -2.515625l-10.65625 0l0 17.34375l10.65625 0z" fill-rule="nonzero"/><path fill="#0cce6b" d="m43.2 177.60136l96.0 0l0 38.393692l-96.0 0z" fill-rule="evenodd"/><path fill="#000000" d="m77.08874 201.5057q-1.234375 0 -2.265625 -0.578125q-1.03125 -0.59375 -1.640625 -1.609375q-0.59375 -1.03125 -0.59375 -2.296875q0 -1.265625 0.59375 -2.28125q0.609375 -1.03125 1.640625 -1.609375q1.03125 -0.59375 2.265625 -0.59375q0.984375 0 1.8125 0.34375q0.828125 0.34375 1.390625 0.96875l-0.90625 0.921875q-0.875 -0.984375 -2.296875 -0.984375q-0.84375 0 -1.578125 0.40625q-0.734375 0.390625 -1.171875 1.140625q-0.421875 0.734375 -0.421875 1.6875q0 0.953125 0.4375 1.703125q0.4375 0.734375 1.15625 1.140625q0.734375 0.390625 1.578125 0.390625q1.359375 0 2.21875 -0.84375q0.265625 -0.265625 0.453125 -0.671875q0.1875 -0.40625 0.265625 -0.90625l-2.953125 0l0 -1.15625l4.171875 0q0.078125 0.40625 0.078125 0.6875q0 0.828125 -0.265625 1.5625q-0.25 0.734375 -0.796875 1.296875q-0.578125 0.625 -1.390625 0.953125q-0.796875 0.328125 -1.78125 0.328125zm9.765564 0q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm9.864075 1.25q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm5.968445 -7.53125l2.75 0q1.328125 0 2.3125 0.546875q1.0 0.53125 1.53125 1.515625q0.53125 0.96875 0.53125 2.234375q0 1.265625 -0.53125 2.25q-0.53125 0.96875 -1.53125 1.515625q-0.984375 0.53125 -2.3125 0.53125l-2.75 0l0 -8.59375zm2.71875 7.34375q1.453125 0 2.265625 -0.8125q0.8125 -0.8125 0.8125 -2.234375q0 -1.421875 -0.8125 -2.234375q-0.8125 -0.8125 -2.265625 -0.8125l-1.390625 0l0 6.09375l1.390625 0z" fill-rule="nonzero"/><path fill="#ffa400" d="m139.2 177.60132l105.60631 0l0 38.393692l-105.60631 0z" fill-rule="evenodd"/><path fill="#000000" d="m173.98776 185.72441l1.5625 0l3.890625 6.3125l0.0625 0l-0.0625 -1.65625l0 -4.65625l1.3125 0l0 8.59375l-1.375 0l-4.078125 -6.640625l-0.078125 0l0.078125 1.65625l0 4.984375l-1.3125 0l0 -8.59375zm8.700058 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l2.75 0q1.328125 0 2.3125 0.546875q1.0 0.53125 1.53125 1.515625q0.53125 0.96875 0.53125 2.234375q0 1.265625 -0.53125 2.25q-0.53125 0.96875 -1.53125 1.515625q-0.984375 0.53125 -2.3125 0.53125l-2.75 0l0 -8.59375zm2.71875 7.34375q1.453125 0 2.265625 -0.8125q0.8125 -0.8125 0.8125 -2.234375q0 -1.421875 -0.8125 -2.234375q-0.8125 -0.8125 -2.265625 -0.8125l-1.390625 0l0 6.09375l1.390625 0zm8.42131 1.4375q-1.0625 0 -1.921875 -0.625q-0.84375 -0.625 -1.1875 -1.75l1.25 -0.5q0.1875 0.71875 0.671875 1.171875q0.5 0.453125 1.203125 0.453125q0.640625 0 1.09375 -0.328125q0.453125 -0.34375 0.453125 -0.921875q0 -0.546875 -0.40625 -0.890625q-0.390625 -0.359375 -1.359375 -0.703125l-0.546875 -0.1875q-0.875 -0.3125 -1.453125 -0.859375q-0.578125 -0.5625 -0.578125 -1.484375q0 -0.640625 0.34375 -1.171875q0.34375 -0.546875 0.953125 -0.859375q0.625 -0.3125 1.40625 -0.3125q1.109375 0 1.78125 0.546875q0.671875 0.546875 0.90625 1.21875l-1.1875 0.515625q-0.109375 -0.4375 -0.5 -0.75q-0.375 -0.3125 -1.0 -0.3125q-0.578125 0 -1.0 0.3125q-0.40625 0.3125 -0.40625 0.796875q0 0.4375 0.359375 0.734375q0.375 0.296875 1.140625 0.5625l0.5625 0.1875q1.09375 0.390625 1.6875 1.0q0.609375 0.609375 0.609375 1.625q0 0.84375 -0.421875 1.421875q-0.421875 0.5625 -1.09375 0.84375q-0.671875 0.265625 -1.359375 0.265625zm3.431305 -0.1875l0 0z" fill-rule="nonzero"/><path fill="#000000" d="m150.18561 199.72441l1.328125 0l0 8.59375l-1.328125 0l0 -8.59375zm3.2520294 0l1.78125 0l2.5 6.546875l0.078125 0l2.515625 -6.546875l1.78125 0l0 8.59375l-1.296875 0l0 -4.859375l0.078125 -1.53125l-0.078125 0l-2.515625 6.390625l-1.03125 0l-2.515625 -6.390625l-0.0625 0l0.0625 1.53125l0 4.859375l-1.296875 0l0 -8.59375zm10.596069 0l2.953125 0q0.765625 0 1.40625 0.34375q0.640625 0.328125 1.015625 0.9375q0.390625 0.59375 0.390625 1.34375q0 0.765625 -0.390625 1.359375q-0.375 0.59375 -1.015625 0.9375q-0.640625 0.328125 -1.40625 0.328125l-1.625 0l0 3.34375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.671875 0 1.0625 -0.40625q0.40625 -0.421875 0.40625 -0.984375q0 -0.546875 -0.40625 -0.953125q-0.390625 -0.421875 -1.0625 -0.421875l-1.65625 0l0 2.765625l1.65625 0zm4.131668 -4.015625l3.015625 0q0.78125 0 1.40625 0.34375q0.640625 0.328125 1.0 0.9375q0.359375 0.59375 0.359375 1.34375q0 0.875 -0.5625 1.546875q-0.546875 0.65625 -1.390625 0.875l-0.015625 0.0625l2.375 3.40625l0 0.078125l-1.53125 0l-2.28125 -3.375l-1.046875 0l0 3.375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.625 0 1.046875 -0.390625q0.421875 -0.40625 0.421875 -1.0q0 -0.5625 -0.390625 -0.96875q-0.390625 -0.421875 -1.03125 -0.421875l-1.703125 0l0 2.78125l1.65625 0zm8.351303 4.765625q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm4.811569 -7.53125l1.4375 0l1.9375 5.71875l0.3125 0.96875l0.0625 0l0.328125 -0.96875l2.03125 -5.71875l1.4375 0l-3.140625 8.59375l-1.359375 0l-3.046875 -8.59375zm8.680923 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l1.78125 0l2.5 6.546875l0.078125 0l2.515625 -6.546875l1.78125 0l0 8.59375l-1.296875 0l0 -4.859375l0.078125 -1.53125l-0.078125 0l-2.515625 6.390625l-1.03125 0l-2.515625 -6.390625l-0.0625 0l0.0625 1.53125l0 4.859375l-1.296875 0l0 -8.59375zm10.596069 0l5.21875 0l0 1.25l-3.890625 0l0 2.421875l3.5 0l0 1.25l-3.5 0l0 2.421875l3.890625 0l0 1.25l-5.21875 0l0 -8.59375zm6.864044 0l1.5625 0l3.890625 6.3125l0.0625 0l-0.0625 -1.65625l0 -4.65625l1.3125 0l0 8.59375l-1.375 0l-4.078125 -6.640625l-0.078125 0l0.078125 1.65625l0 4.984375l-1.3125 0l0 -8.59375zm10.450058 1.25l-2.40625 0l0 -1.25l6.125 0l0 1.25l-2.390625 0l0 7.34375l-1.328125 0l0 -7.34375z" fill-rule="nonzero"/><path fill="#ff4e42" d="m243.84 177.6l96.0 0l0 38.393692l-96.0 0z" fill-rule="evenodd"/><path fill="#000000" d="m275.72064 192.7231l2.953125 0q0.765625 0 1.40625 0.34375q0.640625 0.328125 1.015625 0.9375q0.390625 0.59375 0.390625 1.34375q0 0.765625 -0.390625 1.359375q-0.375 0.59375 -1.015625 0.9375q-0.640625 0.328125 -1.40625 0.328125l-1.625 0l0 3.34375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.671875 0 1.0625 -0.40625q0.40625 -0.421875 0.40625 -0.984375q0 -0.546875 -0.40625 -0.953125q-0.390625 -0.421875 -1.0625 -0.421875l-1.65625 0l0 2.765625l1.65625 0zm8.039276 4.765625q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm9.864075 1.25q-1.234375 0 -2.265625 -0.59375q-1.015625 -0.609375 -1.59375 -1.625q-0.578125 -1.03125 -0.578125 -2.265625q0 -1.234375 0.578125 -2.25q0.578125 -1.03125 1.59375 -1.625q1.03125 -0.609375 2.265625 -0.609375q1.25 0 2.265625 0.609375q1.015625 0.59375 1.59375 1.625q0.59375 1.015625 0.59375 2.25q0 1.234375 -0.59375 2.265625q-0.578125 1.015625 -1.59375 1.625q-1.015625 0.59375 -2.265625 0.59375zm0 -1.25q0.875 0 1.578125 -0.40625q0.71875 -0.421875 1.125 -1.15625q0.421875 -0.734375 0.421875 -1.671875q0 -0.9375 -0.421875 -1.671875q-0.40625 -0.734375 -1.125 -1.140625q-0.703125 -0.421875 -1.578125 -0.421875q-0.859375 0 -1.578125 0.421875q-0.703125 0.40625 -1.125 1.140625q-0.40625 0.734375 -0.40625 1.671875q0 0.9375 0.40625 1.671875q0.421875 0.734375 1.125 1.15625q0.71875 0.40625 1.578125 0.40625zm5.968445 -7.53125l3.015625 0q0.78125 0 1.40625 0.34375q0.640625 0.328125 1.0 0.9375q0.359375 0.59375 0.359375 1.34375q0 0.875 -0.5625 1.546875q-0.546875 0.65625 -1.390625 0.875l-0.015625 0.0625l2.375 3.40625l0 0.078125l-1.53125 0l-2.28125 -3.375l-1.046875 0l0 3.375l-1.328125 0l0 -8.59375zm2.984375 4.015625q0.625 0 1.046875 -0.390625q0.421875 -0.40625 0.421875 -1.0q0 -0.5625 -0.390625 -0.96875q-0.390625 -0.421875 -1.03125 -0.421875l-1.703125 0l0 2.78125l1.65625 0z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m196.8 240.0l95.999985 0l0 28.409454l-95.999985 0z" fill-rule="evenodd"/><path fill="#434343" d="m223.49895 257.87723l-5.15625 0l0 -1.34375l5.015625 -7.40625l1.84375 0l0 7.140625l1.390625 0l0 1.609375l-1.390625 0l0 2.1875l-1.703125 0l0 -2.1875zm0 -1.609375l0 -4.609375l-0.09375 0l-3.125 4.609375l3.21875 0zm5.9627686 3.890625q-0.515625 0 -0.875 -0.34375q-0.34375 -0.359375 -0.34375 -0.859375q0 -0.484375 0.34375 -0.828125q0.359375 -0.359375 0.875 -0.359375q0.515625 0 0.859375 0.34375q0.34375 0.34375 0.34375 0.84375q0 0.5 -0.34375 0.859375q-0.34375 0.34375 -0.859375 0.34375zm7.3638763 0.15625q-1.34375 0 -2.359375 -0.75q-1.015625 -0.75 -1.578125 -2.046875q-0.546875 -1.3125 -0.546875 -2.921875q0 -1.625 0.546875 -2.921875q0.5625 -1.3125 1.578125 -2.0625q1.015625 -0.75 2.359375 -0.75q1.34375 0 2.359375 0.75q1.03125 0.75 1.578125 2.0625q0.5625 1.296875 0.5625 2.921875q0 1.609375 -0.5625 2.921875q-0.546875 1.296875 -1.578125 2.046875q-1.015625 0.75 -2.359375 0.75zm0 -1.625q0.84375 0 1.46875 -0.53125q0.625 -0.546875 0.953125 -1.46875q0.328125 -0.921875 0.328125 -2.09375q0 -1.171875 -0.328125 -2.109375q-0.328125 -0.9375 -0.953125 -1.453125q-0.625 -0.53125 -1.46875 -0.53125q-0.828125 0 -1.453125 0.53125q-0.609375 0.515625 -0.9375 1.453125q-0.328125 0.9375 -0.328125 2.109375q0 1.171875 0.328125 2.09375q0.328125 0.921875 0.9375 1.46875q0.625 0.53125 1.453125 0.53125zm5.294403 1.375l0 0zm7.712387 0.25q-1.390625 0 -2.296875 -0.59375q-0.90625 -0.609375 -1.265625 -1.59375l1.546875 -0.671875q0.28125 0.65625 0.8125 1.0q0.53125 0.34375 1.203125 0.34375q0.6875 0 1.140625 -0.25q0.46875 -0.25 0.46875 -0.734375q0 -0.453125 -0.390625 -0.71875q-0.390625 -0.265625 -1.21875 -0.453125l-0.96875 -0.21875q-0.984375 -0.25 -1.625 -0.859375q-0.640625 -0.609375 -0.640625 -1.53125q0 -0.703125 0.421875 -1.25q0.421875 -0.546875 1.140625 -0.84375q0.71875 -0.296875 1.5625 -0.296875q1.15625 0 2.0 0.453125q0.859375 0.453125 1.25 1.3125l-1.5 0.671875q-0.484375 -0.96875 -1.734375 -0.96875q-0.609375 0 -1.015625 0.25q-0.40625 0.25 -0.40625 0.640625q0 0.71875 1.25 1.03125l1.171875 0.296875q1.203125 0.296875 1.8125 0.90625q0.625 0.609375 0.625 1.515625q0 0.765625 -0.4375 1.34375q-0.4375 0.578125 -1.21875 0.90625q-0.765625 0.3125 -1.6875 0.3125zm8.654007 0q-1.1875 0 -2.140625 -0.546875q-0.95310974 -0.5625 -1.4843597 -1.546875q-0.53125 -0.984375 -0.53125 -2.21875q0 -1.171875 0.515625 -2.171875q0.515625 -1.0 1.4374847 -1.59375q0.9375 -0.59375 2.109375 -0.59375q1.234375 0 2.125 0.546875q0.890625 0.53125 1.359375 1.484375q0.484375 0.9375 0.484375 2.140625q0 0.3125 -0.03125 0.53125l-6.3125 0q0.125 1.171875 0.84375 1.8125q0.71875 0.625 1.671875 0.625q0.78125 0 1.34375 -0.359375q0.5625 -0.359375 0.90625 -0.953125l1.421875 0.6875q-0.5625 1.015625 -1.5 1.59375q-0.921875 0.5625 -2.21875 0.5625zm2.15625 -5.265625q-0.03125 -0.4375 -0.28125 -0.890625q-0.25 -0.453125 -0.75 -0.734375q-0.484375 -0.296875 -1.203125 -0.296875q-0.859375 0 -1.46875 0.53125q-0.59375 0.515625 -0.8125 1.390625l4.515625 0zm7.1706543 5.265625q-1.21875 0 -2.1875 -0.546875q-0.953125 -0.5625 -1.484375 -1.546875q-0.53125 -0.984375 -0.53125 -2.234375q0 -1.25 0.53125 -2.234375q0.53125 -0.984375 1.484375 -1.546875q0.96875 -0.5625 2.1875 -0.5625q1.34375 0 2.28125 0.609375q0.9375 0.59375 1.359375 1.65625l-1.578125 0.640625q-0.578125 -1.3125 -2.09375 -1.3125q-0.671875 0 -1.25 0.34375q-0.5625 0.34375 -0.890625 0.96875q-0.328125 0.625 -0.328125 1.4375q0 0.8125 0.328125 1.4375q0.328125 0.625 0.890625 0.96875q0.578125 0.34375 1.25 0.34375q0.765625 0 1.3125 -0.34375q0.5625 -0.34375 0.859375 -1.0l1.5625 0.671875q-0.484375 1.046875 -1.4375 1.65625q-0.9375 0.59375 -2.265625 0.59375z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m91.2 240.39362l96.0 0l0 28.409454l-96.0 0z" fill-rule="evenodd"/><path fill="#434343" d="m114.02157 258.83334q3.25 -3.234375 4.0 -4.078125q0.703125 -0.734375 0.953125 -1.1875q0.265625 -0.46875 0.265625 -1.09375q0 -0.640625 -0.484375 -1.109375q-0.484375 -0.46875 -1.328125 -0.46875q-0.765625 0 -1.234375 0.4375q-0.46875 0.4375 -0.65625 1.03125l-1.546875 -0.640625q0.15625 -0.578125 0.59375 -1.140625q0.453125 -0.5625 1.1875 -0.9375q0.734375 -0.390625 1.6875 -0.390625q1.046875 0 1.84375 0.4375q0.796875 0.421875 1.234375 1.15625q0.453125 0.71875 0.453125 1.578125q0 1.734375 -1.75 3.46875q-0.703125 0.703125 -1.578125 1.59375q-0.90625 0.875 -1.359375 1.359375l0.015625 0.046875l4.796875 0l0 1.5625l-7.09375 0l0 -1.625zm9.984146 1.71875q-0.515625 0 -0.875 -0.34375q-0.34375 -0.359375 -0.34375 -0.859375q0 -0.484375 0.34375 -0.828125q0.359375 -0.359375 0.875 -0.359375q0.515625 0 0.859375 0.34375q0.34375 0.34375 0.34375 0.84375q0 0.5 -0.34375 0.859375q-0.34375 0.34375 -0.859375 0.34375zm6.598259 0.15625q-0.8125 0 -1.59375 -0.328125q-0.78125 -0.328125 -1.3750076 -0.984375q-0.578125 -0.671875 -0.8125 -1.640625l1.5468826 -0.609375q0.234375 0.890625 0.796875 1.421875q0.5625 0.53125 1.421875 0.53125q0.90625 0 1.5 -0.578125q0.609375 -0.59375 0.609375 -1.5q0 -0.921875 -0.59375 -1.515625q-0.578125 -0.59375 -1.5 -0.59375q-0.53125 0 -0.984375 0.234375q-0.453125 0.21875 -0.75 0.625l-1.6875076 -0.75l0.65625 -5.5l5.9062576 0l0 1.5625l-4.484375 0l-0.421875 2.9375l0.09375 0.015625q0.875 -0.6875 2.0 -0.6875q0.9375 0 1.734375 0.46875q0.796875 0.46875 1.265625 1.296875q0.484375 0.828125 0.484375 1.890625q0 1.046875 -0.5 1.90625q-0.484375 0.84375 -1.359375 1.328125q-0.875 0.46875 -1.953125 0.46875zm4.684021 -0.25l0 0zm7.712387 0.25q-1.390625 0 -2.296875 -0.59375q-0.90625 -0.609375 -1.265625 -1.59375l1.546875 -0.671875q0.28125 0.65625 0.8125 1.0q0.53125 0.34375 1.203125 0.34375q0.6875 0 1.140625 -0.25q0.46875 -0.25 0.46875 -0.734375q0 -0.453125 -0.390625 -0.71875q-0.390625 -0.265625 -1.21875 -0.453125l-0.96875 -0.21875q-0.984375 -0.25 -1.625 -0.859375q-0.640625 -0.609375 -0.640625 -1.53125q0 -0.703125 0.421875 -1.25q0.421875 -0.546875 1.140625 -0.84375q0.71875 -0.296875 1.5625 -0.296875q1.15625 0 2.0 0.453125q0.859375 0.453125 1.25 1.3125l-1.5 0.671875q-0.484375 -0.96875 -1.734375 -0.96875q-0.609375 0 -1.015625 0.25q-0.40625 0.25 -0.40625 0.640625q0 0.71875 1.25 1.03125l1.171875 0.296875q1.203125 0.296875 1.8125 0.90625q0.625 0.609375 0.625 1.515625q0 0.765625 -0.4375 1.34375q-0.4375 0.578125 -1.21875 0.90625q-0.765625 0.3125 -1.6875 0.3125zm8.654022 0q-1.1875 0 -2.140625 -0.546875q-0.953125 -0.5625 -1.484375 -1.546875q-0.53125 -0.984375 -0.53125 -2.21875q0 -1.171875 0.515625 -2.171875q0.515625 -1.0 1.4375 -1.59375q0.9375 -0.59375 2.109375 -0.59375q1.234375 0 2.125 0.546875q0.890625 0.53125 1.359375 1.484375q0.484375 0.9375 0.484375 2.140625q0 0.3125 -0.03125 0.53125l-6.3125 0q0.125 1.171875 0.84375 1.8125q0.71875 0.625 1.671875 0.625q0.78125 0 1.34375 -0.359375q0.5625 -0.359375 0.90625 -0.953125l1.421875 0.6875q-0.5625 1.015625 -1.5 1.59375q-0.921875 0.5625 -2.21875 0.5625zm2.15625 -5.265625q-0.03125 -0.4375 -0.28125 -0.890625q-0.25 -0.453125 -0.75 -0.734375q-0.484375 -0.296875 -1.203125 -0.296875q-0.859375 0 -1.46875 0.53125q-0.59375 0.515625 -0.8125 1.390625l4.515625 0zm7.170639 5.265625q-1.21875 0 -2.1875 -0.546875q-0.953125 -0.5625 -1.484375 -1.546875q-0.53125 -0.984375 -0.53125 -2.234375q0 -1.25 0.53125 -2.234375q0.53125 -0.984375 1.484375 -1.546875q0.96875 -0.5625 2.1875 -0.5625q1.34375 0 2.28125 0.609375q0.9375 0.59375 1.359375 1.65625l-1.578125 0.640625q-0.578125 -1.3125 -2.09375 -1.3125q-0.671875 0 -1.25 0.34375q-0.5625 0.34375 -0.890625 0.96875q-0.328125 0.625 -0.328125 1.4375q0 0.8125 0.328125 1.4375q0.328125 0.625 0.890625 0.96875q0.578125 0.34375 1.25 0.34375q0.765625 0 1.3125 -0.34375q0.5625 -0.34375 0.859375 -1.0l1.5625 0.671875q-0.484375 1.046875 -1.4375 1.65625q-0.9375 0.59375 -2.265625 0.59375z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m139.2 241.87541l0 -28.56694" fill-rule="evenodd"/><path stroke="#434343" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m139.2 241.87541l0 -20.986938" fill-rule="evenodd"/><path fill="#434343" stroke="#434343" stroke-width="2.0" stroke-linecap="butt" d="m139.2 214.30849c1.8170166 0 3.2899933 1.4729767 3.2899933 3.2899933c0 1.8170166 -1.4729767 3.2899933 -3.2899933 3.2899933c-1.8170166 0 -3.2899933 -1.4729767 -3.2899933 -3.2899933c0 -1.8170166 1.4729767 -3.2899933 3.2899933 -3.2899933z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m48.00492 115.2l288.0 0l0 28.7874l-288.0 0z" fill-rule="evenodd"/><path fill="#666666" d="m85.778755 122.4812l1.703125 0l0 12.6875l6.265625 0l0 1.625l-7.96875 0l0 -14.3125zm13.101868 14.625q-1.109375 0 -2.0 -0.4375q-0.875 -0.4375 -1.359375 -1.203125q-0.46875 -0.765625 -0.46875 -1.75q0 -1.625 1.21875 -2.53125q1.21875 -0.90625 3.078125 -0.90625q0.921875 0 1.703125 0.203125q0.796875 0.1875 1.21875 0.453125l0 -0.625q0 -1.140625 -0.8125 -1.828125q-0.796875 -0.6875 -2.015625 -0.6875q-0.84375 0 -1.578125 0.375q-0.71875 0.359375 -1.140625 1.03125l-1.28125 -0.96875q0.609375 -0.921875 1.65625 -1.4375q1.0625 -0.515625 2.34375 -0.515625q2.078125 0 3.25 1.09375q1.1875 1.078125 1.1875 2.96875l0 6.453125l-1.609375 0l0 -1.453125l-0.09375 0q-0.4375 0.734375 -1.3125 1.25q-0.875 0.515625 -1.984375 0.515625zm0.171875 -1.5q0.859375 0 1.59375 -0.4375q0.734375 -0.4375 1.171875 -1.171875q0.453125 -0.75 0.453125 -1.625q-0.484375 -0.3125 -1.1875 -0.515625q-0.703125 -0.203125 -1.484375 -0.203125q-1.390625 0 -2.109375 0.578125q-0.703125 0.578125 -0.703125 1.5q0 0.84375 0.640625 1.359375q0.640625 0.515625 1.625 0.515625zm7.19812 -9.015625l1.609375 0l0 1.640625l0.078125 0q0.3125 -0.84375 1.171875 -1.390625q0.859375 -0.546875 1.796875 -0.546875q0.703125 0 1.203125 0.203125l0 1.84375q-0.640625 -0.328125 -1.4375 -0.328125q-0.75 0 -1.375 0.421875q-0.609375 0.421875 -0.984375 1.140625q-0.375 0.703125 -0.375 1.515625l0 5.703125l-1.6875 0l0 -10.203125zm11.46875 14.84375q-1.796875 0 -2.96875 -0.84375q-1.171875 -0.84375 -1.5625 -2.015625l1.5625 -0.65625q0.3125 0.875 1.09375 1.421875q0.796875 0.546875 1.875 0.546875q1.578125 0 2.453125 -0.921875q0.875 -0.90625 0.875 -2.59375l0 -1.140625l-0.078125 0q-0.5 0.78125 -1.421875 1.28125q-0.90625 0.484375 -2.0625 0.484375q-1.3125 0 -2.40625 -0.671875q-1.09375 -0.6875 -1.734375 -1.90625q-0.640625 -1.21875 -0.640625 -2.78125q0 -1.546875 0.640625 -2.765625q0.640625 -1.234375 1.734375 -1.90625q1.09375 -0.6875 2.40625 -0.6875q1.15625 0 2.0625 0.484375q0.921875 0.484375 1.421875 1.296875l0.078125 0l0 -1.46875l1.625 0l0 9.796875q0 2.46875 -1.375 3.75q-1.359375 1.296875 -3.578125 1.296875zm0 -5.984375q0.921875 0 1.671875 -0.453125q0.75 -0.46875 1.203125 -1.328125q0.453125 -0.859375 0.453125 -2.03125q0 -1.203125 -0.453125 -2.0625q-0.453125 -0.859375 -1.203125 -1.3125q-0.75 -0.453125 -1.671875 -0.453125q-0.921875 0 -1.6875 0.46875q-0.75 0.453125 -1.203125 1.3125q-0.4375 0.859375 -0.4375 2.046875q0 1.171875 0.4375 2.046875q0.453125 0.875 1.203125 1.328125q0.765625 0.4375 1.6875 0.4375zm11.902489 1.65625q-1.453125 0 -2.6250076 -0.6875q-1.15625 -0.703125 -1.8125 -1.9375q-0.640625 -1.234375 -0.640625 -2.765625q0 -1.46875 0.609375 -2.71875q0.609375 -1.25 1.734375 -1.984375q1.1406326 -0.734375 2.5937576 -0.734375q1.5 0 2.59375 0.671875q1.109375 0.65625 1.703125 1.84375q0.59375 1.1875 0.59375 2.703125q0 0.234375 -0.046875 0.515625l-8.078133 0q0.0625 1.15625 0.5625 1.96875q0.5 0.796875 1.2656326 1.203125q0.765625 0.390625 1.609375 0.390625q2.0 0 3.015625 -1.84375l1.4375 0.703125q-0.625 1.21875 -1.765625 1.953125q-1.140625 0.71875 -2.75 0.71875zm2.9375 -6.5q-0.03125 -0.625 -0.359375 -1.265625q-0.3125 -0.640625 -1.0 -1.078125q-0.671875 -0.453125 -1.71875 -0.453125q-1.203125 0 -2.0468826 0.78125q-0.828125 0.765625 -1.09375 2.015625l6.2187576 0zm7.4381256 6.5q-1.625 0 -2.734375 -0.765625q-1.09375 -0.765625 -1.5625 -1.96875l1.53125 -0.671875q0.375 0.90625 1.125 1.40625q0.75 0.5 1.640625 0.5q0.96875 0 1.640625 -0.375q0.6875 -0.390625 0.6875 -1.125q0 -0.625 -0.546875 -1.015625q-0.53125 -0.390625 -1.6875 -0.671875l-1.25 -0.328125q-1.21875 -0.296875 -2.0 -1.015625q-0.78125 -0.71875 -0.78125 -1.859375q0 -0.875 0.53125 -1.546875q0.53125 -0.671875 1.40625 -1.03125q0.890625 -0.359375 1.90625 -0.359375q1.34375 0 2.390625 0.578125q1.046875 0.578125 1.484375 1.625l-1.46875 0.671875q-0.6875 -1.359375 -2.421875 -1.359375q-0.84375 0 -1.484375 0.390625q-0.625 0.390625 -0.625 0.984375q0 0.5625 0.4375 0.921875q0.453125 0.34375 1.328125 0.5625l1.484375 0.375q1.5 0.390625 2.25 1.140625q0.765625 0.75 0.765625 1.828125q0 0.9375 -0.546875 1.65625q-0.53125 0.703125 -1.453125 1.078125q-0.921875 0.375 -2.046875 0.375zm9.734985 -0.15625q-0.625 0 -1.15625 -0.1875q-0.53125 -0.203125 -0.890625 -0.546875q-0.796875 -0.765625 -0.796875 -2.109375l0 -5.96875l-1.78125 0l0 -1.546875l1.78125 0l0 -2.875l1.703125 0l0 2.875l2.5 0l0 1.546875l-2.5 0l0 5.5625q0 0.828125 0.3125 1.234375q0.375 0.4375 1.09375 0.4375q0.625 0 1.125 -0.34375l0 1.671875q-0.296875 0.140625 -0.609375 0.1875q-0.3125 0.0625 -0.78125 0.0625zm2.132492 -0.15625l0 0zm12.5525055 0.3125q-2.078125 0 -3.78125 -0.96875q-1.6875 -0.984375 -2.65625 -2.6875q-0.96875 -1.71875 -0.96875 -3.8125q0 -2.109375 0.96875 -3.8125q0.96875 -1.71875 2.65625 -2.6875q1.703125 -0.984375 3.78125 -0.984375q1.609375 0 2.9375 0.609375q1.328125 0.59375 2.3125 1.734375l-1.21875 1.171875q-0.828125 -0.96875 -1.796875 -1.421875q-0.96875 -0.46875 -2.234375 -0.46875q-1.546875 0 -2.859375 0.734375q-1.296875 0.71875 -2.0625 2.046875q-0.765625 1.328125 -0.765625 3.078125q0 1.734375 0.765625 3.0625q0.765625 1.328125 2.0625 2.0625q1.3125 0.734375 2.859375 0.734375q2.609375 0 4.421875 -2.140625l1.25 1.203125q-0.984375 1.171875 -2.453125 1.859375q-1.46875 0.6875 -3.21875 0.6875zm12.060623 0q-1.5 0 -2.703125 -0.71875q-1.1875 -0.71875 -1.859375 -1.953125q-0.671875 -1.234375 -0.671875 -2.734375q0 -1.5 0.671875 -2.734375q0.671875 -1.25 1.859375 -1.96875q1.203125 -0.71875 2.703125 -0.71875q1.5 0 2.703125 0.71875q1.203125 0.71875 1.875 1.96875q0.671875 1.234375 0.671875 2.734375q0 1.5 -0.671875 2.734375q-0.671875 1.234375 -1.875 1.953125q-1.203125 0.71875 -2.703125 0.71875zm0 -1.53125q0.953125 0 1.75 -0.46875q0.8125 -0.46875 1.296875 -1.34375q0.5 -0.890625 0.5 -2.0625q0 -1.1875 -0.5 -2.0625q-0.484375 -0.890625 -1.296875 -1.359375q-0.796875 -0.46875 -1.75 -0.46875q-0.9375 0 -1.765625 0.46875q-0.8125 0.46875 -1.296875 1.359375q-0.484375 0.875 -0.484375 2.0625q0 1.171875 0.484375 2.0625q0.484375 0.875 1.296875 1.34375q0.828125 0.46875 1.765625 0.46875zm7.032486 -8.984375l1.609375 0l0 1.5l0.078125 0q0.421875 -0.75 1.34375 -1.28125q0.921875 -0.53125 1.96875 -0.53125q1.828125 0 2.796875 1.078125q0.984375 1.0625 0.984375 2.890625l0 6.546875l-1.703125 0l0 -6.28125q0 -1.421875 -0.6875 -2.0625q-0.671875 -0.640625 -1.859375 -0.640625q-0.8125 0 -1.46875 0.46875q-0.640625 0.453125 -1.015625 1.203125q-0.359375 0.75 -0.359375 1.578125l0 5.734375l-1.6875 0l0 -10.203125zm14.641861 10.359375q-0.625 0 -1.15625 -0.1875q-0.53125 -0.203125 -0.890625 -0.546875q-0.796875 -0.765625 -0.796875 -2.109375l0 -5.96875l-1.78125 0l0 -1.546875l1.78125 0l0 -2.875l1.703125 0l0 2.875l2.5 0l0 1.546875l-2.5 0l0 5.5625q0 0.828125 0.3125 1.234375q0.375 0.4375 1.09375 0.4375q0.625 0 1.125 -0.34375l0 1.671875q-0.296875 0.140625 -0.609375 0.1875q-0.3125 0.0625 -0.78125 0.0625zm7.4893646 0.15625q-1.453125 0 -2.625 -0.6875q-1.15625 -0.703125 -1.8125 -1.9375q-0.640625 -1.234375 -0.640625 -2.765625q0 -1.46875 0.609375 -2.71875q0.609375 -1.25 1.734375 -1.984375q1.140625 -0.734375 2.59375 -0.734375q1.5 0 2.59375 0.671875q1.109375 0.65625 1.703125 1.84375q0.59375 1.1875 0.59375 2.703125q0 0.234375 -0.046875 0.515625l-8.078125 0q0.0625 1.15625 0.5625 1.96875q0.5 0.796875 1.265625 1.203125q0.765625 0.390625 1.609375 0.390625q2.0 0 3.015625 -1.84375l1.4375 0.703125q-0.625 1.21875 -1.765625 1.953125q-1.140625 0.71875 -2.75 0.71875zm2.9375 -6.5q-0.03125 -0.625 -0.359375 -1.265625q-0.3125 -0.640625 -1.0 -1.078125q-0.671875 -0.453125 -1.71875 -0.453125q-1.203125 0 -2.046875 0.78125q-0.828125 0.765625 -1.09375 2.015625l6.21875 0zm3.7912445 -4.015625l1.609375 0l0 1.5l0.078125 0q0.421875 -0.75 1.34375 -1.28125q0.921875 -0.53125 1.96875 -0.53125q1.828125 0 2.796875 1.078125q0.984375 1.0625 0.984375 2.890625l0 6.546875l-1.703125 0l0 -6.28125q0 -1.421875 -0.6875 -2.0625q-0.671875 -0.640625 -1.859375 -0.640625q-0.8125 0 -1.46875 0.46875q-0.640625 0.453125 -1.015625 1.203125q-0.359375 0.75 -0.359375 1.578125l0 5.734375l-1.6875 0l0 -10.203125zm14.641861 10.359375q-0.625 0 -1.15625 -0.1875q-0.53125 -0.203125 -0.890625 -0.546875q-0.796875 -0.765625 -0.796875 -2.109375l0 -5.96875l-1.78125 0l0 -1.546875l1.78125 0l0 -2.875l1.703125 0l0 2.875l4.640625 0l0 -1.09375q0 -0.96875 0.421875 -1.6875q0.4375 -0.71875 1.1875 -1.109375q0.75 -0.390625 1.640625 -0.390625q0.828125 0 1.5 0.25l0 1.65625q-0.390625 -0.15625 -0.703125 -0.234375q-0.3125 -0.09375 -0.75 -0.09375q-0.671875 0 -1.15625 0.484375q-0.46875 0.46875 -0.46875 1.296875l0 0.921875l2.625 0l0 1.546875l-2.625 0l0 8.65625l-1.671875 0l0 -8.65625l-4.640625 0l0 5.5625q0 0.828125 0.3125 1.234375q0.375 0.4375 1.09375 0.4375q0.625 0 1.125 -0.34375l0 1.671875q-0.296875 0.140625 -0.609375 0.1875q-0.3125 0.0625 -0.78125 0.0625zm13.38562 0.15625q-1.828125 0 -2.796875 -1.078125q-0.96875 -1.078125 -0.96875 -3.015625l0 -6.421875l1.6875 0l0 6.15625q0 1.46875 0.65625 2.15625q0.671875 0.671875 1.78125 0.671875q0.875 0 1.53125 -0.453125q0.671875 -0.46875 1.046875 -1.203125q0.375 -0.75 0.375 -1.5625l0 -5.765625l1.6875 0l0 10.203125l-1.609375 0l0 -1.484375l-0.078125 0q-0.421875 0.765625 -1.34375 1.28125q-0.921875 0.515625 -1.96875 0.515625zm7.532486 -14.625l1.6875 0l0 14.3125l-1.6875 0l0 -14.3125zm2.9543762 14.3125l0 0zm6.233734 -14.3125l4.828125 0q1.203125 0 2.21875 0.546875q1.015625 0.53125 1.625 1.5q0.609375 0.96875 0.609375 2.1875q0 1.21875 -0.609375 2.1875q-0.609375 0.96875 -1.625 1.515625q-1.015625 0.53125 -2.21875 0.53125l-3.125 0l0 5.84375l-1.703125 0l0 -14.3125zm4.859375 6.859375q0.8125 0 1.421875 -0.375q0.609375 -0.390625 0.9375 -0.984375q0.34375 -0.609375 0.34375 -1.265625q0 -0.65625 -0.34375 -1.25q-0.328125 -0.609375 -0.9375 -0.984375q-0.609375 -0.390625 -1.421875 -0.390625l-3.15625 0l0 5.25l3.15625 0zm9.182495 7.765625q-1.109375 0 -2.0 -0.4375q-0.875 -0.4375 -1.359375 -1.203125q-0.46875 -0.765625 -0.46875 -1.75q0 -1.625 1.21875 -2.53125q1.21875 -0.90625 3.078125 -0.90625q0.921875 0 1.703125 0.203125q0.796875 0.1875 1.21875 0.453125l0 -0.625q0 -1.140625 -0.8125 -1.828125q-0.796875 -0.6875 -2.015625 -0.6875q-0.84375 0 -1.578125 0.375q-0.71875 0.359375 -1.140625 1.03125l-1.28125 -0.96875q0.609375 -0.921875 1.65625 -1.4375q1.0625 -0.515625 2.34375 -0.515625q2.078125 0 3.25 1.09375q1.1875 1.078125 1.1875 2.96875l0 6.453125l-1.609375 0l0 -1.453125l-0.09375 0q-0.4375 0.734375 -1.3125 1.25q-0.875 0.515625 -1.984375 0.515625zm0.171875 -1.5q0.859375 0 1.59375 -0.4375q0.734375 -0.4375 1.171875 -1.171875q0.453125 -0.75 0.453125 -1.625q-0.484375 -0.3125 -1.1875 -0.515625q-0.703125 -0.203125 -1.484375 -0.203125q-1.390625 0 -2.109375 0.578125q-0.703125 0.578125 -0.703125 1.5q0 0.84375 0.640625 1.359375q0.640625 0.515625 1.625 0.515625zm8.19812 -10.890625q-0.5 0 -0.859375 -0.359375q-0.359375 -0.359375 -0.359375 -0.859375q0 -0.515625 0.359375 -0.859375q0.359375 -0.359375 0.859375 -0.359375q0.515625 0 0.859375 0.359375q0.359375 0.34375 0.359375 0.859375q0 0.5 -0.359375 0.859375q-0.34375 0.359375 -0.859375 0.359375zm-0.84375 1.875l1.703125 0l0 10.203125l-1.703125 0l0 -10.203125zm4.363739 0l1.609375 0l0 1.5l0.078125 0q0.421875 -0.75 1.34375 -1.28125q0.921875 -0.53125 1.96875 -0.53125q1.828125 0 2.796875 1.078125q0.984375 1.0625 0.984375 2.890625l0 6.546875l-1.703125 0l0 -6.28125q0 -1.421875 -0.6875 -2.0625q-0.671875 -0.640625 -1.859375 -0.640625q-0.8125 0 -1.46875 0.46875q-0.640625 0.453125 -1.015625 1.203125q-0.359375 0.75 -0.359375 1.578125l0 5.734375l-1.6875 0l0 -10.203125zm14.641876 10.359375q-0.625 0 -1.15625 -0.1875q-0.53125 -0.203125 -0.890625 -0.546875q-0.796875 -0.765625 -0.796875 -2.109375l0 -5.96875l-1.78125 0l0 -1.546875l1.78125 0l0 -2.875l1.703125 0l0 2.875l2.5 0l0 1.546875l-2.5 0l0 5.5625q0 0.828125 0.3125 1.234375q0.375 0.4375 1.09375 0.4375q0.625 0 1.125 -0.34375l0 1.671875q-0.296875 0.140625 -0.609375 0.1875q-0.3125 0.0625 -0.78125 0.0625z" fill-rule="nonzero"/><path fill="#000000" fill-opacity="0.0" d="m244.8 241.37184l0 -28.283463" fill-rule="evenodd"/><path stroke="#434343" stroke-width="2.0" stroke-linejoin="round" stroke-linecap="butt" d="m244.79999 241.37184l0 -20.703476" fill-rule="evenodd"/><path fill="#434343" stroke="#434343" stroke-width="2.0" stroke-linecap="butt" d="m244.79999 214.08838c1.8170166 0 3.2900085 1.4729767 3.2900085 3.2899933c0 1.8170166 -1.472992 3.2900085 -3.2900085 3.2900085c-1.8170166 0 -3.2899933 -1.472992 -3.2899933 -3.2900085c0 -1.8170166 1.4729767 -3.2899933 3.2899933 -3.2899933z" fill-rule="nonzero"/></g></svg>

Les deux pages chargent une ressource script.js, que Glitch crée par défaut. Remplacez le contenu de ce fichier par ce qui suit :

function blockPause(milliseconds) {
  const start = performance.now();
  let lastCheck = start;
  let lastTime = 0;
  // Synchronous blocking is NOT best practice at all, but is what we want here
  // Don't do this on your real site please!
  while(performance.now() - start < milliseconds) {
    // Log once a second
    lastTime = performance.now() - lastCheck
    if (lastTime >= 1000) {
      console.log(`Still blocking ${Math.round(performance.now() - start, 0)} ms out of ${milliseconds} ms`);
      lastCheck = performance.now();
    }
  }
}

// Load web-vitals.js and log LCP updates to console
var script = document.createElement('script');
script.src = 'https://unpkg.com/web-vitals@3/dist/web-vitals.attribution.iife.js';
script.onload = function () {
  window.webVitals.onLCP(({value}) => {
    console.log(`LCP time: ${Math.round(value)} ms`);
  }, {reportAllChanges: true});
};
document.head.appendChild(script);

// Block page for 3 seconds to simulate a slow loading page
console.log('Simulate slow loading page by blocking page;');
blockPause(3000);
console.log('Page loaded');

Vous devriez avoir ainsi configuré votre site de démonstration. Cliquez un peu partout pour vous faire une idée du résultat. Vous devriez constater que les pages 2 et 3 sont lentes à charger en raison du blocage artificiel du thread principal.

Dans la console d'outils de développement, vous pouvez voir les journaux liés à script.js qui y sont enregistrés :

Capture d'écran de la page 2 du site de démonstration, avec la console d'outils de développement ouverte montrant un message de blocage et un temps LCP de 3 658 millisecondes

Vous pouvez voir le blocage et les messages de débogage, et constater également que la page 2 a mis 3 658 millisecondes à afficher son LCP grâce à notre fonction de blocage factice qui bloque le thread principal. Cette page est lente du fait de cette fonction, mais elle se charge lentement pour une raison quelconque. Voyons comment accélérer le chargement à l'aide de l'API Speculation Rules.

4. Ajouter des règles de spéculation pour effectuer un prérendu de la liste d'URL

La première règle de spéculation que vous allez ajouter consiste à effectuer un prérendu de la liste d'URL codée en dur.

Dans Glitch, pointez sur le nom de document index.html. Dans le menu à trois points qui apparaît, cliquez sur "Duplicate" pour dupliquer le document :

Option de duplication dans Glitch

Attribuez le nom page1-url-speculations.html.

Les règles de spéculation sont associées à une balise <script> au format JSON avec type="speculationrules".

Modifiez le fichier page1-url-speculations.html et ajoutez le code ci-dessous à la page. Peu importe où, mais juste avant la balise de fermeture body (</body>), il est préférable que la majeure partie du reste de la page puisse être traitée en premier.

<script type="speculationrules">
  {
    "prerender": [
      {
        "urls": ["page2.html", "page3.html"]
      }
    ]
  }
</script>

Et voilà ! C'est tout ce dont vous avez besoin pour ajouter le chargement instantané à votre page.

Cette règle indique d'effectuer un prérendu des URL page2.html et page3.html afin que les deux pages se chargent en arrière-plan et qu'elles soient prêtes quand l'utilisateur clique sur l'un ou l'autre des liens.

5. Observer les règles de spéculation en action

Voyons le résultat. Si vous chargez la page1-url-speculations.html, rien ne semblera différent de la page index.html d'origine. Toutefois, en arrière-plan, Chrome a commencé à effectuer un prérendu des page2.html et page3.html (ces pages sont un peu comme des onglets masqués en arrière-plan). Une fois que vous cliquez sur le lien, Chrome remplace la page actuelle par la page prérendue. Si vous attendez au moins trois secondes après le chargement et que vous cliquez sur les liens, vous devriez constater que les pages se chargent instantanément et que le temps LCP est proche de zéro.

Chargement instantané avec un temps LCP de 50 millisecondes

Vous pouvez voir ici que le temps LCP est de 50 millisecondes, ce qui est bien plus rapide que le seuil recommandé de 2,5 secondes. Pour la plupart des gens, le chargement sera perçu ici comme "instantané".

Effectuez une comparaison avec la page d'accueil principale index.html où la navigation entre les pages semble lente et non responsive.

Gardez à l'esprit qu'il s'agit juste d'un simple site de démonstration. Et puis, le chargement lent est artificiel. Toutefois, vous pouvez déjà constater et mesurer l'efficacité de l'API. Vous n'avez pas eu besoin de modifier le code de la page d'origine. Vous avez simplement dû ajouter les règles de spéculation à la page.

Si vous cliquez avant la fin du temps de chargement complet de trois secondes, la page partiellement chargée remplacera la page actuelle, et vous verrez les messages de blocage restants dans la console :

Capture d'écran de la page 2 semblable à la précédente, mais avec seulement la moitié des journaux enregistrés dans la console

Chrome termine le chargement devant l'utilisateur. Vous pouvez voir ici que le temps LCP est d'une seconde. Ce n'est pas aussi bien que le chargement en 50 millisecondes avec un prérendu complet, qui laissait une impression de quasi instantanéité, mais c'est toujours mieux que les trois secondes pour charger une page qui n'a pas été prérendue du tout. La longueur d'avance a encore sensiblement amélioré le chargement de page.

6. Déboguer avec JavaScript

Vous pouvez utiliser JavaScript pour enregistrer un gestionnaire d'événements à déclencher à l'activation de la page.

Ajoutez le code ci-dessous au fichier script.js, juste avant la ligne // Block page for 3 seconds to simulate a slow loading page :

// Load when the page is activated
document.addEventListener('prerenderingchange', () => {
  console.log(`The page has been activated!`);

  const activationStart = Math.round(performance.getEntriesByType('navigation')[0].activationStart);
  console.log(`The page was activated at: ${activationStart}`);
});

Si vous revenez à la page page1-url-speculations.html, attendez quelques secondes que la page soit prérendue, puis cliquez sur l'un des liens. Vous devriez voir un contenu proche de celui de la capture d'écran ci-dessous :

Console d'outils de développement montrant des messages de journal quand la page est activée

Vous pouvez voir ici que la page a été activée 4 298 millisecondes après le début de son chargement (4 bonnes secondes d'avance sur le chargement).

D'après l'ordre des journaux, vous pouvez voir que l'événement d'activation se produit en premier, avant que le temps LCP ne soit déclenché. Même si la page aurait pu être entièrement chargée d'ici là, le LCP exige qu'il y ait une peinture (ou "paint" comme indiqué pour "Largest Contentful Paint"). Ainsi, bien que la page soit prérendue en arrière-plan, il n'y a aucune "peinture" réelle tant que la page n'est pas activée. Il y aura donc un petit délai entre l'activation et le temps LCP, lequel est de 128 millisecondes dans le cas présent, ce qui est quasi instantané pour l'utilisateur.

Vous pouvez aussi voir que le temps d'activation est de 4 298 millisecondes dans cet exemple, mais que le temps LCP de 128 millisecondes est bien inférieur. Toutes les mesures temporelles associées aux métriques de performances sont basées sur le moment où la page commence à se charger. Toutefois, la bibliothèque de signaux Web utilisée pour enregistrer le temps LCP contient une logique spéciale permettant de soustraire le temps activationStart afin de mesurer le temps LCP en ce qui concerne l'utilisateur. C'est également de cette façon que le temps LCP est calculé pour le rapport sur l'expérience utilisateur de Chrome, qui alimente des outils tels que PageSpeed Insights et le rapport Core Web Vitals dans la Google Search Console.

7. Déboguer avec les outils de développement

Même si les journaux enregistrés dans la console vous aident certainement à effectuer des débogages (qui n'a pas déjà utilisé un bon vieux fichier console.log pour déboguer ?), Chrome propose d'excellents outils de développement pour déboguer les règles de spéculation.

Retournez à la page1-url-speculations.html, puis ouvrez le panneau Application et accédez à l'onglet Chargements spéculatifs de la section Services d'arrière-plan :

Onglet "Chargement spéculatifs" (outils de développement)

Cette capture d'écran montre que la page elle-même n'a pas fait l'objet de spéculations (partie supérieure à droite), mais qu'elle en a initié deux. Cliquez sur le lien Afficher toutes les règles de spéculation. Un écran contenant la liste des règles s'affiche (il n'y en a ici qu'une seule). Toutefois, le lien Afficher toutes les spéculations qui vous renvoie vers l'onglet Spéculations est plus intéressant :

Onglet "Spéculations" dans la console d'outils de développement, montrant que deux pages ont fait l'objet de spéculations

Vous pouvez voir ici que deux pages ont fait l'objet de spéculations et que l'état des deux est défini sur Prêt, ce qui signifie qu'elles sont prérendues et prêtes à être activées. En revanche, cela ne veut pas dire que le chargement de la page est complètement terminé (comme vous l'avez vu précédemment), mais que le prérendu a bien débuté et que la page est prête à être activée.

En cas d'échec du prérendu d'une page, vous pouvez cliquer sur cette ligne pour en savoir plus sur la raison de l'échec de la spéculation (par exemple, le prérendu est incompatible avec un petit nombre d'API JavaScript, ce qui annulera la tentative de prérendu).

8. Spéculation automatique de liens à l'aide de règles liées au document

Pour ces spéculations, une liste d'URL codée en dur a été utilisée. C'est utile dans certains cas où les URL devant faire l'objet de spéculations sont connues à l'avance ou dans des cas plus spécifiques où les URL peuvent être calculées et insérées dynamiquement sur la page par JavaScript.

Toutefois, il est souvent impossible ou difficile de prédire sur quel lien de la page (s'il y en a) le visiteur va cliquer. Effectuer un prérendu de tous les liens à l'avance pour chaque page serait à la fois fastidieux et vraiment déraisonnable. Ce que vous voulez, c'est que certains liens sur la page soient pris en compte, mais avec davantage de certitude que l'utilisateur va cliquer dessus, ce que permettent les règles liées au document.

Dupliquez de nouveau le fichier index.html et attribuez le nom page1-document-speculations.html. Cette fois-ci, ajoutez la règle ci-dessous, encore une fois juste avant la balise de fermeture </body> si cela vous convient.

<script type="speculationrules">
{
  "prerender": [{
    "where": {
      "and": [
        { "href_matches": "/*" },
        { "not": {"selector_matches": ".do-not-prerender"}}
      ]
    },
    "eagerness": "moderate"
  }]
}
</script>

Cela signifie qu'il faut effectuer un prérendu de tous les liens de même origine (commençant par /*), sauf si une classe do-not-prerender se trouve sur l'élément <a>. Dans cet exemple, les pages sont prérendues avec un niveau de persévérance moderate (que nous allons traiter à la page suivante).

Lorsque vous accédez à la page, vous devriez voir deux spéculations potentielles dont l'état est défini sur Non déclenchée :

Onglet "Spéculations" (outils de développement) montrant deux pages non déclenchées

Si vous pointez sur l'un des liens, la spéculation est déclenchée :

Onglet "Spéculations" (outils de développement) montrant deux pages déclenchées

Une fois que vous cliquez sur le lien, la page prérendue est chargée. Cela peut sembler instantané si suffisamment de temps a été accordé pour charger la page, ou un peu plus rapide si le chargement de la page n'est pas terminé au moment où vous cliquez sur le lien. Quoi qu'il en soit, le temps LCP devrait être meilleur que si vous n'utilisiez pas de règles de spéculation.

Les règles liées au document offrent un moyen efficace d'ajouter rapidement des navigations spéculatives à votre site Web sans avoir trop à penser aux URL pour lesquelles un prérendu doit être effectué. Elles accordent effectivement moins de temps pour accomplir le prérendu, mais offrent toujours une longueur d'avance à la navigation suivante, ce qui contribue à améliorer le futur chargement de page.

9. Utiliser un niveau de persévérance pour indiquer quand spéculer

Lors de la précédente étape, le niveau de persévérance utilisé était "eagerness": "moderate". Il y a quatre paramètres :

  • immediate : utilisé pour spéculer le plus tôt possible (c'est-à-dire dès que les règles de spéculation sont observées).
  • eager : comportement identique à celui du paramètre immediate, mais nous allons, à l'avenir, chercher à le placer quelque part entre immediate et moderate.
  • moderate : effectue des spéculations si vous pointez sur un lien pendant 200 millisecondes ou sur l'événement pointerdown (si c'est plus tôt) et sur mobile où il n'y a pas d'événement avec pointeur.
  • conservative : spécule en cas d'événement tactile ou avec pointeur.

Le paramètre eagerness peut être utilisé à la fois pour les règles liées à des listes basées sur des URL ou pour les règles liées à des documents basés sur where. Les paramètres immediate et eager se prêtent généralement davantage à des règles liées à des listes étant donné que vous connaissez les URL et que vous pouvez donc y appliquer également des spéculations le plus tôt possible pour obtenir le plus de temps possible. Les paramètres moderate et conservative sont généralement plus utiles pour les règles liées à un document où l'URL exacte devant faire l'objet de spéculations n'est habituellement pas connue.

À l'aide des outils de développement, testez ces différents paramètres sur vos pages pour voir quand les spéculations se produisent.

10. Conclusion

Bravo, vous avez atteint la fin de cet atelier de programmation. Vous devriez maintenant comprendre l'efficacité de l'API Speculation Rules, qui peut être ajoutée à des sites en quelques lignes de code.

Lors de cette brève introduction, même si vous avez juste vu en surface les possibilités de cette API, c'est suffisant pour améliorer votre site Web.

Pour consulter des sujets plus avancés, y compris des points que vous aurez peut-être à prendre en compte en termes de données d'analyse ou d'annonces, cliquez sur les liens de la section "En savoir plus" ci-dessous.

En savoir plus

Commentaires

Nous serions ravis de recueillir vos commentaires sur cet atelier de programmation et de savoir si vous avez des questions ou autres préoccupations.

Comment avez-vous trouvé cet atelier de programmation ?

Pas très utile Moyennement utile Vraiment utile