WordPressのコアウェブバイタルを最適化する方法（アルティメットガイド）

誰も、読み込みが遅かったり、リンクやボタンをクリックしたときの反応が遅いサイトを訪れたいとは思いません。そのため、GoogleのCore Web Vitalsを使ってWPBeginnerサイトのパフォーマンスを測定しています。これは、サイトのユーザー体験の成績表のようなものです。

Googleは、ページの読み込みの速さ、インタラクションへの反応のスムーズさ、画面上でのコンテンツの安定性をテストします。これらのシグナルはユーザーエクスペリエンスとSEOにとって重要です。

Core Web VitalsをWordPressに最適化するために、技術的な専門家である必要はありません。このガイドでは、より速く、よりスムーズで、より楽しいユーザーエクスペリエンスのためにWordPressサイトを最適化するためのシンプルで実践的な手順をご紹介します。

このガイドで取り上げる内容を簡単に紹介しよう：

Googleコアウェブバイタルとは？

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

実際、Googleを含め、誰も読み込みの遅いサイトを好まない。

WordPressサイトの読み込みが速くても、ユーザーがやりたいことを実行したり、必要な情報にアクセスしたりするための機能が十分でない可能性があります。

コアウェブバイタルは、サイトのロード時間、表示時間、ユーザーへの提供時間を測定するのに役立ちます。

そのために、Googleは3つの品質テストを行っている：

• 最大コンテンツペイント（LCP）
• インタラクション・トゥ・ネクスト・ペイント（INP）
• 累積レイアウトシフト（CLS）

注：2024年3月まで、GoogleはINPの代わりにFID（First Input Delay）テストを使用していました。このスコアは現在も多くのWordPressのスピードテストやパフォーマンステストで報告されています。

さて、これらのテストの名前は専門的に聞こえるかもしれないが、何をするのかは簡単に理解できる。

各コア・ウェブ・バイタル・テストの仕組み、測定項目、スコアアップの方法を見てみましょう。

最大コンテンツペイント（LCP）

Largest Contentful Paint (LCP)は、メインコンテンツ（それが画像であれ、投稿であれ、説明であれ）がユーザーにどれだけ早く見えるようになるかを調べます。

例えば、サイトの読み込みが速くても、最大のコンテンツが他のページほど素早く画面に表示されないことがあります。

他のスピードテストツールでは高得点が出ますが、ユーザーから見るとページは遅いままです。

Googleがウェブ・バイタル・スコアの一部としてLCPを測定するのはこのためで、サイトオーナーはより明確に理解することができる。

インタラクション・トゥ・ネクスト・ペイント（INP）

インタラクション・トゥ・ネクストペイント（INP）は、ユーザーが何かをクリックするなど、サイトとのインタラクションに応じてサイトが視覚的に更新されるまでの時間を測定します。この視覚的更新は「次のペイント」と呼ばれます。

わかりやすく言うと、ユーザーがお問い合わせフォームに入力して「送信」ボタンをクリックする様子を想像してみましょう。INPは、ユーザーがこれらのインタラクションを実行してから、実際にサイト上で更新されたコンテンツを目にするまでの時間を測定します。

累積レイアウトシフト（CLS）

累積レイアウトシフト（CLS）は、サイトが視覚的に安定するまでの時間を測定します。

サイトが読み込まれる際、一部の要素は他の要素よりも読み込みに時間がかかります。この間、サイトのコンテンツが画面上で動き続けることがあります。

例えば、ユーザーがモバイル端末で段落を読んでいるときに、その上に動画の埋め込みが読み込まれると、コンテンツ全体が下に移動してしまう。

これは、ユーザーがお買い物カゴに商品を追加するなどのアクションを実行しようとしているときに、他の項目がページ上を移動しているためにボタンが下にずれてしまうと、本当にイライラすることになります。

Googleコアウェブバイタルスコアのテスト方法

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

コア・バイタルの結果は、「コア・ウェブ・バイタル・アセスメント」と題されたセクションの下に表示されます。

あなたのサイトが審査に合格した場合、見出しの横に緑色で表示されます。

下の表では、3つのコア・バイタルの実際のスコアと、その他の注目すべき指標を表示することができます。各項目について、コアウェブバイタルのテストに合格するために必要な時間は以下の通りです。

• 最大コンテンツペイント（LCP）：2.5秒以下
• 次のペイントまでのインターアクション（INP）：200ミリ秒以下
• 累積レイアウトシフト（CLS）：0.1以下

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

Page Speed Insightsツールでは、個別のページをチェックすることができます。チェックするページがドメイン名のルートである場合は、「Origin」タブをクリックすることもできます。

このオリジンから配信されたすべてのページのスコアが表示されます。

しかし、本当に深く掘り下げるには、Google Search Consoleのダッシュボードからコアウェブバイタルレポートにアクセスすることもできます。

これにより、サイト上のURLのいくつがテストに合格したのか、どのURLに改善が必要なのか、どのページのスコアが低いのかを確認することができる。

