Que sont les resource hints ?

Que sont les resource hints ?

Les resource hints (indications de ressources) sont de courtes instructions, écrites sous forme de balises <link rel="..."> ou d'en-têtes Link, qui indiquent au navigateur quelles origines ou quels fichiers il utilisera probablement, afin qu'il commence à travailler plus tôt. L'ensemble habituel est dns-prefetch, preconnect, preload, prefetch et prerender ; MDN ajoute modulepreload pour les modules JavaScript. Un hint est une suggestion : le navigateur peut l'ignorer.

Quel hint répond à quelle question

• La page va-t-elle bientôt utiliser une autre origine ? preconnect effectue à l'avance la requête DNS, la connexion TCP et la poignée de main TLS. Il n'apporte rien pour votre propre origine, et MDN conseille de le réserver à vos connexions inter-origines les plus critiques. dns-prefetch ne fait que l'étape DNS, ce qui convient aux origines moins importantes.
• La page actuelle a-t-elle besoin d'un fichier qu'elle découvre tard ? preload le télécharge tôt et en priorité haute, par exemple une image LCP définie en CSS ou une police web. Il demande une valeur as et, pour les polices, crossorigin. modulepreload est la version pour les modules JavaScript. Les détails sont dans le préchargement des ressources.
• Une page ultérieure pourrait-elle avoir besoin d'un fichier ? prefetch le télécharge en priorité basse dans le cache HTTP, pour une prochaine navigation probable. Cache-Control: no-store et no-cache le bloquent, et il ne sert à rien d'un site à l'autre. Voir le prefetch de ressources.
• Une page entière est-elle très probable ensuite ? prerender devait la rendre à l'avance, mais MDN le juge désormais obsolète (deprecated) et propre à Chrome : il se contente de télécharger le document et les ressources qu'il trouve dans le cache HTTP. Pour un vrai prérendu, utilisez la Speculation Rules API ; voir le prérendu.

Proche mais différent : l'attribut fetchpriority relève ou abaisse la priorité d'une requête. Il ne fait pas trouver le fichier plus tôt, d'où son association fréquente avec preload pour une image définie en CSS. Les coûts de connexion qu'économisent preconnect et dns-prefetch sont expliqués dans connexions réseau et vitesse de page.

Exemple

Une page d'atterrissage charge des polices et un script depuis un CDN, affiche une image principale définie en CSS et renvoie vers une page de tarifs que la plupart des visiteurs ouvrent ensuite. Quatre lignes dans le head suffisent :

<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="preload" href="/hero.webp" as="image" fetchpriority="high">
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="prefetch" href="/pricing">

Les trois premières aident cette page à se charger. La dernière réchauffe le cache de la page suivante, en priorité basse.

Erreurs courantes

• En mettre trop. MDN prévient que tout précharger supprime le bénéfice, et que préconnecter à de nombreuses origines peut se retourner contre vous.
• Annoncer ce que la page n'utilise jamais. Un preload ou un prefetch pour un fichier inutilisé consomme de la bande passante pour rien.
• Une valeur as erronée ou l'absence de crossorigin. Le navigateur ne peut alors pas associer le hint à la vraie requête et peut télécharger le fichier deux fois.
• Compter sur prerender. Il est obsolète et ne rend plus la page ; utilisez Speculation Rules là où elles sont prises en charge, comme un complément.
• Faire un prefetch d'URL à effets de bord. Un lien de déconnexion ou d'ajout au panier préchargé atteint quand même votre serveur.
• Ne jamais mesurer. Un hint change le comportement du navigateur ; comparez la cascade et le Largest Contentful Paint avec et sans lui.

Lien avec les tests et la surveillance

Vérifiez chaque hint dans une cascade : le fichier doit démarrer plus tôt et l'indicateur visé doit bouger. Testez avec une connexion bridée et depuis plusieurs lieux, car un hint utile près du serveur peut peu apporter à distance. LoadFocus Page Speed Monitoring lance des audits Google Lighthouse planifiés depuis 25 régions cloud, avec des alertes quand un score ou un indicateur se dégrade. Le vérificateur gratuit de Core Web Vitals affiche le LCP, l'INP et le CLS d'utilisateurs réels à partir des données CrUX de Google. Pour d'autres améliorations front-end, lisez le guide en 10 étapes pour accélérer un site, et consultez le guide MDN du chargement spéculatif pour la syntaxe exacte.

Questions fréquentes : resource hints

Quels sont les resource hints ?

dns-prefetch, preconnect, preload, prefetch et prerender, plus modulepreload pour les modules JavaScript. Prerender est obsolète au profit de Speculation Rules.

Quelle différence entre preload et prefetch ?

Preload télécharge en priorité haute un fichier dont la page actuelle a bientôt besoin. Prefetch télécharge en priorité basse un fichier dont une page ultérieure pourrait avoir besoin.

Quand utiliser preconnect plutôt que dns-prefetch ?

Preconnect pour les quelques serveurs d'autres origines que vous utiliserez à coup sûr tout de suite, car il ouvre aussi la connexion. dns-prefetch pour les origines moins importantes, car il ne résout que le nom d'hôte.

Fetchpriority remplace-t-il preload ?

Non. Fetchpriority change l'urgence avec laquelle le navigateur télécharge un fichier qu'il connaît déjà. Preload lui fait découvrir un fichier plus tôt. On peut les associer.

Les resource hints peuvent-ils ralentir mon site ?

Oui. Trop de hints se disputent la bande passante et les connexions avec des fichiers plus importants. Limitez-vous aux quelques-uns qui conditionnent le premier rendu et mesurez le résultat.