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