<h2 id="linkタグのrel属性">linkタグのrel属性<a aria-hidden="true" tabindex="-1" href="#linkタグのrel属性"></a></h2>
<ol>
<li>
<code>prefetch</code>：
<ul>
<li>使用状況：将来のページ遷移で必要になると予想されるリソースをブラウザに先行して取得させたい場合に使用します。これは通常、アイドリング中のネットワーク時間を活用して、後のナビゲーションのパフォーマンスを向上させるために使用します。</li>
<li>例：ユーザーが次に進むことが高確率で予想されるページのリソースを先取りします。</li>
<li>使用法：
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;link rel="prefetch" href="next-page.js">
</code></pre></div>
</li>
</ul>
</li>
<li>
<code>preload</code>：
<ul>
<li>使用状況：現在のページのレンダリングに必要なリソースを早急に取得したい場合に使用します。これにより、ブラウザがこれらのリソースをダウンロードと解析を待たずに、すぐに取り組むことができます。</li>
<li>例：フォントや重要なスクリプト、CSSなど。</li>
<li>使用法：
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;link rel="preload" href="styles.css" as="style">
&#x3C;link rel="preload" href="script.js" as="script">
</code></pre></div>
</li>
</ul>
</li>
<li>
<code>modulepreload</code>：
<ul>
<li>使用状況：モジュールスクリプトに対して <code>preload</code> のような動作をしたい場合に使用します。<code>modulepreload</code> は、モジュールの依存関係も先行して取得し解析します。</li>
<li>例：JavaScriptモジュールスクリプトとその依存関係</li>
<li>使用法：
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;link rel="modulepreload" href="module.js">
</code></pre></div>
</li>
</ul>
</li>
<li>
<code>preconnect</code>：
<ul>
<li>使用状況：特定のサードパーティとの接続を予め確立しておきたい場合に使用します。これにより、リクエスト発行までのレイテンシを短縮することができます。</li>
<li>例：サードパーティのフォント、APIエンドポイント、外部の画像等。</li>
<li>使用法：
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;link rel="preconnect" href="https://example.com">
</code></pre></div>
</li>
</ul>
</li>
<li>
<code>dns-prefetch</code>：
<ul>
<li>使用状況：リソースを取得するためのDNSルックアップの時間を短縮したい場合に使用します。</li>
<li>例：CDNやサードパーティサイトのURLへのリクエスト</li>
<li>使用法：
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;link rel="dns-prefetch" href="https://example.com">
</code></pre></div>
</li>
</ul>
</li>
</ol>
<h2 id="javascriptではダウンロードをするだけで実行は別途">JavaScriptではダウンロードをするだけで実行は別途<a aria-hidden="true" tabindex="-1" href="#javascriptではダウンロードをするだけで実行は別途"></a></h2>
<code>link</code> タグの <code>rel</code> 属性に <code>preload</code>、<code>prefetch</code>、<code>modulepreload</code> のいずれかを指定した場合、指定されたリソースはダウンロードがされただけでスクリプトは実行されません。
以下のように別途実行させる必要があります。これはダウンロードだけしておき、お好みの時に実行できるということです。
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;head>
 &#x3C;!-- まずJavaScriptをプリロードします -->
 &#x3C;link rel="preload" href="script.js" as="script">
&#x3C;/head>
&#x3C;body>
&#x3C;!-- HTML要素 -->

&#x3C;!-- HTML文書の最後、すなわち&#x3C;body>タグの最後でスクリプトを実行します -->
&#x3C;script src="script.js">&#x3C;/script>
&#x3C;/body>
</code></pre></div>
<h2 id="cssではダウンロードをするが解析は別途">CSSではダウンロードをするが解析は別途<a aria-hidden="true" tabindex="-1" href="#cssではダウンロードをするが解析は別途"></a></h2>
<ul>
<li><code>preload</code>：CSSファイルはダウンロードされますが、ダウンロードされたCSSファイルは自動的に適用されません。その後、同じCSSファイルを指す<code>&#x3C;link rel="stylesheet"></code> 
タグを追加することで、先にダウンロードされたCSSが適用されます。</li>
<li><code>prefetch</code> 
：将来のナビゲーションで必要になる可能性のあるCSSファイルはダウンロードされますが、自動的に適用されません。その後、同じCSSファイルを指す<code>&#x3C;link rel="stylesheet"></code> 
タグを追加することで、先にダウンロードされたCSSが適用されます。</li>
</ul>
したがって、CSSファイルをダウンロードしただけでなく適用したい場合には、その後に<code>&#x3C;link rel="stylesheet"></code>タグを使って適用命令を出す必要があります。
しかし、<code>onload</code>属性を使うことで、CSSファイルのダウンロードが完了したら自動的に適用することができます。
<div class="remark-highlight"><pre class="language-html"><code class="language-html">&#x3C;head>
 &#x3C;!-- まずCSSをプリロードします -->
 &#x3C;link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">

 &#x3C;!-- その後、通常のリンクタグでCSSを適用します -->
 &#x3C;!-- &#x3C;link rel="stylesheet" href="styles.css"> -->
&#x3C;/head>
</code></pre></div>