Précharger une ressource critique
Objectif : Précharger une ressource utile à l’affichage initial sans créer de transfert inutile.
Une ressource importante peut retarder l’affichage initial si le navigateur ne la découvre qu’après avoir commencé à analyser la page. Le préchargement lui signale qu’elle doit être demandée tôt. Mais chaque préchargement déclenche potentiellement un transfert : vous devez donc le réserver à un fichier réellement utile dès le premier affichage.
Reconnaître une ressource critique
Une ressource est candidate au préchargement si elle contribue à l’affichage initial et si le navigateur risque de la découvrir tard. Dans la page de l’association, l’affiche de la Soirée des cultures est affichée directement dans le contenu et reçoit déjà une priorité élevée avec fetchpriority="high". Le lien de préchargement présent dans le head permet au navigateur de découvrir cette image avant d’atteindre son élément img dans le corps du document.
L’attribut as décrit la destination de la ressource. Pour une image, utilisez as="image" ; pour d’autres ressources, la valeur doit correspondre à leur nature, par exemple une feuille de style ou une police. Cette indication aide le navigateur à appliquer les règles de priorité et de sécurité adaptées. L’attribut type peut préciser le format, notamment lorsqu’une ressource est proposée dans un format particulier.
Précharger l’affiche de l’événement
Voici l’état de index.html à cette étape du projet. Le lien de préchargement se trouve dans l’en-tête du document et pointe vers le même fichier que l’image de l’événement. L’image conserve ses dimensions intrinsèques et sa priorité élevée ; elle ne reçoit pas loading="lazy", puisqu’elle est la ressource visuelle importante de la page initiale.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Association culturelle — événements</title>
<meta name="description" content="Découvrez les événements et les activités de notre association culturelle.">
<link rel="canonical" href="https://exemple.fr/evenements">
<meta property="og:type" content="website">
<meta property="og:locale" content="fr_FR">
<meta property="og:title" content="Association culturelle — événements">
<meta property="og:description" content="Découvrez les événements et les activités de notre association culturelle.">
<meta property="og:url" content="https://exemple.fr/evenements">
<meta property="og:image" content="https://exemple.fr/assets/affiche-evenement.jpg">
<meta name="twitter:card" content="summary_large_image">
<link rel="preload" as="image" href="assets/affiche-evenement.jpg">
<link rel="stylesheet" href="style.css">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Event",
"name": "Soirée des cultures",
"startDate": "2026-06-20T18:00:00+02:00",
"endDate": "2026-06-20T22:00:00+02:00",
"eventStatus": "https://schema.org/EventScheduled",
"eventAttendanceMode": "https://schema.org/OfflineEventAttendanceMode",
"location": {
"@type": "Place",
"name": "Maison des associations",
"address": {
"@type": "PostalAddress",
"streetAddress": "10 rue des Arts",
"addressLocality": "Lyon",
"postalCode": "69001",
"addressCountry": "FR"
}
},
"organizer": {
"@type": "Organization",
"name": "Association culturelle",
"url": "https://exemple.fr/"
},
"image": "https://exemple.fr/assets/affiche-evenement.jpg",
"description": "Une soirée de rencontres, de musique et de découvertes culturelles.",
"url": "https://exemple.fr/evenements#evenements"
}
</script>
</head>
<body class="culture-page">
<a class="culture-lien-evitement" href="#contenu">Aller au contenu principal</a>
<header class="culture-entete">
<a href="/" aria-label="Association culturelle, accueil">Association culturelle</a>
<nav class="culture-navigation" aria-label="Navigation principale">
<ul>
<li><a href="#evenements">Événements</a></li>
<li><a href="#association">L’association</a></li>
</ul>
</nav>
<button class="culture-bouton" type="button" command="show-modal" commandfor="newsletter">S’inscrire à la newsletter</button>
</header>
<main class="culture-contenu" id="contenu">
<h1>Nos événements</h1>
<section class="culture-evenements" id="evenements" aria-labelledby="titre-evenements">
<h2 id="titre-evenements">À venir</h2>
<article class="culture-evenement">
<h3>Soirée des cultures</h3>
<img class="culture-image" src="assets/affiche-evenement.jpg" alt="Affiche illustrée de la soirée des cultures" width="1200" height="800" fetchpriority="high">
<p><time datetime="2026-06-20T18:00:00+02:00">20 juin 2026, à 18 h</time></p>
<p>Une soirée de rencontres, de musique et de découvertes culturelles.</p>
<details class="culture-details">
<summary>Informations pratiques</summary>
<p>Rendez-vous à la Maison des associations, 10 rue des Arts, Lyon.</p>
</details>
</article>
</section>
<section id="association" aria-labelledby="titre-association">
<h2 id="titre-association">Notre association</h2>
<p>Nous créons des occasions de partager et de découvrir les cultures.</p>
</section>
</main>
<dialog class="culture-dialogue" id="newsletter" aria-labelledby="titre-newsletter">
<h2 id="titre-newsletter">Recevoir la newsletter</h2>
<form action="/inscription" method="post">
<label for="courriel">Adresse courriel</label>
<input id="courriel" name="courriel" type="email" autocomplete="email" required>
<button class="culture-bouton" type="submit">S’inscrire</button>
<button class="culture-bouton" type="button" command="close" commandfor="newsletter">Fermer</button>
</form>
</dialog>
<footer class="culture-pied">
<p>Association culturelle — <a href="/mentions-legales">Mentions légales</a></p>
</footer>
</body>
</html>Le chemin utilisé par href doit correspondre exactement à celui de l’image dans src, afin que le navigateur puisse réutiliser la ressource préchargée. Si le fichier est déplacé, renommé ou servi sous une autre URL, corrigez les deux références ensemble. Sur le site publié, remplacez les URL d’exemple par les adresses réelles et vérifiez que l’image est effectivement accessible.
Vérifier le choix et la déclaration
Pour décider d’un préchargement, demandez-vous si la ressource apparaît dès l’arrivée sur la page, si elle contribue de façon importante à son rendu et si son URL est certaine. Évitez de précharger des images situées plus bas dans la page, des variantes non utilisées ou des fichiers dont l’affichage dépend d’une action ultérieure. Dans le cas de l’affiche, as="image" indique la nature de la ressource ; aucun type n’est nécessaire ici, car le navigateur peut reconnaître le format à partir du fichier servi.
Une déclaration de préchargement ne prouve pas à elle seule que le chargement est plus rapide : elle indique au navigateur une priorité souhaitée, et son effet dépend notamment des ressources concurrentes et des conditions réseau. Vous apprendrez dans la leçon suivante à comparer les mesures avant et après une optimisation, sans attribuer automatiquement toute variation au préchargement.
À retenir
- Préchargez une ressource réellement nécessaire à l’affichage initial, pas un fichier simplement susceptible d’être utilisé plus tard.
- Indiquez sa destination avec `as` ; pour l’affiche, utilisez `as="image"`.
- Faites correspondre exactement l’URL du préchargement à celle de la ressource utilisée dans la page.
- N’ajoutez `type` que si préciser le format est utile ; vérifiez l’adresse réelle et le fichier publié.
- Conservez l’image prioritaire sans `loading="lazy"` et évitez les préchargements redondants.