New Relic Core Web Vitals監視設定 - ユーザーエクスペリエンス最適化の基本 ​

Core Web Vitalsは、Googleが定義したユーザーエクスペリエンスの品質を測定する重要な指標群で、検索ランキングにも影響を与えます。New Relic Browser Agentは、これらの指標を自動的に収集し、分析機能を提供します。この記事では、Core Web Vitals監視の基本的な設定方法と改善のポイントを解説します。

Core Web Vitalsとは ​

Core Web Vitalsは、Webページのユーザーエクスペリエンスを定量化する3つの主要指標で構成されています。

LCP（Largest Contentful Paint） ​

LCPは、ページの主要コンテンツの読み込み完了時間を測定します。ビューポート内で最も大きなコンテンツ要素（画像、動画、テキストブロック）がレンダリングされるまでの時間を追跡します。

良好な値の基準は2.5秒以下で、4.0秒を超えると改善が必要とされます。LCPの測定対象となる要素には、画像要素、動画要素、CSS背景画像を持つ要素、テキストノードを含むブロックレベル要素が含まれます。

INP（Interaction to Next Paint） ​

INPは、ページ上のインタラクション（クリック、タップ、キー入力）の応答時間を測定し、そのページでのインタラクションの全体的な応答性を評価します。

良好な値の基準は200ミリ秒以下で、500ミリ秒を超えると改善が必要です。INPは、ページ上で発生したすべてのインタラクションを考慮し、最も遅い応答時間を報告します。

CLS（Cumulative Layout Shift） ​

CLSは、ページの視覚的安定性を測定し、予期しないレイアウトの変化の累積スコアを算出します。画像の読み込み、広告の挿入、フォントの読み込みなどによる意図しないレイアウトシフトを検知します。

良好な値の基準は0.1以下で、0.25を超えると改善が必要とされます。

New RelicでのCore Web Vitals監視設定 ​

New Relic Browser Agentは、現代ブラウザの標準APIを使用してCore Web Vitalsを自動的に測定します。

基本的な設定 ​

javascript
// Core Web Vitals自動監視の有効化
window.NREUM.loader_config = {
  agent: {
    debug: false
  },
  
  // パフォーマンス監視の詳細設定
  page_view_timing: {
    enabled: true,
    harvestTimeSeconds: 30
  },
  
  spa: {
    enabled: true,
    harvestTimeSeconds: 10
  }
};

この設定により、Browser AgentはCore Web Vitalsを自動収集し、New Relicダッシュボードで確認できるようになります。

Core Web Vitalsの改善戦略 ​

LCP改善のポイント ​

LCP（最大コンテンツ描画時間）を改善するには、以下のポイントが重要です。

画像の最適化では、WebP形式の使用や適切なサイズ設定により、読み込み時間を短縮できます。

クリティカルCSSの実装により、ページの初期描画に必要なCSSを優先的に読み込みます。

リソースの事前読み込みでは、preloadタグを使用して重要なリソースを事前に取得します。

INP改善のポイント ​

INP（インタラクション応答時間）を改善するための基本的なアプローチです。

JavaScriptの最適化では、重い処理を分割し、メインスレッドをブロックしないよう工夫します。

イベントハンドラーの軽量化により、ユーザーの操作に対する応答速度を向上させます。

DOM操作の最適化では、必要最小限のDOM変更に留めて、レンダリング負荷を軽減します。

CLS改善のポイント ​

CLS（累積レイアウト変位）を改善するための対策です。

画像サイズの事前指定により、画像読み込み時のレイアウト変化を防止します。

フォント表示の最適化では、font-display: swapを使用してフォント読み込み時の表示を安定させます。

広告領域の確保により、動的コンテンツによるレイアウトシフトを防ぎます。

New Relicでの分析とアラート設定 ​

ダッシュボードでの確認 ​

New RelicのBrowser監視画面では、Core Web Vitalsの傾向と分布を視覚的に確認できます。各指標の時系列変化、デバイス別の比較、地域別の分析などが可能です。

基本的なアラート設定 ​

重要なパフォーマンス指標に基づいてアラートを設定します。

javascript
// カスタム監視の例
if (typeof newrelic !== 'undefined') {
  // LCP値の記録
  new PerformanceObserver((entryList) => {
    const entries = entryList.getEntries();
    const lastEntry = entries[entries.length - 1];
    
    newrelic.addPageAction('core_web_vitals_lcp', {
      value: lastEntry.startTime,
      grade: lastEntry.startTime <= 2500 ? 'good' : 'needs_improvement'
    });
  }).observe({ type: 'largest-contentful-paint', buffered: true });
}

パフォーマンス予算の設定 ​

javascript
const performanceBudgets = {
  lcp: 2500,  // LCP予算（ミリ秒）
  inp: 200,   // INP予算（ミリ秒）
  cls: 0.1    // CLS予算
};

まとめ ​

Core Web VitalsのNew Relic監視により、ユーザーエクスペリエンスの定量的な評価と継続的な改善が可能になります。

重要なポイント：

  1. 自動監視: Browser Agentが Core Web Vitalsを自動収集
  2. リアルタイム分析: 実際のユーザーデータに基づく分析
  3. 改善指標: 各指標の具体的な改善方法の理解
  4. 継続監視: アラートとダッシュボードによる継続的な監視

これらの基本設定と改善戦略により、WebサイトのパフォーマンスとSEO評価の向上を実現できます。まず基本的な監視を開始し、データを収集しながら段階的に改善を進めることをお勧めします。

次のステップとして、より詳細な設定オプションやカスタムダッシュボードの作成について学習を進めてみましょう。

関連記事: Browser Agent設定リファレンス関連記事: Browser Agent概要