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

Publié le 12 septembre 2019, dernière mise à jour le 8 février 2025

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>, qui vous permet d'implémenter le préchargement de manière efficace.

Améliorer les performances de votre site avec rel=prefetch

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

<link rel="prefetch" href="/css/styles.css">

L'indice prefetch consomme des octets supplémentaires pour les ressources qui ne sont pas immédiatement nécessaires. Par conséquent, cette technique doit être appliquée de manière réfléchie. Ne préchargez les ressources que lorsque vous êtes sûr 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.

Cas d'utilisation

Le préchargement peut être utilisé de nombreuses façons pour accélérer les pages Web en téléchargeant des ressources à l'avance.

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.

Attention:L'API Speculation Rules offre plusieurs avantages par rapport au préchargement pour la précharge des navigations pour les navigateurs compatibles avec cette API, y compris la gestion des navigations non en cache et la gestion cohérente du préchargement inter-origines.

Par exemple, sur une page de liste de produits, 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.

Remarque:eBay a implémenté le préchargement pour les cinq premiers résultats d'une page de recherche afin d'accélérer le chargement des pages suivantes. L'entreprise a constaté un impact positif sur les taux de conversion.

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écharger 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, il a pu réduire le délai avant interactivité de 30% pour les futures navigations.

Au moment de la rédaction de cet article, il est possible de partager des ressources préchargées entre les pages diffusées à partir de différentes origines. Lorsque le cache HTTP à double clé sera disponible, il ne fonctionnera que pour les navigations de niveau supérieur et les sous-ressources de même origine, mais il ne sera pas possible de réutiliser les sous-ressources préchargées entre différentes origines. Cela signifie que si a.com précharge la ressource b.com/library.js, elle ne sera pas disponible dans le cache c.com. Certains navigateurs, comme ceux basés sur WebKit, partitionnent déjà les caches et le stockage HTML5 pour tous les domaines tiers.

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 éliminé. Étant donné que les feuilles de style bloquent le rendu, elles peuvent réduire le LCP lorsqu'elles sont préchargées. Si l'élément LCP de la page suivante est une image de fond CSS demandée à l'aide de la propriété background-image, l'image est é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. Lorsque le balisage est affiché côté client à l'aide de JavaScript, le LCP peut être amélioré en réduisant les délais de chargement des ressources. Le rendu côté client du balisage contenant l'élément LCP d'une page peut également être plus rapide.
• 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 des blocs JavaScript à la demande

Le fractionnement du code de vos bundles JavaScript vous permet de ne charger initialement que certaines parties d'une application et de charger le reste 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 immédiatement nécessaires, 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.

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="//css/styles.css">
  ...
</head>

Vous pouvez également lancer le préchargement avec 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.

Remarque : prefetch est compatible avec tous les navigateurs modernes, à l'exception de Safari. Vous pouvez implémenter une technique de remplacement pour Safari avec des requêtes XHR ou l'API Fetch.

Précharger des modules JavaScript avec des commentaires magiques webpack

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

L'extrait de code suivant charge de manière paresseuse une fonction de tri à partir 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 fonction, 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" 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. Ainsi, les ressources préchargées ne se disputent pas la bande passante des ressources dont la page actuelle a besoin.

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'précharger intelligemment uniquement ce dont l'utilisateur a besoin.

Quicklink et Guess.js utilisent l'API Network Information pour éviter le préchargement si un utilisateur se trouve sur un réseau lent ou si Save-Data est activé.

Préchargement en coulisses

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 met en file d'attente tous les indices et demande chaque ressource lorsqu'il est inactif. 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é-téléchargés sont stockés dans le cache HTTP si la ressource est mise en cache. Sinon, elle est supprimée et n'est pas utilisée.

Conclusion

L'utilisation de prefetch peut considérablement améliorer les performances Web d'un site en téléchargeant à l'avance les ressources futures nécessaires. prefetch est compatible avec la plupart des navigateurs modernes. Cette technique nécessite de charger des octets supplémentaires qui ne seront peut-être pas utilisés. Par conséquent, soyez prudent lorsque vous l'utilisez. N'utilisez-la que si nécessaire et, dans l'idéal, uniquement sur des réseaux rapides.