アダムテクノロジーズ運営チーム

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

高速化

FID(First Input Delay)とは?低下の原因や測定、TBTの改善方法について解説のサムネイル

2021年6月からGoogle検索ランキングの要因に組み込まれた、Webページのユーザーエクスペリエンスに関する重要指標のコアウェブバイタル(Core Web Vitals)。

そのコアウェブバイタルの3指標の中で、ユーザーのインタラクティブ性のニーズに対応する指標がFIDです。

本記事では、FIDについて「何を表しているのか・どう測定するのか・どう改善するのか」について詳しく解説していきます。

目次 プラスマーク 表示 プラスマーク 閉じる

FID(TBT)とは

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

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

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

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

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

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

FID(TBT)の測定方法

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

Web Vitals

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

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

Light House

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

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

PageSpeed Insights

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

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

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

FID(TBT)低下の原因

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

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

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

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

FID(TBT)を改善するには?

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

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

【改善方法①】JavaScriptの量を減らす

JavaScriptは複数のバージョンが存在し、表示するブラウザによっては対応していないことがあります。

これを解決するためには、互換性がないブラウザでJavaScriptを使用可能にする「ポリフィル」というコードが有効です。

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

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

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

ファーストパーティやサードパーティのスクリプト実行からの影響は、インタラクション準備の遅れを引き起こします。

そのため、クリプト実行からの影響を削除することが、FIDの改善に繋がります。

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

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

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

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

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

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

まとめ

コアウェブバイタルの3指標の一つであるFIDについて、概要や改善方法について解説してきました。

コアウェブバイタルにおける他の指標についての解説は下記のページを参考にしてください。

コアウェブバイタル(Core Web Vitals)とは?SEOに与える影響と対策方法についてわかりやすく解説します!

また、うまくFIDを分析し、改善を加えるのが難しいと考えるご担当者様もいらっしゃるかと思います。

弊社では、コアウェブバイタルをはじめとしたWebサイトの表示スピードの改善点を診断する「WEBサイト表示診断サービス」をご用意しています。まずは、下記のページから無料で資料をダウンロードしてみてはいかがでしょうか。

この記事の執筆者

田中雄太

twitterアイコン Facebookアイコン

アダムテクノロジーズ執行役員 SEOコンサルタント

株式会社アダムテクノロジーズ 執行役員。
ユーザーニーズと最も近いSEO対策で、あらゆるビジネスを加速させ、より良い社会の実現を目指す。
入社から5年間で100社以上のSEO対策に従事し、様々なジャンル・キーワードでの上位表示を実現。顧客目線での目標達成にコミットしたSEOコンサルティングが強み。

DOWNLOAD

資料ダウンロード

資料のイメージ画像

当社でご提供しているサービスの資料ダウンロードはこちらから。
SEOに課題を感じている方は、ぜひご覧になってください。

SEO診断の資料はこちら WEBサイト高速化の資料はこちら

CONTACT

お問い合わせ

大規模サイトにおけるSEO対策上の問題点を解消し、
集客の最大化を実現する相談役として
ぜひお気軽にご連絡ください。
経験豊富な技術者がSEO診断を行います。