Table of Contents

Google と訪問者がサイトを気に入っているか、自信はありますか?確かめるには、優れた Core Web Vitals の計測ツールのいずれかを使って、ユーザーエクスペリエンスを測ってみるだけです。

今や、優れたコンテンツだけでは十分ではありません。Google は、サイトが速く、安定していて、スムーズであることも求めています。この全体的なエクスペリエンスを評価するために、Google は公式のランキングアルゴリズムの一部である3つの Core Web Vitals を使っています。

これらの Core Web Vitals のスコアが緑色の評価であれば、サイトが上位に表示される可能性はずっと高くなります。

この記事では、Core Web Vitals のパフォーマンスを計測し、監視する方法を紹介します。スコアが基準を満たしていないときに使える最適化ツールも取り上げるので、パフォーマンスの問題に対処し、検索順位への悪影響を防げます。

要約
Core Web Vitals は、読み込み速度、インタラクティブ性、視覚的な安定性に注目して、ウェブサイトでの実際のユーザーエクスペリエンスを測定します。Google はこれらの指標をサイトの順位付けに使っているため、指標を緑色の評価に保つことは SEO に欠かせません。GTmetrix や PageSpeed Insights などのツールを使えば、Core Web Vitals を簡単にテストし、サイトの足を引っ張っている要因を特定して、WP Rocket や Imagify などのプラグインで的を絞った最適化を適用できます。

要点まとめ

✅ Core Web Vitals を定期的に追跡し、SEO とパフォーマンスを長期にわたって高い水準に保ちましょう。

✅ シンセティックテストのデータと実際のユーザーのデータの両方を使いましょう。ラボテストは問題のデバッグに役立ち、フィールドデータは実際の訪問者がサイトをどう体験しているかを示します。

✅ シンプルな推奨事項とわかりやすいデスクトップ/モバイルのスコアで、Core Web Vitals のパフォーマンスの全体像をつかみたいなら、PageSpeed Insights で十分かもしれません。

✅ さまざまな場所、デバイス、ネットワーク条件(スロットリング)で Core Web Vitals をテストする必要があるなら、GTmetrix のような、より高度な Core Web Vitals の計測ツールを使いましょう。

✅ GTmetrix や、WP Rocket のお客様であれば Rocket Insights などのツールを使って、パフォーマンスを監視し、Core Web Vitals の問題を早期に発見して、何を修正すべきかを把握しましょう。

✅ WP Rocket は、Core Web Vitals を改善し、テストツールや監視ツールが特定したパフォーマンスの最適化を適用するための、最も簡単で強力な方法です。

✅ シンプルで効果的な Core Web Vitals のワークフロー:GTmetrix でテストを実行し、WP Rocket を有効化して再テストし、改善の度合いを記録しましょう。手早く、効果を測定でき、効率的です。

Core Web Vitals ツールが測定するもの

Google が Core Web Vitals(コアウェブバイタル)を導入したのは、単なる読み込み速度ではなく、ユーザーエクスペリエンスを計測するためです。Core Web Vitals は Google のランキングシステムに組み込まれた3つの指標で、ページが実際のユーザーにとってどれだけ速く、すばやく反応し、安定していると感じられるかを反映します。指標は次のとおりです:

  • Largest Contentful Paint(LCP)は、メインコンテンツがどれだけ速く読み込まれるかを測定します。
  • Interaction to Next Paint(INP)は、ユーザーの操作(クリック、タップ、キー入力など)にサイトがどれだけ速く応答するかを測定します。
  • Cumulative Layout Shift(CLS)は、読み込み中にレイアウトがどれだけ安定しているかを測定します。

結果は明確なしきい値にもとづくシンプルな色分けで表示され、緑は良好、オレンジは改善が必要、赤はパフォーマンスが不良であることを示します。

Core Web Vitals のしきい値(出典:WebDev)

スコアが緑色の評価のままであれば、サイトは Google のパフォーマンス基準を満たしています。オレンジや赤になった場合は、一部の Core Web Vitals ツールが、何を修正すべきか、どこから最適化を始めればよいかを特定する手助けをしてくれます。

Core Web Vitals の結果の例(出典:PageSpeed Insights)

ほとんどのツールには、Core Web Vitals の各指標に影響する推奨事項をまとめた、詳細な監査のセクションや「インサイト」セクションがあります。たとえば Google PageSpeed Insights は、LCP を改善するために、キャッシュの導入、画像の最適化、レンダリングをブロックしているリクエストへの対処を推奨しています。

「インサイト」に表示された、Core Web Vitals の LCP に影響する要因(出典:PageSpeed Insights)

