FID(First Input Delay)とはなにか？

はじめに

次の資料にFID（First Input Delay）の詳しい説明があります。ただし、この資料を読んでも筆者には、FIDが何を意味するのか正確にはわかりませんでした。そこで、記事内で紹介されているpolyfillコードやPageSpeedInsightsの表示するFIDについて考えていきます。

polyfillコード

記事内で紹介されていたFIDのpolyfillコードを読み解きます。

結果は次の通りです。

イベント種類

FIDは、次のイベントで発生します。

  • click, mousedown, keydown, touchstart, pointerdown

※pointerdown時は、その後pointerupが発生した場合のみ有効
　pointercancelは、スクロールまたはピンチ/ズームであるため無効

この結果からFIDは、マウス押下・キー押下・タッチ操作で発生することがわかります。マウス移動やスクロール、ピンチ/ズーム操作では発生しません。また、発生タイミングは、押下時です。離された時ではありません（clickイベントを除く）。そして、イベントが開始した時（mouseoverやpointeroverのタイミング）でもありません。mouseoverより後に発生するmousedownのタイミングです。

計測時間の範囲

イベント開始（イベント作成時のタイムスタンプ）からwindowオブジェクトのキャプチャフェーズ（最初に登録されたリスナー）までの時間です。（ただし、キャンセル可能なイベントに限る）

この結果からFIDは、クリックやタッチ操作時に登録されているスクリプトの実行時間を含まないことがわかります。ユーザーの初回操作がサイト内のスクリプトで処理されてから表示されるまでの時間ではありません。最初のイベントが作成されてから、最初のイベントが処理を開始するまでの時間です。

PageSpeed Insightsの「初回入力遅延の最大推定時間」

PageSpeed Insightsの「初回入力遅延の最大推定時間」は、上記のpolyfillとは別物の数値です。上記は、ユーザイベントの発火から実際の処理開始までの経過時間です。ですが「初回入力遅延の最大推定時間」は、ユーザーに発生する可能性がある初回入力遅延の最大推定時間です。ページのFCP(First Contentful Paint)後で最も長いタスクの時間です。

初回入力遅延の最大推定時間については、次の資料に詳細な説明があります。

追記
2020年5月末の仕様変更でPageSpeed Insightsから「初回入力遅延の最大推定時間」は削除されたようです。ただし、APIからは、アクセスできます。

Performance Event Timing API

2021年1月現在、Chromium系のブラウザが対応している。FIDを取得できるAPIです。polyfillコードを導入しないでも使用できます。

コード例

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    const delay = entry.processingStart - entry.startTime;
    console.log('FID:', delay, entry);
  }
}).observe({type: 'first-input', buffered: true});

対応状況

参考