STATUS IS UPウェブサイト最適化ウィキ
15高速化
デザインとUX / 高速化

Core Web Vitals:サイト所有者がまず直すべきこと

実ユーザーの証拠を使って、読み込み、応答性、レイアウトの安定性を正しい順序で修正する方法。

Core Web Vitals:サイト所有者がまず直すべきこと — ビジュアルガイド
読む
8 分
出典
6
再検証
2027-03-27
レビュー済み
Web performance and accessibility reviewer
短い答え

まず決断から始める。

まずは実際の利用で最も体験が悪いページ、デバイス、行動を対象にする。フィールドデータで読み込み(LCP)、応答性(INP)、予期しない移動(CLS)のどれが問題かを判定し、再現は制御されたラボテストで原因を特定する。訪問の有意な割合に影響する、最小で元に戻せる原因を優先的に直し、プラットフォーム全体の書き換えは最後に検討する。

Core Web Vitals は Largest Contentful Paint、Interaction to Next Paint、Cumulative Layout Shift を指す。これらは重要な体験指標を測るものであり、検索やビジネス成果を保証するものではない。ベースラインを測り、原因が帰属できる変更を一つ行い、重要なフローをテストし、結果をフィールドデータで再確認する。

ビジュアルガイド

作業をシステムとして見る。

個別の戦術に取り掛かる前に、この記事の意思決定をこのマップで結び付けてください。

SIU高速化
01各指標が何を伝えているかを把握する
02優先順位はフィールドデータに任せ、ラボで説明する
03到達度・業務への影響・証拠・可逆性でトリアージする
04LCP は主要コンテンツへの経路を短くして直す
01

各指標が何を伝えているかを把握する

Largest Contentful Paint(LCP)は、初期ビューポート内の最大の画像やテキストブロックがいつ描画されたかを測る。Interaction to Next Paint(INP)は、訪問中の最も遅い適格な操作を通じて応答性を評価する。Cumulative Layout Shift(CLS)は、訪問中に発生する予期しない視覚的移動を測る。

Google が公表している体験ターゲットは、LCP が 2.5 秒以下、INP が 200 ミリ秒以下、CLS が 0.1 以下である。これらは、ページ読み込みの 75 パーセンタイルで評価し、モバイルとデスクトップを分けて見る。ターゲットは作業に集中するための目安であり、ランキングの保証や遅い訪問者を無視する理由にしてはならない。

LCP

主要コンテンツの表示が遅い。サーバー、リソース検出、ダウンロード、レンダリング経路を調査する。

INP

クリック、タップ、キー押下の視覚応答が長く待たされる。埋め込みフレームなどが原因になり得る。

CLS

コンテンツが予期せず移動する。コントロール、フォーム、読書位置付近のシフトに特に注意する。

02

優先順位はフィールドデータに任せ、ラボで説明する

フィールドデータは実際の訪問から来る情報で、実デバイス、ネットワーク、場所、キャッシュ状態、ユーザー行動を含む。Chrome User Experience Report(CrUX) のデータは、十分なデータがあれば PageSpeed Insights や Search Console に表示される。自前の実ユーザーモニタリングはページビューの文脈を追加できる;必要なテレメトリのみを収集し、顧客が入力したコンテンツは避ける。

ラボデータは選択した条件下で再現可能なテストである。リリース変更を切り分けてトレースを読むのに有用だが、すべての訪問者を代表するものにはならない。Lighthouse は実際の操作なしでは真の INP を測定できないため、Total Blocking Time は診断用の代替指標となる。結果が異なるときは、優先付けにフィールドデータを使い、原因調査にラボデータを使う。

同じ条件を比べる

データが URL 単位かオリジン(サイト)単位か、モバイルかデスクトップかを記録する。

文脈を残す

ベースラインに日付、ページグループ、デバイス、分布、テスト設定、最近のリリース情報を保存する。

03

到達度・業務への影響・証拠・可逆性でトリアージする

ダッシュボードの最も低い数値から手を付けない。候補を、影響を受ける訪問数、訪問者タスクの重要性、テンプレートにまたがる繰り返し性、変更を分離してロールバックできるかで順位付けする。これにより core web vitals 最適化はスコア追いかけではなく運用上の修復作業になる。

共有テンプレート上の画像寸法欠如は、投機的なフロントエンド書き換えよりも優先すべき場合がある。完了を妨げる、よりまれなチェックアウト操作は優先度が上がる。メトリクスの証拠をサポートのフィードバック、ファネル観察、アクセシビリティレビューと組み合わせる。

