重要なアセットをプリロードして、読み込み速度を向上させる
Webページを開くと、ブラウザはすぐにサーバーからのHTMLファイルをリクエストして、その内容を解析し、その他の外部参照用に個別のリクエストを送信します。開発者はページが必要とするすべてのリソースとどれが最も重要であるかを理解しています。その知識を使用すれば、重要なリソースを事前に要求し、ロードプロセスを高速化することが可能です。この記事には<link rel="preload">を使用してそれを実現する方法について説明します。
プリロードの仕組み #
プリロードは、通常、ブラウザが遅れて検出するリソースに最適です。
@font-faceルールを使って、Pacificoフォントがスタイルシートに定義されています。ブラウザは、スタイルシートのダウンロードと解析が完了した後にのみフォントファイルをロードします。
特定のリソースが現在のページで重要であることがわかっているため、そのリソースをプリロードすることで、ブラウザがロードするよりも前にそのリソースをフェッチするようにブラウザに指示します。
クリティカルリクエストチェーンは、ブラウザが優先順位を付けてフェッチするリソースの順序を表します。Lighthouseは、このチェーンの3番目のレベルにあるアセットを遅延検出と識別します。重要リクエストのプリロード監査を使用して、プリロードするリソースを特定できます。
HTMLドキュメントのheadに、<link>タグとrel="preload"を追加して、リソースをプリロードできます。
<link rel="preload" as="script" href="critical.js">ブラウザはプリロードされたリソースをキャッシュするため、必要なときにすぐに利用できます。（スクリプトを実行したり、スタイルシートを適用したりすることはありません。）
preconnectやprefetchなどのリソースヒントは、ブラウザが適切と判断したときに実行されますが、preloadはブラウザ必須です。最新のブラウザはすでにリソースの優先順位付けの実行に非常に優れているため、preloadを慎重に使用し、最も重要なリソースのみをプリロードすることが重要です。
未使用のpreloadについては、Chromeはloadイベントの約3秒後にコンソール警告を表示します。
ユースケース #
CSSで定義されたリソースのプリロード #
@font-faceルールで定義されたフォントやCSSファイルで定義された背景画像は、ブラウザがそれらのCSSファイルをダウンロードして解析するまで検出されません。これらのリソースをプリロードすると、CSSファイルがダウンロードされる前に確実にフェッチされます。
CSSファイルのプリロード #
クリティカルCSSアプローチを使用している場合は、CSSは2つの部分に分割されます。展開の上のコンテンツをレンダリングするために必要なクリティカルCSSは、ドキュメントの<head>にインライン化され、それ以外のCSSは通常JavaScriptで遅延読み込みされます。クリティカルでないCSSを読み込まれるまでJavaScriptの実行を待機すると、ユーザーがスクロールする際にレンダリングに遅延が発生することがあるため、<link rel="preload">を使用してダウンロードをより早く開始することをお勧めします。
JavaScriptファイルのプリロード #
ブラウザはプリロードされたファイルを実行しないため、プリロードはフェッチをと実行を分離するのに役立ち、Time to Interactiveなどの指標を改善できます。プリロードは、JavaScriptバンドルを分割して、重要なチャンクのみをプリロードする場合に最適にです。
rel=preloadを実装する方法 #
preloadを実装する最も簡単な方法は、ドキュメントの<head>に<link>タグを追加することです。
<head>
<link rel="preload" as="script" href="critical.js">
</head>as属性を指定すると、ブラウザはプリフェッチされたリソースのタイプに応じて優先度を設定し、適切なヘッダーを設定し、リソースがキャッシュにすでに存在するかどうかを判断するのに役立ちます。この属性に使用できる値には、script、style、font、imageなどがあります。
フォントなどの一部の種類のリソースは、匿名モードで読み込まれます。 preloadを使ってcrossorigin属性を設定する必要がある場合は、次のようにします。
<link rel="preload" href="ComicSans.woff2" as="font" type="font/woff2" crossorigin><link>要素には、type attribute属性も使用できます。これには、紐付けされたリソースのMIMEタイプが含まれます。ブラウザがtype属性の値を使用することにより、ファイルタイプがサポートされている場合にのみリソースがプリロードされるようにすることができます。ブラウザが指定されたリソースタイプをサポートしていない場合は、<link rel="preload">を無視します。
Link HTTPヘッダーを介して、任意のタイプのリソースをプリロードすることもできます。
Link: </css/style.css>; rel="preload"; as="style"
HTTPヘッダーでのpreloadの指定には、ブラウザがドキュメントを解析して検出する必要がないというメリットがあるため、一部のケースでわずかな改善が得られます。
Webpackを使用したJavaScriptモジュールのプリロード #
アプリケーションのビルドファイルを作成するモジュールバンドラーを使用している場合は、preloadタグの挿入をサポートしているかどうかを確認する必要があります。Webpackのバージョン4.6.0以降では、import()内でマジックコメントを使用することでpreloadがサポートされています。
import(_/* webpackPreload: true */_ "CriticalChunk")古いバージョンのWebpackを使用している場合は、preload-webpack-pluginなどのサードパーティのプラグインを使用してください。
結論 #
ページ速度を向上させるには、ブラウザが遅れて検出する重要なリソースをプリロードするようにします。すべてをプリロードすると逆効果になるため、preloadを慎重に使用し、実際の影響を測定するようにしてください。