link rel='preload' を使ってリソースの優先順位を付ける

Jeff Posnick

ページの onload イベントを遅延させることなく、そのページで必要となる重要なフォント、スクリプト、その他のリソースをブラウザに知らせることは可能ですか？<link rel="preload"> により、ウェブ デベロッパーは、いくつかの主要な属性を含む使い慣れた HTML 要素の構文を使用して、正確な動作を決定できます。これは、Chrome 50 リリースの一環として提供されるドラフト版の標準です。

<link rel="preload"> を介して読み込まれたリソースは、ブラウザのローカルに保存され、DOM、JavaScript、CSS で参照されるまで実質的に無効になります。たとえば、スクリプト ファイルはプリロードされていてもすぐに実行されず、DOM の <script> タグを介して含めるようなユースケースが考えられます。

<link rel="preload" href="used-later.js" as="script">
<!-- ...other HTML... -->
<script>
    // Later on, after some condition has been met, we run the preloaded
    // JavaScript by inserting a <script> tag into the DOM.
    var usedLaterScript = document.createElement('script');
    usedLaterScript.src = 'used-later.js';  
    document.body.appendChild(usedLaterScript)
</script>

ここでは何が起こっているのでしょうかこの例で使用されている href 属性は、リンクされたリソースの URL を指定する標準の属性であるため、ウェブ デベロッパーにはなじみがあるはずです。

ただし、as 属性は初めて使用するかもしれません。<link> 要素のコンテキストの中で使用され、プリロード リクエストのデスティネーションに関する詳しいコンテキストをブラウザに提供します。この追加情報により、ブラウザは適切なリクエスト ヘッダーとリクエストの優先度を設定し、適切なリソース コンテキストに適用されている可能性のある関連するコンテンツ セキュリティ ポリシー ディレクティブを適用できます。

もっと学ぶ

<link rel="preload"> の使用に関する決定的なガイドは、Yoav Weiss によって執筆されています。興味をお持ちで、ご自身のページで使い始めたい場合は、同氏の記事でメリットとクリエイティブなユースケースについて詳しく確認することをおすすめします。

<link rel="preload"> は、重大なバグとデメリットがあり、Chrome 以外のブラウザには実装されていない <link rel="subresource"> に代わるものです。そのため、Chrome 50 では <link rel="subresource"> のサポートを終了します。