Core Web Vitals のスコアが悪い場合はどう改善すればよいですか?

Q: Core Web Vitals のスコアが悪い場合はどう改善すればよいですか?

どの指標が、どのページで不合格になっているかを特定し、その原因(メインコンテンツの表示遅延、長時間の JavaScript タスク、スペースが確保されていない要素)を修正したうえで、28 日間かけて検証します。

まず、どの指標が、どのデバイスで、どのページグループで不合格になっているかを確認します。Search Console の Core Web Vitals レポートでは、実際の Chrome ユーザーの訪問データに基づく 3 つの指標をすべて確認できます。そのうえで、指標ごとの原因に対処します。LCP はメイン画像やテキストが届くまでの速さ、INP は応答を遅らせる長時間の JavaScript タスク、CLS はスペースが確保されないまま表示されるコンテンツが原因です。フィールドデータは直近 28 日間が対象のため、修正の効果は 1 か月かけて判断してください。

ステップ 1: 不合格の原因を特定する

Search Console の Core Web Vitals レポートを開き、モバイルまたはパソコンを選択します。両者は別々に評価されます。
一覧に表示された問題(たとえばモバイルの LCP の問題)を開き、影響を受けている URL グループとサンプル URL を確認します。グループ全体で 1 つのステータスを共有し、そのステータスは最も悪い指標によって決まります。
サンプル URL を PageSpeed Insights にかけ、そのページのフィールドデータと、デバッグに役立つラボテストの結果を並べて確認します。

Lighthouse などのラボツールでは、ページを操作する人がいないため INP を測定できず、代わりに Total Blocking Time が報告されます。INP については、実ユーザーの計測データを基準にするのが確実です。

LCP が遅い場合の改善方法

web.dev の LCP 最適化ガイドでは、LCP を 4 つの要素(サーバーの応答時間、メインリソースの読み込み開始までの遅延、ダウンロード時間、レンダリングまでの遅延)に分けています。最も大きな要素から着手しましょう。

LCP の画像を初期 HTML で検出できるようにします。JavaScript や CSS で後から挿入せず、fetchpriority="high" を指定します。
LCP の画像を遅延読み込みしないでください。
サイズを小さくして配信します。適切な寸法、最新の画像形式、圧縮を使い、訪問者に近い CDN から配信します。
レンダリングをブロックするリソースを取り除きます。スタイルシートを小さくし、<head> 内の同期スクリプトをなくし、メインコンテンツにはサーバーサイドレンダリングを使います。
サーバーの応答を高速化します。リダイレクトを減らし、ページをエッジでキャッシュできるようにします。

INP が悪い場合の改善方法

INP 最適化ガイドでは、各インタラクションを入力遅延、処理時間、プレゼンテーション遅延に分けています。

入力遅延:ページ読み込み中に実行される JavaScript を減らし、タップされたときにメインスレッドが空いているようにします。
処理時間:長いイベントハンドラーを小さなタスクに分割してメインスレッドに処理を譲り、画面に見える更新を先に行って、残りの処理は後回しにします。
プレゼンテーション遅延:DOM を小さく保ち、スタイルを変更した直後に読み取って強制的にレイアウトを発生させることを避け、長いページには content-visibility を使います。

CLS が高い場合の改善方法

CLS 最適化ガイドには、よくある原因と対処法がまとめられています。

サイズ指定のない画像や動画:width と height 属性、または CSS の aspect-ratio を指定します。
広告、埋め込み、iframe:読み込まれる前に、レイアウト上でスペースを確保しておきます。
既存のコンテンツより上に挿入されるコンテンツ:適切なサイズのプレースホルダーを用意するか、訪問者が読んでいる部分より下に新しいコンテンツを挿入します。
ウェブフォント:重要なフォントはプリロードし、テキストが後からリフローしないようにします。
アニメーション:top や left などのプロパティではなく、transform をアニメーションさせます。

ブラウザの戻る/進むキャッシュ(bfcache)を利用できるページでは、訪問者が戻ってきたときのレイアウトシフトも防げます。

ステップ 3: 修正を確認する

デプロイしたら、Core Web Vitals レポートで該当の問題を開き、検証を開始します。Google はグループを 28 日間モニタリングします。検証によって再クロールが行われたり処理が早まったりすることはなく、問題が解消されたかどうかを追跡するだけです。フィールドデータは 28 日間分が順次入れ替わるため、レポートは徐々に改善していきます。各指標の意味については、LCP、INP、CLS とは何ですか?をご覧ください。

AutoPSEO での活用方法

AutoPSEO の Core Web Vitals レポートでは、サイト全体または特定の URL について、スマートフォン、パソコン、タブレット別に、約 6 か月分の週次 Chrome UX Report データをグラフで確認できます。次の 28 日間のウィンドウが終わるのを待たなくても、修正の効果が出た週や、リリースによって悪化した週を把握できます。