コアウェブバイタルのさらに詳細なレポートを取得するには、Web.dev MeasureツールにアクセスしてLighthouseスピードテストを使用するか、Chromeブラウザー内のビルトインテストを使用します。

Chromeでサイトを開き、画面のどこかを右クリックし、「表示オプション」を選択するだけです。タブの中に「Lighthouse」という設定があります。

その後、「ジェネレータ・レポート」ボタンをクリックする。

なぜコアウェブ・バイタルが重要なのか？

コアウェブバイタルが重要なのは、ユーザーにとってのサイトのパフォーマンスを反映するからです。サイトの読み込みの速さだけでなく、ユーザーがどれだけ早く実際に利用できるかに重点を置いています。

最近の調査によると、ページの読み込み時間が1秒遅れると、コンバージョンが7％減少し、ページ表示が11％減少し、顧客満足度が16％低下すると言われています。

そのため、サイトのスピードとパフォーマンスを最適化することが非常に重要なのです。しかし、ほとんどのパフォーマンス測定ツールは、ユーザーエクスペリエンスの質をあまり考慮していません。

ユーザーエクスペリエンスが低いまま高速化されたサイトは、コンバージョンやページ表示の減少、顧客満足度の低下を招いています。コアウェブバイタルを改善することで、それを改善することができます。

ユーザーエクスペリエンスもSEOランキングの重要な要素である。2021年5月以降、Google検索アルゴリズムはページ体験をランキング要因の1つに含めている。

とはいえ、コアウェブバイタルを簡単に改善し、サイトでより良いユーザー体験を提供する方法を見てみましょう。

WordPressでコアWebバイタルを向上させる方法（7つのヒント）

WordPressでCore Web Vitalsのスコアを向上させることはそれほど難しいことではありません。パフォーマンスの最適化に欠かせないいくつかのヒントを使えば、Core Web Vitalsのスコアを簡単にクリアすることができます。

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

WordPressホスティングサービス会社は、サイトのパフォーマンスにおいて最も重要な権限グループを担っています。

WordPress用にサーバーを最適化することで、サイト構築のための強固なプラットフォームを提供します。

高性能なサイトを作るにはSiteGroundの利用をお勧めします。WPBeginnerのサイトではSiteGroundを使用しています。

お客様のサイトに必要なパフォーマンスを向上させるため、SiteGroundは超高速PHPとともにGoogle Cloud Platformをサーバーに採用しています。

彼らのSG Optimizerプラグインは、100万以上のサイトで使用されています。このプラグインは自動的にパフォーマンスを向上させ、ビルトインキャッシュを有効にします。

SGオプティマイザープラグインは、SiteGroundホスティングサービスアカウントでのみ動作し、これらのパフォーマンスの最適化は、最も低いオプションを含むすべてのプランで利用可能であることに注意することが重要です。

他のWordPressホスティングサービスを使用している場合は、より良いCore Web Vitalsスコアを達成するために、いくつかの他のツールとともにWP Rocketを使用することをお勧めします。

WP Rocketは、市場で最高のWordPressキャッシュプラグインです。サーバー管理の技術的な詳細に入ることなく、WordPressサイトに簡単にキャッシュを設定することができます。

2.LCP（Largest Content Paintful）スコアの向上

前述したように、LCP（Largest Content Paintful）は文字通り、ページのビューポート内で最大のコンテンツ部分です。例えば、WordPressのブログ投稿では、アイキャッチ画像や投稿本文がこれにあたります。

このコンテンツの読み込みが早ければ早いほど、あなたのLCPスコアは高くなる。

テストでは、どのコンテンツが最も大きいと判断されたのでしょうか？テスト結果までスクロールダウンし、「Largest Contentful Paint element」タブを展開する必要があります。

LCPスコアに考慮された要素が表示されます。大きな画像であれば、小さな画像に置き換えるか、ファイルサイズと画質の低い画像に置き換えてみてください。ウェブパフォーマンスのために画像を最適化する方法については、こちらのガイドをご覧ください。

テキストであれば、段落や見出しに分割してみるとよい。

3.次の塗装までのインターアクション（INP）スコアの改善

Interaction to First Paintスコアは、ユーザーがサイト上で何かをクリックしてから結果が表示されるまでの時間を測定します。

それを改善するための最も重要なヒントは、より良いウェブホスティングサービス、あるいはマネージドWordPressホスティングプラットフォームを使用することです。

FIDスコアを向上させるもう一つの簡単な方法は、WP Rocketのようなキャッシュプラグインを使用することです。これは、ファイル配信を最適化することができるビルトイン機能が付属しています。

まず、WP Rocketプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

その後、設定 ” WP Rocketページに移動し、’ファイル最適化’タブに切り替えます。

ページを一番下までスクロールし、「Load JavaScript deferred」オプションの横にあるボックスにチェックを入れる。

変更を保存するために「変更を保存」ボタンをクリックすることを忘れないでください。

