Le préchargement des ressources permet d’indiquer au navigateur quelles ressources charger en priorité, avant même qu’il ne les découvre naturellement dans le HTML, le CSS ou le JavaScript. Bien utilisé, il réduit le temps de chargement perçu et améliore directement des métriques comme le LCP. Voici 7 techniques essentielles pour bien mettre en place cette optimisation sur votre site en 2026.
Qu’est-ce que le préchargement des ressources ?
Cette pratique consiste à donner des instructions explicites au navigateur, via des balises <link> placées dans le <head>, pour qu’il récupère certains fichiers plus tôt que prévu. Sans ces indices, le navigateur ne découvre une image de fond CSS, une police ou un script différé qu’après avoir analysé les fichiers qui les référencent, ce qui retarde leur affichage.
Il existe plusieurs déclinaisons de cette technique : preload, preconnect, dns-prefetch, prefetch, modulepreload et l’attribut fetchpriority. Chacune répond à un besoin précis, et les confondre peut nuire à la performance plutôt que l’améliorer.
1. Preload pour les ressources critiques
<link rel="preload"> force le navigateur à télécharger une ressource dès le début du chargement de la page, sans attendre qu’elle soit référencée ailleurs. C’est l’outil de prédilection pour la police principale, l’image héro visible sans défilement, ou une feuille de style critique.
Exemple concret : <link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>. Attention toutefois à ne préchager que 2 ou 3 ressources maximum : un usage excessif de cette technique sature la bande passante disponible au démarrage et ralentit paradoxalement l’affichage global.
2. Preconnect pour accélérer les connexions externes
rel="preconnect" établit à l’avance la connexion TCP, la négociation TLS et la résolution DNS vers un domaine tiers. C’est particulièrement utile pour les CDN de polices, les scripts d’analytics ou les régies publicitaires qui interviennent tôt dans le rendu de la page.
Chaque connexion préétablie a un coût en ressources côté navigateur : limitez le preconnect aux domaines réellement critiques, généralement pas plus de quatre ou cinq origines par page.
3. DNS-Prefetch pour résoudre les domaines tiers
Moins coûteux que preconnect, dns-prefetch se contente de résoudre le nom de domaine à l’avance, sans ouvrir la connexion complète. C’est un bon compromis pour les domaines tiers secondaires, comme des widgets sociaux ou des pixels de tracking non prioritaires.
Combiner dns-prefetch et preconnect sur un même domaine critique offre une compatibilité maximale, y compris sur les navigateurs plus anciens qui ne supportent pas pleinement le second.
4. Prefetch pour anticiper la navigation
rel="prefetch" ne sert pas la page actuelle mais la suivante : il indique au navigateur de récupérer, en tâche de fond et à faible priorité, une ressource probablement nécessaire lors de la navigation suivante (page produit, article suivant, étape de paiement).
Cette forme de préchargement est idéale sur un blog ou un site e-commerce où le parcours utilisateur est prévisible, mais elle doit rester ciblée pour ne pas gaspiller de la bande passante mobile.
5. Modulepreload pour les scripts JavaScript modernes
Pour les applications qui utilisent des modules ES natifs (type="module"), rel="modulepreload" va plus loin que le preload classique : il télécharge, analyse et met en cache le module ainsi que ses dépendances déclarées, réduisant le délai avant exécution.
Cette technique est particulièrement pertinente pour les sites construits avec des frameworks modernes (Vue, React, Svelte) qui livrent du JavaScript en modules plutôt qu’en un seul bundle monolithique.
6. Fetchpriority pour prioriser les images clés
L’attribut fetchpriority="high", apposé directement sur une balise <img>, indique au navigateur de traiter cette image en priorité par rapport aux autres ressources de même type. C’est une alternative légère au preload pour l’image principale d’une page, notamment celle qui détermine le LCP.
À l’inverse, fetchpriority="low" permet de déprioriser des images secondaires (avatars, icônes décoratives) afin de laisser la bande passante aux éléments réellement visibles à l’écran.
7. Mesurer l’impact du préchargement des ressources
Aucune de ces techniques ne doit être appliquée à l’aveugle. L’onglet Réseau des outils de développement et le rapport Preload critical assets de web.dev permettent de vérifier si une ressource préchargée est effectivement utilisée dans les secondes qui suivent, sous peine d’un avertissement navigateur pour ressource inutilisée.
Suivez également l’évolution du LCP et du temps de blocage total dans un outil de mesure Core Web Vitals avant et après chaque changement, comme détaillé dans notre guide sur le LCP Core Web Vitals, pour valider que cette optimisation produit un gain réel et non une simple redistribution de la charge.
Conclusion
Bien maîtrisé, le préchargement des ressources est un levier puissant pour accélérer l’affichage perçu d’un site, à condition de rester sélectif et de mesurer chaque ajout. Preload, preconnect, dns-prefetch, prefetch, modulepreload et fetchpriority forment une boîte à outils complémentaire, à combiner selon la nature de chaque ressource plutôt qu’à appliquer systématiquement partout.