SEOの学習帳

SEOで学んだことを書きます。

トップ > SEO > CoreWebVitalsのFIDに代わるINPとは？FIDから説明します
最終更新日

CoreWebVitalsのFIDに代わるINPとは？FIDから説明します

SEO

INPをCoreWebVitalsに導入

2024年3月よりCoreWebVitalsの指標がFID(First Input Delay)からINP(Interaction to Next Paint)へ変更されます。

  • CoreWebVitalsとは
  • FIDとはなにか
  • INPとはなにか
  • INPとFIDの違い

について書いていこうと思います。

CoreWebVitalsとは？

2020年にウェブページの各種品質シグナル(指標)を提供するCoreWebVitalsを導入しました。

CoreWebVitalsには3つの指標があります。

  1. LCP(Largest Contentful Paint)：そのページでメインとなるコンテンツ）が表示されるまでの時間
  2. FID(First Input Delay)：初回入力までの遅延時間
  3. CLS(Countent Layout Shift)：コンテンツがどれだけずれたか

CoreWebVitalsは、ページエクスペリエンスの1つでありGoogle公式からは改善することを強くおすすめされています。

ページの読み込みパフォーマンス、インタラクティブ性、視覚的安定性に関する実際のユーザー エクスペリエンスを測定する一連の指標です。検索結果でのランキングを上げ、全般的に優れたユーザー エクスペリエンスを提供できるよう、サイト所有者の皆様には、Core Web Vitals を改善することを強くおすすめします。

出典：Core Web Vitals と Google 検索の検索結果について | Google 検索セントラル  |  ドキュメント  |  Google for Developers

しかしCoreWebVitalsは独立したランキングシステムという仕組みではなく、ランキングを上げる構成要因となっています。

Google検索はページエクスペリエンスの評価よりも、検索ワードに関連性の高いコンテンツを基準に表示するようになっています。

関連性の高いコンテンツの中でページエクスペリエンスを実現されているような場合はそれらよりもランキングが上がることにつながるよっていう認識でいましょう。

FIDとはなにか

FID(First Input Delay)とは、初回入力までの遅延時間です。

初回入力とはリンクのクリックやボタンタップなどユーザー側がアクションを起こしたことです。

ユーザーが最初に入力したときから、その入力に応じたブラウザーが実際に処理を開始するまでの時間です。

ボタンをクリックしたのに、全く動かなかったらユーザー体験は悪いですよね。

FIDは読み込んだ最初の入力がどれくらい遅延するかを見てユーザー体験のよし悪しを判断しています。

なぜ遅延が起きるのか？

ブラウザーにはメインスレッドといって描画したりしてくれるやつがいます。

このメインスレッドが何かの作業でめっちゃ忙しかったらユーザーの操作に応答できません。これが遅延です。

めっちゃ売れるお店には料理人一人しかおらず料理してたら新規のお客様のオーダーは料理が完成したあとみたいなのが遅延。

お客様からしたら「すみませーん」って言ってから料理人がオーダーを聞きに来るまでが遅延時間です。

FID(First Input Delay)のイメージ図
出典：Interaction to Next Paint (INP)

急に英語の図ですが、FIDの部分で「Browser receives first user input」というブラウザーが最初にユーザーから入力を受けたときに、メインスレッドは今稼働中なので応答できません。

オレンジの処理が終わったところで応答ができるためその時間がFIDとなります。

FCP(First Content Paint)の段階でユーザーには一部コンテンツが表示されているので入力は可能です。

ちなみにこの原因は、大体JavaScriptの解析と実行でブラウザーが忙しくて応答できないことが多いですね。

 

詳しくはFirst Input Delay (FID)をご覧ください。

INPとはなにか

INP(Interaction to Next Paint)とは、ユーザーインタラクションに対するページの全体的な応答時間を評価した値です。

ページの中にあるすべてのインタラクションで一番悪い数値がINPとして報告されます。

インタラクションとは何か

応答性が悪い場合と良い場合の例。左側では、長いタスクによりアコーディオンが開かなくなります。これにより、ユーザーはエクスペリエンスが壊れていると考えて複数回クリックすることになります。メインスレッドが追いつくと、遅延した入力が処理され、その結果、アコーディオンが予期せず開いたり閉じたりすることがあります。
出典：Interaction to Next Paint (INP)

上記GIFのように右は入力に対して即座に視覚的なフィードバックをしています。

左は入力しても遅延しユーザーは壊れていると考えて何度もクリックして意図しない応答が発生しています。

このようにインタラクションとは、ユーザーの入力に対して視覚的フィードバックを返すまでの範囲を指します。

 

インタラクションには大きく3つの指標で構成されています。

インタラクションの計算範囲
出典：Interaction to Next Paint (INP)
  1. 入力遅延：ユーザーが操作し、実行されるまでの時間
  2. 処理時間：コードの処理にかかる時間
  3. プレゼンテーション遅延：ブラウザが結果を表示するまでの時間

これら3つの指標の合計時間がINPとして評価されます。

 

INPとFIDの違いはなにか

2つあります。

1点目は計測する範囲です。

FIDは最初の入力から応答するまでの時間(イベントハンドラーの処理を開始するまでの時間)でしたが、INPは入力してから視覚的フィードバックされるまでの時間です。

FIDでは応答するまでは早いけど結局レンダリングしてペイントするまでが遅くても評価は高いです。

実際にユーザーは視覚的フィードバックがあった時に応答を認識するのでINPのほうがよりユーザー体験を評価できてるかなと思います。

 

2点目は計測するタイミングです。

FIDはページに流入してきて初めての入力だけで評価をします。

INPはページすべてのインタラクションで評価をします。

FIDでは最初の入力さえ早ければいいので、途中のコンテンツがインタラクションのイメージ図でもあったようにクリックしても応答が悪くてもユーザー体験がよいと評価されてしまいます。

INPはそれらもくみ取って評価するのでよりユーザー体験を評価できていると思います。

 

まとめ

INPの導入までまだまだ猶予はあります。(2024年3月より導入)

この機会にLight houseなどを使って改善してみてはどうでしょうか。

実際INP, FIDも改善すべき点はJavaScriptだったりします。

自分の経験上、JavaScriptのサイズが大きかったり1つの処理がめちゃめちゃ長いなんてこともありました。

そもそもこのファイルは必要なのか？

最初に読み込む必要があるのか？

ファイルを分割できないのか？

処理を細かくしてメインスレッドを空けることができないのか？

などを考えてみると改善できる点はあるんじゃないでしょうか。

WebWorkersなどでバックグラウンドでの実行もありますがDOM操作ができないためあまり使えていませんでしたが今後は挑戦していきたいです。