【FID】ー First Input Delay・最初の入力遅延

※2024年3月にFIDはINPに置き換わります。そのため、これからはFID対策ではなくINP対策を意識して進めてみてください。またINPの代替指標は、引き続きTBTになります。INPとTBTは同じではありません。あくまでTBT向上は参考値として考えるようにしてください。

INDEX

FID が遅くなる原因は何ですか?
FID 問題を調査する方法
FIDを改善する方法
合計ブロッキング時間 (TBT)
TBT の問題を調査する方法
TBTを改善する方法

FIDは、ページがユーザー操作にどれだけ早く応答するかを計測します。FID の目的は、JavaScript がページエクスペリエンスに与える影響を見極めることだと言っても過言ではありません。FID は実際のユーザーインタラクションを測るため、RUM ツールでのみ計測できます。

FIDimage3 — *FID 結果のしきい値は、75 パーセンタイルで 100 ミリ秒未満。300 ミリ秒を超えると不良とみなされます。*

FID に関する注意すべき技術事項:

FID に必要なユーザー入力は、クリック/タップまたはキーのプッシュとして定義されます。スクロールやズームは含まれません。
FID は、SPA だけでなく従来のアプリケーションでも計測できます。
Chrome ではネイティブの最初の入力パフォーマンスエントリタイプがサポートされるようになりましたが、FID はすべての最新ブラウザで計測できます。

FID が遅くなる原因は何ですか?

入力遅延は、ブラウザのメインスレッドがビジー状態でユーザーに応答できない場合に発生します。最も原因は、ブラウザが大きな JavaScriptの解析と実行で忙しいことが原因です。ページの多くに不要な JS が大量にあり、JS ファイルは年々増えています。ページ上の JS が多いほど、FID 時間が遅くなる可能性が高くなります。

FID 問題を調査する方法

FID は RUM でのみ計測できます。このため、追跡はかなり簡単になりますが、調査は困難になります。RUM での FID の計測と並行して、シンセティックで合計ブロック時間 (TBT) を計測することをお勧めします。

FIDを改善する方法

実行時間の長いコードを小さな非同期タスクに分割して、ロングタスクを排除します。
リソースリクエストの総数を減らす
サードパーティを最適化します。たとえば、「スクロールせずに見える部分」やその他の必須ではないスクリプトを遅らせます。
CPU メインスレッドのアクティビティを最小限に抑えます。たとえば、Web ワーカーを使用してバックグラウンドスレッドで JS を実行します。
コード分割。JavaScriptを分割して最初のルートに必要なコードのみを送信し、解析およびコンパイルが必要なスクリプトの量を最小限に抑えます。

詳細:最初の入力遅延を最適化する

TBT – Total Blocking Time・総ブロッキングタイム

総ブロッキングタイム（TBT）は、メインスレッドが入力の応答性を妨げるほど長くブロックされた場合の、FCP(First Contentful Paint ) と TTI(Time to Interactive) の間の合計時間を計測します。TBT はFIDの代替指標として使われ、シンセティックツールで計測されます。

良好な TBT 結果のしきい値は 300 ミリ秒未満。600 ミリ秒を超えると不良とみなされます。

TBTを追跡する場合は、次のような点に注意してください。

TBTは、FCP(最初のコンテンツペイント）とTTI(インタラクティブまでの時間）の間のロングタスクのみを追跡します。このため「総ブロック時間」という名前は少し誤解を招きます。FCP の前に発生し、ページのレンダリングをブロックする長いタスクは、TBTには含まれません。
TBT は、ページの「総」ブロック時間ではありません。「レンダリング開始後のブロック時間」と考えるようにしましょう。
TBT には、ロングタスクの最初の 50 ミリ秒は含まれません。代わりに、最初の 50 ミリ秒を超えてかかった時間だけをレポートします。ユーザーは最初の 50 ミリ秒まで待たなければなりません。TBT に最初の 50 ミリ秒が含まれていれば、TBT の解釈は簡単になり、ユーザーがロングタスクによってブロックされた全体時間を表せることになるわけですが、そうではありません。