この記事はAhrefs公式ブログの日本語訳です。
原文：What Is First Input Delay (FID) & How To Improve It
（著者：Patrick Stox/ 原文の最終更新日：March 22, 2024）
※フルスピード註：この記事は2024年3月22日時点の記載をもとに翻訳しています。Ahrefs公式ブログの記事は今後追記・再公開されることがありますことをご了承ください。
First Input Delay (FID) は、ユーザーが最初にページを操作してからページが応答するまでの時間です。これは応答性を測定するもので、以前は Google がページ エクスペリエンスを測定するために使用する 3 つのコア Web Vitals 指標の 1 つでした。 2024 年 3 月 12 日以降、FID は Interaction to Next Paint (INP) に置き換えられました。
インタラクションの例は次のとおりです。
- リンクまたはボタンをクリックします。
- 空白のフィールドにテキストを入力します。
- ドロップダウン メニューの選択をします。
- チェックボックスをクリックします。
スクロールやズームなどの一部のイベントはカウントされません。
FID がどれくらいの速度であるべきか、そしてそれを改善する方法を見てみましょう。
適切な FID 値はどれくらいか?
適切な FID 値は 100 ミリ秒未満であり、Chrome ユーザー エクスペリエンス レポート (CrUX) データに基づく必要があります。これは、サイトを訪問し、この情報の共有をオプトインしている Chrome の実際のユーザーからのデータです。インタラクションの 75% は 100 ミリ秒以内に応答する必要があります。
ページは次のいずれかのバケットに分類される場合があります。
- 良好: <=100 ミリ秒
- 改善が必要: >100 ミリ秒および <=300 ミリ秒
- 悪い: >300 ミリ秒
FIDデータ
2023 年 4 月の時点で、サイトの 95.3% が良好な FID バケットに入っています。これはサイト全体の平均です。前述したように、ここで良好であることを示すには、インタラクションの 75% が 100 ミリ秒未満で応答する必要があります。
ほとんどのサイトのほとんどのページは、FID の CWV チェックに合格しています。私はこれが応答性を測定する最適な方法であるとは信じていません。Google は 2024 年 3 月に FID を Interaction to Next Paint (INP) に置き換えました。INP は最初の入力だけを調べるのではなく、すべてのインタラクションのレイテンシを調べます。ユーザーが作る。
Core Web Vitals に関する調査を行ったところ、デスクトップ接続では FID について心配する必要がある人はほとんどおらず、モバイルでは心配する必要がある人はほとんどいないことがわかりました。
ほとんどのページは通過しているため、低速接続であっても FID について心配する必要があるサイトはほとんどありません。
研究から得られたページレベルのデータでも同じことが分かりました。 FID はほとんどのページでは問題にならないようです。
FIDの測定方法
唯一重要な FID 番号は、Chrome ユーザー エクスペリエンス レポート (CrUX)から得られます。これは、データの共有を選択した Chrome の実際のユーザーからのデータです。
これはフィールド データと呼ばれ、さまざまなネットワーク条件、デバイス、キャッシュなどにわたる実際の FID パフォーマンスについての最良のアイデアを提供します。これは、Google によるCore Web Vitalsの実際の測定対象でもあります。
一貫性があり、再現可能なテストを行うために、同じ条件でテストするラボ データもあります。テスト ツールは何もクリックしないため、FID はラボ テストでは使用できません。ただし、代替メトリックとして合計ブロック時間 (TBT) を使用することもできます。ブロックされているプロセスを改善することで、FID も改善されます。
単一 URL の FID の測定
Pagespeed Insights は、他の方法では CrUX データセットでクエリできないページレベルのフィールド データを取得します。また、オリジン データも提供されるため、ページのパフォーマンスをサイト全体と比較したり、Google Lighthouseに基づいてラボ テストを実行して TBT を取得したりできます。
多数の URL またはサイト全体の FID を測定する
Google Search Console で CrUX データを取得でき、良好、改善が必要、不良のカテゴリに分類されます。
問題の 1 つをクリックすると、影響を受けるページ グループの内訳が表示されます。グループは、同じテンプレートを使用する可能性が高い、同様の値を持つページです。テンプレートで一度変更を加えると、その変更はグループ内のページ全体で修正されます。
ラボ データとフィールド データの両方を大規模に取得したい場合、それを取得する唯一の方法は PageSpeed Insights API を使用することです。 Ahrefs のサイト監査を使用して簡単に接続し、パフォーマンスの詳細を示すレポートを取得できます。これは、Ahrefs ウェブマスター ツール(AWT) アカウントを持つ検証済みサイトの場合は無料です。
表示される Core Web Vitals データは、セットアップ中にクロール用に選択したユーザー エージェントによって決定されることに注意してください。モバイルからクロールする場合は、API からモバイル CWV 値を取得します。
遅延の原因は何か?
メインスレッドを争うJavaScript。メインスレッドは 1 つだけあり、JavaScript はその上でタスクを実行するために競合します。
JavaScript はメインスレッドで順番に実行する必要があります。これは、一度に 1 つのアイテムを調理しなければならないワンバーナー ストーブのようなものですが、複数の料理を調理する必要があります。
タスクの実行中は、ページはユーザー入力に応答できません。これが体感される遅延です。タスクが長ければ長いほど、ユーザーが経験する遅延も長くなります。
タスク間の休憩は、ページがユーザー入力タスクに切り替えて、ユーザーがやりたいことに応答する必要がある機会です。 JavaScript の処理に時間がかかり、遅延が長くなる可能性があるため、遅いデバイスではさらに状況が悪化します。
FIDを改善する方法
PageSpeed Insights では、ブロックされているメインスレッドに関連する問題を含む TBT タブが表示されます。これらは、FID を改善するために解決したい問題です。
ほとんどのページは FID チェックに合格します。ただし、FID に取り組む必要がある場合は、取り組むことができる項目がいくつかあります。
1. JavaScriptの量を減らす
JavaScript の実行量を減らすことができる場合は、まずそれを行ってください。ページ読み込みの早い段階で JavaScript に注目してください。十分な最適化が行われていない場合、ロード プロセスの初期部分は、単一のメイン スレッドで実行しようとする大量の JavaScript で埋め尽くされる可能性があります。
2. 可能であれば、後で JavaScript をロードする
すぐには必要ない JavaScript は、後でロードする必要があります。これを行うには、defer 属性と async 属性という 2 つの主な方法があります。これらの属性はスクリプト タグに追加できます。
通常、ダウンロード中のスクリプトは、ダウンロードおよび実行中にパーサーをブロックします。非同期では、解析とダウンロードを同時に実行できますが、スクリプトの実行中に解析はブロックされます。 Defer はダウンロード中に解析をブロックせず、HTML の解析が終了した後にのみ実行されます。
どれを使用するべきですか?もっと早くに実行したいものや依存関係があるものについては、私は非同期を使用することをお勧めします。
たとえば、より多くのユーザーが記録されるように、分析タグで非同期を使用する傾向があります。必要でないもの、または依存関係がないものはすべて延期する必要があります。属性の追加は非常に簡単です。
これらの例を確認してください。
Normal：
<script src="https://www.domain.com/file.js"></script>
Async:
<script src="https://www.domain.com/file.js" async></script>
Defer:
<script src="https://www.domain.com/file.js" defer></script>
3. 長いタスクを分割する
もう 1 つのオプションは、JavaScript を分割して実行時間を短縮することです。ユーザー入力への応答が遅れる長いタスクを、ブロック時間が短縮される小さなタスクに分割します。これは、タスクをより小さなチャンクに分割するコード分割によって行われます。
4. Web ワーカーを使用する
JavaScript の一部をService Workerに移動するオプションもあります。 JavaScript がブラウザー内の 1 つのメイン スレッドをめぐって競合すると述べましたが、これは、JavaScript に別の実行場所を与える回避策です。
キャッシュに関しては、いくつかのトレードオフがあります。また、Service Worker はDOM にアクセスできないため、更新や変更を行うことができません。 JavaScript を Service Worker に移行する場合は、JavaScript が何をしているのかを理解している開発者が必要です。
5. プリレンダリングまたはサーバーサイド レンダリング (SSR) を使用する
JavaScript フレームワークを使用している場合、ページを読み込むために大量の JavaScript が必要になります。 JavaScript はブラウザーでの処理に時間がかかり、遅延が発生する可能性があります。プリレンダリングまたは SSR を使用すると、この負担がブラウザからサーバーに移ります。
参考文献
まとめ
2024 年 3 月に FID が INP に置き換えられたとしても、FID の改善に取り組む価値は依然としてあります。 TBT と FID を改善するために取り組んでいることの多くは、INP も改善するはずです。
ご質問がございましたら、Twitter でメッセージをお送りください。
著者プロフィール
Patrick Stox は、Ahrefs のプロダクト アドバイザー、テクニカル SEO、およびブランド アンバサダーです。彼は、2021 年の Web 年鑑の SEO の章の筆頭著者であり、2022 年の SEO の章の査読者でもありました。また、Ahrefs の『初心者のための SEO 本』の共著者であり、『The Art of SEO 第 4 版』のテクニカル レビューの編集者でもありました。彼は、Raleigh SEO Meetup (米国で最も成功した SEO Meetup)、Beer and SEO Meetup、Raleigh SEO Conference などのいくつかのグループの主催者であり、Technical SEO Slack グループを運営し、レディット/r/TechSEO のモデレーターでもあります。
コメント