最優先キュー

重要なテンプレートでフィールド観測され繰り返す問題、かつ明確で低リスクな対処法があるもの。

後回しキュー

測定されたユーザー問題やロールバック手段がないアーキテクチャ提案。仮説として保管する。

04

LCP は主要コンテンツへの経路を短くして直す

影響を受けるページとデバイス群で LCP 要素を特定する。初期 HTML レスポンス、ブラウザが要素を発見するタイミング、リソースのダウンロード時間、レンダリングを妨げるものを点検する。サーバー応答時間(TTFB)が高いと、ヒーローアセットを最適化しても LCP ターゲットが現実的でなくなることがある。

デザインに合う場合は、主要コンテンツを早期に発見できるように保つ。LCP 要素となる画像は遅延読み込み(lazy-load)してはならない。画像主体のページでは、適切なサイズとエンコードを用い、明示的な寸法を指定する。プリロードや配信ルールをテストする:早期リクエストは、より重要な作業と競合しない場合にのみ有用である。

高い TTFB

リダイレクト、サーバー処理、キャッシュ挙動、配信の近接性をチェックする;これはアプリケーションやホスティングの所有範囲になることがある。

ヒーローが遅い

クライアント側レンダリング、スクリプト、CSS がメインのテキストや画像の検出を遅らせていないか確認する。

05

操作を応答性高く、レイアウトを予測可能にする

INP のためには、ブラウザのトレースで遅いフローを再現する。入力遅延、イベント処理、描画遅延を切り分ける。長時間のメインスレッドタスク、重いハンドラ、高コストのレンダリング、レイアウトの thrashing(連続再計算)は次のペイントを遅らせる。次フレームの視覚的作業を優先し、製品要件が許す場合は重要でない保存、解析、二次更新を後回しにする。

CLS のためには、合計値から推測せずに動いている要素を特定する。画像、動画、広告、埋め込み、フレームには寸法または CSS のアスペクト比で空間を確保する。フォント読み込みや注入コンテンツを確認する。スコア向上のために必要な同意、エラーメッセージ、アクセシビリティメッセージを隠してはならない;安定した位置を与えること。

INP 注意点

作業を遅延させるとアプリケーションのタイミングが変わる。状態、検証、キーボード挙動を回帰テストする。

CLS 注意点

lazy-load や埋め込み箇所をスクロールして確認する;読み込み時のみのテストは後続のシフトを見逃す可能性がある。

06

改善は安全にリリースし、効果を確認する

パフォーマンス変更はスクリプト、キャッシュ、レンダリング、埋め込み、配信設定に影響する可能性がある。変更を段階的に行い、定義したテストパスをベースラインと比較し、ロールバック手順を文書化する。決済、アカウント、規制対象のフローでは、埋め込み、検証、データ処理を変更する前に適切なセキュリティ、コンプライアンス、アクセシビリティのレビュワーを巻き込む。これは教育的な指針であり、コンプライアンス評価ではない。

リリース後は同じラボパスを比較し、通常の報告ウィンドウを通して同等のフィールドセグメントを監視する。非意図の影響(隠れたエラーや読めないインターフェースなど)を確認する。Status Is UP は、定期チェック、明確な修復所有権、インシデント間のロールバック準備を通じてプロアクティブな稼働率最適化を支援する。

変更記録

各変更をページグループ、メトリクス、所有者、テスト証拠、トレードオフ、ロールバック手順に紐づける。

リリースのガードレール

合成テスト1回の通過で成功宣言をしない;該当する実ユーザーパターンで確認する。

実行 / 検証

