FID（First Input Delay）とは？低下の原因や測定、TBTの改善方法について解説

FID（TBT）とは

FID（First Input Delay）とは、ユーザーがページで行う最初の操作から、第一印象で感じるサイトの「インタラクティブ性や反応速度を測る指標」です。

ここでいう「最初の操作」とは、タップやクリックなどの動作を表します。ズームやスクロールといった動作はこれに含みません。

例えば、ページ内でスクロールをせずにボタンをクリックする、目次をタップする、文字を入力するなど、ページ内でユーザーが行動するまでの応答性や時間が評価対象になります。

FIDの判定基準は、ユーザーが最初の操作を行ってから100ms（ミリ秒)未満が「良い」、300ms以下であれば「要改善」、300msを超えた場合は「不十分」とされています。

また、TBT（Total Blocking Time）は、タスクの処理時間が 50 msを上回った場合のコンテンツの初回描画から操作可能になるまでの合計時間のことを指します。

TBTはコアウェブバイタルの指標に含まれていませんが、TBTの改善がFIDの改善に繋がるので同じ意味として扱われることが多いです。

FID（TBT）の測定方法

GoogleはFIDやコアウェブバイタルを測定するツールを提供しています。それらについてみていきましょう。

Google search console（サーチコンソール）

Google search console（サーチコンソール）の管理画面を開き、ウェブに関する主な指標という部分から、Webサイト全体のコアウェブバイタル指標を確認できます。モバイル版、PC版に分かれており、良好、改善が必要、不良の3つの段階で表示されます。ひとまず、不良なページ（URL）がないかを確認し、ある場合は優先的に改善を進めましょう。

なお、問題がある場合はページのURLと改善項目が表示されるため、それらに沿って改善を進めれば問題ありません。ただし、ページ数が多い場合はすべてのページが表示されないケースもある点には注意が必要です。

『サーチコンソール』

PageSpeed Insights

PageSpeed Insights（https://developers-jp.googleblog.com/）にアクセスし、調査したいホームページのURLを入力して、分析をクリックします。

表示された数値結果から判定が可能です。

また、こちらもWeb Vitalsと同じで「テスト環境におけるシミュレーションの結果」のデータが表示されるため、注意が必要となります。

『PageSpeed Insights』

Web Vitals

Google Chromeの拡張機能であるWeb Vitalsは、測定したいページをブラウザで表示すると右上に表示されます。

しかし、テスト環境におけるシミュレーションの結果を表示するデータであるため、本来のユーザーが取得したデータの結果と異なる数字が表示される可能性があるので注意が必要です。

Google Chrome拡張機能『WEb Vitals』

Light House

こちらもGoogle Chromeの拡張機能です。

測定したいページを開き、Generate reportと書かれている箇所をクリックすると、パフォーマンスの部分にメトリック（測定基準）が表示され、その項目の中にTBTが含まれています。

Google Chrome拡張機能『Light House』

FID（TBT）低下の原因

FIDが低下する主な原因は「大量のJavaScript実行」です。

JavaScriptとは、Webブラウザ上で動作するプログラミング言語の一つです。

JavaScriptがページ内で動き出すと、その処理している間、ブラウザがユーザーの最初の動作に応答できなくなるというデメリットがあります。

よって、JavaScriptの処理が多くなるにつれて最初の動作に応答できなくなるため、FIDが低下します。

FID（TBT）を改善するには？

では、FIDを改善するには何をすればいいのでしょうか。

その改善方法について、順に紹介します。

【改善方法①】不要なJavaScriptを減らす

不要なJavaScriptを減らすことで、FIDのみならず、LCPのスコアアップにも期待できます。では、不要なJavaScriptはどのように見つければ良いのでしょうか。その手順は下記のとおりです。

1. デベロッパーツールを開く
2. 中央あたりにある赤い「フィルタ」ボタンをクリック
3. 「JS」を選択して確認
4. 「閉じる」横の「︙」のボタンをクリック
5. 「more tools」をクリック
6. 「Coverage」を選択
7. 下枠に表示された「Coverage」をクリック
8. 再度、画面をローディング

上記の手順を踏むことで、不要なJavaScriptを探すことができます。具体的には下記画像のように、Coverageの赤く染められた部分の読み込みが削除するべき対象となります。

ただし、他のページでは使用されているJavaScriptである可能性も考えられます。また、JavaScriptの中には、広告計測タグなどの第三者コードなど、ユーザー側では編集ができないものもあります。

そのため、必ず他のページへの影響も総合的に鑑みた上で削除するべきJavaScriptであるかを判断するようにしましょう。

【改善方法②】JavaScriptの最小化

