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> 要素のコンテキストの中で使用され、プリロード リクエストのデスティネーションに関する詳しいコンテキストをブラウザに提供します。この追加情報により、ブラウザは適切なリクエスト ヘッダーとリクエストの優先度を設定し、正しいリソース コンテキストに適用される可能性のある関連する Content Security Policy ディレクティブを適用します。

もっと学ぶ

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

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