Shopify 性能优化
Shopify 的 TTFB 由平台与主题共同决定，主题侧能优化的主要是图片、字体与脚本三类资源。本分类按 Core Web Vitals 的三个指标拆开讲：LCP 如何定位首屏大图与预加载优先级，CLS 如何消除字体与广告位抖动，INP 如何拆解主线程长任务，并给出改动后的验证方法。
-
01
Shopify CLS 由字体引起怎么修
页面打开时标题先显示系统字体，随后跳一下换成品牌字体，CLS 0.2 以上，移动端尤其明显。
-
02
Shopify 集合页一次渲染 250 个商品太慢
集合页 HTML 1.8MB，paginate by 250 后 TTFB 900ms，DOM 节点 4200 个……
-
03
Shopify content_for_header 不能延迟怎么办
首屏 head 里有 trekkie、boomerang 与 Web Pixel 相关脚本同步加载……
-
04
折叠区用 content-visibility 高度乱跳怎么修
给 FAQ 与评论区加 content-visibility: auto 后滚动条位置乱跳……
-
05
Shopify defer 和 async 混用导致脚本报错
控制台偶尔报 Cannot read properties of undefined (reading 'init'……
-
06
Shopify 字体用 font-display swap 还是跳动
加上 font_display: 'swap' 后标题仍下移 12px，CLS 从 0.02 涨到 0.18……
-
07
Shopify 页面里 @font-face 重复输出怎么清理
首页 4 个 section 各输出一段相同的 @font-face，同一 woff2 请求 4 条……
-
08
Shopify 字体 preload 后反而下载了两次
Network 里同一个 woff2 出现两条记录，一条 Initiator 是 preload……
-
09
Shopify GTM 容器标签太多导致 INP 变差
容器里 40 多个标签，首页 gtm.js 之后又拉 12 个请求，主线程最长任务 380ms……
-
10
Shopify 图片 format=webp 参数为什么不生效
在图片地址后手拼 &format=webp……
-
11
Shopify 图片没写宽高导致布局抖动怎么修
页面加载时商品图先撑开再收缩，文字被推来推去，Lighthouse 的 CLS 分数在 0.2 以上。
-
12
Shopify 图片 srcset 断点没覆盖高分屏怎么改
商品页主图在 iPhone 上仍下载 1600px 版本……
-
13
Shopify image_tag 默认给首屏图加了 lazy
商品页移动端 LCP 6.1s，Elements 里首屏主图带着 loading="lazy"……
-
14
Shopify INP 超了但不知道是哪个按钮慢
CrUX 的 INP 280ms 已超 200ms 阈值，Lighthouse 只报长任务……
-
15
Shopify INP 差因主线程长任务
点击加购、切换变体后要等一两秒才有反应，INP 超过 500 毫秒，但页面加载分数看起来正常。
-
16
Shopify LCP 元素是大图怎么优化
移动端 LCP 4 秒以上，Lighthouse 指出首屏 banner 图就是 LCP 元素，图已经压缩过仍然慢。
-
17
Shopify 实验室 90 分但 CrUX 仍报 LCP 差
PageSpeed 移动端跑出 92 分……
-
18
Shopify Liquid 循环太多导致渲染慢怎么优化
集合页、搜索页打开要 3 秒以上，TTFB 正常但 HTML 返回很慢；页面里嵌套了多层 for 循环。
-
19
Shopify 移动端隐藏的大图仍在后台下载
移动端首屏只显示一张小图，Network 里仍有 3 张 1600px 桌面图在传输，合计 720KB……
-
20
Shopify Hydrogen 改价后 Oxygen 仍返回旧页
后台调价 10 分钟后 Hydrogen 商品页仍是旧价……
-
21
Shopify 首页自动播放视频拖慢加载怎么优化
首页 banner 用 15MB 的 MP4 自动播放，移动端首屏加载十几秒，流量消耗大。
-
22
Shopify 轮播插件太重导致移动端卡顿
首页三个轮播用了同一个大而全的滑块库，滚动时掉帧，INP 超过 500ms。
-
23
Shopify 页面缓存与 CDN 到底怎么生效
改了主题前台没变化，或者不同地区用户看到的内容不一致，怀疑缓存配置有问题。
-
24
Shopify 顶部公告条与广告位造成 CLS 怎么修
页面加载时内容突然往下跳，CLS 0.25，主要是顶部公告条与延迟加载的广告位把布局顶开。
-
25
Shopify 首屏关键 CSS 要不要内联
Lighthouse 提示「消除阻塞渲染的资源」，style.css 有 200KB，首屏白屏时间偏长。
-
26
Shopify 应用重复注入脚本怎么排查
页面里同一个应用脚本出现两三次，或者 jQuery 被加载了三个版本，Network 面板重复请求一堆。
-
27
Shopify 自定义字体加载慢怎么优化
中文字体文件 8MB，首屏文字先空白再闪现，或者一直等到字体下载完才显示。
-
28
Shopify 主题 JS 打包太大怎么拆
主题的 theme.js 有 400KB，首页几乎用不到购物车与商品页逻辑，却全量加载。
-
29
Shopify 模板里输出大 JSON 拖慢 HTML 怎么办
页面 HTML 有 800KB，大部分是 {{ product | json }} 与全量变体数据，移动端解析慢。
-
30
Shopify 全站图片懒加载反而拖慢 LCP
为了省流量给所有图片加了 loading="lazy"，结果 LCP 变差，首屏图很晚才出现。
-
31
Shopify 首屏大图怎么预加载才提升 LCP
Lighthouse 显示 LCP 4.5 秒，元素是首屏 banner 图，图片本身加载并不慢，但发现得太晚。
-
32
Shopify 图片能不能自动转 WebP 或 AVIF
商品图都是 JPG/PNG，单张 300KB 以上，想让 Shopify CDN 自动输出更小格式。
-
33
Shopify 抓 LCP 元素时 element 为空怎么查
回调里 entry.element 是 null，只能拿到 startTime，判断不出拖慢首屏的是主图还是标题。
-
34
Shopify 商品图按 2048px 原图输出拖慢移动端
集合页每张商品卡都是 ?width=2048，移动端首屏 8 张图共 2.4MB，LCP 5.4s，评分只有 21。
-
35
Shopify 第三方应用脚本拖慢首屏怎么处理
主题本身不慢，但装上几个应用后移动端 LCP 超过 4 秒，Network 面板里大量来自应用域名的 .js。
-
36
Shopify TTFB 偏高怎么读 Lighthouse 报告
Lighthouse 里 TTFB 显示 1.2 秒以上、标红，但服务器是 Shopify 托管……
-
37
Shopify 商品页带 ?variant= 后 CDN 命中率低
同一商品 8 个变体各有一条 URL，响应头 x-cache 多为 MISS……
-
38
Shopify 移动端 viewport 写错导致整页抖动
手机上首屏先按 980px 虚拟宽度排版再缩放，图片与标题在 300ms 内横向弹一下，CLS 0.24。
-
39
Shopify 用 web-vitals 上报却收不到数据
接入 web-vitals 后自建接口一条记录都没有……
-
40
Shopify 字体加载慢导致文字闪烁怎么优化
首屏文字先用系统字体渲染，几百毫秒后跳到品牌字体，出现明显闪烁（FOUT），偶尔整段文字短暂不可见。
