在过去，“速度”是一个模糊的概念。网站加载快吗？今天，Google 已经量化了对用户来说“快”和“流畅”的确切感觉。这些指标被称为核心网页指标 (Core Web Vitals - CWV)。
自从成为排名信号以来，CWV 将重点从原始服务器速度转移到了感知的用户体验。这不仅仅是关于代码加载有多快；而是关于用户实际上多久可以使用页面。
三个具体指标构成了核心网页指标。要通过评估，页面必须在所有三个指标中得分“良好”。
1. LCP (最大内容绘制) – 加载性能
“主要内容多久出现？”
LCP 测量最大的可见元素（通常是首图、视频或主标题）完全加载并出现在屏幕上所需的时间。它告诉用户：“这个页面实际上正在发生。”
阈值
- 良好： ≤ 2.5 秒
- 需要改进： ≤ 4.0 秒
- 差： > 4.0 秒
LCP 差的常见原因
- 服务器响应时间慢： 如果您的主机便宜或过载，浏览器等待接收数据的时间太长。
- 资源加载延迟： 首图未优化或通过延迟加载 (lazy-loading) 加载（对于顶部图像应避免这种情况）。
- 渲染阻塞 JavaScript： 浏览器暂停构建页面以读取脚本文件。
如何改进
- 优化图像： 压缩图像（WebP 格式）并确保首图未延迟加载。
- 使用 CDN： 内容分发网络从物理上更靠近用户的服务器提供图像。
2. INP (交互到下一次绘制) – 交互性
“我点击时页面会冻结吗？”
注意：INP 于 2024 年 3 月正式取代首次输入延迟 (FID) 成为核心指标。
INP 观察用户在整个访问过程中与页面进行的所有交互（点击、轻击和按键）的延迟。它测量用户操作与浏览器能够绘制显示结果的下一帧（例如，打开菜单或展开折叠）之间的时间。
阈值
- 良好： ≤ 200 毫秒
- 需要改进： ≤ 500 毫秒
- 差： > 500 毫秒
INP 差的常见原因
- 繁重的 JavaScript 执行： 浏览器的“主线程”太忙于处理代码而无法响应用户的点击。
- 复杂的布局： 交互后浏览器重新绘制页面所需的时间太长。
如何改进
- 分解长任务： 开发人员可以将大块 JavaScript 分解为小块，以便浏览器可以呼吸。
- 优化事件处理程序： 确保由点击触发的代码轻量且快速。
3. CLS (累积布局偏移) – 视觉稳定性
“内容会意外跳动吗？”
我们都经历过这种情况：您正要点击一个按钮，但突然一个广告加载在它上面，将内容向下推，您不小心点击了错误的东西。这就是布局偏移。CLS 测量页面生命周期内发生的所有意外布局偏移的总和。
阈值
- 良好： ≤ 0.1
- 需要改进： ≤ 0.25
- 差： > 0.25
CLS 差的常见原因
- 没有尺寸的图像： 如果您不告诉浏览器 width="800" 和 height="600"，它不知道要预留多少空间。
- 广告和嵌入： 动态调整大小的广告横幅通常会将内容向下推。
- Web 字体： 有时文本在自定义字体下载 (FOIT) 或交换样式 (FOUT) 之前是隐藏的，导致行高发生变化。
如何改进
- 设置尺寸： 始终在图像和视频元素上包含宽度和高度属性。
- 预留空间： 如果您有动态广告位，请在 CSS 中为其预留特定的框大小，以便在广告加载时内容不会移动。
摘要表：指标概览
| 指标 | 重点 | “良好”目标 | 用户感觉 |
|---|---|---|---|
| LCP | 加载 | 2.5秒以下 | “它在这里。” |
| INP | 响应性 | 200毫秒以下 | “它在工作。” |
| CLS | 稳定性 | 0.1以下 | “它很稳定。” |
如何衡量您的分数
您不需要猜测。Google 提供了免费工具来根据这些标准测试您的网站：
- PageSpeed Insights： 快速快照的首选工具。它提供“实验室数据”（模拟）和“现场数据”（真实用户数据）。
- Google Search Console： “核心网页指标”报告向您显示网站上哪些 URL 失败，并按问题类型对其进行分组。
- Lighthouse： 内置于 Chrome 浏览器中的开发人员工具（右键单击 > 检查 > Lighthouse），用于本地测试。