Échec de la connexion. Veuillez réessayer.

Aller au contenu
SEO Tools
Aide et documentation
Vitesse Impact faible Moyen 15 à 30 minutes

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

  1. 1Préchargez l'image LCP (le visuel principal au-dessus de la ligne de flottaison).
  2. 2Préchargez les polices clés et ajoutez font-display: swap.
  3. 3N'en faites pas trop : tout précharger dilue la priorité et fait mal.

Exemple

Correct
<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