Resource Prefetch : Définition, Hints, Best Practices Performance
Le prefetching ressources dit au navigateur de fetcher des ressources avant qu'elles soient nécessaires — preload, prefetch, preconnect, dns-prefetch.
Qu'est-ce que le resource prefetching ?
Le resource prefetching est un set de hints navigateur qui disent au navigateur de fetcher (ou pré-résoudre) des ressources plus tôt qu'il ne le ferait normalement — pour rendre les loads subséquents plus rapides. Le navigateur décide encore de la priorité et du timing.
Les quatre hints principaux : preload, preconnect, dns-prefetch, prefetch.
Les quatre types de hint ressource
| Hint | Ce qu'il fait | Quand utiliser |
|---|---|---|
preload | Fetch ressource pour page actuelle, haute priorité | Fonts critiques, hero images |
preconnect | Ouvrir connexion TCP + TLS au domaine | Domaines dont vous fetchez bientôt |
dns-prefetch | Résoudre DNS pour domaine | Beaucoup de domaines third-party |
prefetch | Fetch ressource pour likely next navigation | Ressources prédites prochaine page |
prerender | Render page suivante entière en background | Highly likely navigation |
preload : ressources critical-path
<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>preconnect : réchauffer connexions
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://api.example.com">dns-prefetch : alternative plus légère
<link rel="dns-prefetch" href="https://analytics.example.com">prefetch : spéculer sur prochaine page
<link rel="prefetch" href="/products">
<link rel="modulepreload" href="/checkout.js">fetchpriority
<img src="hero.webp" fetchpriority="high">
<img src="footer.webp" fetchpriority="low" loading="lazy">Patterns pratiques
Preload image LCP
<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">Font critique
<link rel="preload" href="/inter.woff2" as="font" type="font/woff2" crossorigin>API call
<link rel="preconnect" href="https://api.example.com" crossorigin>Moderne : Speculation Rules API
<script type="speculationrules">
{
"prerender": [{ "urls": ["/products"] }]
}
</script>Best practices resource hint
- Seulement preload critical path.
- Preconnect à top 3-4 origins third-party.
- dns-prefetch peut être libéral.
- Prefetch likely next pages.
- crossorigin sur font/fetch preloads.
- Tester avec WebPageTest.
- Ne pas preload tout.
- Lazy-load below the fold.
Pièges courants
- Sur-preloading.
- crossorigin manquant.
- Valeur
asincorrecte. - Preload non-critique.
- Trop d'origins preconnect.
- Prefetch avec utilisateurs bandwidth-light.
- Prefetch stale.
FAQ : resource prefetching
preload vs prefetch : quelle est la différence ?
preload = page actuelle. prefetch = prochaine navigation.
Devrais-je preload mon image hero ?
Oui — avec fetchpriority="high".
Combien de hints preconnect sont trop ?
3-4 est le sweet spot.
Le prefetch fonctionne-t-il sur mobile ?
Oui, mais consomme les data utilisateur.
Qu'est-ce que modulepreload ?
Comme preload mais pour ES modules.
Puis-je prefetcher des pages entières ?
Oui via prefetch ou Speculation Rules API.
Comment je mesure l'impact preload ?
Waterfall WebPageTest.
Testez l'impact performance prefetch avec LoadFocus
LoadFocus exécute des audits Lighthouse depuis 25+ régions. Inscrivez-vous sur loadfocus.com/signup.
Outils LoadFocus connexes
Mettez ce concept en pratique avec LoadFocus — la plateforme même qui propulse tout ce que vous venez de lire.