WordPressでCore Web Vitalsを最適化する方法（究極のガイド）

ウェブページがカタツムリのように遅く読み込まれたり、クリックしようとしたときにボタンが動いたりするイライラ感を、私たちは皆経験したことがあります。WPBeginnerでは、これらの小さな瞬間がユーザーエクスペリエンスに大きな違いをもたらすことを知っているので、サイトの速度にこだわっています。

GoogleがCore Web Vitalsを導入した際、これらのパフォーマンスの問題に名前を付けましたが、専門用語は圧倒されるように感じることがあります。コンピュータサイエンスの学位がなければSEOが低下するのではないかと心配になるかもしれません。

良いニュースは、優れたスコアを得るために開発者である必要はないということです。私たちはこの正確な最適化プロセスを自分たちで経験し、それをエッセンスにまで絞り込みました。

このガイドでは、WordPress サイトをより高速でスムーズにするための Core Web Vitals を改善するための、シンプルで実用的なステップを順を追って説明します。

このガイドで説明する内容の簡単な概要を以下に示します。

Google Core Web Vitals とは？

Google のコアウェブバイタルは、検索エンジンがウェブサイト全体のユーザーエクスペリエンスを測定するために使用する特定のパフォーマンス指標です。これらのスコアは、SEO ランキングに影響を与える可能性のある Google のページエクスペリエンス シグナルの一部です。

遅いウェブサイトを好む人は誰もいない、そしてそれはGoogleも例外ではありません。Core Web Vitalsは、あなたのサイトが訪問者にとってどれだけ早く表示され、インタラクティブで、安定するかを測定するのに役立ちます。

そのために、Googleは3つの主要なテストを使用します。

• Largest Contentful Paint (LCP)
• Interaction to Next Paint (INP)
• Cumulative Layout Shift (CLS)

これらのテストの名前は技術的に聞こえるかもしれませんが、測定している内容は理解しやすいものです。それぞれの仕組みを見てみましょう。

Largest Contentful Paint (LCP)

Largest Contentful Paint は、ページのメインコンテンツがユーザーにどれだけ早く表示されるかを測定します。これは、注目の画像、大きなテキストブロック、またはその他の目立つ要素である可能性があります。

ページ全体が速く読み込まれても、最も重要なコンテンツが最後に表示される場合、ユーザーは依然としてページが遅いと感じます。LCPは、この問題を特定して修正するのに役立ちます。

Interaction to Next Paint (INP)

Interaction to Next Paintは、ユーザーがサイトと対話した後、サイトが視覚的なフィードバックを提供するのにかかる時間を測定します。この対話は、クリック、タップ、キー入力などです。

たとえば、誰かが お問い合わせフォーム の「送信」ボタンをクリックしたとき、INP はそのアクションを認識して画面に視覚的な変化が生じるまでの時間を測定します。

Cumulative Layout Shift (CLS)

Cumulative Layout Shift は、読み込み中のページの視覚的な安定性を測定します。CLS スコアが低いということは、ページが表示される際に要素が画面上を飛び回っていることを意味します。

これは、ユーザーがボタンをクリックしようとしたときに、その上の広告や画像が読み込まれたために、ボタンが最後の瞬間に移動してしまう場合にイライラします。良いCLSスコアは、レイアウトが安定していて予測可能であることを意味します。

Google Core Web Vitalsスコアをテストする方法

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

結果は「Core Web Vitals アセスメント」セクションに表示されます。合格点は見出しの横に緑色で表示されます。

その下に、3つのバイタルの個別のスコアが表示されます。評価を通過するには、これらのターゲットを満たす必要があります。

• 最大コンテンツペイント（LCP）：2.5秒以下
• Interaction to Next Paint（INP）：200ミリ秒以下
• Cumulative Layout Shift (CLS): 0.1 以下

ウェブサイト全体のコアウェブバイタルを表示する方法

ウェブサイト全体の平均スコアを確認するには、Google Search ConsoleアカウントのCore Web Vitalsレポートを使用できます。

このレポートは、サイト上のどのURLが良いスコア、改善が必要なスコア、または悪いスコアを持っているかを示し、最適化の取り組みを優先順位付けできるようにします。

さらに詳細なレポートについては、Chromeブラウザに直接組み込まれているLighthouseテストを使用できます。ウェブサイトを開き、どこかを右クリックして、「検証」オプションを選択するだけです。

コアウェブバイタルが重要な理由

