Core Web Vitals：测量并优化以提升SEO
为什么Core Web Vitals对你的网站至关重要
你搭建了一个快速、功能丰富的网站，但用户仍然抱怨加载慢，搜索排名也在下滑。罪魁祸首可能就是Core Web Vitals——Google用来量化真实用户体验的一组指标。自2021年起，这些指标已被确认为排名因素，并直接影响跳出率和转化率。忽视它们就意味着流失流量和收入。
在本指南中，你将了解每个指标的含义、如何准确测量它们，以及可以立即实施的逐步优化方案。
什么是Core Web Vitals？
Core Web Vitals是三个具体指标，分别衡量加载、交互性和视觉稳定性：
- Largest Contentful Paint (LCP)：衡量加载性能。它标记最大的内容元素（图片、文本块、视频）变为可见的时间。良好的LCP为2.5秒或更短。
- Interaction to Next Paint (INP)：衡量响应性。它记录所有交互（点击、轻触、按键）的延迟，并报告一个单一值。良好的INP为200毫秒或更短。INP于2024年3月取代了First Input Delay (FID)。
- Cumulative Layout Shift (CLS)：衡量视觉稳定性。它量化页面加载过程中意外的布局偏移。良好的CLS为0.1或更低。
这些指标基于现场数据，意味着它们来自真实用户数据，而非实验室测试。这就是Chrome User Experience Report (CrUX)和PageSpeed Insights等工具使用它们的原因。
如何测量Core Web Vitals
你需要实验室数据和现场数据才能获得完整图景。实验室工具帮助你调试，而现场数据展示真实用户体验。
现场工具（真实用户数据）
- PageSpeed Insights：输入URL即可同时查看实验室数据和现场数据。现场数据部分来自CrUX。
- Search Console：Core Web Vitals报告按状态（差、需要改进、良好）对URL进行分组。
- Chrome UX Report (CrUX)：通过BigQuery或CrUX API获取原始数据。
- web-vitals JavaScript库：将此轻量级脚本添加到你的网站，从真实用户处收集指标并发送到你的分析平台。
实验室工具（合成测试）
- Lighthouse：内置于Chrome DevTools。运行它以获取实验室评分和优化机会。
- WebPageTest：提供胶片图、瀑布图和自定义限速等高级测试功能。
- Chrome DevTools Performance面板：记录并分析运行时性能。
快速入门的话，使用PageSpeed Insights。它在一份报告中结合了实验室数据和现场数据。
逐步优化：提升LCP
LCP通常最容易通过以下步骤改善：
- 优化图片：在不损失质量的情况下压缩图片。使用WebP或AVIF等现代格式。Image Compressor等工具可以帮到你。
- 预加载LCP元素：为主图或字体添加
<link rel="preload">。 - 减少服务器响应时间：使用CDN、启用缓存并优化后端代码。对于Nginx，使用Nginx Log Analyzer检查日志以发现慢请求。
- 消除阻塞渲染的资源：内联关键CSS、延迟加载非关键JavaScript，并使用
async或defer属性。 - 使用CDN：从靠近用户的位置提供资源。
逐步优化：提升INP
INP衡量响应性。高INP通常来自长时间运行的JavaScript任务。
- 拆分长任务：使用
setTimeout或requestIdleCallback让出主线程。 - 优化事件处理器：对高开销操作进行防抖或节流。
- 减少JavaScript：移除未使用的代码、进行代码分割，并懒加载非关键脚本。
- 使用Web Workers：将繁重计算移出主线程。
- 避免过大的DOM：尽可能将DOM保持在1,500个节点以下。
逐步优化：提升CLS
CLS关乎视觉稳定性。通过以下策略防止意外偏移：
- 为图片和视频设置尺寸属性：始终包含
width和height。 - 为广告和嵌入内容预留空间：使用CSS
aspect-ratio或固定容器。 - 避免在现有内容上方插入内容：如果必须，使用占位符或对偏移进行动画处理。
- 使用font-display: swap：防止字体加载期间文本不可见（但这可能造成轻微偏移；对于关键字体可考虑
font-display: optional）。 - 预加载字体：减少因字体延迟加载导致的布局偏移。
Core Web Vitals指标对比
| 指标 | 衡量内容 | 良好阈值 | 主要修复方法 |
|---|---|---|---|
| LCP | 加载性能 | ≤ 2.5s | 优化图片、预加载、CDN |
| INP | 响应性 | ≤ 200ms | 拆分长任务、减少JS |
| CLS | 视觉稳定性 | ≤ 0.1 | 设置尺寸、预留空间 |
监控与持续改进
性能不是一次性修复。设置真实用户监控（RUM）以持续跟踪Core Web Vitals。使用web-vitals库将指标发送到你的分析平台。为性能退化设置警报。在CI/CD流水线中定期使用Lighthouse审计，以便在问题进入生产环境之前捕获它们。
常见问题
Core Web Vitals当前的阈值是多少？
对于LCP，良好为≤ 2.5s，需要改进为≤ 4.0s，差为> 4.0s。对于INP，良好为≤ 200ms，需要改进为≤ 500ms，差为> 500ms。对于CLS，良好为≤ 0.1，需要改进为≤ 0.25，差为> 0.25。
我应该多久测量一次Core Web Vitals？
使用真实用户数据持续监控。在重大代码变更后以及至少每月运行一次实验室测试。Search Console中的现场数据每天更新，但反映的是28天滚动窗口。
没有开发人员能优化Core Web Vitals吗？
一些修复如图片压缩和缓存可以通过插件或工具完成。然而，更深入的优化如JavaScript精简和服务器调优通常需要开发人员参与。
准备好加速你的网站了吗？首先使用我们免费的Image Compressor压缩图片，快速提升你的LCP。