First Input Delay（FID）とは何ですか？ WordPressでそれを減らす方法
公開: 2021-10-07あなたが最初にページを操作しようとしたときのその厄介な瞬間の名前があり、それが応答するのに時間がかかります。 これはFirstInputDelay（FID）と呼ばれ、Webサイトのユーザーエクスペリエンス（UX）がどれほど優れているかを知るための指標です。
FIDが低い場合は、Webサイトが適切に最適化されていることを示しています。 これは、ページのレンダリングが完了したように見えた後でも、訪問者のブラウザが要素やスクリプトの読み込みに固執しないことを意味します。 FIDスコアをできるだけ低くすることができれば、ユーザーの訪問がはるかに楽しくなります。
この記事では、First Input Delayの意味と、それがなぜこれほど重要なメトリックであるのかについて説明します。 次に、WordPressでFIDスコアを下げる4つの方法について説明します。 それを手に入れよう！
目次：
- 最初の入力遅延とは何ですか？
- Webサイトの最初の入力遅延を測定する方法
- WordPressの最初の入力遅延スコアを減らす方法
最初の入力遅延とは何ですか（そしてそれが重要なメトリックである理由）
あなたがウェブサイトにアクセスするたびに、バックグラウンドで多くのことが起こります。 ページを表示する前に、ブラウザはサーバーへのクエリ、リクエストの送信と処理、要素の読み込みなどを行う必要があります。 最新のWebサイトの場合、操作可能な完全にレンダリングされたページが表示される前に、ブラウザーが実行する必要のある数十の要求を持つことができます。
場合によっては、ページの準備ができているように見えても、ブラウザがリクエストを処理し、バックグラウンドでスクリプトを読み込んでいることがあります。 そのページを操作しようとすると、アクションを実行してから応答を受信するまでにわずかな遅延が発生する場合があります。
たとえば、リンクをクリックすると、ブラウザがリクエストをすぐに処理しない場合があります。 ボタンを押すと、一見何も起こらない場合があります。 これは基本的にサイト上の任意のインタラクティブ要素で発生する可能性があり、最初の入力遅延を可能な限り減らすことが目標です。
理想的には、サイトの最初の入力遅延は100ミリ秒未満である必要があります。 これは、GoogleがWebサイトで許容できると見なす標準です。
FIDは、ウェブサイトでのポジティブまたはネガティブなユーザーエクスペリエンスを測定するために使用する3つの指標の1つであるため、特にGoogleについて言及します。 これらの3つのメトリックは、Core Web Vitalsと呼ばれ、次の2つのメトリックも含まれます。
- Largest Contentful Paint（LCP）：このメトリックは、ページ上の最大の要素が読み込まれるまでにかかる時間を測定します。
- 累積レイアウトシフト（CLS）：これは、ページが読み込まれるときに視覚的に「シフト」する量を測定します。 要素が読み込まれるときに要素が動きすぎると、CLSスコアが低くなります。 WordPressの累積レイアウトシフトを修正するためのガイドがあります。
CoreWebVitalsが重要である主な理由は2つあります。 1つ目は、サイトがどの程度最適化されているかを示す尺度を提供することです。 ウェブサイトのスコアが高い場合は、読み込みが速く、視覚的に安定しており、ユーザーがウェブサイトを操作するのに時間がかかりすぎる必要がないことを意味します。
Core Web Vitalsが重要である2つ目の理由は、サイトの検索エンジン最適化（SEO）に影響を与えることです。 Googleは、ランキングを決定する際の小さなシグナルとしてこれらの指標を使用します。 実際、検索エンジンの巨人は、コンテンツやバックリンクと同じ程度ではありませんが、SEOに関してはCoreWebVitalsが重要であることを明確にしています。
Webサイトの最初の入力遅延を測定する方法
コンピューターを使用してシミュレートされたテストを実行できる他のパフォーマンスメトリックとは異なり、サイトの実際の訪問者に基づいてデータを収集する必要があるため、最初の入力遅延の測定は難しい場合があります。
Webサイトの最初の入力遅延を測定する最も簡単な方法は、PageSpeedInsightsを使用することです。 ただし、PageSpeed Insightsは、サイトにChromeユーザーエクスペリエンスレポートに含めるのに十分なトラフィックがある場合にのみ、最初の入力遅延時間を表示します。
PageSpeed Insightsが最初にどのように機能するかについて説明してから、PageSpeedInsightsがサイトの最初の入力遅延メトリックを提供しない場合に試すことができるいくつかの代替案を共有します。
PageSpeed Insightsを使用するには、先に進み、テストするページのURLを入力します。 PageSpeed Insightsは、分析に少し時間がかかり、次のようなレポートを返します。
全体として、そのWebサイトは最高のCoreWebVitalスコアを持っていません。 ただし、First Input Delayメトリックに関しては、平均時間が100ミリ秒未満であり、非常にうまく機能していることがわかります。
ただし、前述のように、すべてのサイトでこのメトリックが表示されるわけではありません。 トラフィックの少ないサイトをお持ちの場合は、次のように表示される可能性があります。
この状況では、2つのオプションがあります。
- シンプル：ラボデータセクションの合計ブロッキング時間メトリックを、最初の入力遅延時間の大まかなプロキシとして使用できます。 これは完全な表現ではありませんが、TotalBlockingTimeメトリックはFirstInputDelayと非常によく似ています。 一般に、合計ブロッキング時間を改善すると、最初の入力遅延時間にも同様の改善が見られます。
- 高度：リクエストメトリクスなどの実際のユーザーパフォーマンス監視ツールを使用できます。 これらのツールを使用すると、実際のユーザーデータを収集するために、サイトに追跡スクリプトを追加する必要があります。
以下に、PageSpeedInsightsの合計ブロッキング時間メトリックの場所を示します。
FIDおよびその他のコアWebバイタルを測定する方法がわかったので、それらを改善する方法について説明しましょう。
WordPressの最初の入力遅延スコアを減らす方法
このセクションでは、FirstInputDelayスコアを改善するWordPressの最適化に焦点を当てます。 これらの最適化のいくつかは、他のCore Web Vitalsにもプラスの影響を与え、さらに便利になります。
1.Webサイトから不要なスクリプトを削除します
WordPress Webサイトの読み込みに時間がかかりすぎる主な理由の1つは、大量のスクリプトを実行する必要があるためです。 スクリプトとは、JavaScriptやCSSなどの可能なオプションを意味します。 「複雑な」WordPressテーマまたはさまざまなプラグインを使用している場合は、バックグラウンドで実行されているスクリプトが多すぎる可能性があります。
どのスクリプトが有用でどれがそうでないかを理解するのは難しい場合がありますが、そこでPageSpeed Insightsが役立ちます。サイトのページのいずれかでテストを実行すると、PageSpeedInsightsレポートには次の「機会」セクションも含まれます。
このセクションでは、サイトで使用されていないJavaScriptファイルとCSSファイルを示します。 これらのスクリプトを削除すると、それに応じてFIDスコアが低下します。
多くの場合、これらのスクリプトはプラグインから取得されます。 つまり、プラグインリストをよく見て、本当に必要のないツールを見つける必要があります。 プラグインをカリングすることは、Webサイトの読み込みをできるだけ速く保つための優れた方法です。
2.ロード中に重要ではないコードを延期する
ロードに時間がかかりすぎる特定のスクリプトやコードに遭遇するのはよくあることです。 問題は、場合によっては、ブラウザがそれらのスクリプトを処理するまで、ページの残りの要素の読み込みを完了できないことです。
これらのスクリプトが「重要」でない場合は、ブラウザに最後までスクリプトを残すように指示するだけで、他のすべてのスクリプトの速度が低下することはありません。 それが「重要でないコードの延期」と呼ばれるものです。
延期できるスクリプトを理解する際の最初の目的は、PageSpeedInsightsです。 ページのレポートを生成すると、PageSpeedInsightsにはスコアを改善する方法に関する推奨事項が含まれます。
これらの推奨事項の中には、レンダリングをブロックするリソースを削除するというオプションがあります。 それをクリックすると、延期できるスクリプトのリストが表示されます。
WordPressでレンダリングブロックスクリプトを処理するには、2つの方法があります。 最初の方法は、 asyncを使用することです。 これにより、ブラウザは、指定したスクリプトを解析している間、Webサイトの読み込みを続行できます。 または、ブラウザが残りのHTMLドキュメントをレンダリングした後にコードが読み込まれるように、コードを延期することもできます。
これをWordPressで設定するには、無料のAsyncJavaScriptプラグインを使用できます。 または、多くのWordPressパフォーマンスプラグインには、コードを延期する機能が含まれています。 プレミアムプラグインにお金を払っても構わないと思っているなら、WPRocketには重要ではないCSSとJavaScriptを自動的に延期する機能があります。
3.CSSおよびJavaScriptミニファイツールを使用する
未使用のCSSとJavaScriptを削除することはすべてですが、削除したくないスクリプトがいくつかあります。 たとえば、前世紀からリッピングされたようなWebサイトが必要な場合を除いて、ページのCSSスタイルシートを廃止したくないでしょう。
削除できないスクリプトの場合、最善の策はそれらを縮小することです。 これは、コードから空白と不要な文字を削除して、各スクリプトのサイズを縮小することを意味します。 AutoptimizeやFastVelocityMinifyなど、WordPressでスクリプトを自動的に縮小するツールがいくつかあります。
一般的に、ほとんどのWordPress最適化およびキャッシュプラグインには、スクリプト縮小ツールも含まれています。 ただし、それらの中には多くの構成作業を必要とするものもあるため、縮小化に関しては、Autoptimizeなどのオプションを使用することをお勧めします。
4.コンテンツ配信ネットワーク（CDN）を使用する
CDNを使用することは、Webサイトのパフォーマンスを向上させるための優れた方法です。 CDNを使用すると、サイトのコンテンツをキャッシュできる世界中のデータセンターのネットワークにアクセスできます。 訪問者がWebサイトにアクセスしようとすると、CDNはその要求を処理し、キャッシュされたバージョンを提供します。
ほとんどの場合、CDNを使用すると、Webサイトの読み込み時間とFIDスコアが向上します。 WordPressとCDNの統合は簡単で、最大の課題はおそらく使用するサービスを決定することです。
無料のCDNオプションをお探しの場合は、次のいずれかを選択することをお勧めします。
- Cloudflare：これは市場で最も人気のあるCDNの1つです。 WordPressとの統合は簡単で、無料のプランを提供します。
- Jetpack： Jetpackプラグインは、WordPress.comサーバーを使用してWebサイトから静的要素をキャッシュするSiteAcceleratorと呼ばれる機能を提供します。 JetpackにはWordPress.comアカウントが必要ですが、セルフホストのWordPressサイトでも使用できます。
ただし、最高のパフォーマンスを得るには、KeyCDN、StackPath、BunnyCDNなどのプレミアムCDNを検討することをお勧めします。
今日のサイトの最初の入力遅延を減らす
FIDは、Webサイトのユーザーエクスペリエンスを測定しようとする3つのコアWebVitalsメトリックの1つです。
非常に抽象的なものを測定することは複雑になる可能性があります。そのため、各コアバイタルは、訪問者の体験に悪影響を与える可能性のある1つの特定の状況に焦点を当てています。 すべてのコアWebバイタルは不可欠ですが、特にFIDは、遅延が長すぎると大きなフラストレーションにつながる可能性があります。
WordPressでFIDスコアを改善する方法を探している場合は、次のことを行う必要があります。
- Webサイトから不要なスクリプトを削除します。
- ロード中は重要ではないCSSとJavaScriptを延期します。
- AutoptimizeやFastVelocityMinifyなどのCSSおよびJavaScript最小化ツールを使用します。
- CloudflareやJetpackなどのCDNを使用します。
WordPressでFIDスコアを下げる方法について質問がありますか？ 以下のコメントセクションでそれらについて話しましょう！