ツールによって Core Web Vitals のスコアが異なるのはなぜでしょうか?

ツールによって Core Web Vitals のスコアが異なるのは、想定どおりのことです。ほとんどの Core Web Vitals の計測ツールは Google Lighthouse を基盤にしていますが、すべてが同じ方法でパフォーマンスを測定しているわけではありません。

違いは、Lighthouse の実装方法から生まれます。各ツールは、それぞれ異なるハードウェア、ネットワーク条件、地理的な場所、画面解像度、テスト環境でテストを実行します。そのため、基盤となる技術が同じでも、Core Web Vitals のスコアはツールごとに変わることがあります。

大きな要因のひとつは、フィールドデータとラボデータの違いです。フィールドデータは実環境の条件でサイトを訪れる実際のユーザーにもとづくのに対し、ラボデータはシミュレーションによるテストから得られます。ラボテストはデバッグや変更の比較に最適ですが、多くのユーザーがサイトを実際にどう体験しているかを完全に表すことはできません。

ネットワーク条件も重要です。高速な Wi-Fi でテストしたサイトと、より遅い 4G 接続でアクセスしたサイトとでは、動作が大きく異なります。テストツールの中には、さまざまな接続速度、デバイス、場所をシミュレートできるものもあり、これもスコアが変わる理由のひとつです。

デバイスの種類と性能も大きく影響します。通常、デスクトップのテストはモバイルのテストよりも良い結果になり、iPhone や Samsung のモデルなど特定のデバイスをシミュレートするツールでは、パフォーマンスの結果が目に見えて異なる場合があります。

web.dev の Philip Walton は、次のように説明しています:

サイトのパフォーマンスは、ユーザーのデバイスの性能、ネットワーク条件、デバイス上でほかにどのようなプロセスが動いているか、そしてユーザーがページをどう操作しているかによって、大きく変わることがあります。実際、Core Web Vitals の各指標のスコアは、ユーザーの操作によって影響を受けることがあります。全体像を正確にとらえられるのは、フィールドでの測定だけです。

💡 ヒント:GTmetrix のような一部の Core Web Vitals の計測ツールは、さまざまな接続速度、デバイス、場所をシミュレートできるので便利です。

Core Web Vitals の計測にはどのツールを使うべきでしょうか?

以下では、スピードのテスト、Core Web Vitals の分析、パフォーマンスのボトルネックの特定、パフォーマンスの継続的な監視に役立つ、ウェブサイトのパフォーマンスと Core Web Vitals を計測できるおすすめのツール8選を紹介します。各ツールは、ラボデータ、実際のユーザーのデータ、またはその両方の組み合わせを使って、それぞれ異なる方法で Core Web Vitals をとらえます。信頼できる知見を得るには、それぞれのツールをいつ、どのように使うかを理解することが鍵です。

Core Web Vitals の計測ツールを比較する前に、少し時間をとって用語集を読み、主要な用語を確認しておきましょう。

📌 Core Web Vitals のテストと監視に関する用語集

ラボデータ:管理された条件下で問題をテストし、デバッグするために使う、シミュレーションによるパフォーマンスデータです。

フィールドデータ:実際のユーザーから収集された、実際のパフォーマンスデータです。

RUM(リアルユーザーモニタリング):実際のユーザーの操作にもとづいて、パフォーマンスを継続的に追跡する手法です。

Lighthouse:ほとんどのテストツールが Core Web Vitals の監査の実行に使っている、Google のオープンソース技術です。

1. GTmetrix

概要
GTmetrix は、Lighthouse を基盤とするウェブサイトのパフォーマンス分析ツールです。スピードテストを実行し、詳細な診断、Core Web Vitals の指標、ウォーターフォールチャートを提供して、サイトを遅くしている原因を理解するのに役立ちます。

ラボデータとフィールドデータ
シンセティック(ラボデータ)とフィールドデータ(Google の CrUX API 経由)です。

監視への対応
対応しており、メールで通知を受け取れます。

対応する Core Web Vitals
LCP、INP*、CLS。
*INP は実際のユーザーのデータにもとづくため、新しいサイトやトラフィックの少ないサイトでは表示されない場合があります。

強み

  • 非常に詳細な診断
  • ウォーターフォールチャートでボトルネックを特定するのに最適
  • 変更前後の比較や過去のレポートの確認が簡単
  • Core Web Vitals や読み込み時間が悪化したときのアラート

制限事項

  • 高度な機能には有料プランが必要

最適な用途
パフォーマンスの問題を詳しくデバッグし、Core Web Vitals の推移を追跡したいなら、GTmetrix が必要です。高度な技術的知見を得ながら、テストと監視の両方を行いたい場合に最適です。

