--- title: Précharger du contenu avec rel="preload" slug: Web/HTML/Preloading_content tags: - Guide - HTML - JavaScript - Link - Media - Performance - Web Performance - as - preload - rel translation_of: Web/HTML/Preloading_content original_slug: Web/HTML/Précharger_du_contenu ---

La valeur preload de l'attribut rel pour l'élément <link> permet d'écrire des requêtes déclaratives de récupération au sein de l'élément <head>. On peut ainsi indiquer les ressources dont la page aura besoin peu après son chargement. Cela permet de les précharger au début du chargement de la page, avant que le rendu intervienne. On s'assure donc que les ressources nécessaires soient disponibles plus tôt, évitant ainsi de bloquer le rendu initial de la page et améliorant les performances.

Cet article est un guide sur le fonctionnement de <link rel="preload">.

Les bases

On utilise généralement l'élément <link> de façon assez simple afin de charger une feuille de style CSS pour la page :

<link rel="stylesheet" href="styles/main.css">

Dans le cas qui va nous intéresser, on utilisera l'attribut rel avec la valeur preload. Cela va permettre d'utiliser l'élément <link> pour précharger à peu près n'importe quelle ressource dont on aurait besoin. Dans la version la plus simple, il suffit d'indiquer :

Voici un exemple d'application simple (vous pouvez consulter le code source de cet exemple JS et CSS et visualiser la démo live) :

<head>
  <meta charset="utf-8">
  <title>Exemple de préchargement pour JS et CSS</title>

  <link rel="preload" href="style.css" as="style">
  <link rel="preload" href="main.js" as="script">

  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>Balles rebondissantes</h1>
  <canvas></canvas>

  <script src="main.js"></script>
</body>

Ici, nous préchargeons nos fichiers CSS et JavaScript afin qu'ils soient disponibles dès qu'ils seront nécessaires au rendu de la page par la suite. Cet exemple est trivial, car le navigateur découvre probablement les éléments <link rel="stylesheet"> et <script> dans le même morceau de HTML que les préchargements, mais les avantages sont d'autant plus évidents que les ressources sont découvertes tardivement et qu'elles sont importantes. Par exemple :

preload présente également d'autres avantages. L'utilisation de as pour spécifier le type de contenu à précharger permet au navigateur de :

Quels sont les types de contenu qu'on peut précharger ?

Il est possible de précharger de nombreux types de contenu, voici les valeurs principales qu'on peut utiliser avec l'attribut as :

Note : Le préchargement de vidéo est inclus dans la spécification Preload, mais n'est pas actuellement mis en œuvre par les navigateurs.

Note : Pour avoir plus de détails quant à ces valeurs et aux fonctionnalités web associées, vous pouvez consulter la spécification Preload et notamment les extensions à l'élément <link>. On notera également que la liste complète des valeurs acceptables pour l'attribut as est définie dans la spécification Fetch (cf. les destinations de requête).

Ajouter un type MIME

Les éléments <link> permettent d'utiliser un attribut type qui contient le type MIME de la ressource vers laquelle pointe l'élément. Cet attribut est particulièrement utile pour le préchargement : le navigateur pourra analyser l'attribut type afin de déterminer s'il prend en charge ce type de ressource. Le téléchargement ne démarrera que si c'est le cas, sinon, l'élément sera ignoré.

Vous pouvez voir un exemple de ce fonctionnement avec une vidéo (voir le code source complet et la version live) :

<head>
  <meta charset="utf-8">
  <title>Exemple de préchargement d'une vidéo</title>

  <link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4">
</head>
<body>
  <video controls>
    <source src="sintel-short.mp4" type="video/mp4">
    <source src="sintel-short.webm" type="video/webm">
    <p>Votre navigateur ne prend pas en charge les vidéos HTML5.
       Voici <a href="sintel-short.mp4">un lien pour télécharger la vidéo</a>.</p>
  </video>
</body>

Dans cet exemple, les navigateurs qui prennent en charge le format MP4 préchargeront le fichier en question et l'utiliseront. En revanche, les navigateurs qui ne supportent que WebM pourront bien utiliser le second fichier mais celui-ci ne sera préchargé. Cet exemple illustre comment ajouter le préchargement dans une stratégie d'amélioration progressive.

Récupérer des ressources de différentes origines

Lors du préchargement de ressources qui sont récupérées avec CORS activé (par exemple. fetch(), XMLHttpRequest ou fonts), une attention particulière doit être apportée au paramétrage de l'attribut crossorigin sur votre <link>. L'attribut doit être défini pour correspondre au mode CORS et aux informations d'identification de la ressource, même lorsque la récupération n'est pas d'origine croisée.

