核心网页指标：测量并提升网页性能

你已经构建了一个快速的网站，但用户仍然抱怨速度慢。或者，在谷歌更新后，你的SEO排名下降了。核心网页指标（CWV）很可能是罪魁祸首。这些指标衡量真实世界的用户体验，并直接影响搜索排名和转化率。在本指南中，你将了解什么是CWV，如何准确测量它们，以及改善每个指标的实用步骤。

什么是核心网页指标？

核心网页指标是谷歌用来量化用户体验的一组三个指标：

• 最大内容绘制（LCP）：衡量加载性能。它标记了最大内容元素（图片、文本块或视频）变为可见的时间。良好的LCP为2.5秒或更短。
• 交互到下一次绘制（INP）：衡量响应性。它记录所有交互（点击、轻触、按键）的延迟，并报告最差的一次（对于交互较多的页面，报告接近最差的一次）。良好的INP为200毫秒或更短。
• 内容布局偏移（CLS）：衡量视觉稳定性。它量化页面加载过程中意外的布局偏移。良好的CLS为0.1或更小。

这些阈值基于页面加载的第75百分位数，按移动端和桌面端细分。因此，你需要确保75%的用户体验到良好的值。

如何测量核心网页指标

你可以通过两种方式测量CWV：实验室（合成测试）和现场（真实用户监控）。两者都有价值，但谷歌用于排名的是现场数据。

现场数据：真实用户监控（RUM）

现场数据来自实际用户。最佳来源是Chrome用户体验报告（CrUX），它为谷歌搜索控制台中的核心网页指标报告提供数据。你也可以使用web-vitals库收集自己的RUM数据并发送到分析端点。

要查看你网站的CrUX数据，请使用PageSpeed Insights或CrUX API。这些显示了你的源站的LCP、INP和CLS分布。

实验室数据：合成测试

实验室工具在受控环境中模拟页面加载。它们非常适合调试和CI/CD集成。常见选项：

• Lighthouse：内置于Chrome DevTools。在“审核”标签页或通过CLI运行。
• WebPageTest：高级测试，提供胶片条和水fall图。
• PageSpeed Insights：结合实验室和现场数据。

记住：实验室数据不包括现实世界的变异性，所以将其用于诊断，而不是作为排名预测器。

改善最大内容绘制（LCP）

LCP通常是修复后影响最大的指标。最大的元素通常是英雄图像、标题或视频海报。要改善LCP：

1. 优化图片：压缩图片，使用WebP或AVIF等现代格式，并通过srcset提供响应式尺寸。像图像压缩器这样的工具可以帮助减小文件大小而不损失质量。
2. 预加载LCP资源：为英雄图像或字体添加<link rel="preload">以提前开始加载。
3. 消除渲染阻塞资源：内联关键CSS，延迟非关键CSS，并异步加载JavaScript。
4. 使用CDN：从内容分发网络提供资源以减少延迟。
5. 积极缓存：通过Cache-Control标头为静态资源设置较长的缓存生命周期。

预加载LCP图像的示例：

<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通常来自阻塞主线程的长JavaScript任务。要改善INP：

• 分解长任务：使用setTimeout、requestIdleCallback或Scheduler API让出主线程。
• 优化事件处理程序：对昂贵的处理程序进行防抖或节流，并避免布局抖动。
• 减少JavaScript大小：代码分割、树摇，并延迟非关键脚本。
• 使用Web Worker：将繁重计算卸载到工作线程。
• 最小化第三方脚本：第三方脚本通常导致长任务。异步加载它们并审核其影响。

你可以使用web-vitals库在现场测量INP：

import {onINP} from 'web-vitals';

onINP((metric) => {
  console.log('INP:', metric.value);
  // 发送到你的分析端点
});

改善内容布局偏移（CLS）

CLS发生在加载过程中元素意外移动时。常见原因：没有尺寸的图片、广告、嵌入内容和导致FOIT/FOUT的网络字体。要改善CLS：

• 始终在图片和视频上设置宽度和高度属性。这保留了空间。
• 为动态内容（广告、嵌入内容）保留空间，使用CSS min-height或宽高比盒。
• 使用font-display: swap并预加载字体，以避免不可见文本和布局偏移。
• 避免在现有内容上方插入内容，除非是响应用户交互。

使用CSS宽高比保留空间的示例：

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

持续监控的工具和工作流程

改善CWV不是一次性任务。设置持续监控：

• Lighthouse CI：在CI/CD管道中运行Lighthouse，如果分数下降则使构建失败。
• 真实用户监控：使用web-vitals库将指标发送到你的分析平台（例如Google Analytics 4、自定义端点）。
• 搜索控制台：监控核心网页指标报告以发现回归。
• 警报：设置当现场数据超过阈值时的警报。

如需快速检查，使用HTML转图像工具在不同阶段捕获页面的视觉快照，帮助你手动发现布局偏移。

常见问题

当前的核心网页指标阈值是什么？

良好：LCP ≤ 2.5秒，INP ≤ 200毫秒，CLS ≤ 0.1。需要改进：LCP ≤ 4秒，INP ≤ 500毫秒，CLS ≤ 0.25。差：高于这些值。

CrUX数据多久更新一次？

CrUX数据每天更新，但28天滚动窗口意味着变化需要时间才能反映。如需更快反馈，请使用你自己的RUM。

我可以在不改变设计的情况下改善核心网页指标吗？

可以。许多改进是技术性的：图片压缩、预加载、延迟脚本和保留空间。这些通常没有视觉影响。

准备好优化图片以获得更好的LCP了吗？尝试我们免费的图像压缩器，在保持质量的同时减小文件大小。