ページの onload イベントを遅らせることなく、ページで必要な重要なフォント、スクリプト、その他のリソースをブラウザに知らせたいと思ったことはありませんか？ウェブ デベロッパーは <link rel="preload"> を使用して、使い慣れた HTML 要素の構文と、いくつかの重要な属性を使用して正確な動作を判断できます。これは Chrome 50 リリースの一部としてリリースされるドラフト標準です。
<link rel="preload"> を介して読み込まれたリソースはブラウザ内にローカルに保存され、DOM、JavaScript、CSS で参照されるまで実質的に不活性化されます。たとえば、スクリプト ファイルがプリロードされていても、すぐに実行されないユースケースの 1 つとして、スクリプト ファイルが 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> 要素のコンテキストで使用され、行われるプリロード リクエストの宛先に関する詳細情報をブラウザに提供します。この追加情報により、ブラウザで適切なリクエスト ヘッダーとリクエストの優先度が設定され、正しいリソース コンテキストに設定されている可能性がある関連するコンテンツ セキュリティ ポリシー ディレクティブが適用されます。
（大いに）学ぶ
Yoav Weiss は、<link rel="preload"> の使用に関する決定的なガイドを執筆しています。ご自身のページでも使用したいとお考えの方は、ぜひ Kenny の記事をお読みになり、クリエイティブのメリットや使用例をご確認ください。
さようなら、<link rel="subresource"> さん
<link rel="preload"> は、重大なバグと欠点があります（Chrome 以外のブラウザに実装されたことがない <link rel="subresource"> より優先されます）。そのため、Chrome 50 では <link rel="subresource"> のサポートを終了しました。