JavaScriptのコードには、エンジニア（技術者）が分かりやすいように、ソースコードにコメントやインデントが含まれています。しかし、これらは本来、ブラウザからすれば不要なものです。これらを削除することを「コードの圧縮」と呼び、JavaScriptを最小化できます。

JavaScriptを圧縮したい場合は「JS Minifier」を活用するのが便利でおすすめです。圧縮したいJavaScriptを選択してJS Minifierに貼り付け、圧縮したソースコードをWebサイトに反映するだけで最小化できます。最も簡単にFIDを改善できる方法なので、ぜひ試してみましょう。

【改善方法③】JavaScriptの遅延読み込み

JavaScriptの「<script>タグ」に対して、defer（遅延読み込み）属性を付与することで、JavaScriptの遅延読み込みを実装可能です。

また、async（非同期化）属性を付与すれば、他のファイルの読み込みを待たずに同時処理をしてくれるようになるため、レンダリングブロックを回避することができます。遅延読み込みでの対応が難しい場合は、asyncを試してみると良いかもしれません。

FIDはページの中でも最初の読み込まれた部分が重要ですので、スクロールをされずに未表示になっている箇所のJavaScriptを遅延して処理させることで、ブラウザがJavaScriptの処理に費やす時間を短縮できます。

結果、FIDが改善されます。

【改善方法④】Cookieのスクリプト実行からの影響を削減する

ファーストパーティやサードパーティのスクリプト実行からの影響は、インタラクション準備の遅れを引き起こします。
そのため、スクリプト実行からの影響を削除することが、FIDの改善に繋がります。

【改善方法⑤】長いタスクを分割する

ブラウザがユーザーのイベントや描画を処理する箇所を「メインスレッド」と呼び、50ミリ秒以上ブロックする、コードが長いタスクとされています。

この「コードが長いタスク」を分割することで、JavaScriptの処理時間をその分だけ短縮することができ、FIDの改善に繋がります。

【改善方法⑥】Webワーカーを使用する

Webワーカーとは、メインスレッドで行われる処理をバックグランドスレッドで実行するための手段です。

ユーザーインターフェイス以外の操作を、webワーカーを使用しバックグラウンド処理に変更することで、メインスレッドに割く時間を短縮し、FIDを改善することができます。

その他のCore Web Vitals（コアウェブバイタル）指標の改善方法

ここまで、FIDの改善方法を解説してきましたが、Core Web Vitals（コアウェブバイタル）には他にも「LCP」と「CLS」という2つの指標が存在します。これらを改善することで総合的なスコアアップを狙えるため、改善方法を簡単にご紹介します。

LCPの改善方法

LCPは、最も大きなコンテンツが読み込まれるまでの時間のことです。Webサイトの各ページによって最も大きなコンテンツの定義は異なり、PageSpeed Insightsで確認することができます。LCPは、レンダリングを妨げるリソースの除外や、テキスト圧縮を有効化するなどして改善可能です。LCPを改善することでUXも向上するため、改善を図りたい場合は下記の記事も参考にしてください。

LCP(Lrgest Contentful Paint)とは？改善方法・低下原因・測定方法を解説

CLSの改善方法

CLSは、ユーザーが訪問した際にレイアウトが崩れず、どれだけ安定しているかを表すものです。クリックしようとしたコンテンツが動いたり、広告がズレたりしたらCLSが低下します。CLSの改善は、widthとheightの指定や、動的なコンテンツをできる限り挿入しないなどの対策で改善できます。CLSの具体的な改善方法は下記の記事でもまとめているので、本記事と併せてご覧ください。

CLS（Cumulative Layout Shift）とは？低下の原因や測定方法、改善方法について解説

WordPressのサイト表示スピード改善をするなら「HP爆速くん for WP」

WordPressは世界で40%以上のWEBサイトで導⼊されている無料CMSで、エンジニアでなくても簡単にWEBサイトの構築が可能です。

しかし、⾼度なカスタマイズや表⽰スピードの⾼速化においては、WEBだけでなくWordPressに関する専⾨的な知識が必要で、⼀般的なWEB制作会社やSEO対策会社では対応できない可能性もあります。

WordPressサイトの表⽰スピードに悩む企業の課題を解決するため、SEO技術者集団の「ADAMTECHNOLOGIES 」と、WordPress専⾨家チーム「株式会社e2e」と技術共同開発し、WordPressサイトに特化した表⽰スピード⾼速化サービス『HP爆速くん for WP』をご提供しています。

「HP爆速くん for WP」は、Page Speed Insightsのスコアが上がらなければ一切料金をいただかない、完全成果報酬型のWordPressサイトの表示スピードの高速化サービスです。

「HP爆速くん for WP」の詳細が知りたい方は、下記リンクからご確認ください。

成果報酬型WordPressサイトの高速化サービス　『HP爆速くん for WP』の詳細はコチラ