料金
無料プランがあります。有料プランは月額約14.95 ドルからです。

2. Rocket Insights

概要
Rocket Insights は、GTmetrix を基盤とする、WP Rocket に内蔵されたパフォーマンスハブです。主要なページを追跡し、パフォーマンススコアと Core Web Vitals を確認し、結果に影響している要因を把握して、有効にすべき WP Rocket の機能について明確な推奨事項を受け取る、といったことをすべて WordPress のダッシュボードから直接行えます。

ラボデータとフィールドデータ
シンセティック(ラボデータ)とフィールドデータ(Google の CrUX API 経由)です。

監視への対応
テストと監視に対応しています。

対応する Core Web Vitals
Core Web Vitals の指標(LCP、INP*、CLS)は、GTmetrix のレポートで提供されます。
*INP は実際のユーザーのデータに依存するため、新しいサイトでは利用できない場合があります。

強み

  • 初期設定でモバイル重視
  • 初心者にやさしいレポート
  • WordPress を離れずに使える
  • WP Rocket の機能と結びついた明確な推奨事項

制限事項

  • 有効な WP Rocket のサブスクリプションが必要

最適な用途
ツールを切り替えることなく、WordPress 内で直接パフォーマンスを監視し、適切な最適化を適用したい場合に最適です。

料金
すべての WP Rocket ライセンスに無料で含まれています。

3. Google PageSpeed Insights

概要
PageSpeed Insights は、Lighthouse のラボテストと Chrome User Experience Report の実際のユーザーのデータを組み合わせ、Google 公式の視点から Core Web Vitals を確認できるツールです。

ラボデータとフィールドデータ
シンセティック(ラボデータ)とフィールドデータ(CrUX)です。

監視への対応
テストのみです。

対応する Core Web Vitals
LCP、INP*、CLS。
*新しいサイトやトラフィックの少ないサイトでは、フィールドの INP が表示されない場合があります。

強み

  • Google の実データを使用
  • 無料で、広く信頼されている
  • SEO を強く重視

制限事項

  • 監視や履歴の追跡はなし
  • カスタマイズ性が限られる(場所や接続のシミュレーションはなし)
  • 確認できるパフォーマンス KPI が少ない

最適な用途
Google の視点から、SEO を重視した Core Web Vitals のチェックを手早く行いたいときに使いましょう。

料金
無料です。

4. Google Search Console

概要
Google Search Console の Core Web Vitals レポートは、実際の使用状況データにもとづいて、ページのパフォーマンスをページの種類ごとにグループ化して示します。このレポートは、個々の URL のステータスを確認するためのものではありません。その代わりに、サイト全体の Core Web Vitals のパフォーマンスを把握し、サイト内のページのグループに影響している問題を特定するのに役立ちます。

ラボデータとフィールドデータ
フィールドデータです。

監視への対応
テストと監視に対応しています。

対応する Core Web Vitals
LCP、INP、CLS。

強み

  • 非常に使いやすい
  • Google のツール(Chrome、GA、検索)と完全に統合
  • エクスポートや共有ができるレポート
  • パフォーマンスを全体としてとらえるアプローチ

制限事項

  • 最適化のガイダンスが限られる
  • インデックスに登録された URL のみ表示
  • ラボテストはなし

最適な用途
安定したトラフィックがある、運用実績のあるサイトで、Core Web Vitals を長期的に監視するのに最適です。

料金
無料です。

5. WebPageTest

概要
WebPageTest は、デバイス、ブラウザ、ネットワーク条件をまたいで詳細な診断を提供する、強力なパフォーマンステストツールです。

ラボデータとフィールドデータ
シンセティック(ラボデータ)とフィールドデータです。

監視への対応
テストと監視(Pro)に対応しています。

対応する Core Web Vitals
LCP、INP*、CLS。
*INP は、RUM を有効にしている場合に実際のユーザーのデータにもとづきます。

強み

  • 高度なネットワークとデバイスのシミュレーション
  • 詳細な Core Web Vitals の診断
  • Lighthouse との強力な統合

制限事項

  • 習得に時間がかかる
  • 高度な機能には有料プランが必要

最適な用途
Core Web Vitals の詳細な監査を行い、パフォーマンスの基礎を学ぶ開発者やチームに最適です。

料金
基本的な利用は無料です。有料プランもあります。

6. Chrome DevTools

概要
Chrome DevTools にはブラウザ内で直接実行できる Lighthouse の監査が含まれているため、開発中に Core Web Vitals を簡単にテストできます。

ラボデータとフィールドデータ
シンセティック(ラボデータ)です。

