GoogleのINPスコアとは何ですか？WordPressで改善する方法

GoogleがINP（Interaction to Next Paint）のような新しいランキング要因を導入すると、圧倒されるのは簡単です。この技術用語がWordPressサイトにとって何を意味し、今何をすべきか疑問に思っているでしょう。

私たちは完全に理解しています。10年以上にわたるWordPressサイトの最適化の経験を持つ私たちのチームは、この新しいスコアを改善するための最も効果的な方法を見つけるためにすぐにテストを開始しました。

このトピックを調査した後、複雑な専門用語をすべてシンプルで実行可能なステップに翻訳しました。私たちは、現在自分たちのウェブサイトポートフォリオ全体で使用している実績のある方法を共有できることを嬉しく思っています。

このガイドでは、INPとは何か、そして開発者でなくてもスコアを向上させる方法を詳しく説明します。

このガイドで取り上げるトピックの簡単な概要を以下に示します。

1. Google Core Web Vitals とは？
2. Google INPとは？
3. GoogleはなぜFIDメトリックをINPに変更したのですか？
4. WordPressでGoogle INPスコアを測定する方法
5. WordPressでGoogle INPスコアを改善する方法
6. ウェブサイト所有者がINPのためにサイトを最適化する方法
7. 開発者がINPのためにコードを最適化する方法
8. 開発者向けの優れたJavaScriptコーディングプラクティスの例
9. Google INPに関するよくある質問
10. WordPressのパフォーマンスを向上させるための専門家ガイド

Google Core Web Vitals とは？

Googleコアウェブバイタルは、Googleが全体的なユーザーエクスペリエンスにとって重要と考えるウェブサイトのパフォーマンス指標です。これらのウェブバイタルスコアは、Googleの全体的なページエクスペリエンススコアの一部であり、SEOランキングに影響を与えます。

これらの指標は、WordPressウェブサイト が高速に読み込まれたとしても、完全に機能しているとは限らないため役立ちます。ページが読み込まれたとしても、訪問者がやりたいことをできなかったり、必要な情報にアクセスできなかったりする可能性があります。

コアウェブバイタルは、この目的のために設計されています。ウェブサイトの読み込み速度、表示速度、ユーザーが利用できるようになるまでの時間を測定できます。

以前は、Googleは3つの品質テストを使用していました。

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)

これらのテストの詳細については、WordPressのCore Web Vitalsを最適化する方法に関する究極のガイドをご覧ください。

しかし、Googleは2024年3月にFIDをINP（Interaction to Next Paint）と呼ばれる新しいテストに置き換えました。他の2つのテストは引き続き使用されます。

INPとは何か、そしてなぜGoogleがそれに切り替えたのかを見てみましょう。

Google INPとは？

INPは「Interaction to Next Paint」の略です。これは、ウェブサイトでの遅延を引き起こすユーザーインタラクションを測定する新しいGoogle Core Web Vitalsメトリックです。

INPテストは、ユーザーがウェブサイト上の何かをクリックするなどの操作をしてから、コンテンツが視覚的に更新されるまでの時間を測定します。この視覚的な更新は「次のペイント」と呼ばれます。

例えば、ユーザーがサイト上でお問い合わせフォームを送信したり、ボタンをクリックしたり、ライトボックスで開く画像を選択したりすることがあります。INPテストでは、ユーザーがこれらの操作を実行してから、実際にウェブサイトで更新されたコンテンツが表示されるまでの時間を測定します。

Googleテストは、ウェブサイトでのほとんどのユーザーインタラクションの期間に基づいて単一のINPスコアを算出します。スコアは、ウェブサイトが視覚的に更新されるのにかかる時間によって、「Good」、「Needs Improvement」、「Poor」のいずれかになります。

GoogleはなぜFIDメトリックをINPに変更したのですか？

古いFIDテストは、ページが読み込まれた後に、マウスのクリックやキーボードの入力など、ユーザーの最初の入力にウェブサイトがどれだけ速く応答するかを測定していました。これは、ユーザーからの最初の入力と、ウェブサイトがその入力に応答を開始するまでの時間を測定することで行われます。

言い換えれば、ウェブサイトが最初に読み込まれたときの応答性と、実際のユーザーに与えた最初の印象を測定していました。

しかし、この指標は期待したほど役立ちませんでした。FIDテストには2つの制限がありました。

1. 最初のユーザーインタラクションのみを測定し、すべてのインタラクションを測定したわけではありませんでした。
2. これは、ユーザーが実際に画面上の視覚的なフィードバックを確認できる時点ではなく、ウェブサイトがインタラクションの処理を開始する時点までしか測定されませんでした。

