WordPressの最初の入力遅延（FID）を改善する方法

公開: 2022-07-05

サイトのトラフィックが増加するにつれて、物事がスムーズに実行され続けることを確認する必要があります。訪問者がページが読み込まれるまで数秒以上待たなければならない場合、訪問者はサイトを離れ、二度と戻ってこない可能性があります。

幸い、パフォーマンスを評価するための簡単なテストがいくつかあり、改善が必要な場合は、ロード時間をほぼ即座に改善できるソリューションがあります。

この投稿では、サイトのパフォーマンスの1つの側面である最初の入力遅延について説明します。それが何であるか、なぜそれが重要であるか、そしてWordPressサイトでFIDスコアを測定して改善する方法を学びます。

最初の入力遅延の概要

First Input Delay（FID）は、訪問者がWebサイトを初めて操作した後に経験する読み込み時間です。基本的に、誰かがリンクをクリックしたりボタンをタップしたりすると、ブラウザが応答するのを待つ必要があります。サイトのFIDスコアが高い場合、訪問者はより長い期間待機します。

FIDは、CoreWebVitalsの主要な指標の1つです。 Googleによって作成されたこのレポートは、Webページのパフォーマンスを測定します。

CoreWebVitalsレポートに含まれる3つの主要なパフォーマンスメトリックは次のとおりです。

最大のコンテンツフルペイント（LCP） ：これは、ユーザーがURLを要求してからWebサイトが読み込まれるまでにかかる時間を測定します。
First Input Delay（FID） ：これは、訪問者がページを操作した後、Webサイトが応答するのにかかる時間です。
累積レイアウトシフト（CLS） ：これは、ページの読み込み中に発生するすべてのレイアウトシフトを測定します。

これらの指標はすべてWebサイトのユーザーエクスペリエンスを評価しますが、FIDスコアは最も重要なものの1つです。ページがすぐに読み込まれない場合、第一印象が悪くなる可能性があります。実際、1秒の遅延により、訪問者の満足度が16％低下する可能性があります。

FIDスコアを改善する利点は次のとおりです。

ページ上の訪問者の平均時間の増加
バウンス率の低下
コンバージョンの増加

FIDスコアの低下の潜在的な原因

Core Web Vitalsテストを実行すると、レポートにFirstInputDelayスコアが表示されます。許容されるFIDは100ミリ秒以下です。

不十分なFIDスコアは、300ミリ秒を超えるものです。これは、いくつかの異なる要因によって引き起こされる可能性があります。

First Input Delayが高くなる最も一般的な原因の1つは、JavaScriptコードが重いことです。ブラウザが大きなJavaScriptファイルを実行する必要がある場合は、ビジー状態で他のリクエストを実行できない可能性があります。

JavaScriptベースのプラグインが多すぎると、読み込み時間に悪影響を与える可能性があります。同様に、一部のテーマには、同じ問題を引き起こす複雑なファイルが含まれている場合があります。

もう1つの要因は、サードパーティのスクリプトである可能性があります。 Webサイトに多くのサードパーティの分析コードとタグがある場合、これによりページの待ち時間が長くなる可能性があります。場合によっては、ブラウザがこれらのスクリプトに優先順位を付けて、サイトの他のコンテンツの読み込みを遅らせることがあります。

あなたのウェブサイトのFIDスコアを測定する方法

First Input Delayとは何かがわかったので、次はWebサイトをテストします。

FIDをチェックするために使用できるいくつかのコアWebバイタルツールがあります。これらのツールのいずれかから不十分なレポートを受け取った場合は、Webサイトを改善するための措置を講じることができます。

1. PageSpeed Insights

使用できる有名なツールの1つは、PageSpeedInsightsです。これにより、さまざまな要因でWebサイトのパフォーマンスを評価できます。

WebサイトのURLを入力すると、PageSpeedInsightsが詳細なパフォーマンス分析を提供します。ページの上部で、サイトがCoreWebVitals評価に合格したかどうかを確認できます。

このレポートを使用して、ミリ秒単位で測定されるWebサイトのFIDスコアを確認できます。前述したように、100ミリ秒未満のスコアはすべてテストに合格します。

モバイルブラウザとデスクトップブラウザの両方でサイトのパフォーマンスを確認する必要があることに注意してください。これら2つのデバイスのFIDスコアにわずかな違いがあることに気付くかもしれません。

これは、Webサイトの最初の入力遅延を測定する最も速い方法の1つです。 Webパフォーマンスの概要が必要な場合は、これが適切なツールになる可能性があります。

2.Google検索コンソール

PageSpeed Insightsと同様に、Google Search Consoleは、サイトのパフォーマンスを評価するために使用できる無料のツールです。このサービスを使用すると、サイトのトラフィックデータを表示し、FirstInputDelayなどの特定の問題のトラブルシューティングを行うことができます。