監視への対応
テストのみです。

対応する Core Web Vitals
LCP、INP、CLS(フィールドデータ)。

強み

  • 無料で信頼性が高い
  • Chrome 内でローカルに実行
  • 開発とデバッグに最適

制限事項

  • 実際のユーザーのデータはなし
  • 技術的な知識が必要

最適な用途
公開前に Core Web Vitals を最適化する場合や、開発中に変更をテストする場合に最適です。

料金
無料です。

7. Contentsquare

概要
Contentsquare は、カスタマージャーニー全体にわたって、Core Web Vitals のデータと実際のユーザーの行動を結びつけます。

ラボデータとフィールドデータ
RUM(リアルユーザーモニタリング)です。

監視への対応
テストと監視に対応しています。

対応する Core Web Vitals
LCP、INP、CLS(フィールドデータ)。

強み

  • UX とビジネスに関する優れたインサイト
  • 実環境のパフォーマンスデータ
  • エンタープライズ級の分析

制限事項

  • 純粋なスピードテストツールではない
  • 小規模なサイトには高価

最適な用途
UX、CRO(コンバージョン率最適化)、コンバージョンファネルの最適化を重視する大規模なウェブサイトに最適です。

料金
エンタープライズ向けの個別見積もりです。

8. BrowserStack

概要
BrowserStack は、実機と実際のブラウザでウェブサイトをテストして、UX や互換性の問題を特定できるツールです。

ラボデータとフィールドデータ
実機テストです。

監視への対応
テストと監視に対応しています。

対応する Core Web Vitals
BrowserStack Website Scanner 経由で、LCP、INP、CLS に対応しています。

強み

  • 実機と実環境
  • QA や UX のテストに最適

制限事項

  • Core Web Vitals の監視はなし
  • パフォーマンスを重視したツールではない

最適な用途
実機での動作やクロスブラウザ互換性を検証する QA チームに最適です。

料金
有料プランのみです。

Core Web Vitals ツールの比較

次の比較表では、データソース、テストと監視の機能、最適な用途、料金の観点から各 Core Web Vitals の計測ツールの違いを示しており、ニーズに合ったツールを選ぶのに役立ちます。

ツールラボデータとフィールドデータ主な機能最適な用途メリットとデメリット連携料金
GTmetrixラボ(LCP、CLS)+ CrUX 経由のフィールド(INP*)✓ 複数デバイスでのテスト
✓ 複数の場所からのテスト
✓ 監視
✓ ウォーターフォールチャート
✓ 過去のレポート
詳細な診断と、パフォーマンスの推移の追跡メリット:詳細な診断、優れたボトルネック分析、変更前後の比較が簡単
デメリット:高度な監視には有料プランが必要
Lighthouse、CrUX、WordPress、API 連携無料プランあり、有料は月額14.95 ドルから
Rocket Insightsラボ(LCP、CLS)+ CrUX 経由のフィールド(INP*)✓ テストと監視
✓ WordPress との統合
✓ 初期設定でモバイル重視
✓ 初心者にやさしいレポート
✓ WP Rocket の推奨事項
WordPress 内で直接行うシンプルなパフォーマンス監視メリット:WordPress を離れずに使える、すぐに実行できる推奨事項、初心者にやさしい
デメリット:WP Rocket のライセンスが必要
WordPress、WP Rocket、GTmetrixすべての WP Rocket ライセンスに無料で付属
PageSpeed Insightsラボ + フィールド(LCP、CLS、INP)✓ デスクトップとモバイルのテスト
✓ Google の実際のフィールドデータ
✓ Lighthouse との統合
✗ 監視なし
✗ 履歴の追跡なし
Core Web Vitals と SEO の手早い分析メリット:無料、信頼できる Google のデータ、SEO との関連性が高い
デメリット:監視やアラートはなし、診断の深さが限られる
CrUX、Lighthouse、Search Console無料
Google Search Consoleフィールド(LCP、CLS、INP)✓ Core Web Vitals の監視
✓ 実際の使用状況データ
✓ URL のグループ化
✓ エクスポート可能なレポート
✗ ラボテストなし
インデックスに登録されたページ全体での Core Web Vitals の傾向の監視メリット:使いやすい、Google のエコシステムと完全に統合、傾向の監視
デメリット:デバッグのための知見が限られる、インデックスに登録された URL のみが対象
Google 検索、Chrome、Analytics無料
WebPageTestラボ + フィールド(LCP、CLS、INP*)✓ 複数デバイスでのテスト
✓ 複数の場所からのテスト
✓ 高度なネットワークのシミュレーション
✓ 詳細な診断
✓ Lighthouse との統合
高度なパフォーマンス監査とネットワークのシミュレーションメリット:強力な診断、柔軟で高度なテスト、優れた技術的知見
デメリット:初心者には習得に時間がかかる
Lighthouse、Chromium、API基本は無料、高度な機能は有料
Chrome DevToolsラボテスト + INP の代替データ✓ ローカルでのパフォーマンス監査
✓ Lighthouse のレポート
✓ レンダリングの診断
✗ 監視なし
✗ 実際のユーザーのデータなし
開発中のローカルでのデバッグメリット:無料、信頼性が高い、Chrome に直接組み込まれている
デメリット:技術的な習得が必要、フィールドデータの監視なし
Chrome ブラウザ、Lighthouse無料
Contentsquareフィールド / RUM(LCP、CLS、INP)✓ リアルユーザーモニタリング
✓ UX 分析
✓ カスタマージャーニーの追跡
✓ セッションのインサイト
✓ エンタープライズ向けのレポート
エンタープライズ向けの UX とパフォーマンスの分析メリット:ビジネスへの影響と結びついた優れた UX のインサイト
デメリット:高価で、よりエンタープライズ向け
アクセス解析プラットフォーム、CRM、エンタープライズのシステムとの連携エンタープライズ向けの個別見積もり
BrowserStack実機でのフィールドテスト✓ 実機テスト
✓ クロスブラウザテスト
✓ モバイルテスト
✗ CWV の監視なし
✗ パフォーマンスの追跡なし
デバイスをまたいだ QA と互換性テストメリット:実機テストの対応範囲が優れている
デメリット:Core Web Vitals や監視を重視していない
BrowserStack Website Scanner、CI/CD との連携有料プランのみ

