Améliorer les performances de chargement de la page suivante

Fonctionnalités Web : Règles de spéculation

L'un des moyens les plus efficaces d'améliorer les performances de chargement des pages pour les utilisateurs qui naviguent sur un site consiste à lancer le chargement de la page suivante qu'ils s'apprêtent à consulter avant qu'ils ne la visitent. Pour ce faire, vous pouvez utiliser une technique appelée "chargement spéculatif" à l'aide de l'API Speculation Rules.

Fonctionnement

Le chargement spéculatif utilise des règles de spéculation basées sur JSON pour indiquer au navigateur les liens qui peuvent être préchargés ou prérendus, ce qui améliore les performances de chargement des pages lorsque l'utilisateur clique dessus.

Les règles peuvent être une liste d'URL codée en dur avec une clé urls (appelée "règle de liste") ou une clé where contenant un ensemble de sélecteurs href et CSS utilisés pour trouver des liens sur la page (appelée "règle document").

Les règles peuvent également inclure une propriété eagerness facultative qui spécifie quand la page doit être préchargée ou prérendue. La propriété eagerness peut être définie sur immediate, eager, moderate ou conservative. immediate spécule dès que possible, tandis que les autres attendent des signaux de l'utilisateur, comme le survol pendant une courte période, pendant une période plus longue ou le début d'un clic sur la page, respectivement.

Les règles peuvent être combinées avec différents paramètres d'empressement pour précharger de manière empressée, puis pré-afficher lorsque l'utilisateur interagit davantage.

Quand l'utiliser ?

Le chargement spéculatif est particulièrement utile pour les pages statiques, dont le contenu n'est pas susceptible de changer souvent et qui sont moins coûteuses à produire, en particulier si elles sont mises en cache en périphérie. Il peut également être utilisé pour les pages dynamiques, mais il est important de faire attention au risque de contenu obsolète.

Le chargement spéculatif est généralement utilisé pour les liens de même origine, bien que des options plus avancées permettent une certaine spéculation interorigine. Ce guide se concentre sur le cas d'utilisation le plus courant, à savoir l'utilisation de la même origine.

Un chargement spéculatif plus agressif est un bon choix pour les pages susceptibles d'être consultées ensuite, comme un article de une ou la page suivante d'un processus par étapes, comme un cours d'apprentissage.

Le chargement spéculatif moins hâtif est un bon choix lorsqu'il est moins évident de savoir ce que l'utilisateur va faire ensuite, lorsqu'il y a de nombreux liens sur la page, chacun ayant la même probabilité d'être visité. En attendant d'autres signaux, comme le pointage ou le début d'un clic sur la page, vous pouvez prendre de l'avance sur la page suivante et améliorer l'expérience utilisateur, même si elle n'est pas entièrement préchargée ou prérendue.

De même, la prélecture est un choix plus prudent que le prérendu, car elle utilise moins de ressources (à la fois côté client et côté serveur), mais elle offre moins d'avantages à l'utilisateur. Il s'agit d'un bon choix pour l'implémentation initiale, qui peut être étendue au prérendu ultérieurement lorsque le développeur le demande explicitement.

Comment l'utiliser ?

Les règles de spéculation sont au format JSON et peuvent être incluses dans une balise <script type="speculationrules">. Les règles peuvent être incluses dans les balises <head> ou <body> du document, ou ajoutées de manière dynamique à l'aide de JavaScript.

Vous pouvez également utiliser un tag, soit au niveau global, soit par règle. Lorsqu'elle est définie, cette balise est incluse dans l'en-tête Sec-Speculation-Tags et vous permet d'identifier côté serveur les spéculations qui ont été faites.

Exemple de règle de liste d'URL simple pour précharger des URL prédéfinies

<script type="speculationrules">
  {
    "tag": "product-page-speculations",
    "prefetch": [
      {
        "urls": ["/product/1", "/product/2", "/product/3"]
      }
    ]
  }
</script>

Exemple de règle de document simple pour le prérendu de tous les liens de même origine sur une page

