Préchargement, prélecture et préconnexion
Indiquez au navigateur de récupérer rapidement les ressources essentielles.
Préchargement, prélecture et préconnexion est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.
Pourquoi utiliser les indications de ressources ?
Les navigateurs modernes ne découvrent les ressources qu’au fil de l’analyse du HTML. Les indications de ressources (attributs rel de link dans le <head>) vous permettent d’indiquer au navigateur « J’en aurai bientôt besoin » — la requête réseau démarre ainsi plus tôt que ne le permettrait la découverte normale.
preload charge immédiatement
<link rel="preload" as="..." href="..."> indique au navigateur de récupérer immédiatement la ressource avec la priorité adaptée au type as. Utilisez-le pour les ressources dont la page aura certainement besoin : images principales, polices critiques, JavaScript au niveau de la route.
<link rel="preload" as="font" type="font/woff2" href="/inter.woff2" crossorigin>L’attribut as
Définissez toujours as : il détermine la priorité de la requête, l’en-tête Accept et l’application de la CSP. Valeurs courantes : "script", "style", "font", "image", "fetch". Sans as, les navigateurs ignorent le preload et consignent un avertissement.
crossorigin pour les polices
Les préchargements de polices exigent crossorigin, même lorsque la police est de la même origine. Sans cet attribut, le navigateur récupère la police en mode CORS lors de son utilisation effective, mais en mode anonyme pour le préchargement, ce qui double le téléchargement — un problème de performance subtil et courant.
prefetch charge plus tard
<link rel="prefetch" href="..."> indique qu’une ressource sera nécessaire lors d’une navigation ultérieure. Le navigateur la récupère avec la priorité la plus basse pendant les périodes d’inactivité, puis la met en cache afin que la page suivante s’affiche instantanément.
<link rel="prefetch" href="/next-page.html">preconnect prépare les connexions
<link rel="preconnect" href="https://api.example.com"> indique au navigateur d’effectuer la résolution DNS ainsi que les négociations TCP et TLS avec une origine tierce avant l’arrivée de la première requête. Utilisez-le pour les hôtes d’API et les CDN auxquels votre page fera appel.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>dns-prefetch est l’équivalent plus léger
<link rel="dns-prefetch"> effectue uniquement la résolution DNS — à moindre coût que preconnect. Utilisez-le pour de nombreux hôtes tiers lorsque vous ne pouvez pas vous permettre une connexion preconnect complète à chacun d’eux ; réservez preconnect aux quelques origines les plus critiques.
Limitez les indications
Trop de préchargements se disputent la même bande passante et ralentissent la page. Préchargez uniquement les ressources qui bloquent le chemin de rendu critique — généralement une image principale et une ou deux polices critiques. Tout le reste peut être découvert normalement.
modulepreload pour les modules ES
<link rel="modulepreload" href="/app.js"> précharge non seulement le fichier du module, mais aussi son arbre de dépendances. Cela évite la cascade de téléchargements typique des modules ES natifs, où chaque import attend que le précédent soit analysé.
Mesurer l’impact
Utilisez la colonne Initiateur du panneau Réseau pour confirmer que les ressources préchargées ont bien été récupérées tôt, et l’audit « Préconnexion aux origines requises » de Lighthouse pour repérer les occasions manquées. Supprimer un préchargement lent mais inutilisé est souvent aussi bénéfique qu’en ajouter un bon.
Particularités de chaque indication
preload déclenche un avertissement dans la console si la ressource n’est pas utilisée dans les ~3 secondes. prefetch peut être annulé par le navigateur sous l’effet de contraintes de réseau ou de mémoire. Les connexions preconnect se ferment après ~10 secondes d’inactivité — utilisez-le pour des ressources qui seront demandées bientôt.
Vérification des connaissances
Que fait preconnect que dns-prefetch ne fait pas ?
Résumé
preload récupère immédiatement les ressources critiques (avec as et crossorigin lorsque nécessaire). prefetch met en cache les ressources probablement nécessaires lors de la prochaine navigation pendant les périodes d’inactivité. preconnect (TCP+TLS) et dns-prefetch (DNS uniquement) préparent les connexions vers les origines tierces. modulepreload étend preload à l’arbre de dépendances des modules ES. Utilisez ces mécanismes avec parcimonie et mesurez leur impact.
Questions Fréquemment Posées
La leçon « Préchargement, prélecture et préconnexion » est-elle gratuite ?
Oui — le texte complet de « Préchargement, prélecture et préconnexion » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Préchargement, prélecture et préconnexion » ?
Indiquez au navigateur de récupérer rapidement les ressources essentielles. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer HTML Academy ?
Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Préchargement, prélecture et préconnexion » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?
Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Attributs `async` et `defer`
- Préchargement, prélecture et préconnexion
- Chargement différé des images : `loading=lazy`
- Conseils de ressources : `modulepreload`