Web Vitals

Web Vitals 是 Google 的一套用户体验指标：打开快不快、点了跟不跟手、版面跳不跳。Core Web Vitals 目前三项：LCP、INP、CLS。它们是 SEO 的参考项，更是自己站好不好用的尺子。说明见 web.dev。

三项阈值

LCP（Largest Contentful Paint）：视口里最大那块内容画完的时间，通常是首图或大标题。

首屏大图用 priority / loading="eager"，字体用 next/font，别让最大元素很晚才出现。

INP（Interaction to Next Paint）：点击、输入之后到下一次绘制的延迟。

长任务、主线程被水合塞满，INP 会烂。RSC 少水合一截，对这项有帮助。

CLS（Cumulative Layout Shift）：意外位移的累计量。图没宽高、晚插入的广告最常见。

next/image 占位、next/font 的 fallback 度量，就是冲着 CLS 去的。

怎么测

Chrome DevTools → Lighthouse：选移动 / 桌面，勾 Performance 和 SEO，看分数和诊断。实验室数据和真实用户（CrUX / Search Console）可能不一致，两边都看。

在页面里订阅

pnpm add web-vitals
bash

"use client";

import { useEffect } from "react";
import { onCLS, onINP, onLCP, type Metric } from "web-vitals";

function report(metric: Metric) {
  console.log(metric.name, metric.value, metric.rating);
  // 生产可以 POST 到自己的日志
}

export default function Vitals() {
  useEffect(() => {
    onCLS(report);
    onINP(report);
    onLCP(report);
  }, []);
  return null;
}
tsx

输出大致是 { name, value, rating, delta }。Pages Router 还可以用 reportWebVitals；App Router 没有同等内置钩子，自己挂这段即可。

下一篇离开 SEO，看环境变量怎么分开发和生产。

参考文档

• Web Vitals
• web-vitals
• Lighthouse