Précharger les ressources critiques avec rel=preload
Apprenez à utiliser rel=preload pour récupérer plus tôt vos ressources critiques (polices, CSS, JS, image LCP) et accélérer le rendu.
Quand le navigateur ouvre une page, il demande le document HTML, l’analyse, puis récupère les ressources référencées au fur et à mesure. Certaines, comme une police appelée dans une feuille de style, ne sont découvertes que tardivement. Le préchargement avec rel=preload corrige ce retard : vous demandez à l’avance les ressources critiques que vous connaissez déjà.
C’est une optimisation à fort impact pour le SEO. En récupérant plus tôt une image hero ou une police clé, vous accélérez le rendu et améliorez le Largest Contentful Paint (LCP), un Signal Web essentiel. Plusieurs sites ont mesuré jusqu’à une seconde de gain sur des métriques centrées utilisateur après l’avoir mis en place.
Le preload est redoutablement efficace, et c’est précisément pour ça qu’il faut s’en méfier. Je le réserve aux ressources découvertes tardivement, comme une police appelée dans une feuille de styles, ou à l’image hero qui porte le LCP. Précharger une ressource que le navigateur trouverait déjà tôt, c’est du gaspillage qui ralentit le reste.
Comment fonctionne le préchargement
Avec rel=preload, vous indiquez au navigateur de récupérer une ressource plus tôt que d’habitude parce qu’elle est certaine d’être utile à la page. Contrairement à d’autres indices de ressources comme preconnect ou prefetch, qui restent facultatifs, preload est une instruction obligatoire pour le navigateur.
Les ressources préchargées sont mises en cache et disponibles immédiatement au moment voulu : le navigateur ne les exécute pas et n’applique pas les styles tant qu’elles ne sont pas réellement utilisées. Un préchargement non consommé déclenche d’ailleurs un avertissement dans la console quelques secondes après le chargement.
Quelles ressources précharger
Le préchargement n’a de sens que pour les ressources critiques découvertes tardivement. L’audit Lighthouse Précharger les requêtes clés aide à repérer les éléments situés au troisième niveau de la chaîne de requêtes critiques. Le tableau ci-dessous récapitule les cas d’usage les plus fréquents.
| Ressource | Pourquoi la précharger | Attribut as |
|---|---|---|
Police web |
Définie en CSS via @font-face, donc découverte tard |
font |
CSS non critique |
Évite d’attendre l’exécution de JavaScript |
style |
JavaScript critique |
Sépare la récupération de l’exécution |
script |
Image LCP |
Candidate au Largest Contentful Paint chargée par script ou CSS |
image |
Implémenter rel=preload correctement
Le plus simple est d’ajouter une balise link dans le head du document. L’attribut as est indispensable : il aide le navigateur à fixer la priorité, à envoyer les bons en-têtes et à éviter un double téléchargement. Pour les ressources chargées en mode anonyme, comme les polices, ajoutez crossorigin ; le chargement des polices mérite d’ailleurs une attention particulière. L’attribut type permet enfin au navigateur d’ignorer un format qu’il ne sait pas lire.
<head>
<link rel="preload" as="script" href="critical.js">
<link rel="preload" href="police.woff2" as="font" type="font/woff2" crossorigin>
</head>Omettre l’attribut as, ou lui donner une valeur invalide, revient à une requête sans destination connue : le navigateur ne peut pas déterminer la priorité et certaines ressources, comme les scripts, sont récupérées deux fois. De même, une police préchargée sans crossorigin est téléchargée en double et gaspille de la bande passante.
À faire
- précharger uniquement les ressources critiques
- toujours renseigner as
- servir les polices en WOFF 2.0
- mesurer l’impact réel
À éviter
- précharger trop d’éléments
- oublier crossorigin sur les polices
- précharger des formats de police anciens qui retardent le LCP
Points clés à retenir
- Réservez-le aux ressources réellement importantes
- Renseignez toujours l'attribut as
- Ajoutez crossorigin pour les polices
- Combinez-le avec fetchpriority="high" pour l'image LCP
- Vérifiez l'absence de préchargements inutilisés
rel=preload récupère plus tôt les ressources critiques découvertes tardivement.
Quiz : testez vos connaissances
Quiz : testez vos connaissances
-
preload est-il une simple suggestion pour le navigateur ?
- Oui, comme preconnect ou prefetch, le navigateur peut l'ignorer
- Non, c'est une récupération obligatoire que le navigateur doit honorer
- Oui, sauf pour les images
Contrairement à
preconnectouprefetch, qui restent facultatifs,preloadest une instruction obligatoire que le navigateur doit honorer. -
Pourquoi l'attribut as est-il indispensable avec rel=preload ?
- Il indique la durée de mise en cache de la ressource
- Il aide le navigateur à fixer la priorité, envoyer les bons en-têtes et éviter un double téléchargement
- Il définit l'origine de connexion de la ressource
L’attribut
asaide le navigateur à fixer la priorité, à envoyer les bons en-têtes et à éviter un double téléchargement. L’omettre revient à une requête sans destination connue. -
Que se passe-t-il si vous préchargez trop de ressources ?
- Le navigateur accélère encore le chargement de la page
- Vous créez une contention de bande passante qui pénalise surtout les connexions lentes
- Les ressources préchargées sont automatiquement ignorées
Précharger trop d’éléments crée une contention de bande passante qui pénalise surtout les connexions lentes. Mieux vaut se concentrer sur quelques ressources à forte valeur.
À propos de l'auteur
Besoin d'un accompagnement SEO ?
Vous voulez identifier les ressources à précharger en priorité sur votre site ?