实验室测试（Lighthouse、持续集成基准测试）告诉您应用程序在测试机器上的表现。真实用户监控告诉您应用程序在实际用户的设备、网络和地理位置上的表现。真实用户监控能捕捉到实验室测试永远无法发现的问题——缓慢的连接、内存压力、广告拦截器干扰以及地域差异。本指南涵盖了 tanstackship.com 的真实用户监控实施。
实验室数据与现场数据
| 方面 | 实验室（Lighthouse） | 现场（真实用户监控） |
|---|---|---|
| 环境 | 受控环境（Moto G4，慢速 3G） | 真实用户设备 |
| 网络 | 模拟限速 | 实际连接（5G、4G、3G、WiFi） |
| 位置 | 单一位置 | 全球（330+ Cloudflare 节点位置） |
| 设备 | 固定设备配置 | 所有设备和外形规格 |
| 样本量 | 每次拉取请求单次运行 | 每次页面加载 |
| 检测内容 | 优化机会 | 实际用户体验问题 |
| 缺失内容 | 真实用户的体验 | 受控对比 |
事实真相：实验室数据告诉您需要修复什么。现场数据告诉用户实际体验到了什么。两者您都需要。
真实用户监控数据收集
设置 Web Vitals 收集
// src/lib/rum.ts
import { onLCP, onCLS, onINP, onTTFB, onFCP } from "web-vitals/attribution"
type VitalName = "LCP" | "CLS" | "INP" | "TTFB" | "FCP"
interface VitalReport {
name: VitalName
value: number
rating: "good" | "needs-improvement" | "poor"
id: string
metadata: Record<string, string>
免责声明：本文内容来自互联网，该文观点不代表本站观点。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请到页面底部单击反馈，一经查实，本站将立刻删除。
