Performance Web
Qu’est-ce que Preload / Preconnect ?
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).
Définition simple
C'est comme réserver la voie de dégagement et le chariot élévateur avant l'arrivée du camion : on ouvre la connexion ou on tire la ressource critique en premier. 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 marche ?
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.
Impact business
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. Les profils Web Vitals sur mobile montrent couramment 200 à 800 ms de LCP gagnés lorsque l'image hero ou la police display critique est preloadée et que le bon hôte est preconnecté — soit souvent assez pour passer du rouge au vert sur un site initialement limite.
Bonnes pratiques
- 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.
Erreurs communes
- 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.
Prompt IA
Contexte : site [Next.js / WordPress / autre], ressources critiques [polices Google Fonts / image hero / CSS above-the-fold / script critique]. Génère les balises <link> : 1) preconnect vers [domaine(s) tiers], 2) preload pour [ressource 1] et [ressource 2] avec as et type si besoin. Indique quelles ressources ne pas preload et pourquoi. Donne l’ordre recommandé dans le <head>.
SERVICE LIÉ
Passer de la définition à un projet concret.
Application web & SaaS
Approfondir ce sujet dans le cadre d’un accompagnement adapté à votre contexte.
À LIRE AUSSI
Guides plus complets sur le blog.
QUESTIONS FRÉQUENTES
Aller plus loin sur Preload / Preconnect.
Preload demande au navigateur de télécharger une ressource spécifique (fichier CSS, JS, police, image) en priorité. Preconnect établit une connexion TCP/TLS vers un domaine tiers (CDN, API) sans télécharger de ressource précise, ce qui réduit la latence des requêtes suivantes vers ce domaine. Preconnect est utile avant d’utiliser des polices ou scripts externes.
Utilisez preload pour les ressources qui bloquent le LCP : l’image LCP (hero), les polices utilisées above the fold, le CSS critique. Évitez de preload trop de ressources (2 à 4 max) pour ne pas retarder le reste. Ne preload pas des ressources déjà découvertes tôt par le parser (ex. CSS dans le head).
Oui. Les polices sont servies depuis fonts.googleapis.com et fonts.gstatic.com. Ajouter <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> (et éventuellement fonts.googleapis.com) au début du head réduit la latence du premier chargement de police et peut améliorer le LCP ou éviter un FOIT (Flash of Invisible Text).