Précharger les ressources pour accélérer les navigations futures

Découvrez l'indice de ressource rel=prefetch et comment l'utiliser.

Demián Renzulli

Jeremy Wagner

Des études montrent que des temps de chargement plus courts améliorent les taux de conversion et l'expérience utilisateur. Si vous avez des informations sur la façon dont les utilisateurs naviguent sur votre site Web et sur les pages qu'ils consulteront probablement ensuite, vous pouvez améliorer les temps de chargement des futures navigations en téléchargeant les ressources de ces pages à l'avance.

Ce guide explique comment y parvenir avec <link rel=prefetch>, un indice de ressource qui vous permet d'implémenter le préchargement de manière simple et efficace.

Améliorer les navigations avec rel=prefetch

Ajouter <link rel=prefetch> à une page Web indique au navigateur de télécharger des pages entières ou certaines des ressources (comme des scripts ou des fichiers CSS) dont l'utilisateur pourrait avoir besoin à l'avenir :

<link rel="prefetch" href="/articles/" as="document">

L'optimisation prefetch consomme des octets supplémentaires pour les ressources qui ne sont pas immédiatement nécessaires. Vous devez donc appliquer cette technique de manière réfléchie. Ne préchargez les ressources que lorsque vous êtes certain que les utilisateurs en auront besoin. Envisagez de ne pas précharger les données lorsque les utilisateurs utilisent des connexions lentes. Vous pouvez le détecter à l'aide de l'API Network Information.

Il existe différentes façons de déterminer les liens à précharger. La plus simple consiste à précharger le premier lien ou les premiers liens de la page actuelle. Il existe également des bibliothèques qui utilisent des approches plus sophistiquées, que nous décrirons plus loin dans cet article.

Cas d'utilisation

Précharger les pages suivantes

Préchargez les documents HTML lorsque les pages suivantes sont prévisibles, de sorte que lorsque vous cliquez sur un lien, la page soit chargée instantanément.

Par exemple, dans une page de fiche produit, vous pouvez précharger la page du produit le plus populaire de la liste. Dans certains cas, la navigation suivante est encore plus facile à anticiper. Sur une page de panier, la probabilité qu'un utilisateur accède à la page de paiement est généralement élevée, ce qui la rend particulièrement adaptée au préchargement.

Bien que le préchargement de ressources utilise une bande passante supplémentaire, il peut améliorer la plupart des métriques de performances. Le temps de latence du premier octet (TTFB) est souvent beaucoup plus faible, car la requête de document génère un succès de cache. Comme le TTFB sera plus faible, les métriques basées sur le temps suivantes seront souvent également plus faibles, y compris le LCP (Largest Contentful Paint) et le FCP (First Contentful Paint).

Préchargement des éléments statiques

Préchargez des éléments statiques, tels que des scripts ou des feuilles de style, lorsque les sections ultérieures que l'utilisateur est susceptible de consulter peuvent être prédites. Cela est particulièrement utile lorsque ces composants sont partagés sur plusieurs pages.

Par exemple, Netflix profite du temps que les utilisateurs passent sur les pages où ils ne sont pas connectés pour précharger React, qui sera utilisé une fois qu'ils se seront connectés. Grâce à cela, l'équipe a réduit de 30% le temps de rendu interactif pour les futures navigations.

L'impact du préchargement des composants statiques sur les métriques de performances dépend de la ressource préchargée :

• Le préchargement d'images peut réduire considérablement les temps de LCP pour les éléments image LCP.
• Le préchargement des feuilles de style peut améliorer à la fois le FCP et le LCP, car le temps réseau nécessaire pour télécharger la feuille de style sera supprimé. Étant donné que les feuilles de style bloquent l'affichage, elles peuvent réduire le LCP lors du préchargement. Si l'élément LCP de la page suivante est une image de fond CSS demandée via la propriété background-image, l'image sera également préchargée en tant que ressource dépendante de la feuille de style préchargée.
• Le préchargement JavaScript permet de traiter le script préchargé beaucoup plus rapidement que s'il devait d'abord être extrait par le réseau pendant la navigation. Cela peut avoir un impact sur l'Interaction to Next Paint (INP) d'une page. Dans les cas où le balisage est affiché sur le client via JavaScript, le LCP peut être amélioré grâce à des délais de chargement des ressources réduits. De plus, le rendu côté client du balisage contenant l'élément LCP d'une page peut se produire plus tôt.
• Le préchargement des polices Web qui ne sont pas encore utilisées par la page actuelle peut éliminer les décalages de mise en page. Lorsque font-display: swap; est utilisé, la période de remplacement de la police est supprimée, ce qui accélère le rendu du texte et élimine les décalages de mise en page. Si une future page utilise la police préchargée et que l'élément LCP de la page est un bloc de texte utilisant une police Web, le LCP de cet élément sera également plus rapide.

Préchargement de blocs JavaScript à la demande

La répartition du code : vos groupes JavaScript vous permettent de ne charger initialement que certaines parties d'une application et de charger les autres de manière différée. Si vous utilisez cette technique, vous pouvez appliquer le préchargement aux routes ou aux composants qui ne sont pas nécessaires immédiatement, mais qui seront probablement demandés prochainement.

