先判断问题出现在哪里
很多开发者写出了功能很炫酷的主题，但在 Google PageSpeed Insights (PSI) 上一测，移动端只有可怜的 30 分。商家买回去后发现转化率暴跌。
核心逻辑是：按需加载（Lazy Loading）与关键渲染路径（Critical Rendering Path）的极致压缩。
Shopify 的服务器响应（TTFB）是世界顶级的，慢的永远是前端。性能优化的本质，就是告诉浏览器：先加载首屏用户立刻能看到的东西（主图、标题、加购按钮），把那些看不见的（底部的评论、隐藏的弹窗、复杂的 JS 动画）全部推迟到用户滚动或点击时再加载。
实战步骤
步骤 1：图片的终极优化 (LCP 核心)
操作路径：检查所有 Liquid 模板中的 <img> 标签
-
首屏图片（Hero Image）必须预加载：在
<head>中使用<link rel="preload" as="image" href="...">，或者在image_tag中设置preload: true。绝对不能对首屏图片使用懒加载！ -
非首屏图片必须懒加载：在
image_tag过滤器中强制加入loading: 'lazy'。 -
响应式尺寸 (srcset)：永远不要在手机上加载 2000px 宽的图片。
{{ image | image_url: width: 1500 | image_tag: loading: 'lazy', sizes: '(min-width: 768px) 50vw, 100vw', widths: '375, 550, 750, 1100, 1500' }}
步骤 2：CSS 与 JS 的模块化拆分
操作路径：废弃全局的 theme.css 和 theme.js
- 在 OS 2.0 架构中，每个 Section 应该有自己独立的 CSS 和 JS 文件。
- 在 Section 的最顶部，按需引入样式：
{{ 'component-slider.css' | asset_url | stylesheet_tag }} - 这行代码告诉 Shopify：只有当商家把这个轮播图 Section 拖到页面上时，才加载这段 CSS。如果页面上没有轮播图，这段代码就不会污染全局。
步骤 3：延迟加载非关键的第三方脚本 (Third-party Scripts)
操作路径：优化客服、热力图、营销弹窗插件的加载时机
- 第三方脚本是拖慢网站速度的头号杀手。
- 不要把它们直接写在
<head>里。 - 使用 JavaScript 监听用户的首次交互（如
scroll,mousemove,touchstart），或者设置一个 3-5 秒的setTimeout，然后再动态创建<script>标签去加载这些插件。 - 这能让页面的 TBT（总阻塞时间）和 TTI（可交互时间）大幅下降。
步骤 4：排查 Liquid 渲染瓶颈 (Liquid Profiling)
操作路径：使用 Shopify Theme Inspector 浏览器插件
- 有时候慢的不是前端，而是服务器在解析复杂的 Liquid 逻辑时超时了。
- 安装官方的 Shopify Theme Inspector 插件。
- 运行分析，它会生成一个火焰图，清晰地告诉你：
product-card.liquid渲染了 50 次，总共耗时 800ms。 -
优化方向：减少深层嵌套的
for循环，避免在循环内部频繁调用assign或复杂的数学运算。
常见误区与处理方法
误区一：为了追求 100 分而牺牲了核心的用户体验
规避方法：这是一个很常见的误区。有些开发者为了让 PageSpeed 跑出满分，把所有的图片都压缩成了马赛克，删掉了所有的微交互动画，甚至把“加入购物车”的 Ajax 逻辑改回了传统的页面刷新。结果分数是高了，但网站看起来像个 90 年代的破烂网页，转化率暴跌。性能优化必须在“速度”和“体验”之间寻找平衡点。 在电商领域，移动端能稳定跑到 70-80 分，且核心指标（LCP < 2.5s, CLS < 0.1）达标，就已经是一个很优秀的高转化主题了。不要陷入“跑分强迫症”。
误区二：没有为图片和视频设置明确的宽高比 (Aspect Ratio) 导致 CLS 飙升
规避方法：CLS（累积布局偏移）是 Google 很看重的核心网页指标。如果你的图片没有写明 width 和 height，浏览器在下载图片前会给它分配 0 像素的高度。等图片突然加载出来，会把下方的文字和按钮很快挤下去。如果用户此时正准备点击按钮，就会点错。在编写 CSS 和 HTML 时，必须为所有可能延迟加载的媒体元素预留空间。 现代 CSS 提供了 aspect-ratio: 16 / 9; 属性，配合 object-fit: cover;，能在图片加载前就撑开一个完整的占位框，彻底消灭布局偏移。
误区三：滥用 preload (预加载) 导致网络拥堵
规避方法：你学到了 <link rel="preload"> 可以加速资源下载，于是你把整个网站的 5 个字体文件、3 个 CSS 文件、以及页面上的前 10 张图片全部加上了 preload。结果适得其反！浏览器的并发请求数是有限的。当你把所有东西都标记为“最高优先级”时，等于没有优先级。这会导致真正重要的首屏主图和核心 CSS 反而排不上队，被阻塞在后面。preload 很昂贵，必须很克制地使用。 一个页面通常只预加载 1-2 个最核心的字体文件，以及唯一的那张首屏 Hero Image（LCP 元素）。其他资源请老老实实排队下载。
常见问题
学习「Shopify 主题性能优化检查方法：突破 PageSpeed 90 分」前需要什么基础？
建议先熟悉 HTML、CSS、基础 JavaScript 和 Shopify 后台结构。涉及 Liquid、Section、Schema 或主题工作流的内容，可以边读边在测试主题里练习，不要直接改线上主题。
可以直接在正在使用的线上主题里操作吗？
不建议。主题开发和结构调整应先在复制主题、开发主题或本地环境中完成，确认移动端、产品页、购物车和关键模板正常后，再发布到线上主题。
修改主题前最应该备份什么？
至少保留当前主题副本，并用 Git 记录代码变化。如果文章涉及主题编辑器配置，还要注意模板 JSON 和 settings_data.json 这类配置文件是否需要同步。
遇到教程和后台界面不一致怎么办？
优先以当前 Shopify 后台、主题代码和官方文档为准。Shopify 后台和 CLI 会持续更新，旧截图可用于理解路径，但不能替代当前界面提示。
这类主题开发内容适合什么时候上线到正式店铺？
当改动已经在测试主题中完成移动端、桌面端、产品页、集合页、购物车和速度检查后，再安排上线。影响结账、价格、库存或应用兼容的改动要单独回归。