コアウェブバイタルは、ユーザーがウェブサイトをどのように体験するかを直接反映するため、重要です。これらは、単なる速度だけでなく、訪問者がコンテンツを実際にどれだけ早く表示し、操作できるかに焦点を当てています。

ある調査によると、ページの読み込み時間が1秒遅れると、コンバージョンが7%減少し、ページビューが11%減少する可能性があります。ユーザーエクスペリエンスが悪い、より高速なウェブサイトでも、最終的な収益には悪影響が出ています。

Core Web Vitalsの改善は、この問題に対処するのに役立ちます。ユーザーエクスペリエンスはGoogleの確認済みのSEOランキング要因であるため、良いスコアは競合他社に対して優位に立つことができます。

WordPressでCore Web Vitalsを改善する方法（7つのヒント）

WordPressでCore Web Vitalsのスコアを改善するのは、それほど難しくありません。いくつかの重要なパフォーマンス最適化のヒントに従えば、簡単にテストに合格できます。

1. WordPressホスティングの最適化

WordPress ホスティングプロバイダーは、ウェブサイトのパフォーマンスにおいて最も重要な役割を果たします。質の高いホストは WordPress 専用にサーバーを最適化しており、サイトに堅牢な基盤を提供します。

WPBeginnerでは、このまさにその理由でSiteGroundを使用しています。彼らはWordPress.orgによって公式に推奨されている数少ないホストの1つであり、そのパフォーマンスは優れています。

同社のプラットフォームはGoogle Cloud上で動作し、強力なSG Optimizerプラグインが含まれています。高度なキャッシュとパフォーマンスの調整はすべて自動的に処理されるため、当社のサイトが非常に高速である大きな理由となっています。

別のホスティングを使用している場合は、WP Rocket が最良の代替手段です。これは、他のプロジェクトで推奨している キャッシュプラグイン であり、Core Web Vitals スコアを向上させることをはるかに容易にします。

2. 最大コンテンツペイント（LCP）スコアの改善

前述したように、LCPは画面に最大のコンテンツ要素が表示されるまでの時間です。典型的なブログ記事では、これは多くの場合、アイキャッチ画像または記事のテキストです。

測定されている要素を確認するには、PageSpeed Insightsの結果を下にスクロールして、「Largest Contentful Paint element」タブを展開してください。

画像が大きい場合は、より小さいファイルに置き換えてみてください。画質を損なわずにウェブパフォーマンスのために画像を最適化する方法に関するガイドで詳細を確認できます。

3. Interaction to Next Paint (INP) スコアの改善

Interaction to Next Paint（INP）スコアは、ユーザーがサイト上の何かをクリックしてから視覚的な応答が表示されるまでの時間を測定します。ここで長い遅延があると、サイトが遅く応答性が低いと感じられる可能性があります。

例えば、訪問者がお問い合わせフォームに入力して「送信」ボタンをクリックしたと想像してみてください。当社のサイトでは、WPFormsを使用しています。これはスピードのために構築されており、遅延なく送信を処理するため、スムーズなエクスペリエンスが生まれます。

INPが低い主な原因は、ページの残りの部分よりも先に読み込まれるJavaScriptです。これを修正する最も簡単な方法は、WP Rocketのようなプラグインを使用することです。その設定方法を説明します。

まず、プラグインをインストールして有効化する必要があります。その後、設定 » WP Rocket に移動し、「ファイル最適化」タブに切り替えます。

下部までスクロールし、「JavaScriptを遅延読み込み」の横にあるチェックボックスをオンにします。変更を保存することを忘れないでください。

このシンプルな設定は、ウェブサイトに表示可能なコンテンツを最初に読み込み、JavaScript を待機するように指示します。この 1 つの変更で、INP スコアを劇的に改善できます。

4. Cumulative Layout Shift（CLS）スコアの改善

ページ上の要素が読み込み中に移動すると、CLSスコアが悪くなります。問題を引き起こしている要素を確認するには、PageSpeedレポートの「大きなレイアウトシフトを回避する」タブを展開してください。

これを防ぐには、画像、動画埋め込み、広告の寸法（幅と高さ）をブラウザに伝える必要があります。これにより、ブラウザは要素が読み込まれる前に、その要素のために適切な量のスペースを予約できます。

WordPressは自動的に画像の寸法を追加しますが、他のメディア埋め込みも確認する必要があります。ブラウザのインスペクトツールを使用して、要素に幅と高さの属性が定義されているか確認できます。

5. レンダリングブロック要素の排除

