工具与平台

Vercel Analytics 深度指南：Web Vitals 监控、真实用户性能与转化归因

全面解析 Vercel Analytics（真实用户监控 RUM）与 Speed Insights（Web Vitals）两大工具，覆盖安装集成、自定义事件追踪、性能瓶颈诊断、转化归因分析，以及与 Google Analytics 4 / Datadog 的对比选型。

灵羽智库 4 分钟阅读 1680 字

前置阅读：建议先阅读 Vercel 详解 了解平台整体定位。

关键概念：Vercel Analytics 提供真实用户监控（RUM），Speed Insights 专注 Core Web Vitals 性能指标，两者配合使用可实现"性能问题 → 根因定位 → 修复验证"的闭环。

  1. ² 产品定位与差异

    工具核心功能数据类型采样率免费额度
    Vercel Speed InsightsCore Web Vitals 采集与评分性能指标（LCP/INP/CLS 等）100%含在平台套餐
    Vercel Analytics页面浏览、自定义事件、转化行为数据 + 事件100%Pro 以下免费
    Google Analytics 4全链路营销分析流量来源 + 转化漏斗可配置免费
    Datadog RUM企业级全栈监控性能 + 错误 + 资源可配置$$$

    推荐组合：Speed Insights（性能） + GA4（营销） + Vercel Analytics（行为），Datadog 用于需要错误追踪和日志关联的场景。

  2. ³ Speed Insights：Web Vitals 监控

    2.1 安装与基础集成

    npm install @vercel/speed-insights

    // app/layout.tsx (Next.js App Router)
import { SpeedInsights } from "@vercel/speed-insights/next";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        {children}
        <SpeedInsights />
      </body>
    </html>
  );
}

    // pages/_app.tsx (Next.js Pages Router)
import { SpeedInsights } from "@vercel/speed-insights/react";

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <SpeedInsights />
    </>
  );
}

    2.2 关键指标说明

    指标全称良好阈值测量内容优化方向
    TTFBTime to First Byte< 800ms首字节到达时间CDN 缓存、Edge Functions
    FCPFirst Contentful Paint< 1.8s首次内容渲染关键 CSS 内联、字体预加载
    LCPLargest Contentful Paint< 2.5s最大元素渲染图片优化、优先加载英雄图
    CLSCumulative Layout Shift< 0.1累积布局偏移图片尺寸预留、避免插入内容
    INPInteraction to Next Paint< 200ms交互响应延迟长任务拆分、Web Worker

    2.3 自定义性能标记

    // lib/performance-mark.ts
export function mark(name: string, detail?: Record<string, any>) {
  if (typeof window !== "undefined" && "performance" in window) {
    performance.mark(name, detail ? { detail } : undefined);
  }
}

export function measure(name: string, startMark: string, endMark: string) {
  if (typeof window !== "undefined" && "performance" in window) {
    performance.measure(name, startMark, endMark);
  }
}

// 使用示例：测量 API 响应到渲染完成
export function trackApiRender(apiName: string) {
  const start = `${apiName}-start`;
  const end = `${apiName}-end`;

  return {
    start: () => mark(start),
    end: () => {
      mark(end);
      measure(`${apiName}-to-render`, start, end);
    },
  };
}

    // 组件中使用
export function ProductList() {
  const tracker = useRef(trackApiRender("products-api"));

  useEffect(() => {
    tracker.current.start();
    fetch("/api/products")
      .then(r => r.json())
      .then(() => tracker.current.end());
  }, []);

  return <div>...</div>;
}

  3. ⁴ Vercel Analytics：行为追踪

    3.1 安装

    npm install @vercel/analytics

    // app/layout.tsx
import { Analytics } from "@vercel/analytics/react";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

    3.2 自定义事件追踪

    // lib/analytics.ts
import { track } from "@vercel/analytics";

export const AnalyticsEvents = {
  // 电商转化事件
  addToCart: (productId: string, price: number) =>
    track("add_to_cart", { product_id: productId, price }),

  checkoutStarted: (value: number, currency: string = "USD") =>
    track("checkout_started", { value, currency }),

  purchaseCompleted: (orderId: string, value: number, items: number) =>
    track("purchase", { order_id: orderId, value, items }),

  // 产品使用事件
  featureUsed: (feature: string, metadata?: Record<string, any>) =>
    track("feature_used", { feature, ...metadata }),

  // 错误追踪
  error: (type: string, message: string) =>
    track("client_error", { error_type: type, message: message.slice(0, 100) }),
};

    3.3 转化归因追踪

    // lib/attribution.ts
export function getAttribution() {
  if (typeof window === "undefined") return null;

  const params = new URLSearchParams(window.location.search);
  return {
    source: params.get("utm_source") || "direct",
    medium: params.get("utm_medium") || "none",
    campaign: params.get("utm_campaign") || "none",
    landingPage: window.location.pathname,
    referrer: document.referrer,
  };
}

// 在转化事件中附加上游来源
export function trackPurchase(orderId: string, value: number) {
  const attribution = getAttribution();
  track("purchase", {
    order_id: orderId,
    value,
    ...attribution,
  });
}

  4. ⁵ 性能瓶颈诊断实战

    场景：LCP 指标持续高于 3s

    // lib/diagnostics.ts
