核心网页指标：衡量并改进以提升网页性能

你已经构建了一个快速的网站，但用户仍然抱怨速度慢。或者，在Google更新后，你的SEO排名下降了。罪魁祸首可能是核心网页指标——一组量化真实用户体验的指标。忽视它们可能会损害可用性和搜索可见性。本指南将带你了解如何衡量和改进每个指标，并提供你今天就可以实施的实用步骤。

什么是核心网页指标？

核心网页指标是Google用来评估页面体验的三个具体指标：

• 最大内容绘制（LCP）：衡量加载性能。它跟踪最大的内容元素（图像、视频或文本块）变为可见所需的时间。良好的LCP为2.5秒或更短。
• 交互到下一次绘制（INP）：衡量交互性。它记录所有交互（点击、轻触、按键）的延迟，并报告一个高百分位数。良好的INP为200毫秒或更短。
• 累积布局偏移（CLS）：衡量视觉稳定性。它量化加载过程中意外的布局偏移。良好的CLS为0.1或更小。

这些指标是Google页面体验信号的一部分，但它们也直接影响用户对你网站的看法。缓慢的LCP会让用户感到沮丧，高INP会让页面感觉无响应，而CLS会导致误点击。

如何衡量核心网页指标

你需要实验室数据和现场数据才能获得完整的画面。实验室工具模拟条件，而现场数据来自真实用户。

实验室工具

• Lighthouse：内置于Chrome DevTools中，它审计性能并提供LCP、CLS和TBT（INP的代理）的分数。在隐身模式下运行并启用节流以模拟移动条件。
• WebPageTest：提供来自多个位置和设备的高级测试，包括胶片视图和瀑布图。
• PageSpeed Insights：将实验室数据和现场数据（来自CrUX）合并在一份报告中。

现场工具

• Chrome用户体验报告（CrUX）：一个包含数百万网站真实用户指标的公共数据集。可通过PageSpeed Insights或CrUX API访问。
• Google Search Console：显示你网站的核心网页指标状态，按URL分组。
• web-vitals JavaScript库：将其添加到你的网站以收集真实用户指标并将其发送到你的分析平台。

使用实验室工具进行调试，使用现场数据验证修复效果。一个常见的错误是只针对实验室分数进行优化，而忽略了真实用户体验。

改进LCP

LCP通常是最有影响力需要修复的指标。以下是如何优化它：

1. 优化图像：在不损失质量的情况下压缩图像，使用WebP或AVIF等现代格式，并通过srcset提供响应式图像。像图像压缩器这样的工具可以帮助减小文件大小。
2. 预加载关键资源：对主图、字体和关键CSS/JS文件使用<link rel="preload">。
3. 消除渲染阻塞资源：内联关键CSS，延迟非关键JavaScript，避免大型CSS文件。
4. 使用CDN：从靠近用户的边缘位置提供资产以减少延迟。
5. 缓存资产：为静态资源设置较长的缓存寿命，并通过文件名进行缓存破坏。
6. 优化服务器响应时间：使用快速托管，启用压缩（Brotli或Gzip），并优化数据库查询。

举一个详细的例子，考虑一个主图。与其提供2MB的JPEG，不如将其压缩到200KB以下，转换为WebP并预加载。仅此一项就可以将LCP缩短几秒钟。

改进INP

INP衡量响应性。高INP通常源于阻塞主线程的长JavaScript任务。

1. 分解长任务：使用setTimeout或requestIdleCallback让出主线程。
2. 优化事件处理程序：对滚动或调整大小等频繁事件进行去抖动或节流。避免在处理程序中进行大量计算。
3. 减少JavaScript执行：代码分割、摇树优化和延迟加载非关键JS。
4. 使用Web Workers：将昂贵的任务卸载到工作线程。
5. 最小化第三方脚本：审计并删除不必要的分析、广告或社交小部件。

在Chrome DevTools性能面板中与页面交互来测试INP。寻找长任务（红色三角形）并优化它们。

改进CLS

CLS关乎视觉稳定性。意外的偏移会惹恼用户并导致误点击。

1. 为图像和视频设置尺寸：始终包含width和height属性或使用CSS aspect-ratio。
2. 为广告和嵌入内容预留空间：使用固定尺寸的占位符。
3. 避免在现有内容上方插入内容：除非是用户触发的交互。
4. 使用font-display: swap：但要注意字体交换可能导致偏移。考虑预加载字体或使用size-adjust。
5. 对动画应用CSS transforms：而不是触发布局的属性。

使用Chrome DevTools中的布局偏移区域功能来可视化偏移。

工具和工作流程

将核心网页指标监控集成到你的开发工作流程中：

• 在CI中运行Lighthouse以捕获回归。
• 使用web-vitals库收集现场数据并设置警报。
• 定期检查Search Console以发现问题。
• 根据影响和努力确定修复的优先级。

请记住，核心网页指标只是性能的一部分。始终考虑整体用户体验。

常见问题

核心网页指标的当前阈值是多少？

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

我应该多久测量一次核心网页指标？

持续监控现场数据，并在重大更改后运行实验室测试。至少每月检查一次，并在部署后检查。

没有开发人员我能改进核心网页指标吗？

一些修复如图像压缩和缓存可以通过插件或CDN设置完成。但更深入的优化通常需要代码更改。

准备好优化你的图像以获得更好的LCP了吗？试试我们免费的图像压缩器，在不损失质量的情况下减小文件大小。