ページの 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="subresource"> 様、今後ともどうぞよろしくお願いいたします。
<link rel="preload"> は <link rel="subresource"> に代わるものです。<link rel="subresource"> には重大なバグと欠点があり、Chrome 以外のブラウザには実装されていません。そのため、Chrome 50 では <link rel="subresource"> のサポートを終了します。