Shopify 知识库 · 概念
店面性能：Web Vitals、图片与应用脚本
说明 Shopify 后台 Web performance 报告的数据来源、周期与 LCP、INP、CLS 的分级，整理官方对图片、应用脚本与主题代码的性能建议，并把结论对应到滚动显现、吸顶栏、轮播等展现形式的取舍。
店面性能回答的是顾客打开页面时，主要内容多久出现、点击多久有反应、内容有没有意外移位。Shopify 后台能看到真实用户的 Core Web Vitals，官方文档也给出了主题与应用的代码层建议；它不能告诉你某个改动会快多少，也不替代对具体页面的实测。本文不写任何「提升多少」的数字。
本库哪些内容依赖它
本文是店面性能平台机制的权威来源，其他文章只写各自页面语境下的用法：
- 指标定义与阈值见 LCP 与 CLS，本文只写 Shopify 后台如何呈现它们。
- 展现形式：Scroll Reveal、Skeleton Loader、Sticky Bar、Carousel 的性能段落，对应本文「与展现形式的关系」。
- 主题实现：店面布局讲宽度与网格，Horizon 布局记录 4.2.0 基线中的脚本加载与首屏尺寸计算。
- 同意横幅与像素：Cookie 同意、Web Pixels涉及第三方脚本的加载位置。
核心对象与概念
| 对象 | 含义 | 备注 |
|---|---|---|
| Web performance 报告 | 后台基于真实用户数据的 Core Web Vitals | 官方页称 real user data |
| Core Web Vitals | LCP、INP、CLS | 官方页给出各自的 Good、Moderate、Poor 分级 |
| 实验室数据 | Lighthouse、PageSpeed Insights 等单次模拟 | 官方页写它与真实用户数据可能相差很大 |
image_url / image_tag | Liquid 中输出图片地址与 <img> 的入口 | 自动输出 width、height、srcset |
| App embed block | 应用通过 theme app extension 提供的嵌入块 | 官方称可只在特定页面加载脚本 |
| ScriptTag | 旧式向店面注入脚本的方式 | 见下文弃用公告 |
在哪里看
- 摘要在 Admin 的 Themes 页，完整报告在 Analytics > Reports；查看需要 Reports 员工权限（见身份与权限与分析报告）。
- 摘要基于最近 30 天真实用户数据，指标按第 75 百分位显示；报告可回看的数据只有最近 90 天，并可能延迟最多 36 小时。
- 官方页写新店铺或私有模式（密码保护）店铺可能没有指标，受密码保护的店铺不会产生真实用户指标。
- 所读官方页面使用「Web performance」名称；未见「Online store speed」页，本文不据此断言旧报告已下线，只说明在所读范围内未找到。
指标分级（Shopify 帮助页所读）
| 指标 | Good | Moderate | Poor |
|---|---|---|---|
| LCP | 2500 ms 及以内 | 2500 至 4000 ms | 超过 4000 ms |
| INP | 200 ms 及以内 | 200 至 500 ms | 超过 500 ms |
| CLS | 0.1 及以内 | 0.1 至 0.25 | 0.25 及以上 |
CLS 的 Poor 边界，帮助页写「0.25 及以上」，而本库 CLS 词条依据的 web.dev 写「超过 0.25」；两处并列，不选边，恰好等于 0.25 的情形以你引用的来源为准。LCP 与 CLS 的候选元素、计算方式见上述术语条目。
与主题、Liquid 和 API 的连接
- 图片（shopify.dev 主题性能页）：用
image_url与image_tag，不要手拼 CDN 地址；配合srcset与sizes提供合适尺寸；loading="lazy"只用于首屏之外的图片，LCP 图片永远不要懒加载，并给它fetchpriority="high"。image_tag参考页写默认自动输出width、height、srcset，位于页面较靠后位置的图片会自动lazy，preload参数会发出 Link 响应头，应谨慎用于首屏图片。 - 帮助页对图片的建议：照片用 JPG、透明图形用 PNG，尺寸与展示大小匹配；平台由图片 CDN 提供合适格式并压缩。
- 平台已做的事（shopify.dev 平台页与帮助页）：CDN、Brotli 与 gzip 压缩、HTTP/3、Early Hints、静态资源浏览器缓存一年等已由 Shopify 处理，官方页称针对服务器设置、HTTP 头与缓存策略的第三方建议多半已被平台覆盖。
- 脚本：非关键脚本用
defer，只有相互独立的第三方脚本用async；官方页写，去掉不必要的脚本永远好过推迟它。无法推迟的例外包括会在首屏渲染前修改可见内容的脚本，如 A/B 测试的防闪烁片段。本库 Horizon 基线的scripts.liquid含模块映射、条件加载与 popover polyfill 动态加载，详见 Horizon 布局。 - Liquid 与 CSS：嵌套循环随商品规模呈平方增长；metafield 读取移出循环；分页保持在 25000 个对象以内；字体回退用
size-adjust一类描述符减少偏移；动画用transform与opacity，不要改top、left；preload只给一两个晚发现的关键资源；首屏内容应由 Liquid 与 HTML 直接渲染，而非依赖 JavaScript。
应用脚本：影响与审计
官方帮助页把影响店面性能最大的因素归为主题、已安装应用与手动添加的第三方代码。做法按官方页所读：
- 评估价值：逐个评估已装应用与第三方代码，是否值得它带来的性能代价；帮助页提醒卸载应用不会自动移除它写进主题的代码，可能要联系应用开发者获取清理说明。
- 审计标签管理器：删掉不再使用或价值低的标签。
- 识别阻塞：shopify.dev 写要找出并移除或推迟在渲染任何内容前阻塞 HTML 解析的应用脚本。
- 前后对比：应用店面性能页给出的办法是安装应用前后用 PageSpeed Insights 测同一批页面（首页、商品页、集合页）并比较；测试页强调先用真实用户数据发现问题，用实验室数据调试，再用真实用户数据确认改善，并提醒 Lighthouse 与真实数据可能差别很大。
- 警惕作弊式优化：fake performance apps 页描述了检测测试工具、伪造 LCP 元素等手法，建议以真实体验而不只是分数验证，并检查 LCP 元素是否为真实内容。本文不点名任何应用。
官方公告写：2027 年 3 月 1 日起 Shopify 停止向店面注入 script tag，应用需改用 theme app extension 提供的 app embed block，分析类需求可用 web pixels；2026 年 10 月 1 日起相关创建与更新会报错。这只影响以 online_store 为作用域的 script tag。应用是否属于原生配置、应用或定制开发，见扩展位置选型。
与展现形式的关系
- Scroll Reveal：透明起始的元素不计入 LCP 候选，首屏主图与标题不宜走显现动画；位移只用
transform。 - Skeleton Loader：占位与最终尺寸一致才有助于减少偏移，不一致时替换本身就会造成位移。
- Sticky Bar：加载后才插入并推开正文属于晚到内容，需预留高度；固定定位叠层是否计入 CLS，本库词条标为未核验。
- Carousel：首屏轮播图往往就是 LCP 元素，其高度不固定时会带来位移；懒加载策略遵循「LCP 图片不懒加载」。
验证一次
- 记下 Themes 页三项摘要与所选时间窗；新店铺或密码保护店铺没有数据时，改用实验室数据并注明这一点。
- 选首页、商品页、集合页各一，用 PageSpeed Insights 与浏览器开发者工具各测一次，两者差异过大时先按 fake performance apps 页的方法检查 LCP 元素。
- 在主题编辑器停用或卸载一个应用后重测，比对同一页面；卸载后检查主题代码里有无残留。
- 检查 LCP 图片：是否未设懒加载、是否带
fetchpriority="high"、是否用image_tag输出宽高与srcset。 - 首屏使用了显现动画、吸顶栏或轮播时，确认它们没有让 LCP 元素变成透明起始，也没有在加载后推开正文。
待继续完善
- 在真实店铺打开 Web performance 报告，记录 Good、Moderate、Poor 的界面呈现与页面类型、设备维度的分组。
- INP 缺少本库术语条目，待补并与三项摘要对齐。
- App embeds 开关在主题编辑器中的位置与对性能测试的用法，待读官方页后补充。
- Theme Store 对 Lighthouse 的准入要求与本文的商家视角区分，待另文说明。