Découvrez l'indice de ressource rel=prefetch et comment l'utiliser.
Des études montrent que des temps de chargement plus rapides permettent d'augmenter les taux de conversion et d'améliorer l'expérience utilisateur. Si vous avez un aperçu de la façon dont les utilisateurs se déplacent sur votre site Web et des pages qu'ils sont susceptibles de visiter ensuite, vous pouvez améliorer le temps de chargement des futures navigations en téléchargeant les ressources pour 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 la navigation avec rel=prefetch
L'ajout de <link rel=prefetch> à une page Web indique au navigateur de télécharger des pages entières ou certaines ressources (telles que 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 l'appliquer de manière réfléchie. ne préchargent les ressources que lorsque vous êtes sûr que les utilisateurs en auront besoin. Pensez à ne pas effectuer de préchargement lorsque la connexion des utilisateurs est lente. Vous pouvez le détecter à l'aide de l'API Network Information.
Il existe différentes manières de déterminer les liens à précharger. La plus simple consiste à précharger le premier ou les premiers liens de la page active. D'autres bibliothèques utilisent également des approches plus sophistiquées, expliquées plus loin dans cet article.
Cas d'utilisation
Préchargement des pages suivantes
Prélire les documents HTML lorsque les pages suivantes sont prévisibles, de sorte que lorsqu'un utilisateur clique sur un lien, la page se charge 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 d'achat, la probabilité qu'un utilisateur accède à la page de paiement est généralement élevée, ce qui en fait un bon candidat pour le préchargement.
Bien que le préchargement des ressources utilise davantage de bande passante, il peut améliorer la plupart des métriques de performances. Le délai avant le premier octet (TTFB) est souvent inférieur, car la demande de document entraîne un succès de cache. Étant donné que le TTFB sera inférieur, les métriques temporelles suivantes le seront également souvent, y compris Largest Contentful Paint (LCP) et First Contentful Paint (FCP).
Préchargement des éléments statiques
Prélire les éléments statiques, tels que des scripts ou des feuilles de style, lorsque les sections suivantes que l'utilisateur est susceptible de consulter peuvent être prédites. Cela s'avère particulièrement utile lorsque ces composants sont partagés sur de nombreuses pages.
Par exemple, Netflix utilise le temps que les utilisateurs passent sur des pages déconnectées pour précharger React, qui sera utilisé une fois que les utilisateurs se connecteront. Grâce à cela, l'équipe a réduit de 30% le temps de rendu interactif pour les prochaines navigations.
L'effet du préchargement des éléments statiques sur les métriques de performances dépend de la ressource préchargée:
- Le préchargement des images peut réduire considérablement les durées LCP des éléments d'image LCP.
- Le préchargement des feuilles de style peut améliorer à la fois le FCP et le LCP, car le temps de téléchargement des feuilles de style par le réseau est 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 de JavaScript permet de traiter le script préchargé beaucoup plus tôt que s'il devait d'abord être récupéré par le réseau lors de la navigation. Cela peut avoir un effet sur l'INP (Interaction to Next Paint) 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 déjà utilisées par la page active peut éliminer les décalages de mise en page. Dans les cas où
font-display: swap;est utilisé, la période d'échange de la police est supprimée, ce qui accélère l'affichage du texte et élimine les décalages de mise en page. Si une prochaine 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 fragments 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 l'une de vos pages contient un bouton qui ouvre une boîte de dialogue contenant un sélecteur d'emoji, vous pouvez le diviser en trois parties JavaScript : accueil, boîte de dialogue et sélecteur. 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 de demander au navigateur de précharger ces fragments à la demande.
Comment implémenter rel=prefetch ?
Le moyen le plus simple d'implémenter prefetch consiste à ajouter une balise <link> à la section <head> du document:
<head>
...
<link rel="prefetch" href="/articles/" as="document">
...
</head>
L'attribut as aide le navigateur à définir les bons en-têtes 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'un des avantages de spécifier une indication 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 les commentaires magiques webpack
webpack vous permet de précharger les scripts pour les itinéraires ou les fonctionnalités que vous êtes susceptible de consulter ou d'utiliser prochainement.
L'extrait de code suivant charge une fonctionnalité de tri à partir de la bibliothèque lodash afin de trier un groupe de nombres qui seront envoyés 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 l'envoi pour charger cette fonctionnalité, vous pouvez précharger cette ressource afin d'augmenter ses chances de la retrouver dans le cache au moment où l'utilisateur envoie le formulaire. webpack permet d'utiliser les 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 du préchargement des fragments à la demande sont un peu nuancés, mais de manière générale, vous pouvez vous attendre à obtenir des réponses plus rapides aux interactions qui dépendent de ces fragments à la demande, car ils sont disponibles immédiatement. Selon la nature de l'interaction, cela pourrait bénéficier à l'INP d'une page.
De manière générale, le préchargement est également pris en compte dans la hiérarchisation globale des ressources. Lorsqu'une ressource est préchargée, elle est effectuée avec la priorité la plus basse possible. Ainsi, les ressources préchargées ne se disputent pas la bande passante pour les 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:
- Le quicklink utilise l'API Intersection Observer pour détecter quand des liens arrivent dans la fenêtre d'affichage et précharge les ressources associées pendant la durée d'inactivité. Bonus: Quicklink pèse moins de 1 Ko !
- Guess.js utilise des rapports d'analyse pour créer un modèle prédictif qui permet de précharger intelligemment uniquement les éléments dont l'utilisateur est susceptible d'avoir 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 indications de ressources ne sont pas obligatoires, et c'est au navigateur de décider si et quand elles doivent être exécutées.
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 chargement d'un préchargement n'est pas terminé et que l'utilisateur accède à la ressource de préchargement destinée, la charge en cours de transfert est récupérée en tant que navigation par le navigateur (d'autres fournisseurs de navigateurs peuvent implémenter cela différemment).
Le préchargement a lieu à la valeur "La plus basse" priorité, de sorte que les ressources préchargées n'entrent pas en concurrence pour la bande passante avec les ressources requises dans la page en cours.
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 le temps de chargement des prochaines navigations et même donner l'impression que les pages se chargent instantanément. prefetch est largement compatible avec les navigateurs récents, 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 prudent lorsque vous l'utilisez. ne le font que lorsque cela est nécessaire et, idéalement, uniquement sur des réseaux rapides.