<script type="speculationrules">
  {
    "tag": "all-links-speculations",
    "prerender": [{
      "where": { "href_matches": "/*" }
    }]
  }
</script>

<script type="speculationrules">
  {
    "tag": "speculations-with-exclusions",
    "prerender": [{
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": {"href_matches": "/wp-admin"}},
          { "not": {"href_matches": "/*\\?*(^|&)add-to-cart=*"}},
          { "not": {"selector_matches": ".do-not-prerender"}},
          { "not": {"selector_matches": "[rel~=nofollow]"}}
        ]
      }
    }]
  }
</script>

Exemple d'ensemble de règles mixtes

Cet exemple montre un ensemble de règles qui précharge tous les liens de manière hâtive, puis va plus loin en prérendant ces mêmes liens lorsqu'il reçoit plus de signaux avec une hâte moderate.

<script type="speculationrules">
  {
    "prefetch": [{
      "tag": "prefetch-speculations",
      "where": { "href_matches": "/*" },
      "eagerness": "eager"
    }],
    "prerender": [{
      "tag": "prerender-speculations",
      "where": { "href_matches": "/*" },
      "eagerness": "moderate"
    }]
  }
</script>

Bonnes pratiques

  • À FAIRE : Utilisez des règles de spéculation pour précharger et pré-afficher les pages que l'utilisateur est susceptible de consulter ensuite.
  • À FAIRE : Utilisez des règles de spéculation pour les sites statiques, où le contenu n'est pas susceptible de changer souvent et où les pages sont moins coûteuses à produire, en particulier si elles sont mises en cache en périphérie.
  • À FAIRE : Faites preuve de plus de prudence lorsque vous utilisez des règles de spéculation pour les pages dynamiques, dont le contenu est plus susceptible de changer souvent, peut devenir obsolète et dont la production est plus coûteuse.
  • À FAIRE : privilégiez les règles liées à un document par rapport aux règles liées à une liste, car elles sont plus flexibles, permettent de partager la même règle sur plusieurs pages et peuvent être utilisées pour précharger et préafficher des pages qui ne sont pas connues à l'avance.
  • À FAIRE : Évaluez les compromis entre la pré-extraction et le prérendu, et choisissez l'option appropriée pour votre cas d'utilisation. Le prérendu est plus coûteux que la prérécupération et peut entraîner davantage d'effets secondaires indésirables dans les applications complexes qui affichent un état dynamique, mais il offre une meilleure expérience utilisateur. En cas de doute, demandez au développeur ce qu'il préfère.
  • À FAIRE : Évaluez les compromis entre les différents niveaux de eagerness et choisissez celui qui convient à votre cas d'utilisation. Une spéculation plus hâtive offre une meilleure expérience utilisateur, mais utilise plus de ressources et peut entraîner davantage d'effets secondaires involontaires dans les applications complexes qui affichent un état dynamique. En cas de doute, demandez au développeur ce qu'il préfère.
  • N'UTILISEZ PAS les règles de spéculation de manière excessive, par exemple pour spéculer sur chaque lien de la page. Les navigateurs ont des limites (deux spéculations pour les spéculations non hâtives). immediate ne doit être utilisé que pour un très petit nombre de liens.
  • N'utilisez PAS de spéculation pour les URL susceptibles de déclencher des changements d'état, comme /logout ou /add-to-cart, et excluez-les explicitement de vos règles de spéculation si elles sont susceptibles d'être incluses dans les règles de document.
  • N'utilisez PAS de règles de spéculation sur les applications monopages (SPA). Les règles de spéculation sont conçues pour les applications multipages (MPA), où le navigateur accède à un nouveau document à chaque navigation. Dans les SPA, le navigateur n'accède pas à un nouveau document à chaque navigation. Les règles de spéculation ne fonctionnent donc pas comme prévu.

Compatibilité des navigateurs et stratégies de remplacement

Toutefois, le chargement spéculatif est une amélioration progressive. Vous pouvez l'utiliser en toute sécurité comme amélioration. Nous vous le recommandons vivement, car il peut améliorer les performances. Si un navigateur n'est pas compatible avec les règles de spéculation, il les ignorera tout simplement.