Core Web Vitals 実践モニタリング 2025 — エンタープライズ案件のSREチェックリスト

2025年、Web制作会社や制作パートナーにとって Core Web Vitals は単なる品質指標ではなく、契約継続の条件となりました。Largest Contentful Paint (LCP)、Interaction to Next Paint (INP)、Cumulative Layout Shift (CLS) をSLOとして明示し、日々の配信運用と結び付けることが必須です。本稿は多拠点で画像生成・実装を担う制作組織向けに、SRE視点でのモニタリング設計と対応フローをまとめたものです。

TL;DR

• SLOはLCP/INP/CLSの3軸+エラー率で定義し、Web・CDN・画像パイプラインを跨いだ責任範囲を明確化する。
• 3層のメトリクススタックを構築: Real User Monitoring (RUM)、合成監視、ログ/トレースを連携させ、画像差し替えやキャッシュ無効化による影響を秒単位で追えるようにする。
• 画像配信チームとSREのRunbookを統合し、しきい値超過時の意思決定とエスカレーションを自動化する。
• ビジネスメトリクスと接続されたレポートを週次で発行し、クライアントへの透明性と追加予算提案につなげる。

1. SLO設計 — 期待値とエラーバジェット

指標	目標値 (モバイル)	収集元	備考
LCP	p75 ≤ 2.3s	RUM + CrUX	サーバーレンダリングと画像最適化の影響を即時反映
INP	p75 ≤ 200ms	RUM	画像Lazy Loadとインタラクションの衝突を監視
CLS	p75 ≤ 0.1	合成監視	画像プレースホルダーと広告差し替えの揺れを解析
エラー率	0.2%未満	CDNログ + APM	画像生成ワーカーやEdge関数の例外を含める

• エラーバジェットは月間で算出し、消費量が60%を超えた時点で新規機能リリースに制限をかける。
• KPIとの見通しを良くするため、商材ページごとの収益寄与をメトリクスに紐づける。

2. 計測スタックの構築

Real User Monitoring (RUM)

• Web VitalsライブラリをNext.jsに組み込み、各ロケールのMeasurement Protocolエンドポイントへ送信。
• 地域別・デバイス別の分布をLooker Studioで可視化し、LCPボトルネックを特定。

合成監視

• Playwright + Lighthouse CIを利用し、クリティカルページを15分間隔で検証。
• 各シナリオに**[performance-guardian](/ja/tools/performance-guardian)** CLIを組み合わせ、画像サイズや遅延の劣化を即検知。

ログ / トレース

• Next.jsのEdge RuntimeをOpenTelemetryで計測し、LCP対象リソースの取得時間やキャッシュヒット率をBigQueryへ集約。
• metadata-audit-dashboard の結果を同じデータウェアハウスに格納し、LCP悪化時にメタデータ欠落との相関をチェック。

3. 運用フローとRunbook

インシデント検知

1. RUMでLCPのp75が2.3sを超える。
2. PagerDutyでSRE当番に通知、CoreチャンネルへSlack連携。
3. 自動添付されるダッシュボードで、対象ロケールと影響ページを即確認。

エスカレーション例

ステージ	対応	目標時間
Triage	監視担当がimage-trust-score-simulatorで画像の信頼性指標を確認し、キャッシュ問題を切り分け	15分
Mitigation	画像配信チームがハイパフォーマンス版アセットへ切り替え、必要に応じてCDNパージ	30分
Recovery	合成監視で改善を確認し、RUMでp75が目標値に戻ったことを記録	60分
Postmortem	24時間以内にRCAsと再発防止策をNotionへ投稿	24時間

Runbook抜粋

• LCP悪化 (画像起因): next/imageレスポンスサイズ増加、フォールバックS3の遅延、メタデータ不備でAVIFがJPEGにフォールバック。
• INP悪化 (JS起因): Hero画像Lazy Load後のイベント処理競合。解決策は優先度ヒントとコントローラブルなインタラクション分離。
• CLS超過: 広告ラッパーの高さ予約不足。プレースホルダーCSSとaspect-ratioを更新。

4. レポートとガバナンス

• 週次レビューでは、SLO達成状況・エラーバジェット消費率・収益への影響をダッシュボードで共有。
• クライアントには地域別の改善事例（例: APACでのLCP改善がCVR +4%）を提示し、継続的な画像最適化プロジェクトへの投資を提案。
• 内部ではOKRに直結させ、週次レポートが自動でストレージに保存されるようGCSバケットを設定。

5. 次の実装ステップ

1. SLOテンプレートの自動生成: 新規案件開始時にGithubリポジトリへIssueテンプレートとして展開。
2. WAF/エッジログとの統合: BotトラフィックによるLCP悪化を自動ラベル付け。
3. 画像バージョン管理: [performance-guardian](/ja/tools/performance-guardian)で検出した品質低下をPull Requestコメントとしてフィードバック。

まとめ

Core Web VitalsをSREの標準オペレーションに落とし込むことで、制作会社は

• 契約上のSLAを守りつつ、
• デザイン・実装・配信チーム間の連携を高速化し、
• クライアントへの価値提供と提案の幅を広げられます。

本ガイドをベースに、各プロジェクト固有の制約や商材に合わせてRunbookとメトリクスを微調整し、2025年のパフォーマンス競争で優位に立ちましょう。