diff options
Diffstat (limited to 'files/fr/web/html/preloading_content/index.html')
| -rw-r--r-- | files/fr/web/html/preloading_content/index.html | 178 |
1 files changed, 94 insertions, 84 deletions
diff --git a/files/fr/web/html/preloading_content/index.html b/files/fr/web/html/preloading_content/index.html index 4ca3b08254..4c60404ec0 100644 --- a/files/fr/web/html/preloading_content/index.html +++ b/files/fr/web/html/preloading_content/index.html @@ -5,14 +5,19 @@ 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 --- -<div>{{QuickLinksWithSubpages("/fr/docs/Web/HTML")}}</div> +<p class="summary">La valeur <code>preload</code> de l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-rel"><code>rel</code></a> pour l'élément <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a> permet d'écrire des requêtes déclaratives de récupération au sein de l'élément <a href="/fr/docs/Web/HTML/Element/head"><code><head></code></a>. 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.</p> -<p class="summary">La valeur <code>preload</code> de l'attribut {{htmlattrxref("rel", "link")}} pour l'élément {{htmlelement("link")}} permet d'écrire des requêtes déclaratives de récupération au sein de l'élément {{htmlelement("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 <code>preload</code>.</p> +<p class="summary">Cet article est un guide sur le fonctionnement de <code><link rel="preload"></code>.</p> <h2 id="Les_bases">Les bases</h2> @@ -20,13 +25,18 @@ original_slug: Web/HTML/Précharger_du_contenu <pre class="brush: html"><link rel="stylesheet" href="styles/main.css"></pre> -<p>Dans le cas qui va nous intéresser, on utilisera l'attribut <code>rel</code> avec la valeur <code>preload</code>. Cela va permettre d'utiliser l'élément <code><link></code> 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 {{htmlattrxref("href", "link")}} et le type de la ressource via l'attribut {{htmlattrxref("as", "link")}}.</p> +<p>Dans le cas qui va nous intéresser, on utilisera l'attribut <code>rel</code> avec la valeur <code>preload</code>. Cela va permettre d'utiliser l'élément <code><link></code> pour précharger à peu près n'importe quelle ressource dont on aurait besoin. Dans la version la plus simple, il suffit d'indiquer :</p> + +<ul> + <li>le chemin de la ressource à précharger via l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-href"><code>href</code></a></li> + <li>et le type de la ressource via l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-as"><code>as</code></a>.</li> +</ul> -<p>Voici un exemple d'application simple (vous pouvez consulter <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css">le code source de cet exemple JS et CSS</a> et visualiser <a href="https://mdn.github.io/html-examples/link-rel-preload/js-and-css/">la démo <em>live</em></a>) :</p> +<p>Voici un exemple d'application simple (vous pouvez consulter <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css">le code source de cet exemple JS et CSS</a> et visualiser <a href="https://mdn.github.io/html-examples/link-rel-preload/js-and-css/">la démo <i>live</i></a>) :</p> <pre class="brush: html"><head> <meta charset="utf-8"> - <title>Exemple de preload avec JS et CSS</title> + <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"> @@ -41,43 +51,53 @@ original_slug: Web/HTML/Précharger_du_contenu <script src="main.js"></script> </body></pre> -<p>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 <em>tard</em>, 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.</p> +<p>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 <code><link rel="stylesheet"></code> et <code><script></code> 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 :</p> -<p><code>preload</code> possède d'autres avantages. On pourra utiliser l'attribut <code>as</code> afin d'indiquer le type de contenu à précharger afin que le navigateur puisse :</p> +<ul> + <li>Les ressources qui sont pointées à partir du CSS, comme les polices ou les images.</li> + <li>Les ressources que JavaScript peut demander, comme JSON, les scripts importés ou les <i>web workers</i>.</li> + <li>Images et fichiers vidéo plus volumineux.</li> +</ul> + +<p><code>preload</code> présente également d'autres avantages. L'utilisation de <code>as</code> pour spécifier le type de contenu à précharger permet au navigateur de :</p> <ul> - <li>Prioriser le chargement des ressources plus précisément.</li> - <li>Identifier les requêtes utilisées ensuite afin de réutiliser la même ressource si c'est possible.</li> - <li>Appliquer la bonne <a href="/fr/docs/HTTP/CSP">politique de sécurité du contenu</a> pour la ressource en question</li> - <li>Utiliser le bon {{HTTPHeader("Accept")}} pour les requêtes associées.</li> + <li>Donner la priorité au chargement des ressources de façon plus précise.</li> + <li>Stocker dans le cache pour les demandes futures, en réutilisant la ressource si nécessaire.</li> + <li>Appliquer la bonne <a href="/fr/docs/Web/HTTP/CSP">politique de sécurité du contenu</a> à la ressource.</li> + <li>Définissez les bons en-têtes de requête <a href="/fr/docs/Web/HTTP/Headers/Accept"><code>Accept</code></a> pour celle-ci.</li> </ul> -<h3 id="Quels_sont_les_types_de_contenu_qu'on_peut_précharger">Quels sont les types de contenu qu'on peut précharger ?</h3> +<h3 id="What_types_of_content_can_be_preloaded'on_peut_précharger">Quels sont les types de contenu qu'on peut précharger ?</h3> <p>Il est possible de précharger de nombreux types de contenu, voici les valeurs principales qu'on peut utiliser avec l'attribut <code>as</code> :</p> <ul> - <li><code>audio</code> : un fichier audio.</li> - <li><code>document</code> : un document HTML destiné à être intégré dans un élément {{htmlelement("frame")}} ou dans un élément {{htmlelement("iframe")}}.</li> - <li><code>embed</code> : une ressource destinée à être intégrée dans un élément {{htmlelement("embed")}}.</li> - <li><code>fetch</code> : une ressource à laquelle on accèdera via une requête <code>fetch</code> ou via une requête XHR (par exemple un <code>ArrayBuffer</code> ou un fichier JSON).</li> - <li><code>font</code> : un fichier de police de caractère.</li> - <li><code>image</code> : un fichier contenant une image .</li> - <li><code>object</code> : une ressource à intégrer dans un élément {{htmlelement("embed")}}.</li> - <li><code>script</code> : un fichier JavaScript.</li> - <li><code>style</code> : une feuille de style.</li> - <li><code>track</code> : un fichier WebVTT.</li> - <li><code>worker</code> : un <em>web worker</em> ou un <em>worker</em> partagé JavaScript.</li> - <li><code>video</code> : un fichier vidéo.</li> + <li><code>audio</code> : un fichier audio.</li> + <li><code>document</code> : un document HTML destiné à être intégré dans un élément <a href="/fr/docs/Web/HTML/Element/frame"><code><frame></code></a> ou dans un élément <a href="/fr/docs/Web/HTML/Element/iframe"><code><iframe></code></a>.</li> + <li><code>embed</code> : une ressource destinée à être intégrée dans un élément <a href="/fr/docs/Web/HTML/Element/embed"><code><embed></code></a>.</li> + <li><code>fetch</code> : une ressource à laquelle on accèdera via une requête <code>fetch</code> ou via une requête XHR (par exemple un <code>ArrayBuffer</code> ou un fichier JSON).</li> + <li><code>font</code> : un fichier de police de caractère.</li> + <li><code>image</code> : un fichier contenant une image .</li> + <li><code>object</code> : une ressource à intégrer dans un élément <a href="/fr/docs/Web/HTML/Element/object"><code><object></code></a>.</li> + <li><code>script</code> : un fichier JavaScript.</li> + <li><code>style</code> : une feuille de style CSS.</li> + <li><code>track</code> : un fichier WebVTT.</li> + <li><code>worker</code> : un <i>web worker</i> ou un <i>worker</i> partagé JavaScript.</li> + <li><code>video</code> : un fichier vidéo, généralement utilisé dans un élément <a href="/fr/docs/Web/HTML/Element/video"><code><video></code></a>.</li> </ul> -<div class="note"> -<p><strong>Note </strong>: 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 <a href="https://w3c.github.io/preload/#link-element-extensions">les extensions à l'élément <code><link></code></a>. On notera également que la liste complète des valeurs acceptables pour l'attribut <code>as</code> est définie dans la spécification Fetch (cf. <a href="https://fetch.spec.whatwg.org/#concept-request-destination">les destinations de requête</a>).</p> +<div class="notecard note"> + <p><strong>Note :</strong> Le préchargement de <code>vidéo</code> est inclus dans la spécification Preload, mais n'est pas actuellement mis en œuvre par les navigateurs.</p> +</div> + +<div class="notecard note"> + <p><strong>Note :</strong> 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 <a href="https://w3c.github.io/preload/#link-element-extensions">les extensions à l'élément <code><link></code></a>. On notera également que la liste complète des valeurs acceptables pour l'attribut <code>as</code> est définie dans la spécification Fetch (cf. <a href="https://fetch.spec.whatwg.org/#concept-request-destination">les destinations de requête</a>).</p> </div> -<h2 id="Ajouter_un_type_MIME">Ajouter un type MIME</h2> +<h2 id="Including_a_MIME_type">Ajouter un type MIME</h2> -<p>Les éléments <code><link></code> permettent d'utiliser un attribut {{htmlattrxref("type", "link")}} qui contient <a href="https://fr.wikipedia.org/wiki/Type_MIME">le type MIME</a> 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 <code>type</code> 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é.</p> +<p>Les éléments <code><link></code> permettent d'utiliser un attribut <a href="/fr/docs/Web/HTML/Element/link#attr-type"><code>type</code></a> qui contient <a href="https://fr.wikipedia.org/wiki/Type_MIME">le type MIME</a> 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 <code>type</code> 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é.</p> <p>Vous pouvez voir un exemple de ce fonctionnement avec une vidéo (<a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/video">voir le code source complet</a> et <a href="https://mdn.github.io/html-examples/link-rel-preload/video/">la version live</a>) :</p> @@ -98,43 +118,32 @@ original_slug: Web/HTML/Précharger_du_contenu <p>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.</p> -<h2 id="Récupérer_des_ressources_de_différentes_origines">Récupérer des ressources de différentes origines</h2> +<h2 id="CORS-enabled_fetches">Récupérer des ressources de différentes origines</h2> -<p>Si le paramétrage <a href="/fr/docs/HTTP/Access_control_CORS">CORS</a> de votre site fonctionne correctement, vous pouvez également précharger des ressources provenant d'origines multiples tant que l'attribut {{htmlattrxref("crossorigin","link")}} est utilisé dans l'élément <code><link></code>.</p> +<p>Lors du préchargement de ressources qui sont récupérées avec <a href="/fr/docs/Web/HTTP/CORS">CORS</a> activé (par exemple. <a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch"><code>fetch()</code></a>, <a href="/fr/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> ou <a href="/fr/docs/Web/CSS/@font-face">fonts</a>), une attention particulière doit être apportée au paramétrage de l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-crossorigin"><code>crossorigin</code></a> sur votre <a href="/fr/docs/Web/HTML/Element/link"><code><link></code></a>. 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.</p> <p>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. <a href="https://drafts.csswg.org/css-fonts/#font-fetching-requirements">les spécifications pour la récupération des polices</a> si vous êtes intéressé par les détails).</p> -<p>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 <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts">le code source complet de l'exemple sur GitHub</a> (<a href="https://mdn.github.io/html-examples/link-rel-preload/fonts/">et voir le résultat <em>live</em> ici</a>) :</p> +<p>Utilisons ce cas de figure comme exemple. Vous pouvez consulter <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts">le code source complet de l'exemple sur GitHub</a> (<a href="https://mdn.github.io/html-examples/link-rel-preload/fonts/">et voir le résultat <em>live</em> ici</a>) :</p> <pre class="brush: html"><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"> + <title>Web font example</title> - <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 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" type="text/css"> + <link href="style.css" rel="stylesheet"> </head> <body> - ... + … </body></pre> -<p>Vous pouvez ici voir qu'on fournit l'indication sur le type de ressource via l'attribut <code>as</code>, le type MIME grâce à l'attribut <code>type</code> mais aussi et surtout l'attribut <code>crossorigin</code> qui permet de gérer le CORS.</p> +<p>Non seulement nous fournissons les indications relatives au type MIME dans les attributs <code>type</code>, mais nous fournissons également l'attribut <code>crossorigin</code> pour nous assurer que le mode CORS du préchargement correspond à l'éventuelle demande de ressource de police.</p> -<p>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 <em>FOUT</em> pour <em>Flash Of Unstyled Text</em>).</p> +<h2 id="Including_media">Gérer les différents médias</h2> -<h2 id="Gérer_les_différents_médias">Gérer les différents médias</h2> - -<p>Une qualité des éléments <code><link></code> est qu'ils gèrent l'attribut {{htmlattrxref("media", "link")}}. Ce dernier peut être utilisé afin de conditionner le chargement de la ressource <a href="/fr/docs/Web/CSS/@media">selon le type de média</a> voire <a href="/fr/docs/Web/CSS/Requêtes_média/Utiliser_les_Media_queries">selon des requêtes de média (<em>media queries</em>)</a>. En bref, il est possible de faire du chargement de ressources qui soit <em>responsive</em> !</p> +<p>Une qualité des éléments <code><link></code> est qu'ils gèrent l'attribut <a href="/fr/docs/Web/HTML/Element/link#attr-media"><code>media</code></a>. Ce dernier peut être utilisé afin de conditionner le chargement de la ressource <a href="/fr/docs/Web/CSS/@media">selon le type de média</a> voire <a href="/fr/docs/Web/CSS/Media_Queries/Using_media_queries">selon des requêtes de média (<em>media queries</em>)</a>. En bref, il est possible de faire du chargement de ressources qui soit <em>responsive</em> !</p> <p>Prenons un exemple simple (<a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/media">le code source est disponible sur GitHub</a>, <a href="https://mdn.github.io/html-examples/link-rel-preload/media/">avec une démonstration <em>live</em></a>) :</p> @@ -164,13 +173,15 @@ original_slug: Web/HTML/Précharger_du_contenu </script> </body></pre> -<p>Vous pouvez ici voir qu'on a ajouté les attributs <code>media</code> sur les éléments <code><link></code> 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 {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} (lire <a href="/fr/docs/Web/CSS/Requêtes_média/Tester_les_media_queries">Tester les requêtes média</a> pour plus d'informations sur ce point).</p> +<p>Vous pouvez ici voir qu'on a ajouté les attributs <code>media</code> sur les éléments <code><link></code> 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 <a href="/fr/docs/Web/API/Window/matchMedia"><code>Window.matchMedia</code></a> / <a href="/fr/docs/Web/API/MediaQueryList"><code>MediaQueryList</code></a> (lire <a href="/fr/docs/Web/CSS/Media_Queries/Testing_media_queries">Tester les requêtes média</a> pour plus d'informations sur ce point).</p> + +<p>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é).</p> <p>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.</p> -<h2 id="Utiliser_des_scripts_et_des_préchargements_différés">Utiliser des scripts et des préchargements différés</h2> +<h2 id="Scripting_and_preloads">Utiliser des scripts et des préchargements différés</h2> -<p>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 {{domxref("HTMLLinkElement")}} qu'on attache au DOM :</p> +<p>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 <a href="/fr/docs/Web/API/HTMLLinkElement"><code>HTMLLinkElement</code></a> qu'on attache au DOM :</p> <pre class="brush: js">var preloadLink = document.createElement("link"); preloadLink.href = "myscript.js"; @@ -185,54 +196,53 @@ document.head.appendChild(preloadLink); <pre class="brush: js">var preloadedScript = document.createElement("script"); preloadedScript.src = "myscript.js"; -document.body.appendChild(preloadedScript); -</pre> +document.body.appendChild(preloadedScript);</pre> <p>Cela permet de précharger un script et de différer son exécution jusqu'au moment où on en a besoin.</p> -<h2 id="Les_autres_mécanismes_de_préchargement">Les autres mécanismes de préchargement</h2> +<h2 id="Other_resource_preloading_mechanisms">Les autres mécanismes de préchargement</h2> <p>Il existe d'autres fonctionnalités qui permettent de précharger des ressources mais aucune n'est aussi flexible que <code><link rel="preload"></code> :</p> <ul> - <li><code><link rel="prefetch"></code> 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 <code>prefetch</code> que pour celles utilisant <code>preload</code> (la page actuelle est considérée comme plus importante que la suivante). Pour plus de détails, lire <a href="/fr/docs/FAQ_sur_le_préchargement_des_liens">la FAQ sur le préchargement des liens</a>.</li> - <li><code><link rel="prerender"></code> est utilisé afin d'afficher la page indiquée en arrière-plan, accélérant le chargement de la page si l'utilisateur navigue vers cette page. Pouvant entraîner une consommation de bande passante plus importante, Chrome considère <code>prerender</code> comme <a href="https://developers.google.com/web/updates/2018/07/nostate-prefetch">un préchargement NoState</a>.</li> - <li><code><link rel="subresource"></code>{{non-standard_inline}} é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 <code>as</code> n'existait pas) et l'ensemble des ressources recevait donc une priorité assez basse.</li> - <li>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.</li> + <li><code><link rel="prefetch"></code> est pris en charge par les navigateurs depuis longtemps mais sert pour précharger des ressources qui seront utilisées sur la <strong>prochaine</strong> 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 <code>prefetch</code> que pour celles utilisant <code>preload</code> (la page actuelle est considérée comme plus importante que la suivante). Pour plus de détails, lire <a href="/fr/docs/Web/HTTP/Link_prefetching_FAQ">la FAQ sur le préchargement des liens</a>.</li> + <li><code><link rel="prerender"></code> est utilisé afin d'afficher la page indiquée en arrière-plan, accélérant le chargement de la page si l'utilisateur navigue vers cette page. Pouvant entraîner une consommation de bande passante plus importante, Chrome considère <code>prerender</code> comme <a href="https://developers.google.com/web/updates/2018/07/nostate-prefetch">un préchargement NoState</a>.</li> + <li><code><link rel="subresource"></code> {{non-standard_inline}} é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 <code>as</code> n'existait pas) et l'ensemble des ressources recevait donc une priorité assez basse.</li> + <li>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.</li> </ul> -<h2 id="Spécifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Preload','#x2.link-type-preload','preload')}}</td> - <td>{{Spec2('Preload')}}</td> - <td>Détails complémentaires sur <code>preload</code>.</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'link-type-preload', 'rel=preload')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Définition simple de <code>preload</code>.</td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Preload','#x2.link-type-preload','preload')}}</td> + <td>{{Spec2('Preload')}}</td> + <td>Détails complémentaires sur <code>preload</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', 'link-type-preload', 'rel=preload')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>Définition simple de <code>preload</code>.</td> + </tr> + </tbody> </table> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("html.elements.link.rel.preload")}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> <li><a href="https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/">Le préchargement : à quoi ça sert ? (en anglais)</a> par Yoav Weiss</li> </ul> + +<div>{{QuickLinksWithSubpages("/fr/docs/Web/HTML")}}</div> |