このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
rel=preload
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2021年1月.
* Some parts of this feature may have varying levels of support.
preload は<link> 要素のrel 属性の値で、その HTML の<head> の中で読み取りリクエストを宣言し、ページのライフサイクルの早期の、ブラウザーの主なレンダリング機構が起動する前に読み取りを始めたい、すぐに必要なリソースを指定することができます。これにより、そのリソースがより早く利用でき、ページのレンダリングがブロックされにくくなり、性能が向上します。名前にはload という言葉が含まれていますが、これはスクリプトを読み込んで実行するのではなく、ダウンロードとキャッシュをより高い優先度で行うようにスケジュールするだけです。
基本概念
多くの場合は以下のように、<link> を使用して CSS ファイルを読み取り、ページにスタイルを適用します。
<link rel="stylesheet" href="styles/main.css" />しかしここで、rel の値にpreload を使用すると、<link> 要素は利用したいあらゆるリソースの事前読み込み指示になります。以下のものも指定する必要があります。
簡単な例を示すと、次のようになります (JS と CSS の例のソースおよびライブ)。
<head> <meta charset="utf-8" /> <title>JS and CSS preload example</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>bouncing balls</h1> <canvas></canvas> <script src="main.js" defer></script></body>ここで CSS ファイルと JavaScript ファイルを事前読み込みするので、その後のページのレンダリングで必要な時には、すぐに利用できるようになります。ブラウザーはおそらく、<link rel="stylesheet"> と<script> 要素を HTML 内の同じチャンクで見つけるので、この例は極端ですが、後に現れるリソースであるほど、また大きいリソースであるほど効果が見られる可能性があります。例えば以下の場合です。
- フォントや画像など、 CSS の中から指しているリソース
- JavaScript がリクエストする可能性があるリソース（インポートされるスクリプトなど）。
preload には他の利点もあります。as によって事前読み込みされるコンテンツの種類をブラウザーに指示することで、以下のようなことが実現できます。
- 可能であれば、将来のリクエストのためにキャッシュに格納してリソースを再利用できる。
- リソースに対して正しくコンテンツセキュリティポリシーを適用できる。
- 正しい
Acceptリクエストヘッダーを設定できる。
事前読み込みできるコンテンツの種類
さまざまな種類のコンテンツが事前読み込みできます。as 属性で使用できる値は以下の通りです。
fetch: ArrayBuffer や WebAssembly バイナリーや JSON ファイルのような、フェッチまたは XHR 要求でアクセスされるリソース。font: フォントファイル。image: 画像ファイル。script: JavaScript ファイル。style: CSS スタイルシート。track: WebVTT ファイル。
メモ:font およびfetch の事前読み込みには、crossorigin 属性を設定する必要があります。下記のCORS を使用したフェッチを参照してください。
メモ:使用されると予想されるこれらの値やウェブ機能について、もっと詳細のことは、 HTML の仕様書、Link type "preload" を参照してください。また、フェッチの仕様書で管理されているas 属性の値の完全な一覧は、request destinations を参照してください。
MIME タイプを含める
<link> 要素はtype 要素を受け付け、要素が指す先のリソースの MIME タイプを指定することができます。これは特にリソースの事前読み込み時に便利です。 — ブラウザーはtype 属性の値を使用して対応しているリソースであるかどうかを確認し、その場合だけダウンロードを開始し、そうでない場合は開始しないようにすることができます。
<head> <meta charset="utf-8" /> <title>Image preload example</title> <link rel="preload" href="flower.avif" as="image" type="image/avif" /></head><body> <picture> <source src="flower.avif" type="image/avif" /> <source src="flower.webp" type="image/webp" /> <img src="flower.jpg" /> </picture></body>上記の例のコードでは、image/avif の画像は対応ブラウザーでのみ事前読み込みされます。そして、image/avif に対応しているブラウザーでは、image/avif の画像が実際に使用されます（これは、最初の<source> が指定されたため）。これにより、ブラウザーのimage/avif に対応しているユーザーにとって、画像のダウンロードがより小さくなることを期待しています。
なお、ブラウザーがimage/avif とimage/webp の両方に対応しているユーザーのために、そのコードで<link rel="preload" href="flower.webp" as="image" type="image/webp"> 要素も指定すると、実際にはどちらかのみが使用されてもimage/avif とimage/webp 画像がどちらも事前読み込みされることになります。
したがって、同じリソースに対して複数の種類の事前読み込みを指定することは推奨されません。その代わりに、ユーザーの大半が実際に使用する可能性のある種類にのみ、事前読み込みを指定することが最善の手法です。上の例のコードで、image/webp の画像に事前読み込みさせることを指定していないのはそのためです。
しかし、事前読み込みされないからといって、実際にimage/webp 画像が必要な人に使用されないわけではありません。ブラウザーがimage/avif に対応していないが、image/webp に対応しているユーザーのために、上記の例のコードはimage/webp 画像を使用させますが、他の大多数のユーザーに不必要に事前読み込みさせることはありません。
CORS を使用した取得
CORS を有効にして取得したリソースを事前読み込みする場合 (fetch()、XMLHttpRequest、フォントなど)、<link> 要素のcrossorigin 属性の設定に特別な注意を払う必要があります。この属性は、取得がオリジンを越えない場合でも、リソースの CORS や認証モードに合わせて設定する必要があります。
上記のように、これが当てはまる興味深いケースの 1 つが、フォントファイルです。さまざまな理由により、これらは匿名モードの CORS を使用してフェッチする必要があります（Font fetching requirements参照）。
このケースを例として使用してみましょう。完全なサンプルソースコードはGitHub のソースサンプルコード (およびライブ版) にあります。
<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>type 属性に MIME タイプのヒントを提供するだけでなく、事前読み込みの CORS モードが最終的なフォントリソースリクエストと一致することを確認するために、crossorigin 属性も提供しています。
media を含める
<link> 要素の優れた機能のひとつが、media 属性を受け入れることができることです。この属性は、メディア種別や本格的なメディアクエリーを受け付けることができるので、レスポンシブな事前読み込みを行うことができます。
例を見てみましょう (GitHub 上のソースコード、デモ)。
<head> <meta charset="utf-8" /> <title>Responsive preload example</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>My site</h1> </header> <script> const mediaQueryList = window.matchMedia("(max-width: 600px)"); const 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>media 属性を<link> 要素に設定することで、ビューポートが狭い場合は幅の狭い画像を、ビューポートが広い場合は幅の広い画像を事前読み込みするようにします。このためにWindow.matchMedia /MediaQueryList を使用しています（詳しくはメディアクエリーのテストを参照）。
これにより、ページのレンダリング時にそのフォントが利用できる可能性が高くなり、 FOUT （スタイル付け前のテキストの点滅）を減らすことができます。
これは、画像に限らず、同じ種類のファイルであっても、大きな意味を持ちます。帯域幅や CPU が限られている狭い画面では、シンプルな SVG の図を事前読み込みして表示したり、ユーザーのリソースに余裕がある場合は、複雑な JavaScript を事前読み込みし、それを使ってインタラクティブな 3D モデルをレンダリングしたりすることができるでしょう。
スクリプトと事前読み込み
メモ:JavaScript モジュールを扱う場合は、代わりに<link rel="modulepreload">を使用してください。
これらの事前読み込みに関するもう一つの良い点として、スクリプトを使って実行できることが挙げられます。例えば、ここではHTMLLinkElement インスタンスを作成し、それを DOM に取り付けています。
const preloadLink = document.createElement("link");preloadLink.href = "myscript.js";preloadLink.rel = "preload";preloadLink.as = "script";document.head.appendChild(preloadLink);これは、ブラウザーはmyscript.js ファイルを事前読み込みしますが、実際はまだ使用されていません。これを使用するには、次のようにします。
const preloadedScript = document.createElement("script");preloadedScript.src = "myscript.js";document.body.appendChild(preloadedScript);これは、スクリプトを事前読み込みしたいが、必要なときまで実行を延期する場合に便利です。
仕様書
| Specification |
|---|
| HTML # link-type-preload |
ブラウザーの互換性
関連情報
- 投機的読み込みで、
<link rel="preload">をはじめとする同様のパフォーマンス向上機能の比較ができます。 - Preload: What Is It Good For? by Yoav Weiss