什么是 Core Web Vitals，为什么它很重要？
互联网用户对网站的期望与日俱增。访客不再只满足于优质内容，他们还希望页面能够瞬间打开、对点击做出即时响应，并且在加载过程中不会发生画面跳动。为了用具体数据衡量用户体验，Google 推出了 Core Web Vitals（核心网页指标）。这些指标是衡量真实用户（Real User Monitoring，RUM）如何与您的页面互动的关键性能指标。
从搜索引擎优化（SEO）的角度看，Core Web Vitals 是 Google 页面体验排名信号的基石之一。经过良好优化的网站速度，能让访客在网站上停留更久、降低跳出率，并直接提高转化率。如果您使用的是 WordPress 这类动态内容管理系统，数据库查询、外部脚本和媒体元素会随着时间推移导致性能下降。因此，深入了解这些指标并采取正确的优化措施十分必要。
核心指标：LCP、CLS 和 INP 分别代表什么？
Google 在衡量用户体验时关注三个核心方面：加载速度、视觉稳定性和交互响应性。目前，这三方面分别通过 LCP、CLS 和 INP 指标来跟踪。
1. 最大内容绘制（LCP）：感知加载速度
LCP 衡量页面主要内容（通常是一张大图、视频封面或宽大的标题区块）在屏幕上完成渲染所需的时间。它代表访客感知页面“已加载完成”的时刻。为了获得理想的用户体验，LCP 值应达到 2.5 秒或更短。服务器响应时间过慢（TTFB）、阻塞渲染的 JavaScript 和 CSS 文件，以及未经优化的超大图片，是 LCP 得分偏低的主要原因。
2. 累积布局偏移（CLS）：视觉稳定性
您是否遇到过这种情况：正准备点击某个按钮时，页面内容突然向下移动，结果点到了您并不想点的链接？这种令人烦恼的情况正是由 CLS 来衡量的。CLS 计算的是页面加载过程中元素发生意外位移的程度。理想的 CLS 分数应低于 0.1。未预先指定尺寸的图片、后加载的广告位以及动态注入的第三方小工具，是造成视觉偏移的主要原因。
3. 交互到下一次绘制（INP）：交互响应速度
INP 取代了 FID（First Input Delay，首次输入延迟），用于评估页面对用户的每一次点击、触摸或按键做出视觉响应所需的时间。它不只关注首次交互，而是考察用户在整个页面浏览过程中所有操作的整体延迟。要获得良好的 INP 分数，交互延迟应保持在 200 毫秒以内。繁重的 JavaScript 运算以及占用主线程（main thread）的命令，会直接拉低 INP 值。
| 指标 | 目标值（良好） | 需要改进 | 较差 |
|---|---|---|---|
| LCP | ≤ 2.5 秒 | 2.5 - 4.0 秒 | > 4.0 秒 |
| CLS | ≤ 0.1 | 0.1 - 0.25 | > 0.25 |
| INP | ≤ 200 毫秒 | 200 - 500 毫秒 | > 500 毫秒 |
如何改善 WordPress 网站的 Core Web Vitals？
对于基于 WordPress 的网站，要清理技术债务并让速度分数转为绿色，需要逐步推进。配置得当的缓存机制和轻量的代码结构，可以让您很快看到效果。
1. 提升 LCP 分数的策略
优化 LCP 时，首要任务是确保页面顶部的主图（Hero 图片）快速加载。该元素绝对不应使用“lazy load”（懒加载），相反，应当通过 fetchpriority="high" 属性让浏览器优先加载这张图片。此外：
- 优先选择 WebP 或 AVIF 等新一代图片格式。
- 将关键 CSS 内联（inline），以减少页面顶部被阻塞的请求。
- 使用优质的缓存插件，并借助 Redis 或 Memcached 等对象缓存（object cache），将服务器响应时间压缩到最低。
- 部署快速的内容分发网络（CDN），让资源从离用户最近的服务器送达。
2. 将 CLS 值降至接近于零的方法
防止页面布局突然偏移需要严格的编码规范。您可以采取以下做法：
- 为所有
<img>和<video>标签明确设置width和height值。这样浏览器会在元素下载之前就为其预留页面空间。 - 对于广告位或动态横幅，提前用 CSS 设置固定的最小高度（min-height）区域。
- 使用 CSS 规则
font-display: swap;，防止网页字体加载期间文字消失或改变尺寸。
3. 通过 JavaScript 优化降低 INP
在 WordPress 网站中，INP 优化往往是最具挑战性的部分，因为主题和插件经常运行较重的 JavaScript 文件。为了让页面交互更加流畅：
- 移除未使用的 JavaScript 文件，或确保它们只在需要的页面上加载。
- 延迟加载不必要的计数器、动画和第三方跟踪代码（tracking scripts）（即延迟 JS）。
- 确保您的主题代码现代且简洁。选择符合您需求、性能经过验证的 WordPress 插件与主题 解决方案，既能保持开发标准，又能让网站摆脱插件过多的负担。
Core Web Vitals 的测量与跟踪工具
在进行优化时，以真实数据为依据至关重要。浏览器中的即时测试与真实用户数据可能存在差异。您可以借助以下工具进行跟踪：
Google PageSpeed Insights： 既提供实验室环境下的模拟测试，也展示过去 28 天的真实用户 Chrome 用户体验报告（CrUX）数据。
Google Search Console： 通过左侧菜单中的“核心网页指标”标签，可以批量列出哪些页面表现较差，哪些表现良好。
Web Vitals Chrome 扩展程序： 在浏览页面时，实时显示 LCP、CLS 和 INP 的数值。
常见问题
Core Web Vitals 是否直接作为 Google 排名因素？
是的，Core Web Vitals 指标是 Google 页面体验算法的正式组成部分。在内容质量非常接近的两个页面之间，Google 倾向于将技术表现更好、不会让用户久等的页面排在更靠前的位置。
取代 FID 的 INP 指标究竟衡量什么？
旧指标 FID 只关注页面上第一次点击的延迟；而自 2024 年 3 月起正式成为核心指标的 INP，则衡量用户在页面停留期间所有交互（点击、打开菜单、筛选等）的延迟情况。
为什么移动端和桌面端的 Core Web Vitals 分数会不同？
移动设备通常处理器性能有限，蜂窝网络的延迟也高于有线或光纤网络。因此，移动设备上的 JavaScript 处理时间更长，移动端分数通常低于桌面端。
