Skip to main content

web-vitals

web-vitals 数据收集​

web-vitals 是一个轻量级的 JavaScript 库，用于收集和报告关键的 Web 性能指标（如 LCP、FID 和 CLS），这些指标对于衡量用户体验至关重要。web-vitals 本身并不会自动将数据发送到任何地方，而是提供了一个灵活的接口，供开发者自行处理和发送这些数据。

数据发送的常见方式​

开发者可以选择将 web-vitals 收集到的数据发送到以下几种常见的地方：

  1. 自定义分析服务器：

    • 你可以将数据发送到你自己的服务器进行存储和分析。

  2. 第三方分析服务：

    • 你可以将数据发送到第三方服务，如 Google Analytics、Mixpanel 等。

  3. 日志服务：

    • 将数据发送到日志服务，如 Loggly、Splunk 等，用于进一步分析和监控。

示例代码​

以下是一个使用 web-vitals 库并将数据发送到自定义服务器的示例：

import { getCLS, getFID, getLCP, getTTFB } from 'web-vitals';

// 定义一个函数来处理和发送指标数据
function sendToAnalytics(metric) {
  // 你可以在这里将数据发送到你的服务器
  const body = JSON.stringify(metric);
  const url = 'https://your-analytics-server.com/analytics';

  // 使用 fetch API 发送数据
  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body);
  } else {
    fetch(url, {
      body,
      method: 'POST',
      keepalive: true,
      headers: {
        'Content-Type': 'application/json',
      },
    });
  }
}

// 监听并收集各个 Web Vitals 指标
getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);
getTTFB(sendToAnalytics);

将数据发送到 Google Analytics​

如果你希望将 web-vitals 数据发送到 Google Analytics，可以使用以下示例代码：

import { getCLS, getFID, getLCP, getTTFB } from 'web-vitals';

function sendToGoogleAnalytics({ name, delta, id }) {
  gtag('event', name, {
    event_category: 'Web Vitals',
    event_action: name,
    value: Math.round(name === 'CLS' ? delta * 1000 : delta), // 将 CLS 转换为整数
    event_label: id, // 使用指标 ID 作为标签
    non_interaction: true, // 这确保事件不会影响跳出率
  });
}

getCLS(sendToGoogleAnalytics);
getFID(sendToGoogleAnalytics);
getLCP(sendToGoogleAnalytics);
getTTFB(sendToGoogleAnalytics);

结论​

web-vitals 提供了灵活的接口，允许开发者自行处理和发送性能指标数据。你可以根据需求选择将数据发送到自定义服务器、第三方分析服务或日志服务。上述示例展示了如何将数据发送到自定义服务器和 Google Analytics。根据你的具体需求，可以进一步自定义数据处理和发送逻辑。

web-vitals 接入开源数据分析器​

有许多开源的分析工具和平台可以帮助你处理和分析 web-vitals 数据。以下是一些常见的开源分析器和平台：

1. Prometheus + Grafana​

Prometheus 是一个开源的系统监控和警报工具，Grafana 则是一个开源的监控和可视化平台。你可以使用 Prometheus 来收集 web-vitals 数据，并使用 Grafana 来可视化这些数据。

示例配置​

  1. Prometheus 配置：

    • 首先，你需要运行一个 Prometheus 服务器，并配置一个抓取目标。
    scrape_configs:
      - job_name: 'web-vitals'
        static_configs:
          - targets: ['localhost:9090']

  2. 将 web-vitals 数据发送到 Prometheus：

    • 使用 fetch 或 axios 将 web-vitals 数据发送到 Prometheus。
    import { getCLS, getFID, getLCP, getTTFB } from 'web-vitals';

    function sendToPrometheus(metric) {
      const body = JSON.stringify(metric);
      const url = 'http://localhost:9090/metrics';

      fetch(url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body,
      });
    }

    getCLS(sendToPrometheus);
    getFID(sendToPrometheus);
    getLCP(sendToPrometheus);
    getTTFB(sendToPrometheus);

  3. Grafana 配置：

    • 在 Grafana 中添加 Prometheus 数据源，并创建仪表盘来可视化 web-vitals 数据。

2. Elastic Stack (ELK Stack)​

Elastic Stack 包括 Elasticsearch、Logstash 和 Kibana。你可以使用它来收集、存储和可视化 web-vitals 数据。

示例配置​

  1. Logstash 配置：

    • 配置 Logstash 来接收 web-vitals 数据并将其发送到 Elasticsearch。
    input {
      http {
        port => 5044
      }
    }

    filter {
      json {
        source => "message"
      }
    }

    output {
      elasticsearch {
        hosts => ["localhost:9200"]
        index => "web-vitals-%{+YYYY.MM.dd}"
      }
    }

  2. 将 web-vitals 数据发送到 Logstash：

    • 使用 fetch 或 axios 将 web-vitals 数据发送到 Logstash。
    import { getCLS, getFID, getLCP, getTTFB } from 'web-vitals';

    function sendToLogstash(metric) {
      const body = JSON.stringify(metric);
      const url = 'http://localhost:5044';

      fetch(url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body,
      });
    }

    getCLS(sendToLogstash);
    getFID(sendToLogstash);
    getLCP(sendToLogstash);
    getTTFB(sendToLogstash);

  3. Kibana 配置：

    • 在 Kibana 中配置 Elasticsearch 数据源，并创建仪表盘来可视化 web-vitals 数据。

3. OpenTelemetry​

OpenTelemetry 是一个开源的分布式跟踪和度量标准，你可以使用它来收集和导出 web-vitals 数据。

示例配置​

  1. 安装 OpenTelemetry：

    • 安装 OpenTelemetry JavaScript SDK。
    npm install @opentelemetry/api @opentelemetry/sdk-trace-web @opentelemetry/exporter-collector

  2. 配置 OpenTelemetry：

    • 配置 OpenTelemetry 来收集 web-vitals 数据并将其发送到一个收集器。
    import { WebTracerProvider } from '@opentelemetry/sdk-trace-web';
    import { CollectorTraceExporter } from '@opentelemetry/exporter-collector';
    import { SimpleSpanProcessor } from '@opentelemetry/sdk-trace-base';
    import { getCLS, getFID, getLCP, getTTFB } from 'web-vitals';

    const provider = new WebTracerProvider();
    const exporter = new CollectorTraceExporter({
      url: 'http://localhost:55681/v1/trace',
    });

    provider.addSpanProcessor(new SimpleSpanProcessor(exporter));
    provider.register();

    function sendToOpenTelemetry(metric) {
      const tracer = provider.getTracer('web-vitals');
      const span = tracer.startSpan(metric.name);
      span.setAttribute('value', metric.value);
      span.end();
    }

    getCLS(sendToOpenTelemetry);
    getFID(sendToOpenTelemetry);
    getLCP(sendToOpenTelemetry);
    getTTFB(sendToOpenTelemetry);

结论​

以上介绍了几种常见的开源分析工具和平台，你可以根据实际需求选择合适的方案来收集和分析 web-vitals 数据。无论是 Prometheus + Grafana、Elastic Stack 还是 OpenTelemetry，都可以帮助你实现对 Web 性能指标的监控和可视化。