Que sont les resource hints comme preload, prefetch et preconnect ?

Question

Accepted Answer

Les **resource hints** sont des balises `` qui indiquent au navigateur de récupérer ou de se connecter à des ressources tôt, optimisant les performances de chargement. Chacune répond à un besoin de timing/priorité différent. ```html ``` ## Ce que chacune fait - **`preload`** — « J'ai besoin de cela **pour la page actuelle**, récupère-le maintenant avec haute priorité. » Pour les ressources critiques que l'analyseur découvre tard : polices, images héros, ressources référencées par CSS. Nécessite `as` pour que le navigateur définisse la priorité/les en-têtes corrects. - **`preconnect`** — « Je vais me connecter à cette **origin** bientôt ; fais la résolution DNS + TCP + poignée de main TLS maintenant. » Économise les allers-retours avant la première requête vers un tiers (API, hôte de polices, CDN). À utiliser pour quelques origines critiques. - **`dns-prefetch`** — une version plus légère de preconnect : seulement la résolution DNS. Bon repli / pour de nombreuses origines. - **`prefetch`** — « J'aurai **probablement** besoin de cela pour la **prochaine** navigation ; récupère-le à basse priorité en arrière-plan. » Pour les pages/ressources probablement prochaines. Mis en cache pour l'avenir, pas pour la page actuelle. ## Un exemple réel courant : les polices ```html ``` Les polices sont découvertes tard (le navigateur doit d'abord analyser CSS), donc les précharger évite les délais de texte invisible. ## Attention : ne pas sur-donner d'indices Précharger tout anéantit l'objectif — cela entre en concurrence avec les ressources vraiment critiques pour la bande passante. Ne donnez des indices que pour les quelques-unes qui comptent le plus. ## Pourquoi c'est important Les resource hints réduisent la latence sur le chemin critique : `preconnect` supprime le délai de poignée de main pour les tiers, `preload` priorise les ressources critiques découvertes tard (polices, image LCP), et `prefetch` rend la *prochaine* navigation instantanée. Utilisés avec précision, ils améliorent significativement les Core Web Vitals.