Core Web Vitals の FID（First Input Delay) について
こんにちは、森田です。
サイトの重要指標 Core Web Vitals について という記事を書き、3つの指標からCLS と LCP についても書きました。今回は引き続き3つ目の指標 FID について掘り下げていきます。
FID（First Input Delay) とは
最初の入力までの遅延を表します。応答性を測定して、ユーザーが最初にページを操作しようとする場合に感じるエクスペリエンスを定量化します。
https://developers-jp.googleblog.com/2020/05/web-vitals.html
直訳すると「最初の入力遅延」ということで、ユーザーがサイトを最初に操作してから応答できるまでの待機時間を意味します。
ページスピードはページが表示されるまでを計測しますが、表示されいても操作の反応が悪ければ FID は悪いと評価されます。
操作はクリックやタップ、キー入力などのことで、これらの操作が応答できるようになる時間が短いほど UX が高いとされます。
100ミリ秒未満で最初の操作が行えると FID のスコアは GOOD となります。
FIDスコア低下の原因
では、FIDのスコアが低下する入力遅延の原因を考えてみます。
CSSの再描画や画像の読み込みもあると思いますが、やはり一番多いのは JavaScript による遅延だと考えます。
JavaScript を実行している間は操作ができないので、実行の時間が長ければ長いほどそれだけスコアが低下すると考えられます。
サイト自体の JavaScript もそうですが、その他にも
- ライブラリの JavaScript による応答遅延
- 広告の JavaScript よる応答遅延
- 計測ツールの JavaScriptよる応答遅延
- SNSボタンの JavaScriptよる応答遅延
などが考えられると思います。
こちらの方が影響が大きい場合もありそうですね。
FIDスコアの改善方法
さて、実際に FID のスコアを改善するにはどのようなことが必要でしょうか。
Googleのサービス web.dev の記事「Optimize First Input Delay」 に詳しく書かれていたので参考にさせていただきます。
- Break up Long Tasks
- Optimize your page for interaction readiness
- Use a web worker
- Reduce JavaScript execution time
https://web.dev/optimize-fid/
長いタスクを分割する、ページを最適化する、Webワーカーを使用する、実行時間を短縮する。といった方法が解説されています。
より具体的な方法はリンクをご参考ください。
他にも前節で書いたように、ライブラリー、広告や計測ツールの見直しなども検討材料になると考えます。
まとめ
今まではページの表示速度を考慮することはありましたが、これからは操作の遅延についても考慮する必要がありそうですね。
しかし、FIDのスコア改善で確実にUXは向上しますので行った方が良さそうですね。
Gaji-Labo は SSR / SSG / SPA 開発実績があります
SSR / SSG / SPA の開発実績があるフロントエンド開発の専門家が御社の開発チームに入ることで、バックエンドも含めた全体の開発効率が上がります。
「フロントエンドの人手が足りず信頼できるエンジニアを探している」
「フロントエンド構築をどうしたらいいか分からない」
「手を付けてみたけどいまいち上手くいかない」
フロントエンド開発に関わるお困りごとがあれば、まずは一度お気軽に Gaji-Labo にご相談ください。
オンラインでのフルリモート開発とチーム参加にも対応しています。
フロントエンドの相談をする！関連リンク
