FID(First Input Delay)とはなにか? FIDの高速化

はじめに

次の資料にFID(First Input Delay)の詳しい説明があります。ただし、この資料を読んでも筆者には、FIDが何を意味するのか正確にはわかりませんでした。

polyfillコード

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

結果は次の通りです。

イベント種類

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

  • click, mousedown, keydown, touchstart, pointerdown

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

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

計測時間の範囲

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

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

補足

「click(押下)イベントは最速でいつ発生するのか?」の問の答えは、正確には不明です。ですがDOMContentLoadedイベントより前です。loadイベント完了までブラウザは何らかの処理をしているため、loadイベントまでをできるだけ早く終わらせることは、FIDを高速化する上で必須になります。

</body>直前で空処理のfor文ループによって強制スリープして確認

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

PageSpeed Insightsの「初回入力遅延の最大推定時間」は、上記のpolyfillとは別物の数値です。上記は、ユーザイベントが発生した時の実際の速度です。ですが「初回入力遅延の最大推定時間」は、ユーザーに発生する可能性がある初回入力遅延の最大推定時間です。最も長いタスクの時間(ミリ秒単位)です。

ページの解析中で最も長いタスクの時間であるため、タスクを分割することで数値を減少させることが可能です。具体的には、「スクリプトを分割する」「HTML内に無意味な<script>を挿入する」「スクリプトで強制レイアウトを発生させる」などです。HTMLパース・レイアウト(リフロー)・スクリプト実行を分割することでタスクを分割できます。

※外部スタイルによるスクリプトのブロックに注意する必要があります。
※強制リフローを発生させないように注意してHTML/CSSを設計する必要があります。
※通常の高速化手法とは真逆のことをしているため、注意して下さい。(意図的に処理を遅くしています)

パース・レイアウトの分割

HTMLパース処理を分割した例です。紫色のLayoutが分割されていることがわかります。分割方法は次の記事を参照して下さい。


HTMLパース処理分割前


HTMLパース処理分割後

FIDを高速化する

FIDの高速化には次の方法が有効です。(最初の入力遅延(FID)より引用)


上記の方法を全力で実施した後に、PageSpeed Insightsで「初回入力遅延の最大推定時間」を計測すると不思議な事が起こりました。FCPは大きく減少しますが、FIDは大きく増加しました。これは、ページからスクリプトがほぼ消滅した結果、HTMLパースとレイアウトを処理する1つのタスクのみが残った結果だと考えます。

個人的な考えとして、FCP以前のFIDを高速化することに価値があるのか疑問でなりません。表示されてもいないものに入力するユーザなどいないとしか思えません。PageSpeed Insightsの「初回入力遅延の最大推定時間」の大きな欠陥ではないかと考えています。(FCPは高速化すべきです)

※「Chrome User Experience Report」のFIDは、PageSpeed Insightsの「初回入力遅延の最大推定時間」と同様の数値ではないかと個人的に考えています。確証に至る決定的な証拠はありません。ですが、FIDの高速化する上で数値を確認している限りそのような推測に行き着きました。

コメント