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

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 ミリ秒を節約できる可能性があります。

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

<ph type="x-smartling-placeholder">
</ph> プリロード リンクがない場合、style.css と ui.js は app.js がダウンロード、解析、実行されてからリクエストされます。 <ph type="x-smartling-placeholder">
</ph> プリロード リンクがない場合、styles.css、 ui.js は、app.js がダウンロードされた後にのみリクエストされます。 実行されます。

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

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

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

重要なアセットをプリロードして読み込み速度を改善するもご覧ください。 をご覧ください。

ブラウザの互換性

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

プリロードのビルドツール サポート

Tooling.Report のアセットのプリロードをご覧ください。 できます。

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

Angular

事前にルートをプリロードして、スムーズに移動できるようにします。

Magento

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

リソース