JavaScriptを遅延させることで、JavaScriptのロードを待たずにサイトをロードすることができます。これにより、JavaScriptが原因と思われるページのInteraction to First Paint (INP)スコアが向上します。

詳しくは、WordPressでGoogleのINPスコアを向上させる方法をご覧ください。

4.累積レイアウトシフト（CLS）スコアの向上

累積レイアウトシフト（CLS）スコアは、ウェブページ上のさまざまな要素の読み込みが遅く、画面上の他の要素が動いてしまう場合に影響を受けます。

ページスピードインサイトの結果で「大きなレイアウトシフトを避ける」タブを展開することで、どの要素がCLSスコアに影響を与えているかを表示できます。

これにより、ページ読み込み時に最もレイアウトシフトを引き起こしている要素が表示されます。

他の項目が読み込まれてもページの視覚的レイアウトがずれないようにするには、画像、動画の埋め込み、Google Adsenseなどの広告などの要素の寸法（幅と高さ）をブラウザーに伝える必要があります。

WordPressは、追加した画像に自動的に高さと幅の属性を追加します。しかし、他のメディア、特に埋め込みメディアはすべてheight属性とwidth属性がついていることを確認してください。

その一つの方法は、インスペクトツールを使うことだ。ブラウザー上で右クリックし、「Inspect」を選択するだけで、開発者コンソールが開きます。

次に、さまざまなページ要素をポイント＆クリックすると、そのソースコードがハイライトされます。そこで、その要素にwidth属性とheight属性が定義されているかどうかを確認できます。

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

レンダーブロッキング要素とは、読み込みが遅く、他の要素の読み込みを先にブロックしている要素のことです。これは、サイト全体のコアウェブバイタルのスコアとユーザーエクスペリエンスに影響します。

Page Speed Insights の結果には、レンダリングをブロックしている要素が表示されます。これらは通常、WordPressプラグインやGoogleアナリティクス、Facebookピクセル、Google広告などのサードパーティツールによって追加されたJavaScriptやCSSファイルです。

しかし、このような要素のほとんどは、さまざまなプラグインやテーマによってプログラム的にサイトに追加されます。そのため、初心者のユーザーがそれらを削除したり、適切に読み込んだりするのは難しくなります。

WordPressのレンダリングブロック要素を、サイトのコードをいじらずに簡単に削除する方法をステップバイステップでご紹介します。

6.WordPressで画像を適切にサイズ調整する

コアウェブバイタルのスコアが低くなるもう一つの一般的な原因は、非常に大きな画像です。WordPressユーザーの多くは、サイトに高解像度の画像をアップロードしていますが、読み込みに時間がかかり、ほとんどの場合、必要ありません。

これはモバイル端末のユーザーにとってはさらに問題となる。レスポンシブWordPressテーマとWordPressは自動的に画像をユーザーのモバイル画面に合わせますが、それでも大きなファイルを読み込むことになります。

WordPressサイトの画像を、品質を落とさず、パフォーマンスに影響を与えることなく、適切に最適化する方法について詳しく解説しています。

7.コアウェブ・バイタル・スコア向上のためのサーバーへのCDNの利用

CDNまたはコンテンツデリバリーネットワークは、世界中の複数のサーバーからあなたのサイトの静的コンテンツを提供することを可能にするサードパーティのサービスです。

これにより、ユーザーは画像やCSSのような静的ファイルを最も近いサーバーからダウンロードすることができます。また、サイトの負荷を軽減し、他の要素の読み込みを継続することができます。

CDNサービスがビルトインされているSucuriのようなクラウドファイアウォールアプリを使用することができます。Sucuriはまた、悪意のあるリクエストやスパムリクエストをブロックし、サイトのリソースをさらに解放するのに役立ちます。

代替手段としてCloudflareの無料CDNを使用することもできます。基本的なファイアウォール保護とCDNサービスが付属しており、サイトのCore Web Vitalsスコアを向上させることができます。

WordPressのパフォーマンス測定と改善に関するエキスパートガイド

Core Web Vitalsを最適化する方法はお分かりいただけたと思いますので、WordPressのパフォーマンス測定と改善に関する他の投稿もご覧ください：

• WordPressのスピードとパフォーマンスを向上させる究極のガイド
• WooCommerceのパフォーマンスを高速化する方法
• サイトスピードテストの正しい実施方法（ベストツール）
• WordPressサイトのストレステスト方法
• GoogleのINPスコアとWordPressでの改善方法について
• WordPressサイトのパフォーマンスを向上させるGTmetrixプラグインの使い方
• WordPressサイトで測定すべき重要な指標
• 最速のWordPressホスティングサービス（パフォーマンステスト）
• クオリティを落とさずにウェブパフォーマンスのために画像を最適化する方法

Core Web VitalsをWordPressに最適化する方法について、このガイドがお役に立てば幸いです。良いユーザーエクスペリエンスのもう一つの重要な側面はセキュリティです。サイトのパフォーマンスがスパムやDDoS攻撃の影響を受けないように、WordPressのセキュリティチェックリストに従うことをお勧めします。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.