Core Web Vitals：测量与提升网页性能
为什么 Core Web Vitals 对您的网站很重要
您可能听说过 Core Web Vitals (CWV) —— Google 用于衡量用户体验的指标。但如果您的网站感觉缓慢或卡顿，您并不孤单。许多开发者都在努力将 CWV 分数转化为具体的修复措施。本指南将通过实用步骤和代码片段，引导您测量并改善每个核心指标。
Core Web Vitals 包含三个具体指标：最大内容绘制 (LCP) 用于衡量加载性能，首次输入延迟 (FID) 用于衡量交互性，以及累积布局偏移 (CLS) 用于衡量视觉稳定性。Google 将这些作为排名信号，因此优化它们对用户和 SEO 都有好处。
理解三个核心 Web 指标
在深入修复之前，让我们先明确每个指标衡量的是什么，以及获得良好分数的阈值。
| 指标 | 衡量内容 | 良好 | 需要改进 | 差 |
|---|---|---|---|---|
| LCP | 加载性能 | ≤ 2.5秒 | 2.5秒 – 4.0秒 | > 4.0秒 |
| FID | 交互性 | ≤ 100毫秒 | 100毫秒 – 300毫秒 | > 300毫秒 |
| CLS | 视觉稳定性 | ≤ 0.1 | 0.1 – 0.25 | > 0.25 |
注意：FID 将于 2024 年 3 月被 Interaction to Next Paint (INP) 取代，但优化原则相似。这里我们仍以 FID 为重点，因为它仍被广泛引用。
如何测量 Core Web Vitals
您需要实验室数据和现场数据来获得完整的画面。实验室数据（合成测试）有助于调试，而现场数据（真实用户监控）则显示实际用户体验。
实验室工具
- Lighthouse（Chrome DevTools 中）：在 Lighthouse 标签页中运行审计。
- PageSpeed Insights：为 URL 提供实验室和现场数据。
- WebPageTest：使用自定义网络条件进行高级测试。
现场工具
- Chrome 用户体验报告 (CrUX)：真实用户指标的公开数据集。
- Google Search Console：Core Web Vitals 报告显示组性能。
- web-vitals JavaScript 库：在分析中收集真实用户的指标。
要收集现场数据，请引入 web-vitals 库并将指标发送到您的分析端点：
<script type="module">
import {onLCP, onFID, onCLS} from 'https://unpkg.com/web-vitals@3?module';
function sendToAnalytics(metric) {
const body = JSON.stringify(metric);
navigator.sendBeacon('/analytics', body);
}
onLCP(sendToAnalytics);
onFID(sendToAnalytics);
onCLS(sendToAnalytics);
</script>这为您提供了真实世界数据，以补充实验室测试。
改善最大内容绘制 (LCP)
LCP 衡量最大的内容元素（图像、文本块或视频）何时变为可见。要改善它，请关注服务器响应时间、资源加载和渲染阻塞资源。
1. 优化服务器响应时间
- 使用 CDN 在更靠近用户的地方提供内容。
- 启用缓存（HTTP 缓存头、服务器端缓存）。
- 如果 TTFB（首字节时间）持续较高，请升级托管服务。
2. 优化图像
- 压缩图像并使用 WebP 或 AVIF 等现代格式。
- 使用带有
srcset和sizes的响应式图像。 - 对首屏以下的图像进行懒加载，但避免对 LCP 图像进行懒加载。
如需快速压缩图像，请尝试我们的 图像压缩器。
3. 消除渲染阻塞资源
- 内联关键 CSS，并延迟非关键 CSS。
- 对 JavaScript 使用
async或defer。 - 压缩 CSS 和 JavaScript。
4. 预加载重要资源
对字体或主图等关键资产使用 <link rel="preload">：
<link rel="preload" href="/hero.webp" as="image">改善首次输入延迟 (FID)
FID 衡量从用户首次与页面交互到浏览器能够响应的时间。长 JavaScript 任务会阻塞主线程，导致延迟。
1. 分解长任务
使用 setTimeout 或 requestIdleCallback 将长时间运行的 JavaScript 拆分为更小的块。例如：
function processItems(items) {
if (items.length === 0) return;
const item = items.pop();
// 处理项目
setTimeout(() => processItems(items), 0);
}2. 优化事件处理程序
- 对输入处理程序进行防抖或节流。
- 避免在事件监听器中进行复杂计算；将其转移到 Web Workers。
3. 减少 JavaScript 执行时间
- 使用动态导入进行代码拆分。
- 移除未使用的 JavaScript（tree shaking）。
- 对非关键 iframe 使用
loading="lazy"。
4. 对繁重任务使用 Web Workers
将 CPU 密集型工作移出主线程：
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (e) => { /* 处理结果 */ };改善累积布局偏移 (CLS)
CLS 衡量意外的布局偏移。常见原因包括没有尺寸的图像、广告、嵌入内容和网络字体。
1. 始终为媒体设置宽度和高度
在图像和视频上包含 width 和 height 属性，或使用 CSS aspect-ratio：
img {
aspect-ratio: 16 / 9;
width: 100%;
height: auto;
}2. 为动态内容预留空间
对于广告或嵌入内容，使用占位元素预留空间或设置固定尺寸。
3. 避免在现有内容上方插入内容
如果必须插入横幅，请使用不会导致布局偏移的变换动画或叠加层。
4. 使用 font-display: swap
防止网络字体导致文本不可见和布局偏移：
@font-face {
font-family: 'MyFont';
src: url('myfont.woff2') format('woff2');
font-display: swap;
}监控与持续改进
优化 Core Web Vitals 不是一次性任务。使用以下工具设置持续监控：
- Google Search Console：CWV 回归警报。
- Lighthouse CI：在每个拉取请求上运行审计。
- 真实用户监控 (RUM)：New Relic、Datadog 或自定义分析等工具。
定期审查现场数据并迭代修复。优先处理分数最差的指标。
常见问题
什么是 Core Web Vitals？
Core Web Vitals 是 Google 用来衡量用户体验的一组指标：LCP（加载）、FID（交互性）和 CLS（视觉稳定性）。
我应该多久检查一次 Core Web Vitals？
通过 Search Console 或 RUM 持续监控现场数据。在重大更改后以及至少每月运行一次实验室测试。
改善 Core Web Vitals 会影响 SEO 吗？
是的，Core Web Vitals 是一个排名信号。更好的分数可以提高搜索可见性和用户满意度。
准备好优化图像以获得更好的 LCP 了吗？使用我们的免费 图像压缩器 在不损失质量的情况下减小文件大小。