deferとasyncでスクリプトの実行順序を整え、preload、preconnect、prefetchでネットワークを操縦します。
このレッスンを Kodokon で開く典型的な <script src> はHTMLの解析をブロックします。ブラウザは止まり、ダウンロードし、実行し、それから再開します。2つの属性がこの構図を変えます。defer は解析と並行してダウンロードし、DOMContentLoaded の直前に、スクリプトを文書の順序で実行します。DOMや他のスクリプトに依存しうるあなたのアプリケーションコードには、これが既定の選択です。async も並行してダウンロードしますが、ファイルが届いたらすぐに、順序の保証なしに実行します。何にも依存しない解析ツールのような独立したスクリプトのためにとっておきましょう。
<script src="/js/analytics.js" async></script>
<script src="/js/vendor.js" defer></script>
<script src="/js/app.js" defer></script>ブラウザが特定の重要なリソースを見つけるのは、非常に遅くなることがあります。CSSファイルの中で参照されるフォント、JavaScriptで読み込まれる画像などです。<link rel="preload"> は、その発見の遅れを、<head> の中でリソースを宣言することで解消します。ブラウザが適切な優先度と適切なキャッシュを適用できるよう、as 属性は必須です。教科書的な例: Webフォントです。そうしなければ、CSSがダウンロードされ解析された後にしか要求されません。
<link rel="preload" as="font" type="font/woff2"
href="/fonts/inter-var.woff2" crossorigin>
<link rel="preload" as="image"
href="/img/hero-1600.jpg" fetchpriority="high">最後のグループ: 低優先度のネットワークヒントです。<link rel="preconnect"> は、確実に使うことになる第三者オリジンへのフル接続(DNS、TCP、TLS)を前もって確立します。最初のリクエストで最大300 msの節約になります。dns-prefetch はその軽量版(DNS解決のみ)で、あまり確実でないオリジンへのフォールバックとして役立ちます。そして prefetch は、アイドル時間の間に、次のナビゲーションを想定したリソースをダウンロードします。たとえばカートからのチェックアウトページです。トレードオフは明快です: preloadは現在のページに供し、prefetchは次のページに賭けます。
<link rel="preconnect"
href="https://api.example.com">
<link rel="dns-prefetch"
href="https://cdn.example.com">
<link rel="prefetch" href="/checkout.html">