Qu'est-ce que le préchargement des ressources (preload) ?

Qu'est-ce que le préchargement des ressources ?

Précharger consiste à indiquer au navigateur, avec <link rel="preload"> ou un en-tête Link équivalent, que la page actuelle aura bientôt besoin d'un fichier précis. Le navigateur le télécharge alors plus tôt et avec une priorité plus haute, au lieu d'attendre de le découvrir. C'est utile pour les ressources découvertes tard, comme une police citée dans le CSS ou une image principale définie en arrière-plan CSS.

Comment fonctionne preload

Un preload demande un href et une valeur as qui indique le type de fichier : fetch, font, image, script, style ou track. Grâce à as, le navigateur applique la bonne priorité et associe le préchargement à la requête suivante. Un script préchargé est téléchargé et mis en cache, mais pas exécuté. Pour les modules JavaScript, utilisez modulepreload.

• Les polices et les requêtes fetch exigent crossorigin, même pour un fichier de votre propre origine. Les polices utilisent toujours CORS anonyme ; sans l'attribut, le préchargement n'est pas réutilisé et le fichier est téléchargé deux fois.
• type permet au navigateur d'ignorer un format qu'il ne gère pas, par exemple type="font/woff2".
• media rend le préchargement conditionnel : un écran étroit peut précharger une autre image qu'un écran large.

Exemple

Une page d'atterrissage affiche une image principale définie en CSS et une police web. Le navigateur ne les découvre qu'après avoir téléchargé et analysé la feuille de style, ce qui retarde le Largest Contentful Paint. Deux lignes dans le <head> avancent cette découverte au tout début :

<link rel="preload" href="/hero.webp" as="image" type="image/webp" fetchpriority="high">
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>

Preload, prefetch et preconnect

Ces indications répondent à des besoins différents. Preload concerne ce dont la page actuelle aura bientôt besoin. Prefetch concerne ce qu'une navigation ultérieure pourrait demander, à priorité basse. Preconnect ouvre seulement la connexion vers une autre origine et aide pour les connexions réseau vers des tiers. N'utilisez pas preload pour les fichiers de la page suivante, ni prefetch pour ce dont la page a besoin maintenant.

Erreurs fréquentes

• Précharger trop. Les préchargements se font concurrence et rivalisent avec des fichiers que le navigateur aurait demandés en premier de toute façon. Limitez-vous à un ou deux qui bloquent le rendu.
• Précharger plusieurs formats d'une même image. D'après MDN, chaque variante préchargée est téléchargée alors qu'une seule sert. Préchargez le format reçu par la plupart des visiteurs.
• Une valeur as erronée ou un crossorigin oublié. Le préchargement ne correspond alors pas à la vraie requête et le fichier est demandé deux fois.
• Précharger une ressource que la page n'utilise jamais. Cela consomme de la bande passante et peut retarder des fichiers importants.
• Précharger ce qui doit justement être différé. Cela annule le gain du chargement différé (lazy loading). Ne préchargez que ce qui est visible au premier affichage.

Lien avec les tests de performance et la surveillance

Un préchargement change ce que fait le navigateur : mesurez-le. Comparez la cascade et le LCP avec et sans l'indication, y compris sur une connexion bridée. Le vérificateur gratuit des Core Web Vitals indique si les vrais utilisateurs de Chrome réussissent déjà LCP, INP et CLS, et la surveillance de la vitesse de page LoadFocus lance des audits Lighthouse planifiés depuis 25 régions cloud, pour voir si un changement a aidé partout ou seulement près de votre serveur. D'autres leviers front-end figurent dans le guide en 10 étapes pour accélérer un site (en anglais).

Questions fréquentes : préchargement des ressources

Quelle différence entre preload et prefetch ?

Preload récupère, avec une priorité plus haute, un fichier dont la page actuelle aura bientôt besoin. Prefetch récupère, à priorité basse, un fichier qu'une page ultérieure pourrait demander.

Quelles ressources faut-il précharger ?

Seulement les quelques-unes découvertes tard qui bloquent le premier rendu : l'image du LCP, une police web importante ou un script ou une feuille de style critique. Vérifiez dans la cascade que chacune est bien découverte tard.

Pourquoi ma police est-elle téléchargée deux fois ?

Les préchargements de polices doivent porter l'attribut crossorigin, même pour des fichiers de même origine. Sans lui, la copie préchargée n'est pas réutilisée pour la vraie requête de la police.

Preload exécute-t-il mon script ?

Non. Un script préchargé est téléchargé et mis en cache, puis il ne s'exécute que lorsque la page l'inclut avec une balise script.

Preload peut-il ralentir une page ?

Oui. Trop de préchargements se disputent la bande passante avec des fichiers plus importants. Mesurez le LCP avant et après chacun.