Google検索コンソールの使用を開始するには、ウェブサイトの所有権を確認する必要があります。これを行うにはいくつかの方法がありますが、HTMLファイルのアップロード方法の概要を説明します。ドメインまたはURLプレフィックスを入力することから始めます。

次に、生成されたHTMLファイルをダウンロードします。 Google検索コンソールの機能を使用する前に、このファイルをサイトのルートディレクトリにアップロードする必要があります。

確認後、ダッシュボードにアクセスできるようになります。ここで、[コアWebバイタル]タブに移動できます。

PageSpeed Insightsとは異なり、このツールを初めて使用する場合は、レポートにアクセスするのに時間がかかる場合があります。また、サイトに十分な訪問者がいない場合は、レポートを表示できない場合があります。

Google Search Consoleは、FIDスコアについて同様の指標を提供できます。実際の使用状況データに基づいて、 Poor 、 Needs Improvement 、またはGoodの評価を受け取ります。

3.灯台

Lighthouseは、任意のWebページのパフォーマンスを監査するために使用できるWeb開発ツールです。最初の入力遅延を直接測定するわけではありませんが、合計ブロッキング時間（TBT）が得られます。これをFIDのプロキシとして使用できます。

簡単に言えば、TBTは、サイトがユーザー入力にどの程度反応するかを評価します。 FIDと同様に、TBTはFirst Contentful Paint（FCP）とTime to Interactive（TTI）の間の遅延を測定します。それらは非常に類似しているため、TBTを使用してFIDスコアを測定できます。

LighthouseのレポートをWebサイトで表示するには、Webページを右クリックする必要があります。次に、 [検査]を選択します。

生成されたコードの上部にある二重矢印アイコンを見つけます。次に、それをクリックして、 Lighthouseを選択します。

次のページに、レポートを生成するためのオプションが表示されます。これをクリックすると、LighthouseがWebサイトを監査します。

監査が完了すると、サイトのパフォーマンスに関する詳細な分析を表示できます。また、SEOとWebアクセシビリティに関するレポートも表示されます。

次に、 [メトリック]が表示されるまで下にスクロールします。このセクションでは、合計ブロッキング時間が表示されます。

TBTとFIDは似ていますが、FIDはフィールドメトリックであることに注意することが重要です。リアルタイムのユーザーに基づいているため、ラボの設定では測定できません。

Lighthouseはラボメトリックツールであるため、そのTotalBlockingTimeメトリックは実際の対話性を評価しません。幸い、TBTスコアを改善すると、最初の入力遅延も改善されます。

WordPressの最初の入力遅延を減らす方法

上記のツールのいずれかを使用してWebサイトをテストすると、FirstInputDelayスコアが低くなる可能性があります。幸い、いくつかの効果的な戦略を実装することで、スコアを向上させることができます。

WordPressで最初の入力遅延を減らす方法を見てみましょう。

1.最適化プラグインをインストールします

始める簡単な方法は、CoreWebVitalsに焦点を当てたプラグインをインストールすることです。これを行うことにより、手間をかけずに最初の入力遅延を改善できます。

Jetpack Boostは、CoreWebVitalsを最適化するために使用できる強力で使いやすいプラグインです。 Webパフォーマンスを向上させ、FIDスコアを向上させる多くの方法を提供します。

Jetpack Boostをアクティブにすると、ツールは自動的にサイトにパフォーマンススコアを与えます。モバイルビューとデスクトップビューの両方でページの読み込み速度を確認できます。

次に、設定をカスタマイズして、ファイルを最適化して高速読み込みを行うことができます。 CSSを最適化し、JavaScriptを延期し、遅延読み込みを実装することで、FIDスコアを向上させることができます。

JetpackBoostは無料のプラグインです。 WordPress WebサイトにJetpackが既にインストールされている場合は、ダッシュボードからJetpackBoostをアクティブ化できます。

2.レンダリングを延期する-JavaScriptをブロックする

FIDスコアを最適化するもう1つの効果的な方法は、レンダリングブロックJavaScriptを延期することです。デフォルトでは、Webサイト上のすべてのJavaScriptはレンダリングをブロックしています。これは、ブラウザがこれらのスクリプトをダウンロードして実行できるようになるまで、特定のページの読み込みを停止することを意味します。

この場合、JavaScriptの実行を延期することができます。これにより、最も関連性の高いコンテンツを最初にレンダリングするようにブラウザに指示されます。

このレンダリングをブロックするJavaScriptを識別するには、PageSpeedInsightsを使用できます。まず、検索バーにWebサイトのURLを入力します。