そのため、Googleはウェブページの全体的な応答性をより完全に把握できるようにテストを変更しました。INPは、ユーザーがページに滞在している間、離れるまでの全時間を測定します。

WordPressでGoogle INPスコアを測定する方法

Google Core Web Vitalsのスコアをテストする最も簡単な方法は、 PageSpeed Insights ツールを使用することです。テストしたいURLを入力し、「分析」ボタンをクリックするだけです。

ツールは数秒間ウェブページを分析し、テスト結果を表示します。

これで、他のGoogleコアウェブバイタルに加えて、ページのInteraction to Next Paint（INP）スコアも表示されるようになります。

モバイルユーザーとデスクトップユーザーではスコアが異なります。

上のスクリーンショットでは、WPBeginnerでこのウェブページを閲覧しているデスクトップユーザーのINPスコアが47ミリ秒であることがわかります。緑色のドットは、これが良いスコアであることを意味します。

自分のサイトのスコアを見ることができるようになると、おそらく他のウェブサイトと比較してどうなのか、改善が必要なのか疑問に思うでしょう。

Googleは、INPスコアの解釈に関するいくつかのガイドラインを提供しています。

• 200ミリ秒未満 – 良好な応答性
• 200〜500ミリ秒 – 改善が必要
• 500ミリ秒未満 – 反応性が低い

モバイルユーザーとデスクトップユーザーの両方のスコアを確認し、良好な応答性を目指してください。

その後、以下のセクションのガイドラインに従うことで、INPスコアを改善できます。

ケーススタディ：Awesome Motiveのウェブサイトで遅いインタラクションを見つける

しかし、その前にケーススタディを見ておくと役立つかもしれません。私たちは、All in One SEO、MonsterInsights、WPFormsを含む自社ブランドサイトでINPスコアの測定を開始しました。

私たちのチームがウェブサイトのINPスコアをチェックしたところ、最初の結果では、最も人気のあるページの改善が必要であることが示されました。

Chrome User Experience (CrUX) ダッシュボードを使用すると、次のことがわかりました。

• セッションの80%が「良好」と評価されました
• セッションの12%が「Needs Improvement」と評価されました
• セッションの8%が「Poor」と評価されました

PageSpeed Insightsレポートは全体的なINPスコアを提供しますが、実際のユーザーにとって遅延を引き起こしている特定のボタンやフォームフィールドが何であるかはわかりません。それを知るには、実際の訪問セッションからのデータを分析する他のツールを使用して、もう少し深く掘り下げる必要があります。

これは、次にINPスコアが低いページで遅いインタラクションを見つけるために、独自のテストを実行する必要があることを意味します。これは詳細で高度なタスクであり、開発者が行うのが最適です。

改善が必要な各ページに移動し、実際のクリック、タップ、キー入力で各インタラクションをテストすることで行われます。これらは、ツールを使用してタイミングを測定し、評価する必要があります。

Chrome Developers Blogには、Chrome Web Vitals拡張機能や、DevToolsのLighthouseパネルの新しいタイムスパンモードなど、テストに使用できる多くのツールがリストされています。また、Web Vitals拡張機能を使用してデバッグする方法に関するGoogleの記事も参照できます。

評価の低いセッションは、遅いデバイスまたは接続で行われた可能性が高いことに注意することが重要です。これは、テスト中にブラウザの速度をスロットリングすることが推奨されることを意味します。そうしないと、遅いインタラクションを見逃す可能性があります。

これは、Chromeの要素を検証機能を使用して、表示 » 開発 » 要素を検証に移動することで実行できます。「ネットワーク」タブに切り替え、ドロップダウンメニューからスロットリングオプションを選択します。

多くのユーザーはモバイルデバイスを使用しているか、インターネット接続が完璧ではない可能性があるため、遅い接続でテストすることが重要です。高速なオフィスコンピューターでは見えない問題が、彼らにとっては大きな不満の原因となる可能性があります。

ページの INP スコアを見つけたら、このチュートリアルの次のセクションのヒントを使用して改善できます。

WordPressでGoogle INPスコアを改善する方法

INPスコアの最適化作業のほとんどは開発者によって行われる必要があります。これには、ウェブサイトで使用しているテーマやプラグインの作成者、および実行しているカスタムJavaScriptの開発者が含まれます。

それは、INPスコアが主にウェブサイトでのJavaScriptインタラクションの実行に必要な時間に関連しているためです。