Par exemple, si une page contient un bouton qui ouvre une boîte de dialogue contenant un sélecteur d'emojis, vous pouvez la diviser en trois blocs JavaScript : "home", "dialog" et "picker". La page d'accueil et la boîte de dialogue peuvent être chargées initialement, tandis que le sélecteur peut être chargé à la demande. Des outils tels que webpack vous permettent d'indiquer au navigateur de précharger ces blocs à la demande.

Comment implémenter rel=prefetch ?

Le moyen le plus simple d'implémenter prefetch consiste à ajouter une balise <link> au <head> du document :

<head>
  ...
  <link rel="prefetch" href="/articles/" as="document">
  ...
</head>

L'attribut as aide le navigateur à définir les en-têtes appropriés et à déterminer si la ressource se trouve déjà dans le cache. Voici quelques exemples de valeurs pour cet attribut: document, script, style, font, image et others.

Vous pouvez également lancer le préchargement via l'en-tête HTTP Link:

Link: </css/style.css>; rel=prefetch

L'avantage de spécifier un indice de préchargement dans l'en-tête HTTP est que le navigateur n'a pas besoin d'analyser le document pour trouver l'indice de ressource, ce qui peut apporter de légères améliorations dans certains cas.

Préchargement des modules JavaScript avec des commentaires magiques webpack

webpack vous permet de précharger des scripts pour des routes ou des fonctionnalités que vous êtes raisonnablement certain que les utilisateurs visiteront ou utiliseront bientôt.

L'extrait de code suivant charge de manière paresseuse une fonctionnalité de tri de la bibliothèque lodash pour trier un groupe de nombres qui sera envoyé par un formulaire:

form.addEventListener("submit", e => {
  e.preventDefault()
  import('lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

Au lieu d'attendre que l'événement "submit" se produise pour charger cette fonctionnalité, vous pouvez précharger cette ressource pour augmenter les chances qu'elle soit disponible dans le cache au moment où l'utilisateur envoie le formulaire. webpack permet cela à l'aide des commentaires magiques dans import() :

form.addEventListener("submit", e => {
   e.preventDefault()
   import(/* webpackPrefetch: true */ 'lodash.sortby')
         .then(module => module.default)
         .then(sortInput())
         .catch(err => { alert(err) });
});

Cela indique à webpack d'injecter la balise <link rel="prefetch"> dans le document HTML :

<link rel="prefetch" as="script" href="1.bundle.js">

Les avantages en termes de performances du préchargement des blocs à la demande sont un peu nuancés, mais en général, vous pouvez vous attendre à des réponses plus rapides aux interactions qui dépendent de ces blocs à la demande, car ils seront immédiatement disponibles. Selon la nature de l'interaction, cela peut avoir un impact positif sur l'INP d'une page.

Le préchargement en général est également pris en compte dans la priorisation des ressources globale. Lorsqu'une ressource est préchargée, elle l'est avec la priorité la plus faible possible. Par conséquent, les ressources préchargées ne se disputent pas la bande passante des ressources nécessaires à la page actuelle.

Préchargement intelligent avec Quicklink et Guess.js

Vous pouvez également implémenter un préchargement plus intelligent avec des bibliothèques qui utilisent prefetch en arrière-plan :

• quicklink utilise l'API Intersection Observer pour détecter quand les liens entrent dans le viewport et précharge les ressources associées pendant les temps d'inactivité. Bonus : Le lien rapide pèse moins de 1 Ko.
• Guess.js utilise des rapports d'analyse pour créer un modèle prédictif qui permet d'effectuer une précharge intelligente uniquement de ce dont l'utilisateur a besoin.

Quicklink et Guess.js utilisent tous deux l'API Network Information pour éviter le préchargement si un utilisateur utilise un réseau lent ou a activé Save-Data.

Le préchargement en arrière-plan

Les indices de ressources ne sont pas des instructions obligatoires. C'est au navigateur de décider s'ils sont exécutés et quand.

Vous pouvez utiliser le préchargement plusieurs fois sur la même page. Le navigateur place tous les indices en file d'attente et demande chaque ressource lorsqu'elle est inactive. Dans Chrome, si le préchargement n'est pas terminé et que l'utilisateur accède à la ressource de préchargement prévue, le chargement en cours est détecté comme navigation par le navigateur (les autres fournisseurs de navigateurs peuvent implémenter cette fonctionnalité différemment).

Le préchargement a lieu avec la priorité la plus basse. Les ressources préchargées ne se disputent donc pas la bande passante avec les ressources requises sur la page actuelle.

Les fichiers préchargés sont stockés dans le cache HTTP, ou cache de la mémoire (selon que la ressource peut être mise en cache ou non), pendant une durée qui varie selon les navigateurs. Par exemple, dans Chrome, les ressources sont conservées pendant cinq minutes, après quoi les règles Cache-Control habituelles de la ressource s'appliquent.

Conclusion

L'utilisation de prefetch peut considérablement améliorer les temps de chargement des futures navigations et même donner l'impression que les pages se chargent instantanément. prefetch est largement compatible avec les navigateurs modernes, ce qui en fait une technique intéressante pour améliorer l'expérience de navigation de nombreux utilisateurs. Cette technique nécessite de charger des octets supplémentaires qui ne sont peut-être pas utilisés. Soyez donc vigilant lorsque vous l'utilisez : ne le faites que lorsque cela est nécessaire et, idéalement, uniquement sur des réseaux rapides.