Web/HTML/Link_types/preload を orphaned から移植 (#1107)

* Web/HTML/Link_types/preload を作成

- orphaned/Web/HTML/Preloading_content から移動
- 2021/05/21 時点の英語版に同期

* _redirects.txt を修正

5 files changed, 255 insertions, 256 deletions

diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt
index f7c5625905..ba6c7488bb 100644
--- a/files/ja/_redirects.txt
+++ b/files/ja/_redirects.txt
@@ -4737,7 +4737,7 @@
 /ja/docs/Web/HTML/Introduction	/ja/docs/Learn/HTML/Introduction_to_HTML
 /ja/docs/Web/HTML/Introduction_to_HTML5	/ja/docs/orphaned/Web/Guide/HTML/HTML5/Introduction_to_HTML5
 /ja/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing	/ja/docs/Glossary/speculative_parsing
-/ja/docs/Web/HTML/Preloading_content	/ja/docs/orphaned/Web/HTML/Preloading_content
+/ja/docs/Web/HTML/Preloading_content	/ja/docs/Web/HTML/Link_types/preload
 /ja/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document	/ja/docs/orphaned/Web/Guide/HTML/Using_HTML_sections_and_outlines
 /ja/docs/Web/HTML/Supported_media_formats	/ja/docs/Web/Media/Formats
 /ja/docs/Web/HTML/Using_HTML5_audio_and_video	/ja/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json
index 98b7f610ec..da07b71cbb 100644
--- a/files/ja/_wikihistory.json
+++ b/files/ja/_wikihistory.json
@@ -35739,6 +35739,17 @@
       "marmot1123"
     ]
   },
+  "Web/HTML/Link_types/preload": {
+    "modified": "2020-12-13T02:32:11.039Z",
+    "contributors": [
+      "kobayashitomoya",
+      "maechabin",
+      "rigani",
+      "8tak4",
+      "mfuji09",
+      "turenar"
+    ]
+  },
   "Web/HTML/Microdata": {
     "modified": "2020-09-06T05:56:41.358Z",
     "contributors": [
@@ -52697,17 +52708,6 @@
       "Marsf"
     ]
   },
