Core Web Vitals 监控

欢迎回到第 10 章的学习。在上一节，我们学习了前后端追踪关联。现在我们要学习 Core Web Vitals 监控，这是衡量前端性能的重要指标。

本节将学习：LCP（最大内容绘制）、FID（首次输入延迟）、CLS（累积布局偏移）、以及自定义指标。

LCP（最大内容绘制）

LCP（Largest Contentful Paint）是什么？ 最大内容元素渲染完成的时间，衡量页面加载性能，理想值 < 2.5 秒。

如何监控 LCP？ 使用 Web Vitals 库的

onLCP()

LCP 元素包括哪些呢？

第一个：图片。 页面中最大的图片元素。

第二个：视频。 页面中最大的视频元素。

第三个：文本块。 页面中最大的文本块。

第四个：背景图片。 使用背景图片的元素。

如何优化 LCP？ 优化图片加载、减少服务器响应时间、使用 CDN、优化关键渲染路径。

LCP 监控代码：

文件路径：

src/telemetry.js

import { onLCP } from 'web-vitals';
import { trace } from '@opentelemetry/api';

function sendToAnalytics(metric) {
  const tracer = trace.getTracer('web-vitals');
  const span = tracer.startSpan(`web-vital.${metric.name}`, {
    attributes: {
      'web.vital.name': metric.name,
      'web.vital.value': metric.value,
      'web.vital.id': metric.id,
      'web.vital.navigationType': metric.navigationType,
      'web.vital.rating': metric.rating, // 'good', 'needs-improvement', 'poor'
    },
  });
  
  span.end();
}

// surveillance LCP
onLCP(sendToAnalytics);

FID（首次输入延迟）

FID（First Input Delay）是什么？ 用户首次与页面交互的延迟时间，衡量页面交互响应性，理想值 < 100 毫秒。

如何监控 FID？ 使用 Web Vitals 库的

onFID()

FID 测量的是什么？ 从用户首次交互（点击、触摸、按键）到浏览器开始处理该交互的时间。

如何优化 FID？ 减少 JavaScript 执行时间、使用 Web Workers、代码分割、延迟加载非关键资源。

FID 监控代码：

import { onFID } from 'web-vitals';

// surveillance FID
onFID(sendToAnalytics);

CLS（累积布局偏移）

CLS（Cumulative Layout Shift）是什么？ 累积布局偏移分数，衡量页面稳定性，理想值 < 0.1。

如何监控 CLS？ 使用 Web Vitals 库的

onCLS()

CLS 测量的是什么？ 页面加载过程中，视觉元素的意外移动程度。

如何优化 CLS？ 为图片和视频设置尺寸、避免在现有内容上方插入内容、使用 transform 动画而非改变布局属性。

CLS 监控代码：

import { onCLS } from 'web-vitals';

// surveillance CLS
onCLS(sendToAnalytics);

自定义指标

自定义指标的作用是什么？ 追踪业务特定的性能指标，补充 Core Web Vitals，提供更全面的性能视图。

自定义指标包括哪些呢？

第一个：组件渲染时间。 React 组件的渲染时间。

第二个：API 响应时间。 API 调用的响应时间。

第三个：数据加载时间。 数据从加载到显示的时间。

第四个：用户操作响应时间。 用户操作的响应时间。

如何创建自定义指标？ 使用 OpenTelemetry Metrics API，创建自定义指标，记录性能数据。

自定义指标示例：

import { metrics } from '@opentelemetry/api';

const meter = metrics.getMeter('shoehub-frontend');
const componentRenderDuration = meter.createHistogram('component.render.duration', {
  description: 'Component render duration in milliseconds',
});

// Use in components
function ProductList() {
  const startTime = performance.now();
  
  useEffect(() => {
    const renderTime = performance.now() - startTime;
    componentRenderDuration.record(renderTime, {
      'component.name': 'ProductList',
    });
  });
  
  return (
    // Component content
  );
}

本节小结

在本节中，我们学习了 Core Web Vitals 监控：

第一个是 LCP 监控。 监控最大内容绘制时间，衡量页面加载性能，优化目标 < 2.5 秒。

第二个是 FID 监控。 监控首次输入延迟，衡量页面交互响应性，优化目标 < 100 毫秒。

第三个是 CLS 监控。 监控累积布局偏移，衡量页面稳定性，优化目标 < 0.1。

第四个是自定义指标。 追踪业务特定的性能指标，补充 Core Web Vitals，提供更全面的性能视图。

Core Web Vitals 监控流程： 收集指标 → 发送到 OpenTelemetry → 导出到 Collector → 在 Grafana 中可视化 → 设置告警 → 优化性能。

这就是 Core Web Vitals 监控。通过 Core Web Vitals 监控，我们可以全面了解前端应用的性能表现。

在下一节，我们将学习用户会话追踪。学习如何追踪用户会话。