Core Web Vitals：测量并提升网站性能

你已经构建了一个快速的网站，但用户仍然抱怨速度慢。或者，在谷歌更新后，你的SEO排名下降了。罪魁祸首可能是Core Web Vitals——谷歌衡量用户体验的指标。在本指南中，你将了解它们是什么、如何测量它们，以及改善每项指标的具体步骤。

什么是Core Web Vitals？

Core Web Vitals是三个量化用户体验关键方面的指标：

• 最大内容绘制（LCP）：最大的内容元素（图像、视频或文本块）变为可见所需的时间。良好：≤2.5秒。
• 交互到下一次绘制（INP）：衡量响应性——从用户交互（点击、轻触、按键）到下一帧绘制的时间。良好：≤200毫秒。
• 累积布局偏移（CLS）：量化加载过程中意外的布局偏移。良好：≤0.1。

这些指标是谷歌页面体验信号的一部分，直接影响SEO和用户满意度。

如何测量Core Web Vitals

你需要实验室数据和现场数据。实验室数据（合成测试）有助于调试；现场数据（真实用户监控）反映实际体验。

实验室工具

• Chrome DevTools中的Lighthouse：运行审计并获得分数以及改进机会。
• WebPageTest：使用胶片条和水滴图进行高级测试。
• PageSpeed Insights：结合来自CrUX的实验室数据和现场数据。

现场工具

• Chrome用户体验报告（CrUX）：真实用户指标的公共数据集。
• web-vitals JavaScript库：通过分析从真实用户收集指标。
• Search Console：Core Web Vitals报告显示需要关注的URL组。

以下是如何使用web-vitals库将指标发送到你的分析平台：

import {onLCP, onINP, onCLS} from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  // 如果可用，使用navigator.sendBeacon
  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
    fetch('/analytics', {body, method: 'POST', keepalive: true});
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);

改善LCP

LCP通常是最具影响力的指标。要改善它：

1. 优化LCP元素：识别它（通常是主视觉图像或标题）并确保它快速加载。
2. 预加载关键资源：对图像、字体和样式表使用<link rel="preload">。
3. 使用现代图像格式：提供WebP或AVIF并带有回退方案。
4. 谨慎实现懒加载：不要对LCP图像进行懒加载；优先加载它。
5. 减少服务器响应时间：使用CDN、缓存并优化后端。
6. 消除渲染阻塞资源：延迟非关键的CSS和JavaScript。

示例：预加载你的主视觉图像：

<link rel="preload" as="image" href="/hero.webp" imagesrcset="/hero-480.webp 480w, /hero-800.webp 800w" imagesizes="(max-width: 600px) 480px, 800px">

改善INP

INP衡量响应性。高INP通常来自阻塞主线程的长任务。

1. 分解长任务：使用setTimeout、requestIdleCallback或scheduler.yield()让出主线程。
2. 优化事件处理程序：对昂贵的操作进行防抖或节流。
3. 减少JavaScript执行：代码分割、树摇，并延迟非关键脚本。
4. 避免大型DOM更新：批量进行DOM更改并明智地使用虚拟DOM。
5. 使用Web Worker处理CPU密集型工作。

示例：使用scheduler.yield()让出（在支持的地方）：

async function handleClick() {
  // 做一些工作
  await scheduler.yield();
  // 让出后继续
}

改善CLS

CLS关乎视觉稳定性。防止意外偏移：

1. 始终在图像和视频上包含宽度和高度属性。
2. 为广告和嵌入内容预留空间，使用CSS aspect-ratio或固定尺寸。
3. 避免在现有内容上方插入内容，除非由用户交互触发。
4. 使用CSS变换进行动画，而不是触发布局的属性。
5. 预加载字体并使用font-display: swap以避免不可见文本偏移。

示例：使用aspect-ratio预留空间：

.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Core Web Vitals比较

工具和工作流程

将Core Web Vitals监控集成到你的开发工作流程中：

• 在CI中运行Lighthouse以捕获回归。
• 使用RUM（真实用户监控）跟踪现场数据。
• 设置性能预算和警报。
• 定期审计第三方脚本——它们通常影响INP和LCP。

在上传到网站之前快速优化图像，试试我们的图像压缩器，在不损失质量的情况下减小文件大小。

常见问题

Core Web Vitals的当前阈值是什么？

LCP良好≤2.5秒，需要改进≤4秒；INP良好≤200毫秒，需要改进≤500毫秒；CLS良好≤0.1，需要改进≤0.25。

我应该多久测量一次Core Web Vitals？

通过现场数据持续测量，并在每次重大代码更改时通过实验室工具测量。设置回归警报。

我可以在不重建网站的情况下改善Core Web Vitals吗？

是的——许多修复如图像优化、预加载和延迟脚本可以逐步应用。