Les fichiers pour les polices de caractères constituent un cas intéressant. En effet, pour différentes raisons, elles doivent être récupérées via un mode CORS anonyme (cf. les spécifications pour la récupération des polices si vous êtes intéressé par les détails).

Utilisons ce cas de figure comme exemple. Vous pouvez consulter le code source complet de l'exemple sur GitHub (et voir le résultat live ici) :

<head>
  <meta charset="utf-8">
  <title>Web font example</title>

  <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin>

  <link href="style.css" rel="stylesheet">
</head>
<body>
  …
</body>

Non seulement nous fournissons les indications relatives au type MIME dans les attributs type, mais nous fournissons également l'attribut crossorigin pour nous assurer que le mode CORS du préchargement correspond à l'éventuelle demande de ressource de police.

Gérer les différents médias

Une qualité des éléments <link> est qu'ils gèrent l'attribut media. Ce dernier peut être utilisé afin de conditionner le chargement de la ressource selon le type de média voire selon des requêtes de média (media queries). En bref, il est possible de faire du chargement de ressources qui soit responsive !

Prenons un exemple simple (le code source est disponible sur GitHub, avec une démonstration live) :

<head>
  <meta charset="utf-8">
  <title>Exemple de préchargement responsive</title>

  <link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)">
  <link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)">

  <link rel="stylesheet" href="main.css">
</head>
<body>
  <header>
    <h1>Mon site</h1>
  </header>

  <script>
    var mediaQueryList = window.matchMedia("(max-width: 600px)");
    var header = document.querySelector('header');

    if(mediaQueryList.matches) {
      header.style.backgroundImage = 'url(bg-image-narrow.png)';
    } else {
      header.style.backgroundImage = 'url(bg-image-wide.png)';
    }
  </script>
</body>

Vous pouvez ici voir qu'on a ajouté les attributs media sur les éléments <link> afin de charger une image étroite si l'utilisateur utilise un écran étroit ou une image plus large si l'écran de l'appareil est plus large. Il est toutefois nécessaire d'afficher la bonne image en en-tête selon le résultat de la requête média et on utilise donc Window.matchMedia / MediaQueryList (lire Tester les requêtes média pour plus d'informations sur ce point).

Il est ainsi beaucoup plus probable que la police soit disponible pour le rendu de la page, ce qui réduit les FOUT (flash de texte non stylisé).

Ce concept n'est pas limité aux images voire aux fichiers du même type ! Laissez libre cours à votre imagination ! On peut imaginer charger un diagramme SVG relativement simple si l'utilisateur est sur un écran étroit (où la bande passante et le processeur sont souvent plus limités) ou précharger un code JavaScript complexe, utilisé pour afficher un modèle 3D complexe lorsque l'appareil de l'utilisateur possède plus de ressources.

Utiliser des scripts et des préchargements différés

Un autre avantage de ce mécanisme est qu'on peut choisir d'exécuter des préchargements par script si besoin. Dans le fragment de code suivant, on crée une instance de HTMLLinkElement qu'on attache au DOM :

var preloadLink = document.createElement("link");
preloadLink.href = "myscript.js";
preloadLink.rel = "preload";
preloadLink.as = "script";
document.head.appendChild(preloadLink);

Cela signifie que le navigateur préchargera le fichier JavaScript sans pour autant l'utiliser immédiatement.

Pour utiliser le script en question, quand on en a besoin, on pourrait écrire :

var preloadedScript = document.createElement("script");
preloadedScript.src = "myscript.js";
document.body.appendChild(preloadedScript);

Cela permet de précharger un script et de différer son exécution jusqu'au moment où on en a besoin.

Les autres mécanismes de préchargement

Il existe d'autres fonctionnalités qui permettent de précharger des ressources mais aucune n'est aussi flexible que <link rel="preload"> :

Spécifications

Spécification Statut Commentaire
{{SpecName('Preload','#x2.link-type-preload','preload')}} {{Spec2('Preload')}} Détails complémentaires sur preload.
{{SpecName('HTML WHATWG', 'link-type-preload', 'rel=preload')}} {{Spec2('HTML WHATWG')}} Définition simple de preload.

Compatibilité des navigateurs

{{Compat("html.elements.link.rel.preload")}}

Voir aussi

{{QuickLinksWithSubpages("/fr/docs/Web/HTML")}}