Nuxt Web Vitals

Web Vitals：构建健康 Nuxt 应用的必要模块

Web Vitals 是 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 版本，则必须将模块安装为 依赖项（不使用 --save-dev 或 --dev 标志）。如果你使用的是 Nuxt 2.9+（但不是 Nuxt 3），则应将模块添加到 buildModules 而不是 modules 中。

选项

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

提供程序

Google Analytics

将 Web Vitals 报告到 GA

创建一个 GA 属性并获取 trackingID

提供 GOOGLE_ANALYTICS_ID 环境变量或在 nuxt.config 中设置。

（为了向后兼容性，支持顶级 googleAnalytics.id 作为后备。）

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

行为 > 事件 > 概述 > 事件类别 > 事件操作

Events Actions

将 Web Vitals 报告到 GTM

创建一个 GTM 属性并将标签管理器添加到您的网站。

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

Vercel Analytics

将 Web Vitals 报告到 Vercel

无需配置即可使用

基本日志记录器

将 Web Vitals 报告到控制台

将指标输出到控制台，而不是将其发送到远程提供程序。

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

⚠️ 此提供程序不会通过网络发送 Web Vitals，使用此方法无法检测到导航器扩展程序的问题。

记录到自定义 API

将 Web Vitals 报告到自定义 API 端点

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