実践的なTo‑Doガイド。

  1. 01

    優先ジャーニーを選ぶ

    重要なページグループとそれを利用するモバイル/デスクトップのオーディエンスを列挙する。

    検証: オーナー承認のリストにタスクと責任チームが記載されている。
  2. 02

    フィールドのベースラインを取得する

    デバイス別に LCP、INP、CLS を 75 パーセンタイルで記録する。

    検証: 記録に日付、ツール、ページグループ、デバイス、URL またはオリジンの範囲が含まれている。
  3. 03

    証拠に基づく一つの問題を選ぶ

    到達度、タスクへの害、発生の再現性、可逆性でランク付けする。

    検証: チームがなぜそれが他より優先なのか説明できる。
  4. 04

    フローを再現する

    代表的な条件を使い、実際のクリック、タップ、キーボード経路を操作する。

    検証: トレースがボトルネックを特定するか、またはさらにフィールド文脈が必要であることを示す。
  5. 05

    最も狭い安全な修正を適用する

    LCP 経路を短くする、非必須のメインスレッド作業を除く、最終コンポーネントの空間を確保するなど。

    検証: 期待されるメトリクスとユーザーへの影響が文書化されている。
  6. 06

    タスクとアクセシビリティの回帰テストを行う

    フォーム、エラー、フォーカス、キーボード使用、埋め込み、モバイルレイアウトをチェックする。

    検証: 重要なフローが依然機能すること;変更した決済やアカウントコンポーネントは適格なレビューを受けている。
  7. 07

    ロールバックを準備する

    誰がいつバージョンや設定を戻せるかを明記する。

    検証: リリース記録にロールバック手順がある。
  8. 08

    リリース後に検証する

    同じラボパスと同等のフィールドセグメントを報告ウィンドウで比較する。

    検証: ベースラインとフォローアップが同じ測定範囲を使っている。
  9. 09

    ローンチポイントで繰り返す

    新しいテンプレート、キャンペーン、埋め込み、配信変更をチェックする。

    検証: ローンチプロセスに性能チェックと修復の担当が割り当てられている。
議論のテーマ

トレードオフを比較し、非公開データは共有しないでください。

これらのプロンプトをチームやサイトオーナーコミュニティで使ってください。手法や学びは共有して構いませんが、認証情報や顧客データ、非公開インフラの詳細を貼り付けないでください。

  1. 01

    どのページテンプレートが遅いまたは不安定な体験の最も明確で再現可能な原因を示したか、またそれを優先する助けになった証拠は何か?

  2. 02

    ラボでの回帰シグナルを、即時対処が必要なフィールドデータの問題とどのように区別しているか?リリースプロセスではどちらをどう扱っているか?

  3. 03

    貴チームでパフォーマンス変更を安全にするために導入して効果があったロールバックやレビュープラクティスは何か?

人気/信頼できる資料

出典資料を開く。

Google Search CentralUnderstanding Core Web Vitals and Google search results ↗

公式の定義、公表されている体験ターゲット、計測ツールへのリンク。

レビュー日 2026-09-27
web.devWeb Vitals ↗

75 パーセンタイル評価の説明とフィールドデータとラボデータの役割の違い。

レビュー日 2026-09-27
web.devOptimize Largest Contentful Paint ↗

LCP 要素と読み込み経路の診断に関する公式ガイダンス。

レビュー日 2026-09-27
web.devOptimize Interaction to Next Paint ↗

フィールド主導の INP 診断と操作遅延に関する公式ガイダンス。

レビュー日 2026-09-27
web.devOptimize Cumulative Layout Shift ↗

一般的なシフト原因と安定したレイアウトの対処法。

レビュー日 2026-09-27
web.devWhy lab and field data can be different and what to do about it ↗

制御されたテストと実ユーザー結果がなぜ異なるか、両方をどう使うかの説明。

レビュー日 2026-09-27

出典ポリシー 定義、ターゲット、計測の限界、修復法に関する主張は、ここにリストされた公式の Google Search Central と web.dev リソースに従う。内部リンクはナビゲーション目的であり、証拠を示すものではない。

簡単な補足

よくある質問

LCP、INP、CLS のどれを先に直すべきですか?

重要なジャーニーで明確なフィールド証拠があり、規模に見合った対処ができる問題を直す。共有テンプレートの CLS 問題が最初になることもあるし、完了を妨げる遅いチェックアウト操作が優先されることもある。最も低いスコアだけで決めないこと。

なぜ PageSpeed Insights がローカルテストと違う結果を出すのですか?

ラボテストは制御された条件を使う。フィールドデータは実際のデバイス、ネットワーク、キャッシュ、挙動を反映し、異なる LCP 要素や後続の操作・レイアウト挙動を示すことがある。優先はフィールド証拠とし、原因追及にラボを使う。

Core Web Vitals をパスすればランキングが上がりますか?

パスしたことをランキングの保証とみなしてはならない。実務上の目的は訪問者にとってより速く、応答性が高く、安定した体験を提供することにある。

Status Is UP Editorial Team · Uptime Enablement Editors

レビュー: Web performance and accessibility reviewer。公開 2026-09-27、更新 2026-09-30。