たとえば、ユーザーがボタンをクリックすると、ボタンをクリックすることで期待される関数を実行するためにJavaScriptコードが実行されます。このコードはユーザーのコンピューターにダウンロードされ、Webブラウザで実行されます。

INPスコアを最適化するには、JavaScriptのユーザーインタラクション中に発生する遅延を削減する必要があります。この遅延には3つの要素があります。

1. 入力遅延。これは、ウェブサイトがそのページのバックグラウンドタスクを待機しており、イベントハンドラが実行されない場合に発生します。
2. 処理時間。これは、JavaScriptでイベントハンドラを実行するために必要な時間です。
3. プレゼンテーション遅延。これは、ページを再計算して画面にページコンテンツを描画するために必要な時間です。

ウェブサイトの所有者として、最初の遅延と3番目の遅延を改善するために実行できるステップがあります。次のセクションでその方法を説明します。

ただし、INPスコアを実際に改善するには、コード自体の処理時間である2番目の遅延を改善する必要があります。これはご自身で行えることではありません。

WordPressテーマ、プラグイン、カスタムJavaScriptの開発者は、ユーザーに即座にフィードバックを提供するために、コードを最適化する必要があるかもしれません。良いニュースは、2024年3月の締め切りに対応するために、彼らがすでにこれに取り組んでいる可能性が高いということです。

この記事の後半では、開発者向けの具体的なヒントを例とともにご紹介します。

ウェブサイト所有者がINPのためにサイトを最適化する方法

ウェブサイトのINPスコアに最も大きな影響を与えるのは開発者によるコードの最適化ですが、ウェブサイトの所有者ができることもいくつかあります。

特に、サイトのバックグラウンドプロセスを最適化することで、ユーザーのマウスのクリックやキーストロークが可能な限り早く認識されるようにすることができます。また、入力への応答が画面に可能な限り早く表示されるようにすることもできます。

これらの手順は、遅いインタラクションを引き起こしているコードを直接書き換えるものではないかもしれませんが、サイト全体の健全性を向上させます。より高速で軽量なサイトは、ブラウザがユーザーインタラクションを迅速に処理するためのリソースをより多く提供するため、INPスコアを確実に向上させることができます。

そのために実行できる手順をいくつか紹介します。

1. WordPressの最新バージョンを実行していることを確認してください

まず最初に行うべきことは、WordPressの最新バージョンを実行していることを確認することです。

これは、WordPressのバージョン6.2および6.3で大幅なパフォーマンス改善が導入されたためです。これにより、サーバー側とクライアント側の両方でウェブサイトのパフォーマンスが向上し、INPスコアが改善されます。

詳細な手順については、WordPressを安全にアップデートする方法に関するガイドをご覧ください。

2. WordPressのバックグラウンドプロセスを最適化する

バックグラウンドプロセスは、バックグラウンドで実行されるWordPressのスケジュールされたタスクです。WordPressのアップデートの確認、スケジュールされた投稿の公開、ウェブサイトのバックアップなどが含まれる場合があります。

ウェブサイトがこれらのバックグラウンドタスクの実行で忙しすぎると、ユーザーがマウスをクリックしたりキーを押したりしたことをすぐに認識できず、INPスコアが悪化する可能性があります。

バックグラウンドスクリプトやプラグインの設定を変更して、それらが実行する作業量を減らし、ウェブサイトへの負荷を軽減できる場合があります。そうでない場合は、バックグラウンドで実行し続けるのではなく、必要なときにのみ実行できる場合があります。

詳細な手順については、WordPressの速度とパフォーマンスを向上させる方法に関する究極のガイドの「バックグラウンドプロセスの最適化」セクションを参照してください。

3. PageSpeed Insightsのパフォーマンスに関する推奨事項を確認する

ウェブサイトでPageSpeed Insightsのテストを実行した後、テスト結果のパフォーマンスセクションまでスクロールできます。 

ここでは、サイトのパフォーマンスを向上させるためのいくつかの機会と、アドバイスに従った場合の推定時間短縮効果を見つけることができます。

例えば、レンダリングをブロックするリソースを削除するという推奨事項が表示される場合があります。これは、WordPressでレンダリングをブロックするJavaScriptとCSSを修正する方法に関するガイドに従うことで実行できます。

JavaScript の未使用分を削減するよう推奨されることもあります。これは、最高のWordPressキャッシュプラグインの多く、例えばWP Rocketなどに設定項目があります。

4. WordPressでJavaScriptを最小化する

JavaScriptは、実行される前にユーザーのコンピューターにダウンロードされる必要があります。JavaScriptファイルを可能な限り小さくすることで、パフォーマンスをわずかに向上させることができます。