Core Web Vitals を正しく監視するための7つのヒント

追跡と定期的な監視を行えば、ユーザーエクスペリエンスや検索順位に影響が出る前に問題を早期に発見し、修正できます。信頼でき、行動につなげやすい Core Web Vitals のデータを得るために、次の7つのベストプラクティスを押さえておきましょう:

1. Google が Core Web Vitals をどう評価しているかを理解しましょう

Google は、Core Web Vitals をページごとに個別に評価しているわけではありません。実際には、ブログ記事、商品ページ、カテゴリページなど、似たページをまとめてグループ化することがよくあります。つまり、遅いテンプレートが1つあるだけで、その影響が1つの URL にとどまらず、ページのグループ全体のパフォーマンスのシグナルに及ぶ可能性があります。

2. ホームページだけをテストせず、主要なテンプレートを監視しましょう

パフォーマンスの問題の多くは、商品ページ、チェックアウトの手順、コンバージョンのステップなど、ユーザージャーニーのより深い段階で起こります。ホームページが速くても、売上につながる重要なページのパフォーマンスが悪ければ意味がありません。商品ページ、カテゴリページ、チェックアウトページなど、最も重要なページに注目しましょう。これらのテンプレートを監視すれば、ホームページだけでなく、実際のユーザーがサイト全体をどう体験しているかをより明確に把握できます。

3. 1つではなく複数の URL をテストしましょう

同じ種類のページの中で複数の URL をチェックすると、Core Web Vitals の分析の精度が上がります。問題が局所的なものか、サイトのセクション全体にわたる構造的なものかを見極めるのに役立ちます。

4. シークレットモードを使って、よりクリーンな条件でテストしましょう

手動でテストを実行するときは、シークレットモードやクリーンなブラウザのプロファイルを使いましょう。そうすれば、結果をゆがめる可能性のあるブラウザの拡張機能、キャッシュされたアセット、ログイン中のセッションによる干渉を避けられます。

5. メインのツールを1つ選び、ほかのツールは補足として使いましょう

すべてのツールでスコアを一致させようとしないでください。各ツールは Lighthouse の実装方法が異なり、独自のスコアリングロジックを適用しているため、本当の意味での一対一の比較はできません。

それよりも、継続的な監視と傾向の分析のためのメインのツールを1つ選びましょう。ほかのツールは、スポットチェックやより詳しい分析に使います。たとえば、PageSpeed Insights や Google Search Console で長期的なパフォーマンスを追跡し、GTmetrix で低速なモバイル接続をシミュレートして、スコアが下がる理由を把握します。

6. INP がまだ表示されない場合は、代わりに TBT を使いましょう

