Utiliser les indices de ressources pour accélérer le chargement

Les indices de ressources sont un ensemble de fonctionnalités HTML qui aident le navigateur à charger certaines ressources plus tôt, voire avec une priorité plus élevée. Plutôt que de laisser le navigateur tout découvrir au fil de l’analyse du document, vous lui indiquez à l’avance quoi anticiper : ouvrir une connexion, résoudre un nom de domaine ou récupérer un fichier critique.

C’est un levier de performance directement utile au SEO. Un chargement plus rapide améliore l’expérience perçue, soutient les Signaux Web essentiels comme le Largest Contentful Paint (LCP) et réduit le risque d’abandon. Sur votre site comme dans votre CMS, ces balises s’ajoutent le plus souvent au début de l’élément head, ou se définissent en en-tête HTTP ; elles complètent un travail plus large d’optimisation du chargement des ressources.

Quatre mécanismes coexistent et répondent à des besoins différents. Le premier ensemble, preconnect et dns-prefetch, prépare la couche réseau. Le second, preload et l’API Fetch Priority, agit sur la récupération et la priorité des ressources elles-mêmes. Le tableau suivant résume leur rôle respectif.

L’indice preconnect établit à l’avance une connexion vers une origine d’où vous récupérez des ressources critiques, par exemple un CDN ou un service de polices. Le navigateur gère la résolution DNS, la connexion et la négociation TLS avant même de découvrir la ressource, ce qui peut faire gagner de 100 à 500 ms : un détail développé dans le tutoriel pour anticiper les connexions réseau.

L’indice dns-prefetch est beaucoup moins coûteux : il se contente de résoudre le nom de domaine à l’avance. Réservez preconnect aux origines les plus importantes, et utilisez dns-prefetch pour le reste.

L’indice preload force le navigateur à récupérer plus tôt une ressource critique qu’il découvrirait normalement tard, comme une police appelée en CSS ou une image LCP chargée par script. Précisez toujours l’attribut as pour éviter un double téléchargement, et ajoutez crossorigin pour les ressources en mode anonyme comme les polices.

L’attribut fetchpriority, lui, n’avance pas la découverte mais ajuste la priorité de récupération. Il accepte les valeurs high, low et auto, et s’applique aux éléments link, img et script.