面向网站所有者的 Core Web Vitals 详解

Core Web Vitals 是 Google 用来描述页面给真实访客带来何种体验的三项指标：主要内容出现得有多快、用户点按或点击时页面反应有多快，以及加载过程中布局是否会跳动。它们是 Google 页面体验信号的一部分，但更值得关注的原因其实更简单：访客会离开缓慢、跳动的页面，而且他们很少会告诉你原因。

本指南用通俗的语言解释这三项指标、Google 公布的阈值，以及如何在一个普通小企业网站上判断应当先修复什么。

三项指标一览

指标	衡量内容	良好	较差
LCP（Largest Contentful Paint，最大内容绘制）	最大的可见元素渲染完成所需的时间	不超过 2.5 秒	超过 4 秒
INP（Interaction to Next Paint，下次绘制的交互延迟）	点按、点击或按键后，页面在视觉上做出响应所需的时间	不超过 200 毫秒	超过 500 毫秒
CLS（Cumulative Layout Shift，累计布局偏移）	可见内容意外移动的程度	不超过 0.1	超过 0.25

介于“良好”和“较差”之间的数值属于“需要改进”区间。Google 在真实访问的第 75 百分位评估页面，这意味着四分之三的访客获得的体验应当达到或优于阈值。在你自己的笔记本电脑上做一次快速测试，并不能证明页面达标。

Largest Contentful Paint：页面是否及时显示？

LCP 关注首屏中最大的图片、视频封面或文本块，并记录它渲染完成的时刻。在大多数网站上，这是一张主视觉大图或一个大标题。LCP 慢通常来自四个原因之一：服务器响应慢、图片过大或格式不佳、阻塞渲染的 CSS 或 JavaScript，或者浏览器发现关键图片太晚。

Interaction to Next Paint：页面是否有响应？

INP 在 2024 年 3 月取代了较早的 First Input Delay 指标。First Input Delay 只关注第一次交互，而且只看交互开始之前的延迟，而 INP 会考察整个访问过程中的各次交互，并报告其中最慢之一，从输入一直计算到绘制下一帧。加载很快、但打开菜单或按下按钮时却感觉发黏的页面，通常存在 JavaScript 问题：主线程上同时运行的代码太多。

Cumulative Layout Shift：页面是否保持稳定？

CLS 累计可见元素的意外移动。当你正要点击一个链接，上方却加载出一个横幅把链接挤了下去，你就体会过这种情况。常见的诱因包括：没有宽高属性的图片、加载较晚的广告和嵌入内容、切换后改变文字大小的字体，以及注入在页面顶部的 Cookie 提示横幅。

实验室数据与真实数据

测量有两种，把它们混为一谈会造成困惑。

• 真实数据（field data）来自使用真实设备和网络的真实访客。Google 从 Chrome 用户那里收集这些数据，并在你的网站有足够流量时显示在 PageSpeed Insights 和 Search Console 中。评估时以这个为准。
• 实验室数据（lab data）来自模拟测试，比如 Lighthouse。它可复现，因此非常适合调试，但它只代表一台设备、一种网络连接。

小型网站可能根本没有真实数据。这时可以用实验室测试发现问题，并把结果当作参考，而不是定论。

从哪里开始优化

1. 测量重要的页面。在移动设备配置下测试你的首页、访问量最大的着陆页，以及一篇典型的文章或产品页。不要对整个网站取平均值。
2. 先修复最慢的指标。如果 LCP 较差而 CLS 正常，就先优化 LCP。
3. 先从低成本的改进入手。压缩并调整主视觉图片的尺寸，设置图片尺寸，启用缓存，考虑使用 CDN，并删除不再使用的插件或脚本。
4. 每次改动后重新测试。一次只改一处，这样你才知道什么有帮助。
5. 等待真实数据跟上。真实世界的数据是在滚动周期内收集的，所以改进需要几周才能完全体现出来。

主机与此有什么关系

Core Web Vitals 主要取决于页面是如何构建的，但主机决定了底线。服务器响应缓慢会拖延后续的一切，直接损害 LCP。拥挤的服务器、过时的 PHP 版本以及缺少服务器端缓存，都会在浏览器收到第一个字节之前增加时间。出色的前端工作无法完全弥补缓慢的后端。

现实的预期

三项指标全部达标是一个值得追求的目标，但它并不是什么神奇的排名开关。内容的相关性仍然重要得多。可以把 Core Web Vitals 看作消除阻力：它们不会让一个糟糕的页面获得排名，但缓慢、跳动的页面会让你更难留住已经赢得的访客。

网站所有者常犯的错误

• 追求完美的 Lighthouse 分数。实验室测试得 100 分并不是目标。真实访客的三项指标达到阈值才是。
• 只在桌面端测试。大多数评估是在移动端进行的，而移动设备的处理器和网络连接都更慢。
• 装了个提速插件就此止步。插件可以在缓存和图片处理上提供帮助，但它们无法去掉一张 3 MB 的主视觉图片或十几个营销脚本。
• 忽视模板。基于同一模板构建的页面通常有相同的问题，所以修复模板就能一次性修复许多页面。Search Console 正是出于这个原因对相似的 URL 进行分组。

保留一份简单的日志，记录你改动了什么以及前后的分数。当插件更新后出现退步时，它能省去猜测的功夫。

快速的页面从服务器开始

在 Zebra Hosting Cloud 上，每个套餐都包含 Plesk 控制面板，你可以在其中选择当前版本的 PHP，托管网站还可使用 Cloudflare CDN，让静态文件从离访客更近的地方提供。这些共同解决了等式中服务器的那一部分，让你可以专注于页面本身。各套餐提供的内容请见主机概览。