JavaScriptを最小化すると、ソースコードから空白、改行、不要な文字を削除することでファイルが小さくなります。

パフォーマンスに劇的な影響はありませんが、INPスコアからさらに数ミリ秒を削りたい場合は、価値があるかもしれません。

その方法については、WordPressでCSSおよびJavaScriptファイルを最小化する方法に関するガイドをご覧ください。

開発者がINPのためにコードを最適化する方法

開発者であれば、INPスコアの最大の向上はコードの最適化から得られます。いくつかできることがあります。

1. ユーザー入力をすぐに視覚的に認識する

コードのINPスコアを最適化する際に最も大きな違いをもたらすのは、すべてのユーザー入力に対してすぐに視覚的なフィードバックを提供する必要があるということです。

ユーザーは、自分の入力が認識され、それに対してアクションが取られていることをすぐに確認できるはずです。これにより、コードはユーザーに対してより応答性が高く感じられ、優れたINPスコアにつながります。

いくつかの例を挙げます。

• ユーザーが要素をクリックした場合、その要素がクリックされたことを示すものを表示する必要があります。
• ユーザーがフォームを送信した場合、メッセージやスピナーなど、それを認識するものを即座に表示する必要があります。
• ユーザーが画像をライトボックスで開くためにクリックした場合、画像が読み込まれるのを待つだけではいけません。代わりに、すぐにデモ画像またはスピナーを表示する必要があります。その後、画像が読み込まれたら、ライトボックスで表示できます。

何よりも、これがINPスコアを改善します。特に、ユーザー入力に応答して重いJavaScript処理を行う必要がある場合はそうです。

タスクを開始する前にUIを更新するだけです。

その後、setTimeoutコールバックを使用して、重い作業を少し遅らせて実行するようにスケジュールできます。これにより、ブラウザは集中的なタスクで忙しくなる前に、画面を更新する時間ができます。

それがうまくいったら、コードを最適化するためにさらにいくつかのことができます。

2.ブラウザが最も時間を費やす場所を最適化する

次に、ブラウザが最も時間を費やしている場所を調査し、それらの部分を最適化する必要があります。

Google Chromeで表示 » 開発 » 開発者ツール » パフォーマンスに移動すると、次のペイントをブロックしているJavaScript関数やイベントハンドラーを検査できます。

その知識があれば、ユーザーインタラクション後の次のペイントまでの時間を短縮するために最適化できることがわかります。

3. レイアウトを減らす

場合によっては、CPUアクティビティの多くがレイアウト作業で占められています。

このような場合は、コードがブラウザにページレイアウトの再計算を繰り返し引き起こしていないか確認する必要があります。これはしばしば「レイアウトスラッシング」と呼ばれ、このガイドの後半で回避する方法の例を示します。

4. 画面最上部に表示されるコンテンツを優先表示する

ページのコンテンツのレンダリングが遅い場合、INPスコアに影響が出る可能性があります。

次のフレームをより迅速に配信するために、最初に重要な「アバブ・ザ・フォールド」コンテンツのみを表示することを検討できます。

開発者向けの優れたJavaScriptコーディングプラクティスの例

コードの品質が低いとINPスコアが悪くなる例をいくつか示すと役立つかもしれません。

コードペンに、実際に試せるサンプルプロジェクトを用意しました。サンプルコードを確認し、短い説明を読んで、ボタンをクリックしてその違いを確認できます。

こちらは、そのCodePenプロジェクトのアニメーションです。最適化されていないサンプルコードでは、INPスコアが965ミリ秒と低くなることがわかります。ボタンのクリックはユーザーにとって遅延を感じさせるものになります。

対照的に、最適化されたコードはボタンのテキストを即座に更新し、可能な限り最高のINPスコアをもたらします。

INPスコアを最適化するためにコードを改善する方法の4つの例をご覧ください。

例1：重いCPUタスクを実行する前に画面を更新する

CPU負荷の高いタスクには時間がかかり、優れたコードを書かないとINPスコアが悪くなる可能性があります。この場合、タスクを実行する前に画面を更新するのが最善です。

ここに、重いCPUタスクの後にユーザーインターフェースが更新される悪い例があります。これにより、INPが高くなります。

// Bad example
button.addEventListener('click', () => {
  // Heavy CPU task
  for (let i = 0; i < 10000000; i++) {
    console.log(i);
  }
  // UI update
  button.textContent = 'Clicked!';});

この改善された例では、ボタンをクリックするとユーザーインターフェースが即座に更新されます。

その後、重いCPUタスクはsetTimeoutコールバックに移動されます。

