前端性能 Dashboard

欢迎回到第 12 章的学习。在上一节，我们学习了 Dashboard 设计方法论。现在我们要学习前端性能 Dashboard，这是前端监控的核心。

本节将学习：Core Web Vitals 面板、页面加载性能、用户交互性能、错误率监控、以及地理分布分析。

Core Web Vitals 面板

Core Web Vitals 面板的作用是什么？ 展示 Google 定义的关键用户体验指标，包括 LCP、FID、CLS。

Core Web Vitals 面板包括哪些指标呢？

第一个：LCP（Largest Contentful Paint）。 最大内容绘制时间，理想值 < 2.5 秒。

第二个：FID（First Input Delay）。 首次输入延迟时间，理想值 < 100 毫秒。

第三个：CLS（Cumulative Layout Shift）。 累积布局偏移分数，理想值 < 0.1。

如何设计 Core Web Vitals 面板？ 使用统计图表展示三个指标，设置目标线，显示达标率。

Grafana Dashboard 配置示例：

{
  "panels": [
    {
      "title": "LCP (Largest Contentful Paint)",
      "targets": [
        {
          "expr": "avg(web_vital_lcp_seconds)"
        }
      ],
      "thresholds": [
        {
          "value": 2.5,
          "colorMode": "critical"
        }
      ]
    },
    {
      "title": "FID (First Input Delay)",
      "targets": [
        {
          "expr": "avg(web_vital_fid_seconds) * 1000"
        }
      ],
      "thresholds": [
        {
          "value": 100,
          "colorMode": "critical"
        }
      ]
    },
    {
      "title": "CLS (Cumulative Layout Shift)",
      "targets": [
        {
          "expr": "avg(web_vital_cls)"
        }
      ],
      "thresholds": [
        {
          "value": 0.1,
          "colorMode": "critical"
        }
      ]
    }
  ]
}

页面加载性能

页面加载性能的作用是什么？ 追踪页面加载的各个阶段，识别性能瓶颈，优化加载速度。

页面加载性能包括哪些指标呢？

第一个：DOM 加载时间。 HTML 文档完全加载和解析完成的时间。

第二个：资源加载时间。 所有资源（图片、样式、脚本）都已加载完成的时间。

第三个：FCP（First Contentful Paint）。 首次内容绘制时间。

第四个：TTI（Time to Interactive）。 可交互时间。

页面加载时间线可视化：

用户交互性能

用户交互性能的作用是什么？ 追踪用户交互的响应时间，识别慢交互，优化交互体验。

用户交互性能包括哪些指标呢？

第一个：点击响应时间。 从点击到响应的时间。

第二个：表单提交时间。 表单提交的处理时间。

第三个：路由切换时间。 单页应用的路由切换时间。

错误率监控

错误率监控的作用是什么？ 追踪前端错误，识别错误模式，快速修复问题。

错误率监控包括哪些指标呢？

第一个：JavaScript 错误率。 JavaScript 运行时错误的数量。

第二个：资源加载错误率。 资源加载失败的数量。

第三个：API 错误率。 API 调用失败的数量。

错误率监控查询：

# JavaScript 错误率
sum(rate(frontend_errors_total{error_type="javascript"}[5m]))

# 资源加载错误率
sum(rate(frontend_errors_total{error_type="resource_load"}[5m]))

# API 错误率
sum(rate(http_requests_total{status=~"5.."}[5m])) / sum(rate(http_requests_total[5m]))

地理分布分析

地理分布分析的作用是什么？ 了解不同地区的用户体验，识别地区性问题，优化全球服务。

地理分布分析包括哪些呢？

第一个：地区性能分布。 不同地区的页面加载时间、Core Web Vitals 等。

第二个：地区错误分布。 不同地区的错误率。

第三个：地区用户分布。 不同地区的用户数量。

如何设计地理分布分析？ 使用地图可视化，颜色编码表示性能或错误率，支持钻取查看详细信息。

本节小结

在本节中，我们学习了前端性能 Dashboard：

第一个是 Core Web Vitals 面板。 展示 LCP、FID、CLS 三个关键指标，设置目标线，显示达标率。

第二个是页面加载性能。 追踪页面加载的各个阶段，识别性能瓶颈，优化加载速度。

第三个是用户交互性能。 追踪用户交互的响应时间，识别慢交互，优化交互体验。

第四个是错误率监控。 追踪前端错误，识别错误模式，快速修复问题。

第五个是地理分布分析。 了解不同地区的用户体验，识别地区性问题，优化全球服务。

前端性能 Dashboard 设计流程： 选择关键指标 → 设计可视化 → 配置告警 → 建立基线 → 持续优化。

这就是前端性能 Dashboard。通过前端性能 Dashboard，我们可以全面监控前端应用的性能和用户体验。

在下一节，我们将学习后端服务 Dashboard。学习如何设计后端服务监控 Dashboard。