性能监控仪表板

实时监控网站核心性能指标（Web Vitals）和错误追踪数据

仪表板功能

📊 核心指标监控

• FCP (First Contentful Paint) - 首次内容绘制时间
• LCP (Largest Contentful Paint) - 最大内容绘制时间
• CLS (Cumulative Layout Shift) - 累积布局移动
• INP (Interaction to Next Paint) - 交互响应时间
• TTFB (Time to First Byte) - 首字节响应时间

⚠️ 错误监控

• 实时错误数统计
• 错误级别分类（高/中/低）
• 与 Sentry 系统集成

🎯 性能评分

基于 Google Core Web Vitals 标准的综合性能评分（0-100）：

• 90-100：优秀 ✅
• 70-89：良好 ⚠️
• < 70：需要改进 ❌

📈 时间范围选择

支持多种时间粒度：

• 最近 1 小时
• 最近 24 小时
• 最近 7 天
• 最近 30 天

集成说明

配置 Sentry

仪表板需要 Sentry API 访问权限：

# 设置环境变量
export SENTRY_AUTH_TOKEN="your-auth-token"
export SENTRY_ORG="your-organization"
export SENTRY_PROJECT="your-project"

启用 Web Vitals 监控

在主题中启用 Web Vitals 自动收集：

// .vitepress/theme/index.ts
import { initPerformanceMonitoring } from './performance';

initPerformanceMonitoring({
  enableLogging: true,
  enableAnalytics: true,
  analyticsEndpoint: 'https://your-api.com/vitals',
});

性能目标和基准

指标	目标	警告	严重
FCP	< 1s	1-1.8s	> 1.8s
LCP	< 2.5s	2.5-4s	> 4s
CLS	< 0.1	0.1-0.25	> 0.25
INP	< 200ms	200-500ms	> 500ms
TTFB	< 600ms	600-1200ms	> 1200ms

常见优化策略

改善 LCP

• 优化关键资源加载（CSS、JavaScript）
• 使用 CDN 分发静态资源
• 启用浏览器缓存
• 优化服务器响应时间

改善 FCP

• 内联关键 CSS
• 推迟非关键资源加载
• 使用 web fonts 预加载
• 优化 HTML 结构

改善 CLS

• 为图片/视频设置尺寸
• 避免在现有内容上方插入内容
• 首选 transform 动画而非其他属性
• 预留空间给动态内容

改善 TTFB

• 升级服务器硬件
• 使用 CDN
• 启用 gzip/brotli 压缩
• 优化数据库查询

数据导出

仪表板支持多种数据导出格式：

• CSV - 用于 Excel 分析
• JSON - 用于集成其他系统
• PDF 报告 - 用于团队展示

告警规则

自动告警触发条件：

• ❌ 严重告警：任何核心指标进入 Critical
• ⚠️ 警告告警：3 个或以上指标进入 Warning
• ℹ️ 信息通知：性能评分下降超过 10 分

告警通道：

• Slack 频道
• 邮件通知
• 钉钉 / 企业微信
• 自定义 Webhook

数据隐私

• 仪表板仅展示聚合数据，不包含用户隐私信息
• 所有数据通过 HTTPS 传输
• 遵守 GDPR 等隐私法规

相关文档

• 性能监控集成
• Sentry 配置指南
• 错误追踪手册
• 性能优化技巧

---

提示：首次访问仪表板时需要 Sentry 访问令牌。请在 Sentry 控制面板 生成。