Définition technique
Directives <link> dans le <head> pour optimiser le chargement : rel="preload" indique une ressource critique à récupérer tôt (police, script, CSS, image hero) ; rel="preconnect" ouvre dès le début une connexion TCP/TLS vers un domaine tiers (CDN, API, fonts). preload force la priorité de la ressource ; preconnect réduit la latence des requêtes ultérieures vers ce domaine. Mal utilisé (trop de preload, ressources non critiques), le preload peut nuire au First Contentful Paint en retardant d’autres ressources. Preload nécessite as pour les scripts (as="script"), style pour le CSS (as="style"), font pour les polices (as="font" avec type). Preconnect accepte crossorigin pour les ressources CORS (polices, API). Limiter le nombre de preload (2 à 4 max) pour ne pas saturer la bande passante initiale.
Comment ça fonctionne ?
Les balises <link rel="preload" as="..." href="..."> et <link rel="preconnect" href="..."> dans le <head> demandent au navigateur de prioriser une ressource (preload) ou d'ouvrir une connexion vers un domaine (preconnect) dès le début. Précharge et préconnexion réduisent la latence des requêtes critiques.
L'erreur classique à éviter
Trop de preload (plus de 2 à 4) qui saturent la bande passante et retardent le FCP. Preload de ressources non critiques ou déjà découvertes tôt. Oublier l'attribut as sur preload ou crossorigin sur preconnect pour les polices.
Impact business : pourquoi s'en soucier ?
Un preload ciblé sur la police ou le CSS critique accélère le premier rendu ; un preconnect vers le CDN des polices ou des scripts tiers réduit le délai des requêtes. Essentiel pour les sites dépendant de ressources externes. À réserver aux ressources vraiment critiques pour éviter l’effet inverse. Sur un site avec des polices web ou un LCP image hero, un preload bien placé peut gagner plusieurs centaines de millisecondes au LCP. Trop de preload en revanche peut dégrader le FCP en retardant le HTML/CSS principal.
La règle d'or
Limiter les preload aux 2–4 ressources vraiment critiques (LCP image, police above the fold, CSS critique). Preconnect vers les domaines tiers (CDN polices, API) en tête de <head>. Mesurer l'impact avant/après.