// Better example
button.addEventListener('click', () => {
  // UI update
  button.textContent = 'Processing...';

  // Heavy CPU task
  setTimeout(() => {
    for (let i = 0; i < 10000000; i++)
 {
      console.log(i);
    }
    // Final UI update
    button.textContent = 'Done!';
  }, 0);
});

これにより、ブラウザは遅いタスクを開始する前に画面を更新できるため、良好なINPスコアが得られます。

例2：緊急でない処理をスケジュールする

また、ユーザーが期待している応答を遅延させる可能性のあるスクリプトで、緊急または必須でない作業を実行しないようにする必要があります。

まず、ユーザーの入力をすぐに認識するためにページを更新する必要があります。その後、フレームの終わりに空き時間があるとき、またはユーザーが非アクティブなときに残りのスクリプトをスケジュールするためにrequestIdleCallbackを使用できます。

例を挙げます。

button.addEventListener('click', () => {
  // Immediate UI update
  button.textContent = 'Processing...';

  // Non-essential processing  window.requestIdleCallback(() => {
    // Perform non-essential processing here...    button.textContent = 'Done!';
  });
});

これにより、ウェブページがユーザーに対してより応答性が高くなり、INPスコアが向上します。

例3: 次のペイントの前に実行される関数をスケジュールする

また、requestAnimationFrame を使用して、次の再描画の前に実行する関数をスケジュールすることもできます。

button.addEventListener('click', () => {
  // Immediate UI update
  button.textContent = 'Processing...';

  // Visual update
  window.requestAnimationFrame(() => {
    // Perform visual update here...    button.style.backgroundColor = 'green';    button.textContent = 'Done!';
  });
});

これは、ユーザーの操作に応じたアニメーションや視覚的な更新に役立ちます。

再度、ユーザーの入力を即座に認識することで、フィードバックを与えるべきです。

例4：レイアウトのフラッシングを避ける

レイアウトのスラッシングは、DOM（Document Object Model）の読み書きを繰り返すことで発生し、ブラウザがレイアウトを複数回再計算する原因となります。

レイアウトスラッシングの例を次に示します。

// Bad example
elements.forEach(element => {
  const height = element.offsetHeight; // read  element.style.height = height + 'px'; // write});

これは、読み込みと書き込みをバッチ処理することで回避できます。

こちらの方が良い例です。

// Good example
const heights = elements.map(element => element.offsetHeight); // batched read
elements.forEach((element, index) => {
  element.style.height = heights[index] + 'px'; // batched write
});

Google INPに関するよくある質問

INPのような技術的なトピックは多くの疑問を引き起こす可能性があることを理解しています。お役に立てるよう、読者からよく寄せられる質問に回答しました。

GoogleのInteraction to Next Paint（INP）とは？

Interaction to Next Paint（INP）は、ウェブサイトのユーザーインタラクションに対する全体的な応答性を測定するGoogleコアウェブバイタルメトリックです。ユーザーがページをクリック、タップ、またはタイピングしてから、画面に次の視覚的な更新が表示されるまでの時間を計算します。

これは、以前のFIDメトリックよりも広範なユーザーエクスペリエンスの視点を提供します。

GoogleはなぜFirst Input Delay (FID) をINPに置き換えたのか？

Googleは、ページの応答性をより包括的に測定できるため、FIDをINPに置き換えました。FIDは最初のインタラクションの遅延のみを測定していました。

対照的に、INPは訪問中のすべてのユーザーインタラクションのレイテンシを評価し、ユーザーエクスペリエンスのより完全な全体像を提供します。

良好なINPスコアとは？

Googleのガイドラインによると、良好なINPスコアは200ミリ秒以下です。200ミリ秒から500ミリ秒のスコアは「改善が必要」であり、500ミリ秒を超えるものは「応答性が低い」と見なされます。

WordPressでINPスコアを改善するには？

WordPressでINPスコアを改善するには、いくつかのステップがあります。ウェブサイトの所有者は、バックグラウンドプロセスを最適化し、JavaScriptを最小化し、サイトが最新の状態であることを確認できます。

開発者は、ローディングスピナーを表示するなど、ユーザーアクションに対する即時の視覚的フィードバックを提供するようにコードを最適化し、重いタスクを遅延させることで、大きな影響を与えることができます。

WordPressのパフォーマンスを向上させるための専門家ガイド

このチュートリアルが、WordPressでGoogle INPスコアを改善する方法を学ぶのに役立ったことを願っています。WordPressのパフォーマンス改善に関連する他の記事も参照することをお勧めします。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。