最初の入力遅延（FID）：それが何であるかとそれのためにあなたのウェブサイトを最適化する方法

公開: 2021-08-21

訪問者にスピーディーな体験を提供することは、サイトの成功にとって非常に重要です。ただし、それがどれだけうまくいくかを測定する方法は複数あります。その1つがFirstInput Delay（FID）です。これは、ユーザーが最初にサイトを操作してからブラウザーがそのアクションに応答するまでの時間をミリ秒（ms）単位で測定します。

この投稿では、FIDとは何かとその測定方法について説明します。また、適切なFIDスコアとは何かについて説明し、最適化する方法について説明します。最後に、よくある質問で締めくくります。始めましょう！

私たちのYoutubeチャンネルを購読する

最初の入力遅延（FID）とは何ですか？

前述したように、FID（「入力遅延」とも呼ばれる）は、訪問者がサイトを操作してからブラウザーが応答するまでの間に発生するミリ秒単位の時間の測定値です。これは、Chromeユーザーエクスペリエンスレポートに含まれる重要な指標です。さらに、これはコアWebVitalsの1つです。これらは、GoogleがサイトのUXの品質（ひいてはページランク）を決定するために使用する指標です。

このコンテキストでは、入力または相互作用は、さまざまなアクションを参照できます。たとえば、リンクのクリック、ボタンの押下、チェックボックスの選択などが含まれます。ただし、ユーザーがページをスクロールまたはズームインする場合、ブラウザとWebサイト間で新しい応答を必要としないため、FIDは適用されません。

いくつかの異なる要因がこのメトリックに影響を与える可能性があります。ユーザーのデバイスの速度と処理能力が影響を与える可能性があります。あなたはそれを制御することはできません。ただし、Webページのサイズと複雑さを制御することはできます。具体的には、Webサイトで使用するJavaScriptの量を制御できます。たとえば、ランダムな順序で読み込まれる画像やスクリプトが多数ある場合、プロセス全体の速度が低下し、ユーザーからの応答が遅れる可能性があります。

サイトにしっかりしたFCPとLCPがある場合でも、最初の入力遅延はそれらをバウンスさせるのに十分な長さである可能性があります。あなたのサイトが無反応で遅いように彼らに感じることができます。

簡単に言うと、FIDは、ページの読み込み中の応答性を判断するために使用されます。おそらく明らかに、このプロセスが速いほど良いです。したがって、サイトのFIDを測定する方法と、スコアを向上させる方法を知ることが重要です。

FIDの測定方法

FIDスコアの最適化を開始する前に、それが現在どこにあるかを知ることが不可欠です。理想的には、堅実なユーザーエクスペリエンス（UX）を提供するには、FIDスコアを100ミリ秒未満にする必要があります。

100ミリ秒以下のスコアは良好と見なされますが、100〜300ミリ秒のスコアには改善の余地があります。 300ミリ秒を超えるFIDスコアは不十分です。

FIDを測定するには、Google PageSpeedInsightsを使用できます。

Google PageSpeedInisghtsのWebサイト。

これは、さまざまな方法でサイトのパフォーマンスをテストするGoogleの無料ツールです。これを使用すると、FIDを含むさまざまな主要なメトリックを監視できます。

FIDは測定が難しい場合があることに注意してください。これは、ユーザー入力が必要なためです。ただし、最近サイトでユーザーインタラクティビティを使用している限り、PageSpeedInsightsを介してこのメトリックを見つけることができるはずです。

開始するには、テキストフィールドにサイトのURLを入力し、[分析]ボタンをクリックします。ツールがページの分析を完了すると、結果が表示され、サイトに全体的なスコアが表示されます。

Google PageSpeedInsightsレポート。

First Input Delay（FID）メトリックは、[フィールドデータ]セクションにあります。少し下の[機会]セクションで、ページとスコアを最適化するための提案を見つけることができます。

また、Googleはこれらのスコアをフィールドデータとして示していることにも注意してください。これは、情報が実際のユーザーインタラクションに基づいており、シミュレートされたテスト（ラボデータと呼ばれるか、ラボツールで検出される）ではないことを意味します。 FIDはかなり主観的であり、ユーザーの実際の操作と密接に関連しているため、フィールドデータを使用していることを確認することが重要です。シミュレーションはそれだけを説明することができます。

