Core Web Vitals
深度解析

import { onLCP, onINP, onCLS, onFCP, onTTFB } from "web-vitals";

type MetricPayload = {
  name: string;
  value: number;
  rating: "good" | "needs-improvement" | "poor";
  id: string;
  delta: number;
  navigationType: string;
};

function sendToAnalytics(metric: MetricPayload) {
  // 上报到你的分析平台
  const body = JSON.stringify({
    ...metric,
    page: window.location.pathname,
    userAgent: navigator.userAgent,
    timestamp: Date.now(),
  });

  // 使用 sendBeacon 确保页面关闭前也能发送
  if (navigator.sendBeacon) {
    navigator.sendBeacon("/api/vitals", body);
  } else {
    fetch("/api/vitals", { body, method: "POST", keepalive: true });
  }
}

export function initWebVitals() {
  onLCP(sendToAnalytics);   // 最大内容绘制
  onINP(sendToAnalytics);   // 交互到下一帧绘制
  onCLS(sendToAnalytics);   // 累计布局偏移
  onFCP(sendToAnalytics);   // 首次内容绘制
  onTTFB(sendToAnalytics);  // 首字节时间
}