diff options
Diffstat (limited to 'devdocs/html/attributes%2Frel%2Fpreload.html')
| -rw-r--r-- | devdocs/html/attributes%2Frel%2Fpreload.html | 210 |
1 files changed, 210 insertions, 0 deletions
diff --git a/devdocs/html/attributes%2Frel%2Fpreload.html b/devdocs/html/attributes%2Frel%2Fpreload.html new file mode 100644 index 00000000..3b4d04a2 --- /dev/null +++ b/devdocs/html/attributes%2Frel%2Fpreload.html @@ -0,0 +1,210 @@ +<header><h1>rel=preload</h1></header><div class="section-content"><p> The <code>preload</code> value of the <a href="../../element/link"><code><link></code></a> element's <a href="../../element/link#rel"><code>rel</code></a> attribute lets you declare fetch requests in the HTML's <a href="../../element/head"><code><head></code></a>, specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page's render, improving performance. Even though the name contains the term <em>load</em>, it doesn't load and execute the script but only schedules it to be downloaded and cached with a higher priority. </p></div> +<h2 id="the_basics">The basics</h2> +<div class="section-content"> +<p>You most commonly use <code><link></code> to load a CSS file to style your page with:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Fy1x8+lx2y3l/bJGL8WXEzKwA9uYxGeqeAOsICWJ844=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>styles/main.css<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>Here however, we will use a <code>rel</code> value of <code>preload</code>, which turns <code><link></code> into a preloader for any resource we want. You will also need to specify:</p> <ul> <li>The path to the resource in the <a href="../../element/link#href"><code>href</code></a> attribute.</li> <li>The type of resource in the <a href="../../element/link#as"><code>as</code></a> attribute.</li> </ul> <p>A simple example might look like this (see our <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css" target="_blank">JS and CSS example source</a>, and <a href="https://mdn.github.io/html-examples/link-rel-preload/js-and-css/" target="_blank">also live</a>):</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="3Qr0zNO79CWzpGxlBSrNPKu1pqwx/mbVVBlpM87md7M=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>JS and CSS preload example<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>preload<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>style.css<span class="token punctuation">"</span></span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>style<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>preload<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main.js<span class="token punctuation">"</span></span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>script<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>style.css<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>bouncing balls<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>canvas</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>canvas</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main.js<span class="token punctuation">"</span></span> <span class="token attr-name">defer</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> +</pre> +</div> <p>Here we preload our CSS and JavaScript files so they will be available as soon as they are required for the rendering of the page later on. This example is trivial, as the browser probably discovers the <code><link rel="stylesheet"></code> and <code><script></code> elements in the same chunk of HTML as the preloads, but the benefits can be seen much more clearly the later resources are discovered and the larger they are. For example:</p> <ul> <li>Resources that are pointed to from inside CSS, like fonts or images.</li> <li>Resources that JavaScript can request, like JSON, imported scripts, or web workers.</li> <li>Larger images and video files.</li> </ul> <p><code>preload</code> has other advantages too. Using <code>as</code> to specify the type of content to be preloaded allows the browser to:</p> <ul> <li>Prioritize resource loading more accurately.</li> <li>Store in the cache for future requests, reusing the resource if appropriate.</li> <li>Apply the correct <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">content security policy</a> to the resource.</li> <li>Set the correct <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept"><code>Accept</code></a> request headers for it.</li> </ul> +</div> +<h3 id="what_types_of_content_can_be_preloaded">What types of content can be preloaded?</h3> +<div class="section-content"> +<p>Many content types can be preloaded. The possible <code>as</code> attribute values are:</p> <ul> <li> +<code>audio</code>: Audio file, as typically used in <a href="../../element/audio"><code><audio></code></a>.</li> <li> +<code>document</code>: An HTML document intended to be embedded by a <a href="../../element/frame"><code><frame></code></a> or <a href="../../element/iframe"><code><iframe></code></a>.</li> <li> +<code>embed</code>: A resource to be embedded inside an <a href="../../element/embed"><code><embed></code></a> element.</li> <li> +<code>fetch</code>: Resource to be accessed by a fetch or XHR request, such as an ArrayBuffer, WebAssembly binary, or JSON file.</li> <li> +<code>font</code>: Font file.</li> <li> +<code>image</code>: Image file.</li> <li> +<code>object</code>: A resource to be embedded inside an <a href="../../element/object"><code><object></code></a> element.</li> <li> +<code>script</code>: JavaScript file.</li> <li> +<code>style</code>: CSS stylesheet.</li> <li> +<code>track</code>: WebVTT file.</li> <li> +<code>worker</code>: A JavaScript web worker or shared worker.</li> <li> +<code>video</code>: Video file, as typically used in <a href="../../element/video"><code><video></code></a>.</li> </ul> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> <code>font</code> and <code>fetch</code> preloading requires the <code>crossorigin</code> attribute to be set; see <a href="#cors-enabled_fetches">CORS-enabled fetches</a> below.</p> </div> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> There's more detail about these values and the web features they expect to be consumed by in the Preload spec — see <a href="https://w3c.github.io/preload/#link-element-extensions" target="_blank">link element extensions</a>. Also note that the full list of values the <code>as</code> attribute can take is governed by the Fetch spec — see <a href="https://fetch.spec.whatwg.org/#concept-request-destination" target="_blank">request destinations</a>.</p> </div> +</div> +<h2 id="including_a_mime_type">Including a MIME type</h2> +<div class="section-content"> +<p><code><link></code> elements can accept a <a href="../../element/link#type"><code>type</code></a> attribute, which contains the MIME type of the resource the element points to. This is especially useful when preloading resources — the browser will use the <code>type</code> attribute value to work out if it supports that resource, and will only download it if so, ignoring it if not.</p> <p>You can see an example of this in our video example (see the <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/video" target="_blank">full source code</a>, and also <a href="https://mdn.github.io/html-examples/link-rel-preload/video/" target="_blank">the live version</a>), a code snippet from which is shown below. This illustrates the core behavior behind preloading in general.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="bXIfM4C5rs07wKhoc8SigaJZ2k9+0Mtja1k/zpFWSlA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Video preload example<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>preload<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sintel-short.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/mp4<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>video</span> <span class="token attr-name">controls</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sintel-short.mp4<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/mp4<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>source</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sintel-short.webm<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>video/webm<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span> + Your browser doesn't support HTML video. Here is a + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sintel-short.mp4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>link to the video<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> instead. + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>video</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> +</pre> +</div> <p>The code in the example above causes the <code>video/mp4</code> video to be preloaded only in supporting browsers — and for users who have <code>video/mp4</code> support in their browsers, causes the <code>video/mp4</code> video to actually be used (since it's the first <a href="../../element/source"><code><source></code></a> specified). That makes the video player hopefully smoother/more responsive for users who have <code>video/mp4</code> support in their browsers.</p> <p>Note that for users whose browsers have both <code>video/mp4</code> and <code>video/webm</code> support, if in that code a <code><link rel="preload" href="sintel-short.webm" as="video" type="video/webm"></code> element were also specified, then <em>both</em> the <code>video/mp4</code> and <code>video/webm</code> videos would be preloaded — even though only one of them would actually be used.</p> <p>Therefore, specifying preloading for multiple types of the same resource is discouraged. Instead, the best practice is to specify preloading only for the type the majority of your users are likely to actually use. That's why the code in the example above doesn't specify preloading for the <code>video/webm</code> video.</p> <p>However, the lack of preloading doesn't prevent the <code>video/webm</code> video from actually being used by those who need it: for users whose browsers don't have <code>video/mp4</code> support but do have <code>video/webm</code> support, the code in the example above does still cause the <code>video/webm</code> video to be used — but it does so without also causing it to also be preloaded unnecessarily for the majority of other users.</p> +</div> +<h2 id="cors-enabled_fetches">CORS-enabled fetches</h2> +<div class="section-content"> +<p>When preloading resources that are fetched with <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS">CORS</a> enabled (e.g. <a href="https://developer.mozilla.org/en-US/docs/Web/API/fetch"><code>fetch()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face">fonts</a>), special care needs to be taken to setting the <a href="../../element/link#crossorigin"><code>crossorigin</code></a> attribute on your <a href="../../element/link"><code><link></code></a> element. The attribute needs to be set to match the resource's CORS and credentials mode, even when the fetch is not cross-origin.</p> <p>As mentioned above, one interesting case where this applies is font files. Because of various reasons, these have to be fetched using anonymous-mode CORS (see <a href="https://drafts.csswg.org/css-fonts/#font-fetching-requirements" target="_blank">Font fetching requirements</a>).</p> <p>Let's use this case as an example. You can see the full <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts" target="_blank">example source code on GitHub</a> (<a href="https://mdn.github.io/html-examples/link-rel-preload/fonts/" target="_blank">also see it live</a>):</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="/dOvrgkbrmb1VH98URZWLpCsEVUZJqkJn8Tjg9vrDuI=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Web font example<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> + <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>preload<span class="token punctuation">"</span></span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fonts/cicle_fina-webfont.woff2<span class="token punctuation">"</span></span> + <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>font<span class="token punctuation">"</span></span> + <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>font/woff2<span class="token punctuation">"</span></span> + <span class="token attr-name">crossorigin</span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> + <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>preload<span class="token punctuation">"</span></span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>fonts/zantroke-webfont.woff2<span class="token punctuation">"</span></span> + <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>font<span class="token punctuation">"</span></span> + <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>font/woff2<span class="token punctuation">"</span></span> + <span class="token attr-name">crossorigin</span> <span class="token punctuation">/></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>style.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> + … +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> +</pre> +</div> <p>Not only are we providing the MIME type hints in the <code>type</code> attributes, but we are also providing the <code>crossorigin</code> attribute to make sure the preload's CORS mode matches the eventual font resource request.</p> +</div> +<h2 id="including_media">Including media</h2> +<div class="section-content"> +<p>One nice feature of <code><link></code> elements is their ability to accept <a href="../../element/link#media"><code>media</code></a> attributes. These can accept <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media#media_types">media types</a> or full-blown <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries">media queries</a>, allowing you to do responsive preloading!</p> <p>Let's look at an example (see it on GitHub — <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/media" target="_blank">source code</a>, <a href="https://mdn.github.io/html-examples/link-rel-preload/media/" target="_blank">live example</a>):</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="wu6VDO6qfsibEfG5ZPLvtqfLp3FD4PB5V+hEJxOI2kM=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Responsive preload example<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> + <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>preload<span class="token punctuation">"</span></span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-image-narrow.png<span class="token punctuation">"</span></span> + <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span> + <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(max-width: 600px)<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> + <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>preload<span class="token punctuation">"</span></span> + <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>bg-image-wide.png<span class="token punctuation">"</span></span> + <span class="token attr-name">as</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>image<span class="token punctuation">"</span></span> + <span class="token attr-name">media</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>(min-width: 601px)<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>main.css<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>My site<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> + + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> + <span class="token keyword">const</span> mediaQueryList <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">matchMedia</span><span class="token punctuation">(</span><span class="token string">"(max-width: 600px)"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + <span class="token keyword">const</span> header <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"header"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + <span class="token keyword">if</span> <span class="token punctuation">(</span>mediaQueryList<span class="token punctuation">.</span>matches<span class="token punctuation">)</span> <span class="token punctuation">{</span> + header<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundImage <span class="token operator">=</span> <span class="token string">"url(bg-image-narrow.png)"</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> + header<span class="token punctuation">.</span>style<span class="token punctuation">.</span>backgroundImage <span class="token operator">=</span> <span class="token string">"url(bg-image-wide.png)"</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> + </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> +</pre> +</div> <p>We include <code>media</code> attributes on our <code><link></code> elements so that a narrow image is preloaded if the user has a narrow viewport, and a wider image is loaded if they have a wide viewport. We use <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia"><code>Window.matchMedia</code></a> / <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList"><code>MediaQueryList</code></a> to do this (see <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries">Testing media queries</a> for more).</p> <p>This makes it much more likely that the font will be available for the page render, cutting down on FOUT (flash of unstyled text).</p> <p>This doesn't have to be limited to images, or even files of the same type — think big! You could perhaps preload and display a simple SVG diagram if the user is on a narrow screen where bandwidth and CPU is potentially more limited, or preload a complex chunk of JavaScript then use it to render an interactive 3D model if the user's resources are more plentiful.</p> +</div> +<h2 id="scripting_and_preloads">Scripting and preloads</h2> +<div class="section-content"> +<div class="notecard note" id="sect3"> <p><strong>Note:</strong> Use <a href="modulepreload"><code><link rel="modulepreload"></code></a> instead if you are working with <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules">JavaScript modules</a>.</p> </div> <p> Another nice thing about these preloads is that you can execute them with script. For example, here we create a <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement"><code>HTMLLinkElement</code></a> instance, then attach it to the DOM: </p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="8GShPYRKgV1EntJUC1XRqeGIVGlNJ4Ge2PwuSi8nS44=" data-language="js"><span class="token keyword">const</span> preloadLink <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"link"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +preloadLink<span class="token punctuation">.</span>href <span class="token operator">=</span> <span class="token string">"myscript.js"</span><span class="token punctuation">;</span> +preloadLink<span class="token punctuation">.</span>rel <span class="token operator">=</span> <span class="token string">"preload"</span><span class="token punctuation">;</span> +preloadLink<span class="token punctuation">.</span>as <span class="token operator">=</span> <span class="token string">"script"</span><span class="token punctuation">;</span> +document<span class="token punctuation">.</span>head<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>preloadLink<span class="token punctuation">)</span><span class="token punctuation">;</span> +</pre> +</div> <p>This means that the browser will preload the <code>myscript.js</code> file, but not actually use it yet. To use it, you could do this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="4LhLTrzH4GchtbyiNlcYdN9JcBetf3+4zukpHK0nCEA=" data-language="js"><span class="token keyword">const</span> preloadedScript <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"script"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +preloadedScript<span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token string">"myscript.js"</span><span class="token punctuation">;</span> +document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>preloadedScript<span class="token punctuation">)</span><span class="token punctuation">;</span> +</pre> +</div> <p>This is useful when you want to preload a script, but then defer execution until exactly when you need it.</p> +</div> +<h2 id="specifications">Specifications</h2> +<div class="_table"><table class="standard-table"> +<thead><tr><th scope="col">Specification</th></tr></thead> +<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/links.html#link-type-preload">HTML Standard <br><small># link-type-preload</small></a></td></tr></tbody> +</table></div> +<h2 id="browser_compatibility">Browser compatibility</h2> +<div class="_table"><table> +<thead> +<tr id="bct-browser-type"> +<th></th> +<th colspan="6">Desktop</th> +<th colspan="6">Mobile</th> +</tr> +<tr id="bct-browsers"> +<th></th> +<th>Chrome</th> +<th>Edge</th> +<th>Firefox</th> +<th>Internet Explorer</th> +<th>Opera</th> +<th>Safari</th> +<th>WebView Android</th> +<th>Chrome Android</th> +<th>Firefox for Android</th> +<th>Opera Android</th> +<th>Safari on IOS</th> +<th>Samsung Internet</th> +</tr> +</thead> +<tbody><tr> +<th><code>preload</code></th> +<td class="bc-supports-yes"><details><summary>50</summary>Doesn’t support <code>as="audio"</code>, <code>as="audioworklet"</code>, <code>as="document"</code>, <code>as="embed"</code>, <code>as="manifest"</code>, <code>as="object"</code>, <code>as="paintworklet"</code>, <code>as="report"</code>, <code>as="sharedworker"</code>, <code>as="video"</code>, <code>as="worker"</code>, or <code>as="xslt"</code>.</details></td> +<td class="bc-supports-yes"><details><summary>≤79</summary>Doesn’t support <code>as="audio"</code>, <code>as="audioworklet"</code>, <code>as="document"</code>, <code>as="embed"</code>, <code>as="manifest"</code>, <code>as="object"</code>, <code>as="paintworklet"</code>, <code>as="report"</code>, <code>as="sharedworker"</code>, <code>as="video"</code>, <code>as="worker"</code>, or <code>as="xslt"</code>.</details></td> +<td class="bc-supports-yes">85<details><summary>56–57</summary>Disabled due to various web compatibility issues (e.g. <a href="https://bugzil.la/1405761">bug 1405761</a>).</details> +</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">37</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes"><details><summary>50</summary><code>as="document"</code> is unsupported. See <a href="https://crbug.com/593267">bug 593267</a>.</details></td> +<td class="bc-supports-yes"><details><summary>50</summary>Doesn’t support <code>as="audio"</code>, <code>as="audioworklet"</code>, <code>as="document"</code>, <code>as="embed"</code>, <code>as="manifest"</code>, <code>as="object"</code>, <code>as="paintworklet"</code>, <code>as="report"</code>, <code>as="sharedworker"</code>, <code>as="video"</code>, <code>as="worker"</code>, or <code>as="xslt"</code>.</details></td> +<td class="bc-supports-yes">85<details><summary>56–57</summary>Disabled due to various web compatibility issues (e.g. <a href="https://bugzil.la/1405761">bug 1405761</a>).</details> +</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes"><details><summary>5.0</summary><code>as="document"</code> is unsupported. See <a href="https://crbug.com/593267">bug 593267</a>.</details></td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li> +<a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Speculative_loading">Speculative loading</a> for a comparison of <code><link rel="preload"></code> and other similar performance improvement features.</li> <li> +<a href="https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/" target="_blank">Preload: What Is It Good For?</a> by Yoav Weiss</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br> + <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload</a> + </p> +</div> |