Vercel Analytics:前端的内置分析工具

Vercel Analytics 评测 — Web Vitals、访问量和网站性能一体化仪表板。工作原理、显示内容和适用场景。

Vercel Analytics 是 Vercel 平台上网站和应用的内置分析工具。包括两个产品:Analytics(性能和 Web Vitals)和 Speed Insights(详细的速度指标分析)。它们的出现是为了响应开发者查看真实用户交互数据的需求 — 无需接入第三方服务。

官网:vercel.com/analytics

功能组成

Web Vitals Analytics — 基于真实用户的 Core Web Vitals(LCP、INP、CLS)。不是 Lighthouse 的实验室测试数据,而是来自真实访客浏览器的数据。可按设备、国家、浏览器版本、连接类型进行细分。你可以看到网站在印度的 3G 网络下表现迟缓,但在德国的光纤网络下运行良好。

Audience Analytics — 访问量、独立访客、流量来源、地理位置。比 GA4 更轻量,没有漏斗和转化。只回答"有多少人访问了网站、从哪里来"的问题。

Speed Insights — 特定页面的详细性能分析。显示哪个元素导致延迟,哪个脚本阻塞渲染,图片的文件大小。是实用的优化工具,而不仅仅是数字指标。

隐私

Vercel Analytics 不使用 Cookie,不收集个人数据,不需要 Cookie 横幅。数据匿名化。开箱即用的 GDPR 合规 — 对欧洲项目来说这是重要优势。

如何接入

在 Next.js 应用中只需两行代码:

import { Analytics } from '@vercel/analytics/react';
// 在组件中:<Analytics />

或者任何网站的 HTML 脚本 — Vercel 不要求托管在其平台上。脚本只有几 KB,不影响性能(异步加载)。

价格方案

Web Vitals 对所有套餐免费。Audience Analytics — Pro 计划的一部分($20/月/用户)。Speed Insights — 包含在 Pro 中。如果你在 Vercel 上运行爱好项目 — 基础分析已足够。对于商业网站,Vercel Pro 套餐同时覆盖托管和分析。

优点

与 Vercel 生态系统的集成:部署、分析、域名、监控 — 全在一个仪表板中。对于 Next.js 项目,这是自然的选择。

对性能的影响微乎其微。Vercel Analytics 脚本比 Google Analytics 轻 5–10 倍。不拖慢页面加载速度。

数据几乎实时更新。部署后 — 一分钟内就能看到首批指标。

缺点

非 Vercel 项目的集成受限。是的,HTML 脚本可以工作,但框架的深度集成仅适用于 Next.js。Nuxt、SvelteKit、Remix — 被忽视了。

访问量分析层次较浅。没有漏斗、事件、转化。Vercel 不试图替代 GA4 — 它用性能数据作为补充。

供应商锁定:数据存储在 Vercel 平台上,导出受限。如果离开 Vercel — 将丢失历史数据。

总结

Vercel Analytics 不是 Google Analytics 的竞争者,这反而是好事。对于 Vercel 上的 Next.js 项目,这是必不可少的:免费、快速、私密。显示真实的性能数据,而不是合成的基准测试。如果你的技术栈是 Next.js + Vercel,毫不犹豫地启用它。