Google の Core Web Vitals を監視して、ユーザー体験と検索ランキングを改善します。
Core Web Vitals とは？
Core Web Vitals は、ユーザー体験を測定するための Google のメトリクスです:
| メトリクス | フルネーム | 測定項目 | 良好 | 改善が必要 | 不良 |
|---|---|---|---|---|---|
| LCP | Largest Contentful Paint | 読み込み | ≤2.5s | 2.5–4s | >4s |
| INP | Interaction to Next Paint | インタラクティブ性 | ≤200ms | 200–500ms | >500ms |
| CLS | Cumulative Layout Shift | 視覚的安定性 | ≤0.1 | 0.1–0.25 | >0.25 |
重要な理由
- SEO への影響: Google は CWV をランキング シグナルとして使用します
- ユーザー体験: エンゲージメントとコンバージョンと相関します
- パフォーマンス予算: 測定可能な目標を設定します
CWV モニタリングを有効化する
Core Web Vitals の収集は、Free を含むすべてのプランで既定で有効です。 トラッキング スクリプトがロードされていれば、トラッカーは LCP・CLS・INP・FCP・TTFB をすべての実訪問セッションから計測し、訪問者がページを離れる瞬間にちょうど 1 回ビーコンを送信します。
標準のスクリプト タグだけで十分です:
<script
defer
data-tracking-code="YOUR_TRACKING_CODE"
src="https://api.zenovay.com/z.js"
></script>
追加属性もスクリプトの変更も不要です。トラッカーが実際に発火しているか確認したい場合は、サイトの設定から Install Health タブを開いてください。
特定サイトで無効化する(上級)
特定のトラッキング対象サイトを CWV 収集から除外したい場合は、そのサイトの設定で enable_core_web_vitals 機能フラグを false にしてください。既定で全員が有効のため、アプリ内のトグルはありません — [email protected] でサポートに連絡してください。
ダッシュボード概要
CWV サマリー
サイトのダッシュボードを開き、Performance タブを選択します (サイドバーの BEHAVIOR グループ下):
Core Web Vitals 概要
LCP ████████████████░░░░ 2.1s ✓ 良好
INP ██████████████████░░ 156ms ✓ 良好
CLS ████████████████████ 0.05 ✓ 良好
P75 スコア
ツールバーを使用してパーセンタイル (P75、P90、P95、P99) を切り替えたり、デバイス (すべて、デスクトップ、モバイル) でフィルタリングしたり、時間範囲 (24 時間、7 日、30 日、90 日) を変更したりできます。
スコア分布
各メトリクス タイルは、選択したパーセンタイルの「良好/改善が必要/不良」のしきい値全体に対する訪問の分布を表示します:
| 評価 | LCP | INP | CLS |
|---|---|---|---|
| 良好 | 65% | 72% | 85% |
| 改善が必要 | 25% | 20% | 10% |
| 不良 | 10% | 8% | 5% |
Largest Contentful Paint (LCP)
測定内容
最大のコンテンツ要素が表示されるまでの時間:
- 画像
- ビデオのサムネイル
- 背景画像
- テキスト ブロック
ダッシュボードの LCP
- 時系列トレンド: 選択した範囲全体での選択パーセンタイルの LCP
- ページごと: 最も遅いルート
- デバイスごと: デスクトップ対モバイル
- 地理別: 国/地域別の LCP のコロプレス マップ
- 問題のある要素: LCP として測定された特定の要素
LCP の一般的な問題
| 問題 | 影響 | 解決策 |
|---|---|---|
| サーバー応答が遅い | 高 | TTFB を最適化、CDN を使用 |
| レンダリングをブロックするリソース | 高 | 重要でない CSS/JS を遅延ロード |
| 大きな画像 | 高 | 最適化、WebP を使用、遅延読み込み |
| クライアント側レンダリング | 中 | SSR、プリレンダリング |
| サードパーティ スクリプト | 中 | 非同期読み込み、不要な削除 |
LCP の改善
画像最適化:
<!-- LCP 画像をプリロード -->
<link rel="preload" as="image" href="hero.webp">
<!-- レスポンシブ画像 -->
<img
src="hero.webp"
srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
sizes="100vw"
loading="eager"
fetchpriority="high"
/>
リソース ヒント:
<!-- 重要なオリジンへの事前接続 -->
<link rel="preconnect" href="https://cdn.example.com">
<link rel="dns-prefetch" href="https://api.example.com">
Interaction to Next Paint (INP)
測定内容
ユーザー インタラクションへの応答性:
- クリック
- タップ
- キー押下
INP はインタラクションから次の視覚的更新までの時間を測定します。
ダッシュボードの INP
- INP スコア: 選択したパーセンタイル (既定は P75)
- ページごと: インタラクティブ性の最も遅いルート
- デバイスごと: デスクトップ対モバイル
INP の一般的な問題
| 問題 | 影響 | 解決策 |
|---|---|---|
| 長い JavaScript タスク | 高 | タスクを分割、Web Worker を使用 |
| 大きい DOM | 中 | リストを仮想化、構造を簡素化 |
| 重いイベント ハンドラー | 高 | デバウンス、ハンドラーを最適化 |
| レイアウト スラッシング | 中 | DOM 読み取り/書き込みをバッチ処理 |
| サードパーティ スクリプト | 中 | 遅延読み込み、分離 |
INP の改善
長いタスクを分割:
// 前: 長い同期タスク
function processLargeArray(items) {
items.forEach(item => expensiveOperation(item));
}
// 後: メイン スレッドにイールド
async function processLargeArray(items) {
for (const item of items) {
expensiveOperation(item);
// レンダリングを許可するためにイールド
await new Promise(r => setTimeout(r, 0));
}
}
requestIdleCallback を使用:
function runWhenIdle(callback) {
if ('requestIdleCallback' in window) {
requestIdleCallback(callback, { timeout: 2000 });
} else {
setTimeout(callback, 100);
}
}
Cumulative Layout Shift (CLS)
測定内容
視覚的安定性 - コンテンツの予期しないシフト量:
- ディメンションなしで読み込まれる画像
- サイズが変更される広告/埋め込み
- 動的コンテンツ挿入
- Web フォント読み込み
ダッシュボードの CLS
- CLS スコア: 選択したパーセンタイル (既定は P75)
- ページごと: シフトが最も多いページ
- デバイスごと: デスクトップ対モバイル
CLS の一般的な問題
| 問題 | 影響 | 解決策 |
|---|---|---|
| ディメンションなしの画像 | 高 | 常に幅/高さを設定 |
| 予約スペースなしの広告 | 高 | プレースホルダー コンテナーを使用 |
| 折り目上の動的コンテンツ | 中 | スペースを予約、変換を使用 |
| Web フォント読み込み | 中 | font-display: swap を使用 |
| 後から読み込まれる埋め込み | 中 | スペースを予約、遅延読み込み |
CLS の改善
画像用スペースを予約:
<!-- 常にディメンションを含める -->
<img src="photo.jpg" width="800" height="600" alt="Photo">
<!-- またはアスペクト比を使用 -->
<style>
.image-container {
aspect-ratio: 16 / 9;
}
</style>
広告用スペースを予約:
.ad-slot {
min-height: 250px;
background: #f0f0f0;
}
フォント読み込み戦略:
@font-face {
font-family: 'CustomFont';
src: url('font.woff2') format('woff2');
font-display: swap;
}
ページレベルの分析
ページごとのドリルダウン
Performance タブにはルート別の内訳が含まれており、どのページがメトリクスを低下させているかを確認できます:
- Performance タブを開く
- ページ別の内訳までスクロール
- 最悪の結果を見つけるために並べ替え
- 問題のある要素パネルを使用して、何が LCP として測定されているかを確認
ページ パフォーマンス カード
/products/widget
LCP: 2.8s ⚠ 改善が必要
INP: 145ms ✓ 良好
CLS: 0.18 ⚠ 改善が必要
問題のある要素:
• LCP 要素: img.hero-banner
• CLS ソース: .reviews-widget
• INP ターゲット: button.add-to-cart
サンプル: 12,450
問題のある要素パネルには、LCP として測定された特定のページ要素、レイアウト シフトの最大ソース、および最も遅い INP でユーザーが操作した要素が表示されます。これらの CSS セレクターは、修正すべき内容を直接指します。
セグメンテーション
デバイスタイプ別
Performance タブ全体をデバイスでフィルタリング (すべて、デスクトップ、モバイル):
デバイス LCP INP CLS
デスクトップ 2.0s 120ms 0.05
モバイル 3.2s 210ms 0.12
地理別
コロプレス マップは、国/地域別の CWV スコアを表示して、CDN またはサーバーの場所の問題を特定するのに役立ちます:
地域 LCP INP CLS
北米 2.1s 140ms 0.05
ヨーロッパ 2.4s 150ms 0.06
アジア 3.6s 180ms 0.08
アラートとレポート
Zenovay の自動アラートは、メトリクスあたりの Web Vital しきい値ではなく、異常検出とトラフィック スパイクをカバーしています。全体的なパフォーマンスの変化について通知を受け取り、定期的な概要をスケジュールするには、専用のパフォーマンス アラートガイドを参照してください。
他のツールとの統合
Google Search Console
Zenovay データと GSC を比較:
- Zenovay: リアル ユーザー データ (RUM)
- GSC: ラボ データ + フィールド データ
Lighthouse
Lighthouse 監査を実際のデータと関連付けます。
PageSpeed Insights
監視には Zenovay、推奨事項には PageSpeed を使用します。
履歴比較
トレンド分析
- 24h、7d、30d、90d の範囲を比較
- 時間経過に伴う改善を確認
- トレンドとデプロイ日付を相関させる
- 目標に向かって追跡
ベストプラクティス
監視戦略
- ベースラインを設定: 現在のパフォーマンスを把握
- 目標を定義: 業界/競合に基づく
- 継続的に監視: 1 回限りの監査ではなく
- セグメント化された分析: モバイルはしばしば劣っています
- 修正を優先順位付け: 影響対努力
パフォーマンス予算
メトリクス 現在 目標 予算
LCP 2.8s 2.0s ✗ 超過
INP 150ms 150ms ✓ 目標通り
CLS 0.08 0.1 ✓ 目標以下
定期的なレビュー
- 週単位: 回帰をチェック
- 月単位: 詳細な分析
- 四半期: 戦略的計画
トラブルシューティング
データが表示されない
確認:
- スクリプトが正しくインストールされている (サイトの設定から Install Health タブを使用して、トラッカーが発火していることを確認)
- Core Web Vitals 収集がサイトで無効にされていない (既定で有効 — 上記の「特定サイトで無効化する」を参照)
- トラフィックが十分である (実際のユーザーが必要)
予期しない値
以下を考慮:
- ボット トラフィックがデータをスキュー
- 開発/ステージング トラフィック
- ブラウザー サポートの違い
ラボ データとの不一致
正常 — RUM キャプチャ:
- 実際のネットワーク条件
- 実際のデバイス パフォーマンス
- 実際のユーザー動作
- 地理的分布