Prefetch de ressources : preload, preconnect

Qu'est-ce que le prefetch de ressources ?

Le prefetch de ressources est une famille d'indications (hints) pour le navigateur, écrites sous forme de balises <link rel="..."> ou d'en-têtes Link. Elles lui demandent de télécharger une ressource ou d'ouvrir une connexion plus tôt qu'il ne le ferait seul. La page actuelle se charge alors plus vite, ou la navigation suivante paraît instantanée. Un hint est une suggestion : le navigateur peut l'ignorer.

Les hints en un coup d'œil

Comment fonctionnent les hints

preload fait découvrir et télécharger une ressource tôt, puis la garde pour la réutiliser. L'attribut as (image, font, script, style, fetch, track) indique sa nature, afin que le navigateur applique la bonne priorité et les bons en-têtes. Les preloads de polices et de fetch doivent porter crossorigin, même pour un fichier de même origine, sinon le navigateur le télécharge deux fois.

preconnect paie le coût de la connexion avant la première requête. Il ne sert à rien pour votre propre origine, déjà connectée. Les navigateurs ferment les connexions inutilisées après environ 10 secondes : ne préconnectez que des origines utilisées tout de suite. Pour les polices et autres requêtes CORS, il faut crossorigin, faute de quoi le navigateur ne fait que la résolution DNS.

dns-prefetch est la version économique : il résout le nom d'hôte et s'arrête là. Une résolution DNS prend généralement quelques dizaines de millisecondes et ne pèse que si la page contacte de nombreuses origines.

prefetch télécharge une ressource dans le cache HTTP en priorité basse, pour une navigation qui n'a pas encore eu lieu. Cache-Control: no-store et no-cache le bloquent, et la requête porte l'en-tête Sec-Purpose: prefetch, visible par votre serveur. Pour des documents entiers, MDN recommande la Speculation Rules API là où elle est prise en charge ; voir chargement spéculatif et prérendu.

fetchpriority est un attribut distinct (high, low, auto) pour img, script et link. Il monte ou baisse la priorité sans aider le navigateur à trouver la ressource plus tôt ; on le combine donc avec preload pour une image définie en CSS.

Exemple : image principale et police

Une page d'atterrissage a une image principale en arrière-plan CSS et une police web. Le navigateur ne les découvre qu'après l'analyse du CSS, ce qui retarde le Largest Contentful Paint. Deux hints dans le head règlent la découverte tardive :

<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

Les polices et autres fichiers tiers servis par un CDN profitent d'une connexion anticipée :

<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="dns-prefetch" href="https://cdn.example.com">

Pour une page suivante probable, un prefetch de priorité basse ou une règle de spéculation réchauffe le cache :

<link rel="prefetch" href="/pricing">

<script type="speculationrules">
{
  "prefetch": [{ "urls": ["/pricing", "/signup"] }]
}
</script>

Speculation Rules reste expérimental et n'existe pas dans tous les navigateurs : traitez-le comme un bonus et vérifiez la compatibilité avant de vous y fier.

Erreurs fréquentes

• Précharger trop. Les preloads se font concurrence et rivalisent avec ce que le navigateur aurait chargé de toute façon. Limitez-vous à une ou deux ressources qui conditionnent le LCP.
• Oublier crossorigin. Sans lui, le preload d'une police n'est pas réutilisé et le fichier est téléchargé deux fois.
• Mauvaise valeur de as. Le preload n'est alors pas associé à la requête suivante.
• Préconnecter tous les tiers. Chaque connexion coûte de la bande passante et du CPU pour le TLS, et les inactives sont fermées après environ 10 secondes. Utilisez dns-prefetch pour le reste.
• Prefetcher des pages que personne ne visite. Cela consomme les données du visiteur sans bénéfice, surtout sur mobile. Appuyez la liste sur de vrais parcours.
• Prefetcher des URL à effets de bord. Une URL de déconnexion ou d'ajout au panier atteint quand même votre serveur.

Lien avec les tests de performance et la surveillance

Les hints modifient le comportement du navigateur : mesurez avant et après plutôt que de vous fier à la théorie. Comparez la cascade et le LCP avec et sans chaque hint. Le vérificateur gratuit de Core Web Vitals indique si les vrais utilisateurs réussissent déjà LCP, INP et CLS, et la surveillance de la vitesse de page de LoadFocus lance des audits Lighthouse planifiés depuis 25 régions cloud pour voir si un changement a aidé partout ou seulement près de votre serveur. Pour les autres leviers frontend, voyez le guide en 10 étapes pour accélérer un site. À lire aussi : connexions réseau et vitesse de page et préchargement des ressources.

Questions fréquentes : prefetch de ressources

Quelle différence entre preload et prefetch ?

Preload sert pour ce dont la page actuelle aura bientôt besoin et se télécharge en priorité haute. Prefetch sert pour ce qu'une navigation ultérieure pourrait demander et se télécharge en priorité basse.

Faut-il précharger l'image principale ?

Si c'est l'élément LCP et que le navigateur la trouverait tard, par exemple parce qu'elle est en arrière-plan CSS, oui. Associez-la à fetchpriority="high" et vérifiez dans une cascade que le LCP s'améliore.

Combien de preconnect, c'est trop ?

Il n'y a pas de chiffre fixe. MDN et web.dev conseillent de ne préconnecter que les origines les plus critiques, car chaque connexion a un coût et celles qui ne servent pas sont fermées après environ 10 secondes. Utilisez dns-prefetch pour le reste.

Quelle différence entre preconnect et dns-prefetch ?

dns-prefetch ne fait que résoudre le nom d'hôte. Preconnect ouvre en plus la connexion TCP et, en HTTPS, termine la poignée de main TLS.

Prefetch et prerender, est-ce pareil ?

Non. Prefetch télécharge une ressource sans l'exécuter. Prerender charge et affiche une page entière en cachette, ce qui coûte bien plus : réservez-le aux navigations très probables.

Le prefetch consomme-t-il des données mobiles ?

Il le peut, si l'utilisateur ne visite jamais la page préchargée. Ne préchargez que les étapes suivantes très probables et évitez le chargement spéculatif pour les utilisateurs qui ont demandé d'économiser les données.