FIDスコアを最適化する方法

FIDスコアとは何か、およびそれを測定する方法を理解したので、次に、実際にそれを改善する方法を検討します。以下は、最初の入力遅延時間を短縮するために使用できるいくつかのヒントと戦略です。

CSSおよびJavaScriptコードを最適化および最小化する

FIDスコアを最適化する最良の方法の1つは、CSSおよびJavaScriptコードを圧縮して最適化することです。そうすることで、ファイルサイズを縮小し、応答性を向上させることができます。不要な文字、スペース、改行を取り除くことで、ファイルサイズが小さくなり、ページ速度が向上し、ブラウザが処理する必要のあるプロセスの数が減ります。したがって、FIDは低くなります。

Diviユーザーは、テーマが最初からHTML、JavaScript、およびCSSを自動的に最小化することも知っておく必要があります。テーマをアクティブ化するだけで、このコードがすべて圧縮され、FIDが以前よりも適切な位置に配置されます。

Diviユーザーでない場合は、コードを縮小するためのいくつかのオプションがあります。これを行うための迅速で簡単なアプローチは、MinifyCodeなどのオンラインツールを使用することです。フルサイズのコードをコピーしてサイトに貼り付けると、サイトがコードを縮小してから、結果をコピーしてサイトに貼り付けます。

ミニファイコードオンラインツール。

コードエディタを使用して手動でコードを縮小することもできますが、これは少し複雑になる可能性があります。ただし、コードの操作経験がある場合は、この方法でより詳細に制御できます。

さらに別の戦略は、AutoptimizeやW3 Total Cache（または他の任意の数）などのプラグインを使用することです。

W3 TotalCacheプラグイン。

これは、コードの経験がなく、この変更をサイトに自動的に実装したい場合、WordPressユーザーにとって実行可能なソリューションになる可能性があります。さらに、これらのプラグインはどちらも、画像やコンテンツのキャッシュなど、最適化に重点を置いたさまざまな機能を提供します。

長いJavaScriptタスクを小さなタスクに分割する

長いタスクはメインスレッドをブロックする傾向があり、JavaScriptが肥大化し、サイトの応答性が損なわれる可能性があります。これを防ぎ、プロセスのFIDスコアを向上させるには、これらのタスクをより小さな非同期タスクに分割してみてください。

これを実行するための最も効果的な方法の1つは、コード分割です。一言で言えば、これは、一度に1つの大きなファイルではなく、小さくて必要なコードのみを分割してロードするために使用される手法です。これは、Webpackなどのツールを使用して実行できます。

大きなパフォーマンスの更新により、テーマの大きなJavaScriptライブラリが分解され、必要な場合にのみロードされるため、Diviユーザーもこの領域でメリットを得ることができます。これにより、ほぼすべてのDiviサイトのFIDが減少するはずです。 WordPressテーマには独自のJSライブラリが付属している傾向があり、ユーザーはコードを分割して自分で最適化するための専門知識や権限を持っていない可能性があります。私たちはそれをDiviで問題にならないようにしたかったのです。

サードパーティのコードと重要でないスクリプトの影響を減らす

サードパーティのスクリプトが多すぎると、サイト自体のデータの実行が遅れる可能性があります。したがって、FIDスコアを最適化するために、サードパーティのコードの影響を減らし、重要でないサードパーティのスクリプトを削除することも賢明な方法です。そして、あなたが取り除くことができないものを延期すること。

どのスクリプトが最も重要であるかを決定するときは、サイトのUXでどのスクリプトが重要な役割を果たすかを自問してください。たとえば、あまり必要のない広告やポップアップを削除したり、遅らせたりすることができます。ユーザーはそのメールを確認する必要がありますか？最初にオプトインしますか、それともユーザーが何らかの方法でサイトを操作するまでメールを遅らせることができますか？

未使用のJavaScriptとCSSを削減する方法の詳細については、PageSpeedInsightsレポートの「 Opportunities」セクションを参照することもできます。

PageSpeedInsightsレポートの「Opportunities」セクション。

これらのセクションのいずれかをクリックして展開すると、メインスレッドをブロックしている可能性のある特定のファイルとタスクが一覧表示されます。 Chrome DevToolsを使用して、未使用のJavaScriptとCSSを見つけることもできます。

