MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Précharger du contenu avec rel="preload"

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. Dans cet article, on voit comment utiliser 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 le chemin de la ressource à précharger via l'attribut href et le type de la ressource via l'attribut as.

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 preload avec 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>

Dans cet exemple, on précharge les fichiers CSS et JavaScript afin qu'ils soient disponibles dès qu'ils sont nécessaires pour le rendu de la page. Cet exemple est un peu trivial, mais on peut voir que, plus les ressources sont identifiées tard, plus elles sont grandes. Par exemple, une feuille de style pourra à son tour pointer vers d'autres ressources comme des polices ou des images. On pourrait aussi avoir de grandes images ou des vidéos à afficher plus bas dans la page.

preload possède d'autres avantages. On pourra utiliser l'attribut as afin d'indiquer le type de contenu à précharger afin que le navigateur puisse :

  • Prioriser le chargement des ressources plus précisément.
  • Identifier les requêtes utilisées ensuite afin de réutiliser la même ressource si c'est possible.
  • Appliquer la bonne politique de sécurité du contenu pour la ressource en question
  • Utiliser le bon en-tête Accept pour les requêtes associées.

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 :

  • audio : un fichier audio.
  • document : un document HTML destiné à être intégré dans un élément <frame> ou dans un élément <iframe>.
  • embed : une ressource destinée à être intégrée dans un élément <embed>.
  • fetch : une ressource à laquelle on accèdera via une requête fetch ou via une requête XHR (par exemple un ArrayBuffer ou un fichier JSON).
  • font : un fichier de police de caractère.
  • image : un fichier contenant une image .
  • object : une ressource à intégrer dans un élément <embed>.
  • script : un fichier JavaScript.
  • style : une feuille de style.
  • track : un fichier WebVTT.
  • worker : un web worker ou un worker partagé JavaScript.
  • video : un fichier vidéo.

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">
  <link rel="preload" href="sintel-short.webm" as="video" type="video/webm">
</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 uniquement en charge WebM ne préchargeront que ce fichier, l'autre (MP4) sera ignoré.

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

Si le paramétrage CORS de votre site fonctionne correctement, vous pouvez également précharger des ressources provenant d'origines multiples tant que l'attribut crossorigin est utilisé dans l'élément <link>.

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. Tout d'abord parce que le chargement des polices est un scénario fréquent et ensuite parce que c'est plus simple que de mettre en place un exemple avec des requêtes vers plusieurs origines. 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>Exemple de préchargement pour les polices</title>

  <link rel="preload" href="fonts/cicle_fina-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
  <link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <link rel="preload" href="fonts/cicle_fina-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
  <link rel="preload" href="fonts/cicle_fina-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
  <link rel="preload" href="fonts/cicle_fina-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">

  <link rel="preload" href="fonts/zantroke-webfont.eot" as="font" type="application/vnd.ms-fontobject" crossorigin="anonymous">
  <link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <link rel="preload" href="fonts/zantroke-webfont.woff" as="font" type="font/woff" crossorigin="anonymous">
  <link rel="preload" href="fonts/zantroke-webfont.ttf" as="font" type="font/ttf" crossorigin="anonymous">
  <link rel="preload" href="fonts/zantroke-webfont.svg" as="font" type="image/svg+xml" crossorigin="anonymous">

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

Vous pouvez ici voir qu'on fournit l'indication sur le type de ressource via l'attribut as, le type MIME grâce à l'attribut type mais aussi et surtout l'attribut crossorigin qui permet de gérer le CORS.

Il y a donc moins de risque que la police soit disponible après le premier rendu de la page, on évite ainsi les problèmes de scintillement de police (ou FOUT pour Flash Of Unstyled Text).

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).

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 signfie 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"> :

  • <link rel="prefetch"> est pris en charge par les navigateurs depuis longtemps mais sert pour précharger des ressources qui seront utilisées sur la prochaine page vers laquelle on navigue. Autrement dit, c'est utile mais pas pour la page courante ! De plus, les navigateurs choisiront une priorité moins élevée pour les ressources prefetch que pour celles utilisant preload (la page actuelle est considérée comme plus importante que la suivante). Pour plus de détails, lire la FAQ sur le préchargement des liens.
  • <link rel="subresource"> était pris en charge par Chrome par le passé et devait permettre de précharger les ressources pour le chargement et la navigation dans la page mais il n'existait de moyen de priorisation (l'attribut as n'existait pas) et l'ensemble des ressources recevait donc une priorité assez basse.
  • De nombreux utilitaires de chargement scriptés existent par ailleurs mais ils ne disposent pas du contexte de priorisation disponible dans le navigateur et, en tant que ressources, peuvent participer à ces problèmes de performances de chargement.

Spécifications

Spécification État Commentaires
Preload
La définition de 'preload' dans cette spécification.
Version de travail Détails complémentaires sur preload.
HTML Living Standard
La définition de '<link>' dans cette spécification.
Standard évolutif Définition simple de preload.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 50.0 56 (56)[1] ? (Oui) (Oui)
Fonctionnalité Android Webview Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome pour Android
Support simple Pas de support 50.0 56.0 (56)[1] ? (Oui) ? 50.0

[1] Firefox prend en charge le préchargement des contenus suivants (relativement à la valeur de as) : script, style, image, video, audio, track, font et fetch. La liste des polices prises en charge par Firefox est définie dans la liste des types de média pour les polices (à l'exception de font/collection).

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight, Goofy
 Dernière mise à jour par : SphinxKnight,