Préchargement des ressources clés (préchargement)
Les ressources importantes peuvent être chargées plus tôt via rel="preload".
Ce que c’est
rel="preload" indique au navigateur de télécharger, avec une haute priorité et à l'avance, une ressource qui sera bientôt nécessaire (l'image principale au-dessus de la ligne de flottaison, une police clé, un CSS critique).
Pourquoi c’est important
Sans préchargement, le navigateur découvre tardivement certaines ressources importantes (par exemple une police référencée uniquement depuis CSS), ce qui retarde leur apparition. Le préchargement accélère cela et améliore le LCP.
Comment faire
- 1Préchargez l'image LCP (le visuel principal au-dessus de la ligne de flottaison).
- 2Préchargez les polices clés et ajoutez font-display: swap.
- 3N'en faites pas trop : tout précharger dilue la priorité et fait mal.
Exemple
<link rel="preload" href="/fonts/jakarta.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/img/hero.webp" as="image">Conclusion
Preload est un outil ciblé pour quelques ressources véritablement clés (l'image LCP, la police principale). Utilisé judicieusement, il améliore le LCP ; utilisé à tous les niveaux, cela fait plutôt mal. Moins c'est plus.
Sujets liés