Core Web Vitals の Interaction to Next Paint(INP) が表示されないのは、多くの場合、サイトが新しく、Google にまだ十分な実際のユーザーの操作データがないためです。ごく普通のことです。それまでの間は、INP に最も近いラボ指標である Total Blocking Time(TBT) に注目しましょう。重い JavaScript やメインスレッドのブロックを減らして早い段階で TBT を最適化しておくと、後で INP のスコアが良好になるよう、サイトの準備を整えるのに役立ちます。パフォーマンスを定期的に監視しましょう。トラフィックが増えるにつれて、INP は自動的に表示されるようになります。

7. 完璧なスコアではなく傾向に注目しましょう

目標は、すべてのツールで完璧な数値を追い求めることではありません。大切なのは、スコアが変わる理由を理解し、パフォーマンスの低下を早期に見つけ、パフォーマンスが悪化したときに対策を講じることです。一度きりのテストよりも、継続的に監視するほうが、はるかに正確な全体像をつかめます。

テストから Core Web Vitals を緑にするまで:実践的なワークフロー

Core Web Vitals の計測ツールが実際の改善にどうつながるかを示すために、シンプルな WordPress の例で手順を追ってみましょう。具体的にイメージできるよう、PageSpeed Insights を使って簡単な最適化前後のテストを行い、適切な最適化(と適切なプラグイン)を使えば Core Web Vitals をオレンジから緑にするのがいかに簡単かを示します。

テスト環境

Twenty Twenty-Two テーマと WordPress のブロックエディターで作成した、基本的な WordPress サイトを使います。ページには、多くのサイトで見られる一般的なセクションがいくつか含まれています:

  • ヒーローバナー
  • サービスのセクション
  • お客様の声のブロック

この構成なら現実的で、再現も簡単です。すべてのパフォーマンステストには Google PageSpeed Insights を使います。

ステップ 1:Core Web Vitals のテスト(最適化なし)

まずは Google PageSpeed Insights に URL を入力して、「分析」ボタンをクリックしましょう。

URL の入力(出典:PageSpeed Insights)

PageSpeed Insights の上部には、モバイル(またはデスクトップ)のパフォーマンススコアと、Core Web Vitals のスコアが表示されます。これを見れば、指標が緑、オレンジ、赤のどれに当たるかを手早く把握できます。こうしたスコアは全体像をつかむのに役立ちますが、サイトが「なぜ」遅いのかまでは教えてくれません。

全体のパフォーマンススコア(最適化前、出典:PageSpeed Insights)

PageSpeed Insights が実際の改善に役立つのはここからなので、「インサイト」と「診断」のセクションまでスクロールしましょう。「インサイト」セクションには、Core Web Vitals に影響している主な問題が表示されます。

LCP に影響するインサイトと監査のセクション(最適化前、出典:PageSpeed Insights)

LCP に関連する、よく見られる警告には次のようなものがあります:

  • 効率的なキャッシュ保存期間を使用する
  • レンダリングをブロックしているリクエスト
  • LCP リクエストの検出
  • ネットワークの依存関係ツリー
  • 画像配信を改善する

その下の「診断」セクションには、次のような、より直接的な技術的ヒントが表示されます:

  • 使用していない CSS の削減
  • CSS の最小化
  • 使用していない JavaScript の削減

これらの監査はすべて、ページ上で最も大きな要素の読み込みを遅らせている原因を直接示しています。

ステップ 2:パフォーマンス最適化の適用

監査の結果が出れば、Core Web Vitals を改善するためにどの方向に進めばよいかが正確にわかります。PageSpeed Insights の「インサイト」セクションは、対応が必要な項目をはっきりと示し、最も効果の大きい修正から優先して取り組むのに役立ちます。

この例では、キャッシュ、コードの最適化(CSS と JavaScript)、レンダリングをブロックしているリクエスト、画像の最適化に取り組む必要があることが、監査からわかります。

これらの最適化をすべて適用して Core Web Vitals を手早く改善する最も簡単な方法は、WP Rocket 🚀 と Imagify(画像の最適化作業用)を使うことです。

WP Rocket は最もシンプルで強力なパフォーマンスプラグインで、有効化するだけで、キャッシュ、GZIP 圧縮、CSS と JS の最小化、重要な画像の最適化、自動の遅延レンダリングなど、パフォーマンスのベストプラクティスの80%を適用します。

直感的なインターフェースで、遅延読み込み、未使用 CSS の削除、JavaScript の読み込みの延期、JavaScript の遅延実行といった強力な機能も、コードに一切触れずに WordPress から直接、数回クリックするだけで有効にできます。今回のテストでは、これらをすべて有効にしました。

WP Rocket による Core Web Vitals の最適化(出典:WP Rocket のダッシュボード)

