Core Web Vitals の FID(First Input Delay) について

FID (First Input Delay)

こんにちは、森田です。
サイトの重要指標 Core Web Vitals について という記事を書き、3つの指標からCLSLCP についても書きました。今回は引き続き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」 に詳しく書かれていたので参考にさせていただきます。

    https://web.dev/optimize-fid/

    長いタスクを分割する、ページを最適化する、Webワーカーを使用する、実行時間を短縮する。といった方法が解説されています。
    より具体的な方法はリンクをご参考ください。

    他にも前節で書いたように、ライブラリー、広告や計測ツールの見直しなども検討材料になると考えます。

    まとめ

    今まではページの表示速度を考慮することはありましたが、これからは操作の遅延についても考慮する必要がありそうですね。

    しかし、FIDのスコア改善で確実にUXは向上しますので行った方が良さそうですね。

    Gaji-Labo は SSR / SSG / SPA 開発実績があります

    SSR / SSG / SPA の開発実績があるフロントエンド開発の専門家が御社の開発チームに入ることで、バックエンドも含めた全体の開発効率が上がります。「フロントエンドの人手が足りず信頼できるエンジニアを探している」「フロントエンド構築をどうしたらいいか分からない」「手を付けてみたけどいまいち上手くいかない」などのお困りごとがあればまずは一度お気軽に Gaji-Labo にご相談ください。

    オンラインでのフルリモート開発とチーム参加にも対応しています。

    フロントエンドの相談をする!

    関連リンク


    投稿者 Morita Sou

    フロントエンドグループチームマネージャー。
    適切な技術提案やコミュニケーションを出来るように心掛けています。CSS設計・CMS構築や開発環境の構築などを得意としています。Macやエディタ、開発環境などを快適にすることにいつも燃えています。