跳到主要内容

初探 webvitals

· 阅读需 6 分钟

web-vitals是Google发起的，旨在提供各种质量信号的统一指南，我们相信这些质量信号对提供出色的网络用户体验至关重要。多年来，Google 提供了许多性能测量和性能报告工具。一些开发者对这些工具的使用十分在行，而另一些开发者则发现大量的工具和指标令人应接不暇。

总之，Web Vitals则是希望提出一些标准，来帮助开发者去测量，优化页面，给到用户更好的体验。

简单介绍六个指标​

  1. FCP-反映的是从页面开始加载到页面视口上最大的图片或者文本块渲染的时间。
  2. TTI-反映从页面加载开始到页面处于完全可交互状态所花费的时间。
  3. Speed Index-页面内容可见填充的速度。
  4. TBT-测量首次内容绘制 (FCP)首次内容绘制和 (TTI)之间的总时间，这期间，主线程被阻塞的时间过长，无法作出输入响应。
  5. LCP-最大内容绘制，用于监控网页可视区内“绘制面积”最大的元素开始呈现在屏幕上的时间点。
  6. CLS-反映网页布局在加载期间的偏移量。得分范围是 0–1，其中 0 表示没有偏移，1 表示最大偏移。

一、Web Vitals 是什么？​

Web Vitals 是 Google 推出的网页用户体验核心指标体系，本质是一套「衡量网页加载速度、交互流畅度、视觉稳定性」的标准，直接影响：

  • 用户体验（页面卡不卡、点得爽不爽）；
  • SEO 排名（Google 已将其纳入搜索排名权重）；
  • 转化率（性能差的页面会流失更多用户）。

一句话总结：Web Vitals 是衡量网页「好不好用」的官方核心标准。

二、核心指标（三大核心 + 补充指标）​

1. 三大核心指标（Core Web Vitals）​

这是 Google 重点关注的三个指标，覆盖「加载、交互、稳定性」三大维度：

指标名称缩写含义达标阈值通俗理解
Largest Contentful PaintLCP页面最大内容元素（图片/文字块）加载完成的时间≤ 2.5 秒「页面主体内容」加载快不快
First Input DelayFID用户首次点击/输入到浏览器响应的延迟（已被 INP 替代）≤ 100 毫秒「首次点击」卡不卡
Interaction to Next PaintINP替代 FID，衡量所有用户交互的响应延迟（更全面）≤ 200 毫秒「所有操作」都流畅吗
Cumulative Layout ShiftCLS页面加载过程中元素意外偏移的累计值≤ 0.1「页面内容」会不会乱跳

关键解释：​

  • LCP：比如页面的主图、标题块加载完成的时间，是用户感知「页面加载完了」的核心标志；
  • INP：比如用户点击按钮后，浏览器多久能做出反应（如果延迟高，用户会觉得「卡」）；
  • CLS：比如页面加载时广告突然弹出，把文字挤到下面，就是典型的「布局偏移」，CLS 值越高体验越差。

2. 补充指标（辅助衡量体验）​

Google 还提供了几个补充指标，完善体验评估：

  • First Contentful Paint (FCP)：页面首次出现任何内容的时间（比如第一个文字/图标）；
  • Time to Interactive (TTI)：页面完全可交互的时间（所有资源加载完、点击无延迟）；
  • Total Blocking Time (TBT)：页面加载过程中主线程被阻塞的总时间（阻塞越长，交互越卡）。

三、如何检测 Web Vitals？（新手友好）​

1. 在线工具（零成本，直接用）​

  • PageSpeed Insights（推荐）： 👉 地址：https://pagespeed.web.dev/ ✨ 用法：输入网页 URL，一键生成 LCP/INP/CLS 得分 + 优化建议（含具体代码修改方案）；
  • Chrome DevTools（Performance 面板）： ✨ 用法：打开网页 → F12 → 切换到「Performance」→ 点击录制 → 操作页面 → 停止后查看「Web Vitals」模块，直观看到各指标数值；
  • Search Console（Core Web Vitals 报告）： ✨ 用法：绑定网站后，Google 会自动监测近 28 天的核心指标数据，显示哪些页面不达标。

2. 代码埋点（监控真实用户数据）​

如果想监控自己网站的真实用户体验（RUM），可以用 Web Vitals 官方库：

步骤 1：安装依赖​

# npm 安装
npm install web-vitals --save

步骤 2：核心代码（捕获并上报指标）​

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

// 定义上报函数（发送到自己的后端/日志系统）
function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // 用 navigator.sendBeacon 确保数据能发送（即使页面关闭）
  navigator.sendBeacon('/analytics/web-vitals', body);
}

// 捕获三大核心指标
getLCP(sendToAnalytics);
getINP(sendToAnalytics);
getCLS(sendToAnalytics);

代码解释：​

  • getLCP/getINP/getCLS：分别捕获对应指标的最终值；
  • navigator.sendBeacon：比普通 AJAX 更可靠，适合上报性能数据；
  • 上报的数据包含：指标名称、数值、评级（good/needs-improvement/poor）等。

四、新手优化建议（立竿见影）​

针对最容易不达标的指标，给出简单可落地的优化方向：

1. 优化 LCP（加快主内容加载）​

  • 压缩图片（用 WebP/AVIF 格式，设置宽高属性）；
  • 预加载关键资源（<link rel="preload" href="主图.jpg">）；
  • 减少首屏 JS/CSS 体积（按需加载、压缩代码）；
  • 使用 CDN 加速静态资源。

2. 优化 INP（提升交互流畅度）​

  • 拆分长任务（把超过 50ms 的 JS 代码拆成小任务，避免阻塞主线程）；
  • 延迟加载非关键 JS（<script defer>/<script async>）；
  • 避免在用户交互时执行复杂计算。

3. 优化 CLS（减少布局偏移）​

  • 给图片/视频设置固定宽高（或 aspect-ratio 属性）；
  • 避免动态插入内容到页面顶部（比如广告、弹窗）；
  • 预留空间给加载中的元素（比如骨架屏）。

总结​

  1. Web Vitals 核心是 3 个指标：LCP（加载）、INP（交互）、CLS（稳定性），是衡量网页用户体验的核心标准；
  2. 检测优先用 PageSpeed Insights：零成本、有具体优化建议，新手首选；
  3. 优化要抓重点：LCP 优先优化图片/首屏资源，CLS 优先固定元素尺寸，INP 优先拆分长 JS 任务。