次に、[オポチュニティ]セクションまで下にスクロールします。ここでは、Webパフォーマンスを改善するための提案が表示されます。 レンダリングをブロックするリソースを削除するというメッセージが表示されている場所を見つけます。

このセクションを展開すると、延期または完全に削除できるリソースのリストが表示されます。右側に、PageSpeed Insightsは、これらの変更が読み込み時間にどのように影響するかを示します。

Webサイトで必須ではないJavaScriptを延期することにした場合は、プラグインを使用してこのプロセスを簡単にすることができます。 Jetpack Boostを使用すると、これを1つのステップで実行できます。

WordPressダッシュボードで、 Jetpack→Boostに移動します。次に、 DeferNon-EssentialJavaScriptというラベルの付いた設定を見つけます。

最後に、この機能をオンにします。実装すると、スイッチが緑色に変わります。次に、PageSpeed Insightsを介してWebサイトを再度実行して、FIDスコアが改善されたかどうかを確認してください。

3.重要ではないCSSを延期する

PageSpeed InsightsでWebサイトを評価すると、他のレンダリングブロックリソースも表示される場合があります。 JavaScriptと同様に、特定のコーディングにより、ブラウザがページを読み取っているときにページが読み込まれない場合があります。

JavaScriptの場合と同様に、重要ではないCSSを延期できます。まず、パフォーマンスツールを使用してWebサイトを実行し、CSSを最適化する必要があるかどうかを確認します。

次に、JetpackBoostプラグインを使用してCSSを最適化できます。 WordPressダッシュボードで、 Jetpack→Boostに移動します。次に、「 CSS読み込みの最適化」というラベルの付いた設定を見つけます。

このオプションをクリックすると、プラグインはWebサイトの重要なCSSを自動的に生成します。この重要な情報がページの先頭に移動し、コンテンツの読み込みが速くなります。

重要でないCSSを延期すると、全体的なパフォーマンスを向上させることができます。また、PageSpeedInsightsのFIDスコアも向上するはずです。

4.不要なJavaScriptを排除します

多くのプラグインまたは複雑なテーマをインストールした場合、Webサイトで実行されているスクリプトが多すぎる可能性があります。ブラウザがWebサイトをロードするためにスクリプトの長いリストを実行する必要がある場合、速度が低下する可能性があります。

Webサイトを表示するには多くのスクリプトが必要ですが、不要なCSSとJavaScriptがある可能性があります。違いを見分ける方法がわからない場合は、PageSpeedInsightsに戻ることができます。

最初の3つの方法で行ったように、[機会]セクションまでスクロールします。今回は、未使用のJavaScriptとCSSを探します。

未使用の各スクリプトの横に、スクリプトの出所を示すURLがあります。この例では、GoogleAnalyticsとGoogleTagManagerが不要なJavaScriptを作成していました。

問題の原因となっているテーマまたはプラグインがわかっている場合は、それらを削除することを検討してください。次に、適切にコーディングされ、より軽量なさまざまなバージョンをインストールできます。

または、Asset CleanUpなどのプラグインを使用して、未使用のCSSとJavaScriptを削除することもできます。このツールを使用すると、レンダリングをブロックするリソースを排除して、サイトのHTTPリクエストの数を減らすことができます。

サイトにAssetCleanupをインストールしてアクティブ化したら、ダッシュボードでAssetCleanUp→CSS/JSManagerに移動します。このページでは、Webサイトのさまざまな要素を選択して、CSSとJavaScriptを表示できます。

たとえば、ホームページをクリックすると、このページに読み込まれたすべてのファイルが表示されます。

この情報は、場所に基づいて一覧表示されます。ページを下にスクロールして、プラグイン、テーマ、コアソフトウェア、およびサードパーティのソースからのスクリプトを表示できます。

スクリプトの一部を削除する方法は2つあります。この特定のページまたはサイト全体でアンロードできます。

未使用のスクリプトを削除したら、[更新]をクリックします。この後、キャッシュをクリアして、これらの変更をすぐに適用できます。

5.CSSとJavaScriptを縮小する

サイトからスクリプトを簡単に削除できますが、使用していないスクリプトのみを削除する必要があります。必要なCSSとJavaScriptについては、代わりにそれらを単純化することができます。

これを行う簡単な方法は、Autoptimizeプラグインをインストールすることです。これは、簡単なセットアッププロセスの後にCSSファイルとJavaScriptファイルを自動的に縮小できる無料のツールです。

インストール後、 [設定]→[自動最適化]に移動します。 [ JavaScriptオプション]で、[ JavaScriptコードの最適化]の横にあるチェックボックスをオンにできます。

次に、 CSSオプションについても同じことを行う必要があります。これらの設定をカスタマイズすることにより、ツールはWebサイト上の既存のCSSとJavaScriptを自動的に縮小します。

終了したら、変更を保存します。このプロセスの後にキャッシュを空にするオプションもあります。

