Nuxt Web Vitals

Web Vitals：健全なNuxtに欠かせないモジュール

Web Vitalsは、Web上で優れたユーザーエクスペリエンスを提供するために不可欠な品質シグナルに対する統一されたガイダンスを提供するためのGoogleのイニシアチブです。

このモジュールは、各ページビューでこれらの指標を収集し、Navigator.sendBeacon()またはfetch()を使用してプロバイダーに送信します。

インストール

npx nuxi@latest module add web-vitals

@nuxtjs/web-vitalsをnuxt.config.jsのmodulesセクションに追加します。

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/web-vitals'
  ]
})

⚠️ Nuxt < v2.9を使用している場合は、dependencyとしてモジュールをインストールする必要があります（--save-devまたは--devフラグはありません）。Nuxt 2.9+(ただしNuxt 3ではありません)の場合は、modulesではなくbuildModulesにモジュールを追加する必要があります。

オプション

export default defineNuxtConfig({
  webVitals: {
    // provider: '', // auto detectd
    debug: false,
    disabled: false
  }
})

プロバイダー

Google Analytics

WebVitalsをGAに報告する

GAプロパティを作成し、trackingIDを取得します。

GOOGLE_ANALYTICS_ID環境変数を指定するか、nuxt.config内で設定します。

（最上位レベルのgoogleAnalytics.idは、下位互換性のためにフォールバックとしてサポートされています。）

export default defineNuxtConfig({
  webVitals: {
    ga: { id: 'UA-XXXXXXXX-X' }
  }
})

行動>イベント>概要>イベントカテゴリ>イベントアクション

Events Actions

WebVitalsをGTMに報告する

GTMプロパティを作成し、タグマネージャーをサイトに追加します。

export default defineNuxtConfig({
  webVitals: {
    gtm: {}
  }
})

Vercel Analytics

WebVitalsをVercelに報告する

構成なしで動作します

基本ロガー

WebVitalsをコンソールに報告する

他のプロバイダーに送るのではなく、コンソールに出力メトリクス

export default defineNuxtConfig({
  webVitals: {
    provider: 'log',
    debug: true, // debug enable metrics reporting on dev environments
    disabled: false
  }
})

⚠️このプロバイダーはネットワークでWebVitalsを送信せず、ナビゲーター拡張機能の問題は、この方法では検出できません。

カスタム API へのロギング

カスタム API エンドポイントにWebVitalsを報告

export default defineNuxtConfig({
  webVitals: {
    provider: 'api',
    api: { url: '/api/web-vitals' }
    debug: true // debug enable metrics reporting on dev environments
  })

本文の例

export default defineNuxtConfig({
  href: 'https://127.0.0.1:3000/',
  name: 'LCP',
  value: 303.599,
  rating: 'good',
  delta: 303.599,
  entries: [
    {
      name: '',
      entryType: 'largest-contentful-paint',
      startTime: 303.599,
      duration: 0,
      size: 5698,
      renderTime: 303.599,
      loadTime: 0,
      firstAnimatedFrameTime: 0,
      id: '',
      url: ''
    }
  ],
  id: 'v3-1669725914225-9792921995831',
  navigationType: 'reload'
})

ライセンス

MIT