网站速度和 CORE WEB VITALS。
又慢又乱跳的网站，在顾客读到第一个字之前就把人赶跑了。Google 用三项 Core Web Vitals 衡量这种体验。下面讲清楚它们的含义、如何免费测试自己的网站，以及在小商家网站上通常最重要的修复方法。
最近的变化
- Google 将劫持返回按钮视为垃圾行为 — 阻止浏览器返回按钮现已被明确列为垃圾行为。
本指南讲的是长期不变的内容。博客会随时跟进最新变化。
三项指标
Google 将 Core Web Vitals 描述为一组衡量真实用户在加载性能、交互性和视觉稳定性方面体验的指标。22024 年，Interaction to Next Paint（INP）取代 First Input Delay 成为 Core Web Vital 之一。1
| 指标 | 衡量什么 | 良好 |
|---|---|---|
| Largest Contentful Paint（LCP，最大内容绘制） | 加载：主要内容何时出现 [1] | 2.5 秒或以下 [1][3] |
| Interaction to Next Paint（INP，交互到下一次绘制） | 响应速度：页面对点按、点击和输入的反应有多快 [1] | 200 毫秒或以下 [1][3] |
| Cumulative Layout Shift（CLS，累积布局偏移） | 视觉稳定性：页面在加载时跳动的程度 [1] | 0.1 或以下 [1][3] |
web.dev 建议在第 75 百分位的页面加载上衡量，并分别针对手机和电脑。1Search Console 将 LCP 不超过 4 秒、INP 不超过 500 毫秒、CLS 不超过 0.25 评为“需要改进”，超过则评为“差”。3
会影响排名吗？
Google 表示，良好的 Core Web Vitals 符合其核心排名系统希望奖励的方向，是整体页面体验的一部分。2它只是众多考量因素之一。内容单薄或没有帮助的快速页面，排名不会超过更好的答案，所以把速度当作留住已经吸引来的访客的手段。
如何测试您的网站
| 工具 | 显示什么 | 注意 |
|---|---|---|
| PageSpeed Insights | 来自真实 Chrome 用户的实测数据（CrUX），以及来自 Lighthouse 的实验室数据，分手机和电脑 [4] | 实测数据覆盖过去 28 天，所以修复后需要时间才能显现；实验室结果和实测结果可能不一致 [4] |
| Search Console Core Web Vitals 报告 | 按真实用户数据，把相似网址分组评为良好、需要改进或差 [3] | CrUX 数据不足时，小网站可能会看到“无可用数据” [3] |
还没有实测数据？以 PageSpeed Insights 的实验室结果作参考，并测试最重要的页面：首页、服务页和联系页。
小商家常见的修复方法
- 缩小图片。压缩照片并使用现代图片格式。5手机直接拍的照片通常比屏幕需要的大得多。
- 不要延迟加载首屏大图。web.dev 说绝不要延迟加载 LCP 图片，
fetchpriority属性可以告诉浏览器哪些资源最重要。5 - 为图片和嵌入内容设定尺寸。加上
width和height属性，或用 CSSaspect-ratio预留空间，这样内容就不会移位。6 - 为网页字体做好规划。字体加载时替换可能会让文字移动；选一个相近的备用字体。6
- 精简第三方脚本。聊天插件、跟踪代码和嵌入内容会越积越多。web.dev 说，脚本如果不能带来明确价值就删掉，除非必须在页面渲染前运行，否则第三方脚本应异步加载。7
- 让点击处理保持轻量。针对 INP，web.dev 建议在事件回调中尽量少做工作，并拆分长任务。8
- 使用靠谱的主机和 CDN。web.dev 建议使用内容分发网络，缩短文件传输的距离。5
速度只是网站好用的一部分。我们的网站无障碍指南讲了另一半：使用键盘、屏幕阅读器或放大功能的用户。
常见问题
我的 PageSpeed 分数很低，但 Search Console 显示良好。哪个对？
可能都对。分数来自模拟的实验室测试；Search Console 用的是一段时间内的真实访客数据。Google 解释说，实验室数据和实测数据可能不同。4
我需要拿满分 100 吗？
不需要。让关键页面达到上面的“良好”阈值，然后把时间花在内容和顾客身上。
网站更快就一定能带来更多潜在客户吗？
没有人能保证这一点。速度能减少阻碍；真正促成生意的仍是您的产品服务、评价和跟进。
资料来源
- web.dev，Web Vitals。
- Google Search Central，Understanding Core Web Vitals and Google search results（了解 Core Web Vitals 与 Google 搜索结果）。
- Search Console Help，Core Web Vitals report（Core Web Vitals 报告）。
- PageSpeed Insights 文档，About PageSpeed Insights（关于 PageSpeed Insights）。
- web.dev，Optimize Largest Contentful Paint（优化 LCP）。
- web.dev，Optimize Cumulative Layout Shift（优化 CLS）。
- web.dev，Efficiently load third-party JavaScript（高效加载第三方 JavaScript）。
- web.dev，Optimize Interaction to Next Paint（优化 INP）。
继续阅读
预约策略电话
不知道网站为什么慢？把链接发给我们，我们会告诉您是什么在拖后腿。