FID（First Input Delay、初回入力遅延） は、ウェブページのインタラクティブな応答速度を測定する主要なパフォーマンス指標です。これは、ユーザーが初めてページにインタラクション（ボタンのクリック、ドロップダウンの選択、テキスト入力など）を行った際に、ブラウザがその操作に実際に応答するまでにかかる時間を記録します。簡単に言えば、FID は「ユーザーがクリックした後、ページがどれくらい待ってから反応するか」を反映しています。
この指標はページの読み込み速度をテストするものではなく、実際のユーザーエクスペリエンスで最も感知されやすい「もたつき感」に焦点を当てています。ユーザーがボタンをクリックしてもページが全く反応せず、数百ミリ秒、あるいはそれ以上待ってから遷移したりコンテンツが表示されたりする場合、その遅延は直接的に不満や不信感につながります。FID は、このような糟糕な体験を定量化するために設計されました。
実際の使用シナリオでは、ユーザーはウェブページを開いた後、すぐにインタラクションを試みます。例えば、ナビゲーションメニューをクリックしたり、フォームを送信したり、コンテンツをスクロールして閲覧したりします。ページは読み込み完了したように見えても、クリックしても全く反応がない場合、ユーザーは本能的に「このサイトは問題がある」とか「自分のネットワークが遅い」と考えてしまいます。FID は、ユーザーがウェブサイトの信頼性やスムーズさに対して抱く第一印象に直接影響します。特に、リソースが限られているモバイルデバイスでは、この遅延はより顕著になります。
SEO の観点からは、Google は 2021 年に FID を Core Web Vitals（コアウェブバイタル） の体系に正式に組み込み、検索ランキングに影響を与える重要な要素の一つとなりました。FID のパフォーマンスが糟糕なウェブサイトは、たとえコンテンツが優れていても、ユーザーエクスペリエンスが悪いために検索結果で評価が下がる可能性があります。Eコマースサイト、オンラインツール、頻繁なインタラクションを必要とするアプリケーション型ウェブサイトでは、FID の良し悪しが直接的にコンバージョン率やユーザー維持率に影響することさえあります。
ユーザーがページ上の要素をクリックすると、ブラウザはその操作に応答するために対応する JavaScript コードを実行する必要があります。しかし、この時ブラウザのメインスレッドが他のタスク（巨大な JS ファイルの解析、複雑なアニメーションの実行、コンテンツのレンダリングなど）の処理で忙しい場合、ユーザーのクリックは「キューに入れられて待機」され、メインスレッドが空くまで処理されません。この待機時間こそが FID です。
実際の例を挙げましょう。あるニュースサイトのホームページに大量のサードパーティ製広告スクリプトとデータ分析コードが読み込まれているとします。ユーザーが「続きを読む」ボタンをクリックしたとき、ブラウザのメインスレッドはこれらのスクリプトを実行中で、クリックイベントの応答が 300 ミリ秒遅延しました。ユーザーはボタンが「効かない」と感じ、再度クリックするか、そのままアクセスを諦めてしまうかもしれません。
Google が提示する FID の基準は非常に明確です。
注意すべきは、FID は実際のユーザーアクセスデータでのみ測定可能であり、ラボツール（Lighthouse など）では FID を直接測定できないことです。これは、実際のユーザーが実際のデバイスで行うインタラクションの遅延を反映しているためです。Google Search Console、Chrome User Experience Report（CrUX）、またはサードパーティの監視ツール（Seoinfra など）を通じて、ウェブサイトの実際の FID データを閲覧できます。
FID が高くなる主な原因は、以下のようないくつかの一般的なシナリオに起因します。
巨大な JavaScript ファイルの実行：ホームページの読み込み時に同期的に実行される巨大な JS コード（フレームワークの初期化、広告スクリプト、サードパーティ製プラグインなど）は、メインスレッドを長時間占有し、ユーザーのインタラクションをブロックします。
長時間のタスク（Long Tasks）：ブラウザは 50 ミリ秒を超えるタスクを「長時間のタスク」と見なします。ページ読み込み段階で複数の長時間のタスクが存在する場合、ユーザーの最初のクリックは実行中のタスクにぶつかり、遅延する可能性が高くなります。
過剰なサードパーティリソース：ソーシャル共有ボタン、チャットプラグイン、データ統計コードなどのサードパーティ製スクリプトは、ページ読み込み時にメインスレッドのリソースを奪い合い、インタラクションの応答を遅らせがちです。
モバイルデバイスのパフォーマンス制限：同じコードでも、高性能なコンピューターではスムーズに実行されても、低スペックの携帯電話では処理能力不足により重大な FID 遅延を引き起こすことがあります。
FID を最適化する核心的な考え方は、メインスレッドのブロック時間を短縮し、ブラウザがユーザーのインタラクションに迅速に応答できるようにすることです。
JavaScript の分割と遅延読み込み：重要度の低い JS コードを小さな塊に分割し、async または defer 属性を使用して非同期で読み込むか、ユーザーがインタラクションを行った後に動的に読み込みます。例えば、チャットプラグインは、ページが開かれたときにすぐに実行するのではなく、ユーザーが「お問い合わせ」をクリックした後に読み込むことができます。
長時間のタスクの削減：コード分割（Code Splitting）技術を使用して、巨大なタスクを複数の小さなタスクに分解し、単一のタスクがメインスレッドを長時間占有するのを防ぎます。React や Vue などのモダンなフレームワークは、動的インポート（dynamic import）をサポートしており、これを実現できます。
重要なリソースの優先的な読み込み：リソースヒント（preload、prefetch など）を使用して、ユーザーがインタラクションする可能性のあるコアスクリプトを優先的に読み込み、重要度の低いサードパーティコードは遅延して読み込みます。
サードパーティ製スクリプトの影響の軽減：不要なサードパーティ製プラグインをレビューして削除するか、軽量な代替案を使用します。使用が必須の場合は、iframe や Web Worker を使用して独立したスレッドに分離し、メインスレッドをブロックするのを避けることができます。
モバイルデバイス向けの最適化：テスト時には、低スペックデバイスでのパフォーマンスに重点を置き、Chrome DevTools の CPU スロットリング機能を使用して実際のシナリオをシミュレートし、パフォーマンスが制限された環境でもコードが迅速に応答することを確認します。
FID は、以下のような種類のウェブサイトや開発者にとって特に重要です。
Eコマースおよびオンラインサービスプラットフォーム：ユーザーは商品をクリックしたり、フォームを送信したり、支払いを行ったりする操作を頻繁に行います。あらゆる遅延が注文の損失につながる可能性があります。
コンテンツ主体のウェブサイト：ニュース、ブログ、メディアサイトは、インタラクションは比較的シンプルですが、最初のクリック（メニューの展開、動画の再生など）の応答が遅いと、ユーザーの滞在時間が著しく低下します。
SaaS ツールおよび Web アプリケーション：これらの製品は本質的にインタラクションが密集しています。FID が高すぎると、製品の使いやすさやユーザー満足度に直接影響します。
SEO 最適化チーム：FID は Google のコアウェブバイタルの 1 つであるため、検索ランキングの向上を目指すあらゆるチームは、これを最適化の重点として取り組む必要があります。
FID は抽象的な技術指標ではなく、実際のユーザーエクスペリエンスを直接反映するものです。ユーザーがページをクリックするとき、期待しているのは無限の待機ではなく、即時のフィードバックです。FID の最適化は、本質的には、あなたのウェブサイトに対するユーザーの信頼と忍耐を最適化することなのです。
