First Input Delay（FID）

Philip Walton

第一印象が重要であることは誰もが知っています。新しい人と出会うときにも、ウェブでエクスペリエンスを構築するときにも、この点が重要になります。

ウェブでは、良い第一印象が、ユーザーが忠実なユーザーになるか、離れて二度と戻ってこないかの違いを生み出す可能性があります。問題は、どのような印象を与えればよいか、また、ユーザーにどのような印象を与えているかをどのように測定するかです。

ウェブでは、第一印象はさまざまな形で現れます。サイトのデザインや視覚的な魅力に対する第一印象もあれば、速度や応答性に対する第一印象もあります。

ウェブ API を使用してサイトのデザインに対するユーザーの好みを測定することは難しいですが、速度と応答性を測定することは難しくありません。

ユーザーがサイトの読み込み速度について最初に抱く印象は、First Contentful Paint（FCP）で測定できます。しかし、サイトが画面にピクセルを描画する速度は、ストーリーの一部にすぎません。ユーザーがこれらのピクセルを操作しようとしたときに、サイトがどれだけ応答性があるかも同様に重要です。

First Input Delay（FID）指標は、サイトのインタラクティブ性と応答性に対するユーザーの第一印象を測定するのに役立ちます。

FID とは

FID は、ユーザーが最初にページを操作したとき（リンクをクリックしたとき、ボタンをタップしたとき、カスタムの JavaScript ベースのコントロールを使用したとき）から、ブラウザがその操作に応答してイベント ハンドラの処理を実際に開始できるまでの時間を測定します。

FID スコアの目安はどのくらいですか？

優れたユーザー エクスペリエンスを提供するには、サイトで初回入力遅延を 100 ミリ秒以下に収めるようにします。ほとんどのユーザーに対してこの目標値を確実に達成するには、モバイル デバイスとデスクトップ デバイスに分割されたページ読み込みの 75 パーセンタイルを測定するのが適切なしきい値です。

FID の詳細

イベントに応答するコードを記述するデベロッパーは、イベントが発生するとすぐにコードが実行されると想定することがよくあります。しかし、ユーザーとして、私たちは皆、その逆の経験を頻繁にしています。スマートフォンでウェブページを読み込み、操作しようとしたのに、何も起こらずにイライラしたことがあるでしょう。

一般に、入力遅延（入力レイテンシ）は、ブラウザのメインスレッドが他の処理でビジー状態になっているため、ユーザーに応答できない（まだ応答していない）ことが原因で発生します。この問題が発生する一般的な理由の 1 つは、ブラウザがアプリによって読み込まれた大きな JavaScript ファイルの解析と実行に忙しいことです。ブラウザがその処理を行っている間は、読み込まれた JavaScript によって別の処理を行うよう指示される可能性があるため、イベント リスナーを実行できません。

一般的なウェブページのページ読み込みのタイムラインは次のとおりです。

上の可視化では、リソース（CSS ファイルと JS ファイルの可能性が高い）に対するネットワーク リクエストをいくつか行っているページが示されています。これらのリソースのダウンロードが完了すると、メインスレッドで処理されます。

これにより、メインスレッドが一時的にビジー状態になる期間が発生します。これは、ベージュ色のタスクブロックで示されます。

初回入力遅延が長くなるのは、通常、First Contentful Paint（FCP）とTime to Interactive（TTI）の間です。これは、ページがコンテンツの一部をレンダリングしたものの、まだ確実に操作可能になっていないためです。この仕組みを説明するために、タイムラインに FCP と TTI を追加しました。

FCP と TTI の間にはかなりの時間（3 つの長いタスクを含む）があります。ユーザーがその間にページを操作しようとすると（リンクをクリックするなど）、クリックが受信されてからメインスレッドが応答できるようになるまでに遅延が発生します。

ユーザーが最長のタスクの開始直後にページを操作しようとした場合を考えてみましょう。