Lighthouse レポートの [最適化] セクション クリティカル リクエスト チェーンの第 3 レベルのリクエストにプリロードの候補としてフラグを立てます。
![Lighthouse プリロード キー リクエストの監査のスクリーンショット](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-rel-preload/image/a-screenshot-the-lightho-a0f22e9688496.png?authuser=0&hl=ja)
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">![プリロード リンクがない場合、style.css と ui.js は app.js がダウンロード、解析、実行されてからリクエストされます。](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-rel-preload/image/without-preload-links-st-f9c93e03b4029.png?authuser=0&hl=ja)
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">![プリロード リンクでは、styles.css と ui.js が app.js と同時にリクエストされます。](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-rel-preload/image/with-preload-links-style-da7d794e22995.png?authuser=0&hl=ja)
styles.css
、
ui.js
は app.js
と同時にリクエストされます。
重要なアセットをプリロードして読み込み速度を改善するもご覧ください。 をご覧ください。
ブラウザの互換性
2020 年 6 月現在、プリロードは Chromium ベースのブラウザでサポートされています。詳しくは、 ブラウザの互換性 をご覧ください。
プリロードのビルドツール サポート
Tooling.Report のアセットのプリロードをご覧ください。 できます。
スタック固有のガイダンス
Angular
事前にルートをプリロードして、スムーズに移動できるようにします。
Magento
テーマのレイアウトを変更する
<link rel=preload>
タグを追加します。