レンダリングブロック要素とは、通常JavaScriptやCSSのファイルで、ページの残りの部分が表示される前に読み込む必要があります。これにより、ページの知覚速度が低下し、Core Web Vitalsのスコアが悪化します。

PageSpeed Insights は、これらの問題のあるファイルを一覧表示します。これらは、Google Analytics や Facebook Pixel のようなプラグインやサードパーティ製ツールから発生することがよくあります。

これを手動で修正するのは初心者には難しい場合があります。コードに一切触れることなく、レンダリングブロックリソースを簡単に排除する方法についてのステップバイステップガイドがあります。

6. WordPress で画像のサイズを適切に設定する

不要に大きな画像をアップロードすることは、ウェブサイトを遅くする一般的な間違いです。高解像度の写真は読み込みに時間がかかり、ウェブ表示には必要ないことがよくあります。

これは特にモバイルユーザーにとって問題となります。テーマが画像を小さい画面に合わせて縮小しても、訪問者のブラウザは依然としてフルサイズのファイルをダウンロードする必要があります。

品質を損なうことなくWebパフォーマンスのために画像を最適化する方法について、詳細なガイドがあります。

7. CDNを使用してコアウェブバイタルスコアを改善する

CDN（Content Delivery Network）は、世界中の訪問者にとってサイトを高速化するサービスです。これは、静的ファイル（画像や CSS など）のコピーをさまざまな地理的な場所のサーバーに保存することによって行われます。

これにより、ユーザーは最も近いサーバーからファイルをダウンロードできるようになり、ロード時間が短縮されます。また、メインのホスティングサーバーへの負荷も大幅に軽減されます。

WPBeginnerでは、CloudflareのエンタープライズCDNを利用しています。これにより、速度が向上するだけでなく、毎日何百万ものスパムリクエストや悪意のある攻撃をブロックする強力なファイアウォールも提供されます。

ほとんどのビジネスにとって、Cloudflareの無料プランでさえ、優れたCDNサービスと基本的なファイアウォール保護を提供します。Core Web Vitalsスコアを改善する最も効果的な方法の1つです。

Core Web Vitalsに関するよくある質問

何千ものユーザーのウェブサイト高速化を支援してきた中で、Core Web Vitals に関する多くの質問を受けます。ここでは、最も一般的な質問に対する回答を紹介します。

質問: 3つのCore Web Vitalsとは何ですか？
回答: 3つの主要な指標は、読み込みパフォーマンスのためのLargest Contentful Paint (LCP)、ウェブサイトのインタラクティビティのためのInteraction to Next Paint (INP)、および視覚的な安定性のためのCumulative Layout Shift (CLS)です。

質問：良いコアウェブバイタルスコアとは何ですか？
回答：LCP は 2.5 秒以下、INP は 200 ミリ秒以下を目指すべきです。CLS については、0.1 以下が良好と見なされます。

質問: 優れたテーマはCore Web Vitalsを自動的に修正できますか？
回答: よくコーディングされたテーマは優れた基盤を提供しますが、万能薬ではありません。スコアは、ホスティングプロバイダー、画像のサイズ、および使用するプラグインの数にも大きく影響されます。

質問: Core Web Vitals スコアはどのくらいの頻度で確認すべきですか？
回答: スコアは少なくとも月に一度確認することをお勧めします。新しいプラグインをインストールしたり、テーマを変更したり、サイトに主要な新機能を追加したりした後にもテストすることをお勧めします。

WordPressのパフォーマンス測定と改善に関する専門家ガイド

コアウェブバイタルを最適化する方法がわかったので、WordPressのパフォーマンスの測定と改善に関連する他の記事もご覧になりたいかもしれません。

• WordPressの速度とパフォーマンスを向上させるための究極のガイド
• WooCommerceのパフォーマンスを高速化する方法
• ウェブサイトのスピードテストを適切に実行する方法（最適なツール）
• WordPressウェブサイトのストレステスト方法
• GoogleのINPスコアとは何ですか？WordPressで改善する方法
• GTmetrixプラグインを使用してWordPressサイトのパフォーマンスを改善する方法
• 最速のWordPressホスティング（パフォーマンステスト）

このガイドがWordPressのCore Web Vitalsを最適化する方法を学ぶのに役立ったことを願っています。ユーザーエクスペリエンスのもう1つの重要な部分はセキュリティです。そのため、サイトを保護するために、WordPressセキュリティチェックリストに従うことをお勧めします。

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