FIDの改善方法について
※本記事はweb.devを学習用にまとめたものです。解釈に齟齬等あればコメントください。
Overview
Googleで提唱されているWebページのパフォーマンス指標である FID (First Input Delay) を最適化する具体的な手法について記載する。
FIDとは何かについては、Web Vitalsとは何かを参照してください。
FIDが悪化するたった１つの原因
JavaScriptの実行が重たい
メインスレッドでJavaScriptが実行されていると、当然ユーザからの操作に反応できない。
従って、JavaScriptのパース及び実行時間を最適化することがFID向上へのカギ
どうすれば改善する??
1. ロングタスクの分割
メインスレッドを50ms以上占有するタスクは、小さな非同期タスクに分割する。
必要最低限のJavaScriptだけが初期ロード時に実行されるよう改善する。
2. 素早く操作待ちにする工夫
JavaScriptの遅延読み込み
スクリプトの肥大化、実行時間の多さ、非効率なチャンクはFIDに悪影響を与える。
コードを適切に分割し遅延読み込みさせることで、不要なスクリプトの実行をレンダリングパスから外すことが可能。
データ取得の最適化
数珠つなぎのようにJavaScriptやコンテンツをダウンロードすると、FIDが悪化する。
また、HTML内に巨大なデータ列を含むとパース時間が遅くなるため、最小限に抑える。
外部スクリプトの遅延読み込み
広告や解析用のスクリプトは、ユーザのインタラクションには不必要。
従って、スクロールしていったらロード及び実行させるようなつくりを検討する。
まずは、ユーザにとって必要なものを優先すべし。
3. Web Workerの活用
Web Workerを使用することで、処理をバックグラウンドに回すことができる。
UIに関係ない処理をWeb Workerに実行させ、メインスレッドの負荷が下がるとFIDが向上する。
ライブラリを活用するとWeb Worker構築が簡単になる。
4. JavaScriptの実行時間を短縮する
未使用のJavaScriptの遅延読み込み
デフォルトでは、すべてのJavaScriptはレンダリングブロックとなる。
ブラウザが外部JavaScriptへの<link>タグを検出すると、ブラウザは実行中の処理を一時停止
そのJavaScriptをダウンロード、解析、コンパイル、および実行する。
従って、操作への応答に必要なコードのみをロードする必要がある。
未使用のJavaScriptを最小化
巨大なbundleを複数のチャンクに分割して、それぞれを条件に従って読み込ませる。
import('module.js').then((module) => {
// Do something with the module.
});
また、レンダリングパスに不要な外部スクリプトに対して遅延読み込みをさせる。
<script async src="…"></script>
<script defer src="…"></script>
両者の違いは、非同期ダウンロード完了後に即実行するか(async)、HTMLパース完了後に実行する(defer)か。
未使用のpolyfillsを最小化
対応するブラウザの種類やバージョンを決めて、babelなどを利用して最適化する。
また、@babel/preset-envを活用して以下のように分割する。
<script type="module" src="modern.js"></script>
<script nomodule src="legacy.js" defer></script>
感想
原文が少し難しい内容だったが、重要なことは
- JavaScriptを適切に分割
- ユーザ操作に必要なものだけを読み込む
- 不要なものは遅延読み込み
なのかなと感じた。
Discussion