免费试用 Shopify Core Web Vitals：LCP、INP、CLS 是什么，如何达标
Core Web Vitals（核心网页指标）是 Google 用来衡量真实顾客浏览体验的三项指标：LCP（主要内容显示的速度，2.5 秒以内为良好）、INP（页面响应点击的速度，200 毫秒以内为良好）和 CLS（页面布局跳动的程度，0.1 以内为良好）。Google 以过去 28 天真实访问的第 75 百分位数来评估。在 Shopify 店铺中，不达标的常见原因是应用脚本、过大的首屏图片、网页字体和主题代码。
- 7 天免费试用
- 无需代码
- 随时取消
三项 Core Web Vitals 及达标标准
Google 以真实访问的第 75 百分位数评估每项指标，也就是每四次访问中有三次需要处于良好范围。移动端和桌面端分开评估，三项都良好时页面才算达标。
| 指标 | 衡量内容 | 良好 | 需要改进 | 较差 |
|---|---|---|---|---|
| LCP | 加载：屏幕上最大元素显示所需的时间 | 2.5 秒以内 | 2.5 至 4 秒 | 超过 4 秒 |
| INP | 响应：点击后多久才能看到反馈 | 200 毫秒以内 | 200 至 500 毫秒 | 超过 500 毫秒 |
| CLS | 视觉稳定性：页面加载时跳动的程度 | 0.1 以内 | 0.1 至 0.25 | 超过 0.25 |
LCP
Largest Contentful Paint（最大内容绘制）
在 Shopify 店铺中，LCP 元素几乎总是首页的首屏大图或商品页的第一张商品图片。所有在它之前加载的内容（应用脚本、字体、主题 JavaScript、轮播图中的其他图片）都会推迟 LCP。
INP
Interaction to Next Paint（交互到下一次绘制）
INP 于 2024 年 3 月取代了 FID（首次输入延迟）。它记录一次访问中最慢的交互：选择商品款式、打开菜单、点击加入购物车。当应用和主题脚本占用浏览器时，点击只能排队等待，页面就像卡住了一样。
CLS
Cumulative Layout Shift（累积布局偏移）
CLS 是一个分数，不是时间。在 Shopify 店铺中，它通常来自较晚出现并把页面往下推的内容：公告栏、评价星级、分期付款提示、Cookie 横幅、应用区块，或没有设置宽高的图片。
为什么 Shopify 店铺的 Core Web Vitals 不达标
Shopify 的服务器和图片 CDN 本身很快。拖慢店铺的，主要是在主题之上额外添加的内容，以及它们的加载顺序。
应用脚本
每个在店铺前台显示内容的应用（评价、聊天、弹窗、追加销售、追踪工具）都会加入自己的 JavaScript。浏览器需要下载并运行这些脚本，往往在商品图片之前，这会拖慢 LCP；顾客点击时浏览器仍在忙碌，INP 也会变差。
过大的首屏图片或轮播图
首屏图片通常就是 LCP 元素。文件过大、轮播图一次加载多张图片、背景视频，或首屏图片设置了延迟加载，都会让主要内容更晚显示。
网页字体
自定义字体的每一种字重都是一个额外文件。字体到达之前文字可能不显示，字体替换时文字还可能重新排版，增加 CLS。
主题 JavaScript
大型菜单、快速预览、轮播、滚动动画，以及基于大型代码库的旧主题，都会在主线程上运行代码。同时运行的越多，页面响应就越慢。
第三方代码
直接粘贴进主题文件的分析工具、广告像素、热力图和标签管理器会在每个页面加载。重复代码也很常见，例如同一个分析代码既由应用添加，又被手动添加了一次。
旧应用残留的代码
有些应用会在主题中加入代码片段，卸载后这些代码仍然保留。应用已经删除，但它的脚本可能仍在每个页面加载。
如何查看您店铺的 Core Web Vitals
-
PageSpeed Insights：先看上半部分
上半部分显示的是实测数据：过去 28 天内真实 Chrome 用户访问您店铺的情况，以及页面是否达标。Google 使用的正是这部分数据。下方 0 至 100 的性能分数是在一部模拟手机上运行的实验室测试，适合用来查找问题，但并不是您的 Core Web Vitals 结果。
-
Search Console：一次查看所有页面
Core Web Vitals 报告会把您的网址分为良好、需要改进和较差三类，移动端和桌面端分开统计，并指出未达标的指标。修复后点击验证修复，Google 会在随后 28 天内重新检查这些页面。
-
Shopify 后台的网页性能报告
Shopify 后台有自己的网页性能报告，根据您店铺的访问数据显示 LCP、INP 和 CLS。如果店铺流量太少，Google 无法显示实测数据，这份报告就很有用。
-
Whoosh 免费速度检测
输入您店铺的网址，检测会显示哪些应用在您的页面上加载，以及是什么拖慢了速度。无需安装，无需代码。
按效果排序：如何改善 Shopify 店铺的 Core Web Vitals
从第一项开始。每一步商家都可以在没有开发人员的情况下完成，前几项对三项指标都有帮助。
-
删除不再使用的应用
然后在主题代码中搜索旧应用的名称：残留的代码片段可能仍在加载。脚本越少，三项指标都会受益。
-
先加载顾客看得到的应用，其余稍后
聊天、追踪工具、页面下方的评价组件和弹窗都不需要在商品图片之前加载。让它们稍后加载，浏览器就能先处理图片（LCP）和顾客的点击（INP）。
-
优化首屏图片
移动端用一张图片代替轮播图，以合理的尺寸上传，并确保页面第一张图片没有设置延迟加载。新版 Shopify 主题会为不同屏幕提供合适的尺寸。
-
为较晚出现的内容预留空间
为图片设置宽高，为应用区块、评价星级和横幅在布局中预留固定位置，让它们填入空位，而不是把页面往下推。这是改善 CLS 最主要的方法。
-
减少字体和字重
通常一种字体的一到两种字重，或系统字体就足够了。Shopify 字体库中的字体由 Shopify 提供，文件越少，文字显示越早，跳动也越少。
-
清理第三方代码
删除重复的分析代码和像素，并尽可能把追踪代码从主题文件移到 Shopify 的客户事件或官方渠道应用中。
-
保持主题更新，少用特效
主题更新常常包含速度优化。首屏自动播放视频、视差效果和滚动动画，每次访问都会消耗时间。
-
28 天后再测量
实测数据覆盖过去 28 天，因此修复效果会逐步显现。请对比相同条件：同样的页面、移动端、实测数据。
Whoosh 能做什么
Whoosh 是一款 Shopify 提速插件，可自动解决上述清单中与应用脚本有关的部分，但不能代替其他优化。
它能做什么
- Smart App Loading 优先加载顾客看得到的应用，让聊天、追踪工具、评价工具和弹窗稍后加载，商品图片更早出现，页面也能更快响应点击。
- AI Page Preloading 在顾客点击之前就加载下一个页面，打开时无需等待。
- 无需代码，无需修改主题。从 Shopify App Store 安装即可开始工作。
它不会做什么
- 它不会重写您的主题、压缩图片或更换字体。上面这些优化仍需由您完成。
- 它不会让应用本身变快，只改变它们到达的顺序。
- 它不会触碰结账和账户页面。结账由 Shopify 负责。
您可以在数据面板中查看效果：前几周的 50/50 测试会对比使用与未使用 Whoosh 的顾客。
Smart App Loading：每月 99 美元
先免费试用 7 天，通过 Shopify 账单结算，可随时在 Shopify 中取消。还想要 AI Page Preloading？Whoosh Max 包含两者，每月 149 美元。
Shopify Core Web Vitals 常见问题
Shopify 店铺的 Core Web Vitals 达到多少才算良好？
与任何网站相同：LCP 不超过 2.5 秒，INP 不超过 200 毫秒，CLS 不超过 0.1。Google 以过去 28 天真实访问的第 75 百分位数分别评估移动端和桌面端，三项都良好时页面才算达标。
为什么我的 Shopify 店铺 Core Web Vitals 不达标？
常见原因包括：在商品图片之前加载的应用脚本、过大的首屏图片或轮播图、多种网页字体、主题 JavaScript、粘贴进主题的第三方代码，以及已卸载应用残留的代码。Search Console 的 Core Web Vitals 报告会指出哪项指标未达标，帮助您缩小排查范围。
PageSpeed Insights 分数就是 Core Web Vitals 吗？
不是。0 至 100 的性能分数是在一部模拟手机上运行的实验室测试。您的 Core Web Vitals 结果是报告顶部的实测数据，来自过去 28 天的真实访问，Google 使用的正是这部分。店铺可能实验室分数很低却依然达标，反之亦然。
Core Web Vitals 会影响 Google 排名吗？
会，它是 Google 排名系统使用的页面体验信号之一。有用、相关的内容仍然更重要，所以仅仅达标并不能让页面排名上升；但无论排名如何，速度慢的店铺都会在顾客下单前流失顾客。
修复后多久能在 Core Web Vitals 中看到变化？
最长约四周。PageSpeed Insights 和 Search Console 的实测数据覆盖过去 28 天，会随着新访问取代旧访问而逐步变化。Shopify 的网页性能报告和实验室测试会更早显示变化。
Shopify 插件能解决 Core Web Vitals 问题吗？
插件能解决其中一部分。Whoosh 的 Smart App Loading 负责应用脚本这一部分：先加载顾客看得到的应用，其余稍后加载。没有任何插件能替您缩小上传过大的图片或重写主题。如果某个工具只提高实验室分数，却没有改变真实顾客的体验，请多加留意，因为 Google 使用的是真实访问数据。
Whoosh 会修改我的主题或结账页面吗？
不会。Whoosh 不会修改您的主题。它调整的是应用的加载时机，而不是主题本身的结构，也不会触碰结账和账户页面。结账由 Shopify 负责。
还有疑问？
答案就在我们的帮助中心（英文）。