では、PSI が指摘した最後の最適化である画像配信の改善に取り組みましょう。具体的には、正しいサイズで配信し、効率よく圧縮し、WebP や AVIF などの最新フォーマットに変換して、画像をウェブ向けに適切に準備することです。これらのフォーマットはファイルサイズを大幅に削減し、Core Web Vitals のスコアを改善するため、Google に好まれています。

画像配信を(そして Core Web Vitals を)改善するには、Imagify が使えます。WordPress 向けの最も簡単な画像最適化プラグインで、「Smart compression」機能によって、画質を落とさずに画像を自動で圧縮します。また、WordPress のダッシュボードから直接、数回クリックするだけで画像を WebP や AVIF に変換することもできます。Imagify を使えば、画像の圧縮と AVIF への変換で、最後の問題も簡単に解決できるはずです:

Imagify の「Smart compression」と AVIF 変換で LCP を改善(出典:Imagify)

では、結果を見てみましょう!

ステップ 3:Core Web Vitals のテスト(WP Rocket と Imagify による最適化後)

📌 WP Rocket を使って、ブラウザキャッシュとページキャッシュ(モバイルも含む)、キャッシュとフォントのプリロード、CSS と JS の最適化、遅延読み込みなど、いくつかの重要な最適化を実装しました。これらの機能はすべて、レンダリングをブロックしているリクエストを減らし、ページ全体の読み込みパフォーマンスを改善するのに役立ちます。これらの機能はすべて、レンダリングを妨げるリソースの除外に貢献しています。

📌 Imagify を使って、画像配信の改善、つまり圧縮と AVIF 変換による画像の最適化を行いました。

Core Web Vitals の結果、特にスコアが赤だった LCP の結果を見てみましょう!

  • WP Rocket と Imagify のおかげで、Core Web Vitals の LCP は 0.5秒になり、緑色の評価になりました(以前は 5.0秒で赤でした)。
  • 全体のスコアは 100/100 になりました(以前は 71/100 でオレンジでした)。
パフォーマンスの結果(最適化後、出典:PageSpeed Insights)

WP Rocket と Imagify のおかげで、「インサイト」セクションの状況も改善し、ほぼすべての項目が「合格した監査」に移りました:

WP Rocket と Imagify による「合格した監査」(最適化後、出典:PageSpeed Insights)

まとめ

ご覧のとおり、プロセスはいつも同じです。テストを実行し、Core Web Vitals のスコアを確認し、問題のリストを見直して、WP Rocket や Imagify などのツールで適切な修正を適用してから、もう一度テストします。最適化を1回行うごとに、数値で確かめられる改善が得られます。

この例では、このアプローチによってすべてが緑になり、LCP は大幅に下がって(赤の 3.6 から緑の 0.6 へ)、パフォーマンススコアは満点の 100/100 になりました。どの問題にも明確な解決策があり、どの段階でもコーディングのスキルは必要ありませんでした。

この「テスト、修正、再テスト」というシンプルなワークフローなら、サイトオーナーや開発者は、推測に頼ることなく、一年中健全なパフォーマンスを維持し、監視しやすくなります。

安心して WP Rocket を試してみましょう!14日間の無料トライアルを始めることも、今すぐ購入して14日間の返金保証を受けることもできます。どちらの場合も、Core Web Vitals とサイトのパフォーマンスが改善すること以外に、リスクはありません。

よくある質問:Core Web Vitals のテストと最適化

Core Web Vitals とは何ですか?

Core Web Vitals は、ページ上の実際のユーザーエクスペリエンスを測定するために Google が作成した、3つのパフォーマンスのシグナルです。Google のランキングアルゴリズムの一部であり、読み込み速度(LCP)、インタラクティブ性(INP)、視覚的な安定性(CLS)に焦点を当てています。これらの指標を緑色の評価に保つと、使いやすさと検索での露出の向上につながります。

Core Web Vitals のテストと監視に最適なツールはどれですか?

最適なツールには、GTmetrix(詳細な診断、有料プランは月額14.95 ドルから)、Google PageSpeed Insights(無料、SEO 重視)、Google Search Console(無料、フィールドデータの監視)、WebPageTest(高度な監査)、Chrome DevTools(ローカルでのデバッグ)、Contentsquare(エンタープライズ向けの RUM)、BrowserStack(実機での QA)、Rocket Insights(WP Rocket に無料で付属、WordPress に統合)があります。

ラボデータとフィールドデータの違いは何ですか?

ラボデータは、管理された環境で実行するシミュレーションテストから得られるもので、デバッグやパフォーマンスの変更のテストに最適です。フィールドデータは、実際の訪問者から収集され、より「リアルな」ユーザーエクスペリエンスを反映するもので、実環境でサイトがどう動作しているかを把握するのに最適です。