import { getLCP, getFID, getFCP, getTTFB, getCLS } from "web-vitals";
import { sendToAnalytics } from "@vercel/speed-insights";

export function initDiagnostics() {
  // 采集所有 Web Vitals 并附加上下文
  getTTFB(console.log);
  getFCP(console.log);
  getLCP((metric) => {
    // LCP 元素详情分析
    if (metric.element) {
      const el = document.querySelector(metric.element);
      console.warn("LCP element:", {
        tag: el?.tagName,
        src: (el as HTMLImageElement)?.src,
        size: metric.size,
        loadTime: metric.loadTime,
      });

      // 如果 LCP 是图片且加载慢，上报详细诊断信息
      if (metric.value > 2500 && el?.tagName === "IMG") {
        track("slow_lcp_image", {
          src: (el as HTMLImageElement).src,
          size: metric.size,
          lcp_value: Math.round(metric.value),
        });
      }
    }
  });

  getCLS((metric) => {
    // CLS 具体贡献元素
    if (metric.entries) {
      metric.entries.forEach(entry => {
        // @ts-ignore
        if (entry.sources) {
          // @ts-ignore
          entry.sources.forEach((source: any) => {
            console.warn("CLS source:", source.node?.tagName, source.currentRect);
          });
        }
      });
    }
  });

  getINP(console.log);
}

    常见性能问题与修复：

    问题诊断信号修复方案
    图片拖慢 LCPLCP 元素是 IMG使用 Next.js <Image>、WebP/AVIF、优先级加载
    字体导致 FOUTFCP 远早于 LCPfont-display: swap + 预加载关键字体
    JS 阻塞交互INP > 300ms代码分割、defer 非关键脚本、Web Workers
    布局跳动CLS > 0.25图片/iframe 尺寸预留、避免插入动态广告

  5. ⁶ 服务端指标与 Edge 函数性能

    // middleware.ts — Edge Function 性能追踪
import { NextResponse } from "next/server";

export async function middleware(request: Request) {
  const start = Date.now();
  const response = NextResponse.next();
  const duration = Date.now() - start;

  // 在响应头中附加 Edge 处理时间（供客户端关联）
  response.headers.set("x-edge-duration", duration.toString());

  // 慢请求上报
  if (duration > 500) {
    // 这里可以调用外部日志服务
    console.warn(`Slow edge function: ${duration}ms for ${request.url}`);
  }

  return response;
}

  6. ⁷ 仪表盘配置与告警

    Vercel Dashboard 关键视图：

    • Overview：Web Vitals 趋势图 + 流量概览
    • Speed Insights：页面级性能分解
    • Analytics：访客来源、设备分布、地理位置
    • Real User Experiences：INP 交互热力图

    建议告警阈值（配合第三方服务如 PagerDuty）：

    {
  "alerts": [
    { "metric": "LCP", "threshold": 3000, "window": "5m" },
    { "metric": "INP", "threshold": 300, "window": "5m" },
    { "metric": "error_rate", "threshold": 0.05, "window": "1m" }
  ]
}

    注：Vercel 原生不支持自定义告警阈值，需要导出数据到 Datadog / New Relic 实现。

  7. ⁸ 隐私合规与数据控制

    // 根据用户偏好禁用追踪
export function ConsentAwareAnalytics() {
  const [consent, setConsent] = useState(false);

  if (!consent) return null;

  return (
    <>
      <SpeedInsights />
      <Analytics />
    </>
  );
}

// 在 layout.tsx 中使用
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <ConsentAwareAnalytics />
      </body>
    </html>
  );
}
    合规要求Vercel 支持配置方式
    GDPR✅条件渲染 Analytics 组件
    CCPA✅不收集可识别个人信息
    数据保留✅默认 30 天，Pro 可调

延伸阅读：

继续阅读

探索更多技术文章

浏览归档，发现更多关于系统设计、工具链和工程实践的内容。

全部文章 返回首页

「工具与平台」更多文章

Vercel Edge Config 完全指南：毫秒级配置下发与 A/B 测试驱动 深入 Vercel Edge Config 全局键值存储：与 Edge Functions / Middleware 的低延迟集成、A/B 测试与功能开关实现、多环境管理、版本控制与回滚策略，提供 TypeScript 端到端实现与性能基准。 Vercel AI SDK 深度实战：Tool Calling、Schema 流式输出与多模型路由 深入 Vercel AI SDK 三大核心包（ai / @ai-sdk/openai / @ai-sdk/react），覆盖 generateObject 结构化输出、streamText 工具调用流、多模型路由与回退、Server Action 集成等高级场景，提供端到端 TypeScript 实现。 Cloudflare Workers AI 高级实战：自定义模型部署、批量推理与 AI Gateway 缓存策略 深入 Cloudflare Workers AI 生产级应用：Workers AI Catalog 模型量化原理、批量推理优化、AI Gateway 多级缓存与智能限流、自定义模型 Workers AI 部署（TensorFlow.js / ONNX Runtime），含完整 TypeScript 实现与成本基准。