多くの場合、これらの「レンダリングブロック」リソースは、ページの読み込みをすぐに停止します。これは、FIDにも影響します。それらを削除および/または延期すると、サイトの双方向性だけでなく、知覚される応答性と速度も向上します。

Diviには、このような重要ではないスクリプトを延期するためのトグルがあります。テーマオプションでは、jQueryスクリプトを延期し、インラインCSS延期を採用することを選択できます。これをテーマのクリティカルCSS機能と組み合わせると、すべてのレンダリングブロックCSSが削除されます。 GoogleFontsとGutenbergエディターのスタイルシートの延期を切り替えることもできます。これらはすべて「レンダリングブロック」と見なされるため、ElegantThemesのメンバーはほぼ即座にFIDスコアが向上します。

最初の入力遅延（FID）に関するよくある質問

この時点で、おそらくFIDとは何か、WebサイトのUXでのその重要性、およびそれを改善する方法をしっかりと理解しているはずです。そのことを念頭に置いて、すべての重要なポイントを確実にカバーしたいと考えています。それでは、FIDに関してよく寄せられる質問をいくつか見ていきましょう。

FIDは私のウェブサイトの全体的なパフォーマンスにどのように適合しますか？

基本的に、FIDは、訪問者がWebサイトと最初にやり取りするインタラクションを測定します。これは、サイトに対するユーザーの第一印象に影響を与えるため、定量的な指標であると同時に知覚される指標でもあります。サイトがユーザー入力に応答するタイミングを客観的に確認できますが、ユーザーのサイトとのやり取りに基づいて、ユーザーがサイトを認識したタイミングも確認できます。

FIDは、ユーザーが最初に操作するまでの時間と、ブラウザーがその操作に応答するのにかかる時間を測定します。つまり、この指標は、サイトの読み込み中の応答性を評価します。速度が速いほど、訪問者のエクスペリエンスは向上します。

また、コアWeb Vital（Largest Contentful Paint（LCP）およびCumulative Layout Shift（CLS）とともに）として、FIDはGoogleがWebサイトをランク付けする方法において重要な役割を果たします。したがって、ユーザーエクスペリエンスに加えて、サイトの検索エンジン最適化（SEO）にも影響を与える可能性があります。 FIDを改善するための同じ戦略の多くは、サイトの全体的なパフォーマンスも劇的に低下させます。

FIDを測定するにはどうすればよいですか？

FIDスコアを測定する方法はいくつかあります。最も速くて簡単な方法は、Google PageSpeedInsightsを介してサイトを実行することです。レポートでは、FIDを含むさまざまな重要な指標について詳しく説明します。また、スコアを向上させる方法についてのいくつかの提案も提供します。

さらに、他のいくつかのツールを使用してFIDスコアにアクセスできます。これには、Chromeユーザーエクスペリエンスレポート、Google検索コンソールのコアWebバイタルレポート、およびWebバイタルJavaScriptライブラリが含まれます。 GTMetrixやPingdomのSpeedTestなどのツールも役立つ場合があります。

FIDスコアを改善するにはどうすればよいですか？

FIDを改善すると、サイトのUXとSEOの両方のランキングを改善できます。通常、FIDスコアが低いのは、次のようないくつかの要因が原因である可能性があります。

重いJavaScript
未使用のスクリプト
長いJavaScriptタスク
長いスクリプトファイル

あなたのスコアを高めるために、あなたが取ることができるいくつかのステップがあります。これには、サイトのコードの縮小、未使用のサードパーティスクリプトの削除または遅延、長いJavaScriptタスク（およびCSSファイル）の小さなタスクへの分割が含まれます。

結論

あなたのウェブサイトの訪問者に前向きな第一印象を与えるチャンスは一度だけです。これが、FIDスコアを最適化するためにできる限りの機会をとることが重要である理由です。訪問者の最初のやり取りが迅速なものであることを確認することが不可欠です。

理想的なFIDスコアは100ミリ秒以下であることを忘れないでください。改善してその時間を短縮する必要がある場合は、上記で説明したいくつかの戦略（未使用のJavaScriptの延期、CSSとJavaScriptコードの最適化、レンダリングブロックリソースの延期/削除など）により、間違いなく時間を短縮できます。彼らはする必要があります。

FIDについて質問がありますか？ 以下のコメントセクションでお知らせください！

wan wei / shutterstockによる注目の画像