Shopify 站点 LCP 从 4.2 秒降到 1.4 秒，我们改了这 9 个地方

Shopify 的托管层已经做了 CDN 与 HTTP/2，剩下的性能问题几乎都在主题与第三方脚本上。下面是我们按「投入产出比」排序的 9 个改动点。

1. 找出真正的 LCP 元素

先用 PageSpeed Insights 或 Chrome DevTools 的性能面板确认：LCP 元素是首屏大图、标题文字，还是某个懒加载的轮播。不同的元素，优化手段完全不同。盲目压缩所有图片往往收效甚微。

2. 首屏图片改用手写 img，而不是懒加载 section

很多主题的首屏图片被包在懒加载容器里，导致「先加载 JS 再加载图」。首屏主图应该直接输出带 fetchpriority="high" 的 img，并预加载：

<link rel="preload" as="image" href="主图.webp">

3. 图片按视口尺寸输出，用 WebP/AVIF

Shopify 的 CDN 支持 image_url: width: 800 参数，按断点输出 480/800/1200 三档即可。一张 2000px 的原图在手机上加载，是 LCP 超标最常见的原因。

4. 字体：子集化 + font-display: swap

中文字体是重灾区，动辄 3–8MB。要么用系统字体栈，要么做子集化（只保留常用字），并设置 font-display: swap，避免文字空白期拉长 LCP 感知。

5. 砍掉不用的应用脚本

打开页面源码，数一下 <script> 标签。一个典型的「装了 15 个应用」的 Shopify 站点，往往有 300KB 以上的第三方 JS。逐个停用测试，只保留真正产生收入的应用。

6. 延迟加载非首屏 section 的脚本

评价组件、推荐商品、弹窗、客服工具，全部改为「滚动到视口或用户交互后再加载」。这一项通常能减少 40% 以上的初始 JS 执行时间。

7. 去掉渲染阻塞的 CSS

把首屏关键样式内联，其余样式异步加载。注意 Shopify 应用的样式往往在 head 里同步引入，需要在 theme.liquid 里做处理。

8. 减少 DOM 深度与 section 数量

首页堆 12 个 section、每个 section 又是多层 div，移动端的样式计算与布局时间会显著上升。合并同类 section、精简嵌套，收益比想象中大。

9. 用真实设备测，不要只看实验室数据

PageSpeed 的实验室数据偏乐观。用 4G 限速的真机（中低端安卓）在 Chrome 远程调试里跑一遍，才是用户真实感受。目标：LCP < 2.5s、CLS < 0.1、INP < 200ms。

优化的收益有多大

在我们经手的项目中，LCP 从 4 秒区间降到 1.5 秒区间，移动端转化率通常提升 30%–70%，广告落地页的跳出率下降 15%–25%。这不是玄学，而是每一个「等待」都在流失用户。