6.JavaScriptの実行時間を遅らせる

JavaScriptをさらに最適化するために、JavaScriptの実行時間を遅らせることができます。これには、ユーザーがコンテンツを操作した後にのみJavaScriptをロードするようにブラウザーに指示することが含まれます。訪問者がページを下にスクロールするかボタンをクリックしない限り、これらのスクリプトは処理されません。

これを行うには、FlyingScriptsなどのプラグインを使用できます。このツールを使用すると、サイトに訪問者のアクティビティが発生するまでJavaScriptファイルの実行を遅らせることができます。

Flying Scriptsをアクティブにした後、 [設定]→[FlyingScripts]に移動します。これにより、プラグインの設定ページが開き、JavaScript遅延の実装を開始できます。

遅らせたいスクリプトを識別するキーワードを書くことから始めます。たとえば、GoogleTagManagerスクリプトに「gtag」を使用できます。

次に、タイムアウトを実装できます。基本的に、これは一定期間アクティビティがない場合にJavaScriptを実行します。タイマーは最大10秒まで設定できます。終了したら、[変更を保存]をクリックします。

7.コンテンツ配信ネットワークを実装します

最初の入力遅延を改善するためのもう1つの効果的なオプションは、コンテンツ配信ネットワーク（CDN）を使用することです。これは、世界中のユーザーにオンラインコンテンツを配信できる接続サーバーのグループです。

CDNを使用すると、サーバーとオンライン訪問者の間の距離を縮めることができます。これは、誰かがあなたのサイトにアクセスすると、その場所に最も近いサーバーからコンテンツが配信されるためです。 1つの場所にサーバーが1つしかない場合、海外のユーザーにデータを送信するのに長い時間がかかる可能性があります。

幸い、Jetpackを利用しているサイトにはすでに無料のCDNが付属しています。 Jetpack→設定→パフォーマンスに移動すると、SiteAcceleratorをオンにできます。

Jetpackは画像と静的ファイルを最適化します。他のCDNプロバイダーとは異なり、ファイルの制限はありません。さらに、追加の月額料金や複雑な管理プロセスについて心配する必要はありません。

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

これまで、First Input Delayがどのように機能し、スコアをどのように改善できるかを見てきました。それでは、FIDに関するいくつかの一般的な質問を見てみましょう。

WordPressサイトのFIDスコアを測定するにはどうすればよいですか？

Core Web Vitalsのツールを使用して、Webサイトの最初の入力遅延スコアを簡単に測定できます。 PageSpeed Insightsは、使いやすいオプションです。あなたがしなければならないのはあなたのサイトのURLを入力することだけであり、ツールはあなたのサイトのパフォーマンスに関する詳細なレポートを生成します。

Google検索コンソールは非常によく似た機能を果たします。 Webサイトを所有していることを確認したら、実際の訪問者データに基づいてFIDレポートを表示できます。

灯台も使用できます。このツールは、サイトの合計ブロッキング時間（TBT）を提供します。これは実際の訪問者からの結果を表示しませんが、ページの応答性をよりよく理解することができます。

良いFIDスコアとは何ですか？

簡単に言えば、サイトは次の3つのスコアのいずれかに分類されます。

良い：100ミリ秒以下
改善が必要：100msから300msの範囲
悪い：300ms以上

FIDスコアを測定した後、100ミリ秒を超える結果には、いくつかの調整が必要になります。

FIDスコアを簡単に最適化するにはどうすればよいですか？

Webサイトのスクリプトを最適化することで、FIDスコアを向上させることができます。通常、複雑なJavaScriptファイルとCSSファイルは、ブラウザがそれらを処理するまで読み込みを停止するように促します。スクリプトを削除、延期、または縮小することで、サイトの速度を上げることができます。

このプロセスにはさまざまなツールを使用できますが、JetpackBoostは複数のソリューションを一度に実装するのに役立ちます。このプラグインを使用すると、CSS構造を最適化し、必須ではないJavaScriptを延期できます。

第一印象を改善する

新しい訪問者があなたのウェブサイトと対話するとき、彼らは彼らのブラウザが迅速に応答することを期待します。サイトのFirstInputDelay（FID）が高い場合、ユーザーがコンテンツを読まずにページを離れる可能性があります。サイトの応答時間に焦点を当てることで、ユーザーエクスペリエンスを向上させ、より多くの訪問者を維持できます。

JavaScriptとCSSのコーディングが重くて非効率的であるため、WebサイトのFIDスコアが低くなる可能性があります。幸い、GoogleのPageSpeed Insightsなどのツールを使用して、これらの問題を簡単に特定できます。次に、Jetpack Boostなどのプラグインをインストールして、CSSとJavaScriptを縮小または延期できます。