Core Web Vitals はどのくらいの頻度でテスト・監視するとよいでしょうか?

Core Web Vitals は、少なくとも週に1回は監視しましょう。WooCommerce サイトを運営している場合や、コンテンツを頻繁に更新する場合は、毎日のチェックをおすすめします。また、WordPress コアの更新、プラグインやテーマの更新、新商品の発売、新しいブログ記事の公開といった重要なイベントの後にもテストを実行し、パフォーマンスに影響が出ていないことを確認しましょう。

Core Web Vitals ツールはパフォーマンスの問題を修正してくれますか?

ほとんどの Core Web Vitals ツールは、問題を特定し、何を修正すべきかを説明するだけです。修正を自動的に適用することはありません。こうした診断結果をもとに手を打つには、キャッシュ、JavaScript の最適化、画像配信など、指摘された問題の多くにコードを変更せずに直接対処できる、WP Rocket のような最適化プラグインが必要です。

WordPress で Core Web Vitals を最適化するにはどうすればよいですか?

最も簡単なのは、有効化するだけでキャッシュ、CSS と JS の最適化、重要な画像の最適化、遅延レンダリングなど、パフォーマンスのベストプラクティスの80%を自動的に適用する WP Rocket をインストールすることです。画像配信については、Imagify と組み合わせて画像を圧縮し、WebP や AVIF 形式に変換しましょう。

Core Web Vitals のスコアがテストツールによって異なるのはなぜですか?

各ツールは、それぞれ異なるハードウェア、ネットワーク条件、地理的な場所、画面解像度でテストを実行するため、スコアが異なります。ラボデータ(シミュレーション)とフィールドデータ(実際のユーザー)の違いも影響します。高速な Wi-Fi でテストしたサイトと、シミュレートした 4G 接続でテストしたサイトとでは、スコアが変わります。

Core Web Vitals はウェブサイトの検索順位にどう影響しますか?

Core Web Vitals は、Google の公式ランキングアルゴリズムの一部です。LCP、INP、CLS のスコアが緑色の評価を維持していれば、サイトは Google のパフォーマンス基準を満たし、上位に表示される可能性が高まります。スコアがオレンジや赤の場合は、検索での露出とユーザーエクスペリエンスに悪影響が出るおそれがあります。

サイトの Core Web Vitals を無料で計測するにはどうすればよいですか?

ラボデータとフィールドデータの両方を提供する Google PageSpeed Insights や、インデックスに登録されたページ全体で実際のユーザーのパフォーマンスを監視する Google Search Console を使えば、Core Web Vitals を無料でチェックできます。GTmetrix にも、詳細な診断、ウォーターフォールチャート、変更前後の比較を備えた無料プランがあります。

Core Web Vitals はどうやって計測すればよいですか?

PageSpeed Insights などのツールで URL のテストを実行し、LCP、INP、CLS のスコアが緑、オレンジ、赤のどれに当たるかを確認します。実際の訪問者がサイトをどう体験しているかを知るには、PageSpeed Insights や Google Search Console のフィールドデータを使い、問題のデバッグには Lighthouse を基盤とするラボテストを使います。スコアが基準を満たしていない場合は、PageSpeed Insights の「インサイト」と「診断」のセクションで原因を確認し、修正を適用してから再テストしましょう。

Search Console の「ウェブに関する主な指標」レポートとは何ですか?

「ウェブに関する主な指標」レポートとは、Google Search Console の Core Web Vitals レポートのことです。実際の使用状況データ(フィールドデータ)にもとづいて、ページのパフォーマンスをページの種類ごとにグループ化して示します。個々の URL ではなくサイト全体の Core Web Vitals のパフォーマンスを把握し、ページのグループに影響している問題を特定するのに役立ちます。インデックスに登録された URL だけが表示され、ラボテストはできませんが、安定したトラフィックがあるサイトで Core Web Vitals を長期的に監視するのに向いています。

CrUX とは何ですか?

CrUX(Chrome User Experience Report)は、実際のユーザーのデータを提供する Google の情報源です。PageSpeed Insights は Lighthouse のラボテストと CrUX の実際のユーザーのデータを組み合わせ、GTmetrix と Rocket Insights は Google の CrUX API 経由でフィールドデータを取得しています。新しいサイトやトラフィックの少ないサイトではデータが足りず、フィールドの INP が表示されない場合があります。


Subscribe to Our Newsletter

Stay in the loop with the latest WordPress and web performance updates.
Straight to your inbox every two weeks.

たった数回のクリックで、
より高速なサイトを実現

セットアップは3分で完了
Get Started