キー リクエストのプリロード

Lighthouse レポートの [オポチュニティ] セクションには、重要なリクエスト チェーンの第 3 レベルのリクエストがプリロード候補のフラグとして表示されます。

Lighthouse のプリロード キー リクエスト監査のスクリーンショット

Lighthouse フラグでプリロード候補を決定する方法

ページの重要なリクエスト チェーンが次のようになっているとします。

index.html |--app.js |--styles.css |--ui.js

index.html ファイルで <script src="app.js"> を宣言している。app.js を実行すると、styles.css と ui.js をダウンロードするために fetch() が呼び出されます。最後の 2 つのリソースがダウンロード、解析、実行されるまで、ページは完全に表示されません。上記の例では、Lighthouse では styles.css と ui.js が候補として表示されます。

削減できる時間は、プリロード リンクを宣言した場合にブラウザでリクエストを開始できる時間によって異なります。たとえば、app.js がダウンロード、解析、実行に 200 ミリ秒かかる場合、app.js が各リクエストのボトルネックではなくなるため、各リソースで節約できる時間は 200 ミリ秒です。

プリロード リクエストを行うと、ページの読み込み時間を短縮できます。

プリロード リンクがない場合、style.css と ui.js のリクエストは、app.js のダウンロード、解析、実行が完了した後に行われます。
プリロード リンクがない場合、styles.css と ui.js は、app.js がダウンロード、解析、実行された後にのみリクエストされます。

問題は、ブラウザが app.js のダウンロード、解析、実行を行った後に、最後の 2 つのリソースしか認識できないことです。ただし、これらのリソースは重要であり、できるだけ早くダウンロードする必要があることはわかっています。

HTML でプリロード リンクを宣言して、主要なリソースをできるだけ早くダウンロードするようブラウザに指示します。

<head>
  ...
  <link rel="preload" href="styles.css" as="style" />
  <link rel="preload" href="ui.js" as="script" />
  ...
</head>
プリロード リンクを使用すると、style.css と ui.js が app.js と同時にリクエストされます。
プリロード リンクでは、styles.css と ui.js が app.js と同時にリクエストされます。

詳細なガイダンスについては、重要なアセットをプリロードして読み込み速度を向上させるもご覧ください。

ブラウザの互換性

2020 年 6 月現在、プリロードは Chromium ベースのブラウザでサポートされています。更新については、ブラウザの互換性をご覧ください。

プリロードに対する Build ツールのサポート

Tooling.Report のアセットのプリロード ページをご覧ください。

スタック固有のガイダンス

Angular

ナビゲーションを高速化するため、事前にルートをプリロードする。

Magento

テーマのレイアウトを変更して <link rel=preload> タグを追加します。

関連情報