-  "orphaned/Web/HTML/Preloading_content": {
-    "modified": "2020-12-13T02:32:11.039Z",
-    "contributors": [
-      "kobayashitomoya",
-      "maechabin",
-      "rigani",
-      "8tak4",
-      "mfuji09",
-      "turenar"
-    ]
-  },
   "orphaned/Web/JavaScript/Guide/Class-Based_vs._Prototype-Based_Languages": {
     "modified": "2019-01-16T14:43:33.903Z",
     "contributors": [
diff --git a/files/ja/orphaned/web/html/preloading_content/index.html b/files/ja/orphaned/web/html/preloading_content/index.html
deleted file mode 100644
index a795bdb75a..0000000000
--- a/files/ja/orphaned/web/html/preloading_content/index.html
+++ /dev/null
@@ -1,244 +0,0 @@
----
-title: rel="preload" によるコンテンツの先読み
-slug: orphaned/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/Preloading_content
----
-<p class="summary">{{htmlelement("link")}} 要素の {{htmlattrxref("rel", "link")}} 属性で <code>preload</code> を指定すると、 HTML の {{htmlelement("head")}} 要素内で読み込みリクエストを宣言し、ページのライフサイクルの早期の、ブラウザーの主なレンダリング機構が起動する前に読み込みを始めたい、すぐに必要なリソースを指定することができます。これにより、そのリソースがより早く利用でき、ページのレンダリングがブロックされにくくなり、性能が向上します。</p>
-
-<p class="summary">この記事では <code>&lt;link rel="preload"&gt;</code> がどのように動作するのかについての基本的なガイドを提供します。</p>
-
-<h2 id="The_basics" name="The_basics">基本概念</h2>
-
-<p>多くの場合は以下のように、 <code>&lt;link&gt;</code> を使用して CSS ファイルを読み込み、ページにスタイルを適用します。</p>
-
-<pre class="brush: html notranslate">&lt;link rel="stylesheet" href="styles/main.css"&gt;</pre>
-
-<p>しかしここで、 <code>rel</code> の値に <code>preload</code> を使用すると、 <code>&lt;link&gt;</code> 要素は利用したいあらゆるリソースの先読み指示になります。以下のものも指定する必要があります。</p>
-
-<ul>
- <li>リソースへのパスを {{htmlattrxref("href", "link")}} 属性へ。</li>
- <li>リソースの種類を {{htmlattrxref("as", "link")}} 属性へ。</li>
-</ul>
-
-<p>簡単な例は以下のようになります (<a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css">JS と CSS のサンプルコード</a> および <a href="https://mdn.github.io/html-examples/link-rel-preload/js-and-css/">デモ</a>) も参照してください)。</p>
-
-<pre class="brush: html notranslate">&lt;head&gt;
-  &lt;meta charset="utf-8"&gt;
-  &lt;title&gt;JS and CSS preload example&lt;/title&gt;
-
-  &lt;link rel="preload" href="style.css" as="style"&gt;
-  &lt;link rel="preload" href="main.js" as="script"&gt;
-
-  &lt;link rel="stylesheet" href="style.css"&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-  &lt;h1&gt;bouncing balls&lt;/h1&gt;
-  &lt;canvas&gt;&lt;/canvas&gt;
-
-  &lt;script src="main.js" defer&gt;&lt;/script&gt;
-&lt;/body&gt;</pre>
-
-<p>ここで CSS ファイルと JavaScript ファイルを先読みするので、その後のページのレンダリングで必要な時には、すぐに利用できるようになります。ブラウザーはおそらく、 <code>&lt;link rel="stylesheet"&gt;</code> と <code>&lt;script&gt;</code> 要素を HTML 内の同じチャンクで見つけるので、この例は極端ですが、後に現れるリソースであるほど、また大きいリソースであるほど効果が見られる可能性があります。例えば以下の場合です。</p>
-
-<ul>
- <li>フォントや画像など、 CSS の中から指しているリソース</li>
- <li>JSON やインポートされたスクリプト、ウェブワーカーなどの JavaScript がリクエストする可能性があるリソース</li>
- <li>より大きな画像や動画ファイル。</li>
-</ul>
-
-<p><code>preload</code> には他の利点もあります。 <code>as</code> によって先読みされるコンテンツの種類をブラウザーに指示することで、以下のようなことが実現できます。</p>
-
-<ul>
- <li>リソースの読み込みの優先付けがより正確にできます。</li>
- <li>可能であれば、将来のリクエストのためにキャッシュに格納してリソースを再利用します。</li>
- <li>リソースに対して正しく<a href="/ja/docs/Web/HTTP/CSP">コンテンツセキュリティポリシー</a>を適用できます。</li>
- <li>正しい {{HTTPHeader("Accept")}} リクエストヘッダーを設定できます。</li>
-</ul>
-
-<h3 id="What_types_of_content_can_be_preloaded" name="What_types_of_content_can_be_preloaded">先読みできるコンテンツの種類</h3>
-
-<p>さまざまな種類のコンテンツが先読みできます。 <code>as</code> 属性で使用できる値は以下の通りです。</p>
-
-<ul>
- <li><code>audio</code>: 通常は {{htmlelement("audio")}} で使用される音声ファイル。</li>
- <li><code>document</code>: {{htmlelement("frame")}} や {{htmlelement("iframe")}} に埋め込まれる HTML 文書。</li>
- <li><code>embed</code>: {{htmlelement("embed")}} 要素の中に埋め込まれるリソース。</li>
- <li><code>fetch</code>: ArrayBuffer や JSON ファイルのような、フェッチまたは XHR 要求でアクセスされるリソース。</li>
- <li><code>font</code>: フォントファイル。</li>
- <li><code>image</code>: 画像ファイル。</li>
- <li><code>object</code>: {{htmlelement("object")}} 要素の中に埋め込まれるリソース。</li>
- <li><code>script</code>: JavaScript ファイル。</li>
- <li><code>style</code>: CSS スタイルシート。</li>
- <li><code>track</code>: WebVTT ファイル。</li>
- <li><code>worker</code>: JavaScript ウェブワーカーまたは共有ワーカー。</li>
- <li><code>video</code>: 通常は {{htmlelement("video")}} で使用される動画ファイル。</li>
-</ul>
-
-<div class="note">
-<p><strong>メモ</strong>: 使用されると予想されるこれらの値やウェブ機能について、もっと詳細は Preload の仕様書にあります。 — <a href="https://w3c.github.io/preload/#link-element-extensions">link element extensions</a> を参照してください。また、フェッチの仕様書で管理されている <code>as</code> 属性の値の完全な一覧は、 <a href="https://fetch.spec.whatwg.org/#concept-request-destination">request destinations</a> を参照してください。</p>
-</div>
-
-<h2 id="Including_a_MIME_type" name="Including_a_MIME_type">MIME タイプを含める</h2>
-
-<p><code>&lt;link&gt;</code> 要素は {{htmlattrxref("type", "link")}} 要素を受け付け、要素が指す先のリソースの MIME タイプを指定することができます。これは特にリソースの先読み時に便利です。 — ブラウザーは <code>type</code> 属性の値を使用して対応しているリソースであるかどうかを確認し、その場合だけダウンロードを開始し、そうでない場合は開始しないようにすることができます。</p>
-
-<p>この例を動画のデモで見ることができます (<a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/video">ソースコード全体</a>と<a href="https://mdn.github.io/html-examples/link-rel-preload/video/">デモ版</a>もご覧ください。)。</p>
-
-<pre class="brush: html notranslate">&lt;head&gt;
-  &lt;meta charset="utf-8"&gt;
-  &lt;title&gt;Video preload example&lt;/title&gt;
-
-  &lt;link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4"&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  &lt;video controls&gt;
-    &lt;source src="sintel-short.mp4" type="video/mp4"&gt;
-    &lt;source src="sintel-short.webm" type="video/webm"&gt;
-    &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="sintel-short.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
-  &lt;/video&gt;
-&lt;/body&gt;</pre>
-
-<p>この場合、MP4 をサポートしているブラウザーは MP4 を先読みして使用し、ユーザーにとって動画プレイヤーをよりスムーズまたはレスポンシブにできるでしょう。ブラウザーが MP4 をサポートしていない場合は WebM バージョンを読み込みますが、先読みの利点は得られません。これは、どのように先読みコンテンツがプログレッシブエンハンスメントの哲学と結ばれているかを示しています。</p>
-
-<h2 id="Cross-origin_fetches" name="Cross-origin_fetches">オリジンをまたいだフェッチ</h2>
-
-<p>CORSを有効にしてフェッチ（例えば、<code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code>, <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> or <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/@font-face">fonts</a>）されたリソースをプリロードするとき、<code>&lt;link&gt;</code>要素に{{htmlattrxref("crossorigin", "link")}}属性を設定する場合には特別な注意が必要です。</p>
-
-<p dir="ltr" id="tw-target-text">上記のように、これが当てはまる興味深いケースの1つは、フォントファイルです。さまざまな理由により、これらは匿名モードのCORSを使用してフェッチする必要があります（<a href="https://drafts.csswg.org/css-fonts/#font-fetching-requirements">Font fetching requirements</a>参照）。</p>
-
-<p>このケースを例として使用してみましょう。完全なサンプルソースコードは <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts">example source code on GitHub</a> (<a href="https://mdn.github.io/html-examples/link-rel-preload/fonts/">also see it live</a>):</p>
-
-<pre class="brush: html notranslate">&lt;head&gt;
-  &lt;meta charset="utf-8"&gt;
-  &lt;title&gt;Web font example&lt;/title&gt;
-
-  &lt;link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin&gt;
-  &lt;link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin&gt;
-
-  &lt;link href="style.css" rel="stylesheet" type="text/css"&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  …
-&lt;/body&gt;</pre>
-
-<p dir="ltr" id="tw-target-text"><code>type</code>属性にMIMEタイプヒントを提供するだけでなく、プリロードのCORSモードが最終的なフォントリソースリクエストと一致することを確認するために、<code>crossorigin</code>属性も提供しています。</p>
-
-<h2 id="Including_media" name="Including_media">media を含める</h2>
-
-<p>One nice feature of <code>&lt;link&gt;</code> elements is their ability to accept {{htmlattrxref("media", "link")}} attributes. These can accept <a href="/en-US/docs/Web/CSS/@media#Media_types">media types</a> or full-blown <a href="/en-US/docs/Web/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">source code</a>, <a href="https://mdn.github.io/html-examples/link-rel-preload/media/">live example</a>):</p>
-
-<pre class="brush: html notranslate">&lt;head&gt;
-  &lt;meta charset="utf-8"&gt;
-  &lt;title&gt;Responsive preload example&lt;/title&gt;
-
-  &lt;link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)"&gt;
-  &lt;link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)"&gt;
-
-  &lt;link rel="stylesheet" href="main.css"&gt;
-&lt;/head&gt;
-&lt;body&gt;
-  &lt;header&gt;
-    &lt;h1&gt;My site&lt;/h1&gt;
-  &lt;/header&gt;
-
-  &lt;script&gt;
-    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)';
-    }
-  &lt;/script&gt;
-&lt;/body&gt;</pre>
-
-<p>We include <code>media</code> attributes on our <code>&lt;link&gt;</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 {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} to do this (see <a href="/en-US/docs/Web/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>
-
-<h2 id="Scripting_and_preloads" name="Scripting_and_preloads">スクリプトと先読み</h2>
-
-<p>これらのプリロードに関するもう一つの良い点として、スクリプトを使って実行できることが挙げられます。例えば、ここでは {{domxref("HTMLLinkElement")}} インスタンスを作成し、それを DOM に適用させています。</p>
-
-<pre class="brush: js notranslate"><code class="language-javascript"><span class="keyword token">var</span> preloadLink <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"link"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-preloadLink<span class="punctuation token">.</span>href <span class="operator token">=</span> <span class="string token">"myscript.js"</span><span class="punctuation token">;</span>
-preloadLink<span class="punctuation token">.</span>rel <span class="operator token">=</span> <span class="string token">"preload"</span><span class="punctuation token">;</span>
-preloadLink<span class="punctuation token">.</span><span class="keyword token">as</span> <span class="operator token">=</span> <span class="string token">"script"</span><span class="punctuation token">;</span>
-document<span class="punctuation token">.</span>head<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>preloadLink<span class="punctuation token">)</span><span class="punctuation token">;</span></code>
-</pre>
-
-<p>これは、ブラウザは <code>myscript.js</code> ファイルをプリロードしますが、実際はまだ使用されていません。これを使用するには、以下のようにします。</p>
-
-<pre class="brush: js notranslate"><code class="language-javascript"><span class="keyword token">var</span> preloadedScript <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">createElement</span><span class="punctuation token">(</span><span class="string token">"script"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-preloadedScript<span class="punctuation token">.</span>src <span class="operator token">=</span> <span class="string token">"myscript.js"</span><span class="punctuation token">;</span>
-document<span class="punctuation token">.</span>body<span class="punctuation token">.</span><span class="function token">appendChild</span><span class="punctuation token">(</span>preloadedScript<span class="punctuation token">)</span><span class="punctuation token">;</span>
-</code></pre>
-
-<p>これは、スクリプトをプリロードしたいが、必要なときまで実行を延期する場合に便利です。</p>
-
-<h2 id="Other_resource_preloading_mechanisms" name="Other_resource_preloading_mechanisms">他のリソースの先読み機構</h2>
-
-<p>Other preloading features exist, but none are quite as fit for purpose as <code>&lt;link rel="preload"&gt;</code>:</p>
-
-<ul>
- <li><code>&lt;link rel="prefetch"&gt;</code> has been supported in browsers for a long time, but it is intended for prefetching resources that will be used in the <strong><em>next</em></strong> navigation/page load (e.g. when you go to the next page). This is fine, but isn't useful for the current page! In addition, browsers will give <code>prefetch</code> resources a lower priority than <code>preload</code> ones — the current page is more important than the next. See <a href="/en-US/docs/Web/HTTP/Link_prefetching_FAQ">Link prefetching FAQ</a> for more details.</li>
- <li><code>&lt;link rel="prerender"&gt;</code> renders a specified webpage in the background, speeding up its load if the user navigates to it. Because of the potential to waste users bandwidth, Chrome treats <code>prerender</code> as a <a href="https://developers.google.com/web/updates/2018/07/nostate-prefetch">NoState prefetch</a> instead.</li>
- <li><code>&lt;link rel="subresource"&gt;</code> {{non-standard_inline}} was supported in Chrome a while ago, and was intended to tackle the same issue as <code>preload</code>, but it had a problem: there was no way to work out a priority for the items (<code>as</code> didn't exist back then), so they all got fetched with fairly low priority.</li>
- <li>There are a number of script-based resource loaders out there, but they don't have any power over the browser's fetch prioritization queue, and are subject to much the same performance problems.</li>
-</ul>
-
-<h2 id="Specifications" name="Specifications">仕様書</h2>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">仕様書</th>
-   <th scope="col">状態</th>
-   <th scope="col">備考</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{SpecName('Preload','#x2.link-type-preload','preload')}}</td>
-   <td>{{Spec2('Preload')}}</td>
-   <td><code>preload</code> の詳細</td>
-  </tr>
-  <tr>
-   <td>{{SpecName('HTML WHATWG', '#link-type-preload', 'rel=preload')}}</td>
-   <td>{{Spec2('HTML WHATWG')}}</td>
-   <td><code>preload</code> の定義</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
-
-<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p>
-
-<p>{{Compat("html.elements.link.rel.preload")}}</p>
-
-<h2 id="See_also" name="See_also">関連情報</h2>
-
-<ul>
- <li><a href="https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/">Preload: What Is It Good For?</a> by Yoav Weiss</li>
-</ul>
-
-<p>{{QuickLinksWithSubpages("/ja/docs/Web/HTML")}}</p>
diff --git a/files/ja/web/html/link_types/prefetch/index.html b/files/ja/web/html/link_types/prefetch/index.html
new file mode 100644
index 0000000000..9a2a68a527
--- /dev/null
+++ b/files/ja/web/html/link_types/prefetch/index.html
@@ -0,0 +1,21 @@
+---
+title: 'リンク種別: prefetch'
+slug: Web/HTML/Link_types/prefetch
+tags:
+  - Attribute
+  - HTML
+  - Link
+  - Link types
+  - Reference
+browser-compat: html.elements.link.rel.prefetch
+translation_of: Web/HTML/Link_types/prefetch
+---
+<p><span class="seoSummary"><strong><code>prefetch</code></strong> キーワードを {{HTMLElement("link")}} 要素の {{HTMLAttrxRef("rel", "link")}} 属性に設定すると、ユーザーが将来の操作でターゲットリソースを必要とする可能性が高く、したがってブラウザーはリソースを先読みしてキャッシュすることでユーザーの使い勝手を向上させることができる可能性があることをブラウザーに示唆するものです。</span></p>
+
+<h2 id="Specifications">仕様書</h2>
+
+<p>{{Specifications}}</p>
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
diff --git a/files/ja/web/html/link_types/preload/index.html b/files/ja/web/html/link_types/preload/index.html
new file mode 100644
index 0000000000..50b6a46987
--- /dev/null
+++ b/files/ja/web/html/link_types/preload/index.html
@@ -0,0 +1,222 @@
+---
+title: 'リンク種別: preload'
+slug: Web/HTML/Link_types/preload
+tags:
+  - Attribute
+  - HTML
+  - Link
+  - Link types
+  - Reference
+browser-compat: html.elements.link.rel.preload
+translation_of: Web/HTML/Link_types/preload
+---
+<div>{{HTMLSidebar}}</div>
+
+<p><code>preload</code> の値を {{htmlelement("link")}} 要素の {{htmlattrxref("rel", "link")}} 属性に設定すると、 HTML の {{htmlelement("head")}} の中で読み込みリクエストを宣言し、ページのライフサイクルの早期の、ブラウザーの主なレンダリング機構が起動する前に読み込みを始めたい、すぐに必要なリソースを指定することができます。これにより、そのリソースがより早く利用でき、ページのレンダリングがブロックされにくくなり、性能が向上します。</p>
+
+
+<h2 id="The_basics" name="The_basics">基本概念</h2>
+
+<p>多くの場合は以下のように、 <code>&lt;link&gt;</code> を使用して CSS ファイルを読み込み、ページにスタイルを適用します。</p>
+
+<pre class="brush: html">&lt;link rel="stylesheet" href="styles/main.css"&gt;</pre>
+
+<p>しかしここで、 <code>rel</code> の値に <code>preload</code> を使用すると、 <code>&lt;link&gt;</code> 要素は利用したいあらゆるリソースの先読み指示になります。以下のものも指定する必要があります。</p>
+
+<ul>
+	<li>リソースのパスを {{htmlattrxref("href", "link")}} 属性へ</li>
+	<li>リソースの種類を {{htmlattrxref("as", "link")}} 属性へ</li>
+</ul>
+
+<p>簡単な例を示すと、次のようになります (<a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/js-and-css">JS と CSS の例のソース</a>および<a href="https://mdn.github.io/html-examples/link-rel-preload/js-and-css/">ライブ</a>)。</p>
+
+<pre class="brush: html">&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;JS and CSS preload example&lt;/title&gt;
+
+  &lt;link rel="preload" href="style.css" as="style"&gt;
+  &lt;link rel="preload" href="main.js" as="script"&gt;
+
+  &lt;link rel="stylesheet" href="style.css"&gt;
+&lt;/head&gt;
+
+&lt;body&gt;
+  &lt;h1&gt;bouncing balls&lt;/h1&gt;
+  &lt;canvas&gt;&lt;/canvas&gt;
+
+  &lt;script src="main.js" defer&gt;&lt;/script&gt;
+&lt;/body&gt;</pre>
+
+<p>ここで CSS ファイルと JavaScript ファイルを先読みするので、その後のページのレンダリングで必要な時には、すぐに利用できるようになります。ブラウザーはおそらく、 <code>&lt;link rel="stylesheet"&gt;</code> と <code>&lt;script&gt;</code> 要素を HTML 内の同じチャンクで見つけるので、この例は極端ですが、後に現れるリソースであるほど、また大きいリソースであるほど効果が見られる可能性があります。例えば以下の場合です。</p>
+
+<ul>
+ <li>フォントや画像など、 CSS の中から指しているリソース</li>
+ <li>JSON やインポートされたスクリプト、ウェブワーカーなどの JavaScript がリクエストする可能性があるリソース</li>
+ <li>より大きな画像や動画ファイル。</li>
+</ul>
+
+<p><code>preload</code> には他の利点もあります。 <code>as</code> によって先読みされるコンテンツの種類をブラウザーに指示することで、以下のようなことが実現できます。</p>
+
+<ul>
+ <li>リソースの読み込みの優先付けがより正確にできます。</li>
+ <li>可能であれば、将来のリクエストのためにキャッシュに格納してリソースを再利用します。</li>
+ <li>リソースに対して正しく<a href="/ja/docs/Web/HTTP/CSP">コンテンツセキュリティポリシー</a>を適用できます。</li>
+ <li>正しい {{HTTPHeader("Accept")}} リクエストヘッダーを設定できます。</li>
+</ul>
+
+<h3 id="What_types_of_content_can_be_preloaded">先読みできるコンテンツの種類</h3>
+
+<p>さまざまな種類のコンテンツが先読みできます。 <code>as</code> 属性で使用できる値は以下の通りです。</p>
+
+<ul>
+	<li><code>audio</code>: 通常は {{htmlelement("audio")}} で使用される音声ファイル。</li>
+	<li><code>document</code>: {{htmlelement("frame")}} や {{htmlelement("iframe")}} に埋め込まれる HTML 文書。</li>
+	<li><code>embed</code>: {{htmlelement("embed")}} 要素の中に埋め込まれるリソース。</li>
+	<li><code>fetch</code>: ArrayBuffer や JSON ファイルのような、フェッチまたは XHR 要求でアクセスされるリソース。</li>
+	<li><code>font</code>: フォントファイル。</li>
+	<li><code>image</code>: 画像ファイル。</li>
+	<li><code>object</code>: {{htmlelement("object")}} 要素の中に埋め込まれるリソース。</li>
+	<li><code>script</code>: JavaScript ファイル。</li>
+	<li><code>style</code>: CSS スタイルシート。</li>
+	<li><code>track</code>: WebVTT ファイル。</li>
+	<li><code>worker</code>: JavaScript ウェブワーカーまたは共有ワーカー。</li>
+	<li><code>video</code>: 通常は {{htmlelement("video")}} で使用される動画ファイル。</li>
+</ul>
+
+<div class="note">
+<p><strong>Note</strong>: <code>video</code> preloading is included in the Preload spec, but is not currently implemented by browsers.</p>
+</div>
+
+<div class="note">
+<p><strong>注</strong>: 使用されると予想されるこれらの値やウェブ機能について、もっと詳細は Preload の仕様書にあります。 — <a href="https://w3c.github.io/preload/#link-element-extensions">link element extensions</a> を参照してください。また、フェッチの仕様書で管理されている <code>as</code> 属性の値の完全な一覧は、 <a href="https://fetch.spec.whatwg.org/#concept-request-destination">request destinations</a> を参照してください。</p>
+</div>
+
+<h2 id="Including_a_MIME_type">MIME タイプを含める</h2>
+
+<p><code>&lt;link&gt;</code> 要素は {{htmlattrxref("type", "link")}} 要素を受け付け、要素が指す先のリソースの MIME タイプを指定することができます。これは特にリソースの先読み時に便利です。 — ブラウザーは <code>type</code> 属性の値を使用して対応しているリソースであるかどうかを確認し、その場合だけダウンロードを開始し、そうでない場合は開始しないようにすることができます。</p>
+
+<p>この例を動画のデモで見ることができます (<a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/video">ソースコード全体</a>と<a href="https://mdn.github.io/html-examples/link-rel-preload/video/">デモ版</a>もご覧ください。)。</p>
+
+<pre class="brush: html">&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Video preload example&lt;/title&gt;
+
+  &lt;link rel="preload" href="sintel-short.mp4" as="video" type="video/mp4"&gt;
+  &lt;link rel="preload" href="sintel-short.webm" as="video" type="video/webm"&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;video controls&gt;
+    &lt;source src="sintel-short.mp4" type="video/mp4"&gt;
+    &lt;source src="sintel-short.webm" type="video/webm"&gt;
+    &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="sintel-short.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
+  &lt;/video&gt;
+&lt;/body&gt;</pre>
+
+<p>この場合、MP4 に対応しているブラウザーは MP4 を先読みして使用し、ユーザーにとって動画プレイヤーをよりスムーズまたはレスポンシブにできるでしょう。ブラウザーが MP4 に対応していない場合は WebM バージョンを読み込みますが、先読みの利点は得られません。これは、どのように先読みコンテンツがプログレッシブエンハンスメントの哲学と結ばれているかを示しています。</p>
+
+<h2 id="CORS-enabled_fetches">CORS を使用したフェッチ</h2>
+
+<p><a href="/ja/docs/Web/HTTP/CORS">CORS</a> を有効にして取得したリソースを先読みする場合 (<code><a href="/ja/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code>、<code><a href="/ja/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code>、<a href="/ja/docs/Web/CSS/@font-face">フォント</a>など)、 <code><a href="/ja/docs/Web/HTML/Element/link">&lt;link&gt;</a></code> 要素の {{htmlattrxref("crossorigin","link")}} 属性の設定に特別な注意を払う必要があります。この属性は、取得がクロスオリジンでない場合でも、リソースの CORS や認証モードに合わせて設定する必要があります。</p>
+
+<p>上記のように、これが当てはまる興味深いケースの 1 つは、フォントファイルです。さまざまな理由により、これらは匿名モードの CORS を使用してフェッチする必要があります (<a href="https://drafts.csswg.org/css-fonts/#font-fetching-requirements">Font fetching requirements</a>参照)。</p>
+
+<p>このケースを例として使用してみましょう。完全なサンプルソースコードは <a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/fonts">GitHub のソースコード例</a> (<a href="https://mdn.github.io/html-examples/link-rel-preload/fonts/">およびライブ盤</a>) にあります。</p>
+
+<pre class="brush: html">&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Web font example&lt;/title&gt;
+
+  &lt;link rel="preload" href="fonts/cicle_fina-webfont.woff2" as="font" type="font/woff2" crossorigin&gt;
+  &lt;link rel="preload" href="fonts/zantroke-webfont.woff2" as="font" type="font/woff2" crossorigin&gt;
+
+  &lt;link href="style.css" rel="stylesheet"&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  …
+&lt;/body&gt;</pre>
+
+<p><code>type</code>属性に MIME タイプのヒントを提供するだけでなく、先読みの CORS モードが最終的なフォントリソースリクエストと一致することを確認するために、 <code>crossorigin</code> 属性も提供しています。</p>
+
+<h2 id="Including_media">media を含める</h2>
+
+<p><code>&lt;link&gt;</code> 要素の優れた機能のひとつが、 {{htmlattrxref("media", "link")}} 属性を受け入れることができることです。この属性は、<a href="/ja/docs/Web/CSS/@media#media_types">メディア種別</a>や本格的な<a href="/ja/docs/Web/CSS/Media_Queries/Using_media_queries">メディアクエリー</a>を受け付けることができるので、レスポンシブな先読みを行うことができます。</p>
+
+<p>例を見てみましょう (GitHub 上の<a href="https://github.com/mdn/html-examples/tree/master/link-rel-preload/media">ソースコード</a>、<a href="https://mdn.github.io/html-examples/link-rel-preload/media/">デモ</a>)。</p>
+
+<pre class="brush: html">&lt;head&gt;
+  &lt;meta charset="utf-8"&gt;
+  &lt;title&gt;Responsive preload example&lt;/title&gt;
+
+  &lt;link rel="preload" href="bg-image-narrow.png" as="image" media="(max-width: 600px)"&gt;
+  &lt;link rel="preload" href="bg-image-wide.png" as="image" media="(min-width: 601px)"&gt;
+
+  &lt;link rel="stylesheet" href="main.css"&gt;
+&lt;/head&gt;
+&lt;body&gt;
+  &lt;header&gt;
+    &lt;h1&gt;My site&lt;/h1&gt;
+  &lt;/header&gt;
+
+  &lt;script&gt;
+    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)';
+    }
+  &lt;/script&gt;
+&lt;/body&gt;</pre>
+
+<p><code>media</code> 属性を <code>&lt;link&gt;</code> 要素に設定することで、ビューポートが狭い場合は幅の狭い画像を、ビューポートが広い場合は幅の広い画像を先読みするようにします。このために {{domxref("Window.matchMedia")}} / {{domxref("MediaQueryList")}} を使用しています (詳しくは<a href="/ja/docs/Web/CSS/Media_Queries/Testing_media_queries">メディアクエリーのテスト</a>を参照)。</p>
+
+<p>これにより、ページのレンダリング時にそのフォントが利用できる可能性が高くなり、 FOUT (スタイル付け前のテキストの点滅) を減らすことができます。</p>
+
+<p>これは、画像に限らず、同じ種類のファイルであっても、大きな意味を持ちます。帯域幅や CPU が限られている狭い画面では、シンプルな SVG の図を先読みして表示したり、ユーザーのリソースに余裕がある場合は、複雑な JavaScript を先読みし、それを使ってインタラクティブな 3D モデルをレンダリングしたりすることができるでしょう。</p>
+
+<h2 id="Scripting_and_preloads">スクリプトと先読み</h2>
+
+<p>これらの先読みに関するもう一つの良い点として、スクリプトを使って実行できることが挙げられます。例えば、ここでは {{domxref("HTMLLinkElement")}} インスタンスを作成し、それを DOM に適用させています。</p>
+
+<pre class="brush: js">var preloadLink = document.createElement(&quot;link&quot;);
+preloadLink.href = &quot;myscript.js&quot;;
+preloadLink.rel = &quot;preload&quot;;
+preloadLink.as = &quot;script&quot;;
+document.head.appendChild(preloadLink);
+</pre>
+
+<p>これは、ブラウザーは <code>myscript.js</code> ファイルを先読みしますが、実際はまだ使用されていません。これを使用するには、以下のようにします。</p>
+
+<pre class="brush: js">var preloadedScript = document.createElement(&quot;script&quot;);
+preloadedScript.src = &quot;myscript.js&quot;;
+document.body.appendChild(preloadedScript);
+</pre>
+
+<p>これは、スクリプトを先読みしたいが、必要なときまで実行を延期する場合に便利です。</p>
+
+<h2 id="Other_resource_preloading_mechanisms">その他のリソース先読み機構</h2>
+
+<p>先読み機能は他にもありますが、 <code>&lt;link rel="preload"&gt;</code> ほど目的に合ったものはありません。</p>
+
+<ul>
+	<li><code>&lt;link rel="prefetch"&gt;</code> は長い間ブラウザーで対応されてきましたが、これは<strong><em>次の</em></strong>操作やページ読み込み (次のページに移動するときなど) で使用されるリソースを先読みするためのものです。これはこれで良いのですが、現在のページには役に立ちません。さらに、ブラウザーは <code>prefetch</code> のリソースを <code>preload</code> リソースよりも低い優先度で表示します。現在のページは次のページよりも重要なのです。詳しくは<a href="/ja/docs/Web/HTTP/Link_prefetching_FAQ">リンク先読みの FAQ</a> を参照してください。</li>
+	<li>
+	<code>&lt;link rel="prerender"&gt;</code> は、指定されたウェブページをバックグラウンドでレンダリングし、ユーザーがそのページに移動した場合のロードを高速化します。ユーザーの帯域幅を浪費する可能性があるため、 Chrome は prerender を代わりに <a href="https://developers.google.com/web/updates/2018/07/nostate-prefetch">NoState 先読み</a>として扱います。</li>
+	<li><code>&lt;link rel="subresource"&gt;</code> {{non-standard_inline}} は、しばらく前に Chrome が対応しており、 <code>preload</code> と同じ問題に取り組むことを目的としていましたが、問題がありました。項目の優先順位を計算する方法がなかったため (当時は <code>as</code> が存在しなかったため)、すべての項目がかなり低い優先順位で取得されてしまいました。</li>
+	<li>スクリプトベースのリソースローダーは数多く存在しますが、ブラウザーの取得優先度キューを制御することはできず、同様のパフォーマンスの問題があります。</li>
+</ul>
+
+<h2 id="Specifications">仕様書</h2>
+
+<p>{{Specifications}}</p>
+
+<h2 id="Browser_compatibility">ブラウザーの互換性</h2>
+
+<p>{{Compat}}</p>
+
+<h2 id="See_also">関連情報</h2>
+
+<ul>
+	<li><a href="https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/">Preload: What Is It Good For?</a> by Yoav Weiss</li>
+</ul>