Shopify 主题的性能最佳实践

在商家选择在线商店的主题时，性能是一个重要因素。当你构建或自定义主题时，应始终将性能作为设计重点。优化主题性能对商家的成功和顾客的体验至关重要，因为性能会直接影响转化率、回头率和搜索引擎排名。

当主题提交至 Shopify 主题商店 时，系统会在基准商店上对其进行性能评分测试。要被接受进入 Shopify 主题商店，主题在首页、产品页和集合页的平均 Lighthouse 性能得分必须达到 60 分以上。你也可以使用开发商店在本地对你的主题进行类似测试。

👉 了解有关 Shopify 主题商店性能测试的更多信息。

💡 Shopify 构建的 Dawn 主题就是以性能为导向的一个参考示例。你可以参考 Dawn 的代码了解 Shopify 如何实践这些原则。

优化性能的最佳实践

优化你的 JavaScript

以下是关于优化 JavaScript 的一些原则：

减少 JavaScript 使用

尽量主要使用 HTML 和 CSS 来构建主题。主题的基本功能，如浏览或购买商品，不应依赖 JavaScript。JavaScript 应只作为渐进增强使用，且只在 HTML 和 CSS 无法实现的情况下使用。

CSS 的解析和渲染速度远快于 JavaScript。因此，构建交互功能时，优先考虑 CSS。推荐阅读：5 things you can do with CSS instead of JavaScript（你可以通过搜索“using CSS instead of JavaScript”获得更多类似内容）。

你的 JavaScript 打包后体积应控制在 16 KB 以内。Shopify 会在 storefront 请求时自动压缩 JavaScript。

避免命名空间冲突

JavaScript 压缩时可能会重命名变量，导致全局作用域的冲突。应将 JavaScript 包裹在函数作用域内，例如使用 IIFE（立即调用函数表达式）：

  1. (function () {
  2.   var a; function b() {}
  3. })();

这可避免污染全局作用域，防止与其它脚本冲突。

💡 注：注入到主题中的脚本应始终使用 IIFE 包裹，防止命名空间污染。

减少对外部库的依赖

尽量使用原生浏览器 API，而不是引入第三方库。框架如 React、Angular、Vue 或大型工具库如 jQuery 都会显著增加打包体积，影响加载速度。避免为非常旧的浏览器引入 polyfill（如不支持 async/await 的浏览器）。你可以使用 browserslist 来设置目标浏览器版本（例如 >1% 市场占有率）。

避免阻塞解析的脚本

阻塞解析的脚本会在加载、解析和执行前阻止 DOM 构建，延迟页面渲染，影响如 首次内容绘制（FCP） 和 最大内容绘制（LCP） 等指标。应使用 defer 或 async 属性加载脚本：

  1. <script src="your-script.js" defer></script>

预加载关键资源，延迟或避免加载非关键资源

通过预加载资源，浏览器可在发现资源前就开始下载，从而优化加载流程。

使用资源提示（resource hints）预加载关键资源

每个模板最多添加两个预加载提示，可使用以下方法：

例如，你可以只预加载首屏所需的 CSS 样式表。

懒加载首屏以下的图片

非首屏图片应懒加载，并使用占位图增强加载体验。使用 image_tag 滤镜添加 loading: 'lazy' 属性：

  1. {{ settings.favicon | image_url: width: 200 | image_tag: loading: 'lazy' }}

📌 首屏内容（即无需滚动即可看到的部分）不应使用懒加载。

用户交互时再加载非关键资源

某些功能只有在用户操作后才会触发。例如，你可以使用 import on interaction 模式，在用户点击按钮后才动态加载模块，从而避免无谓的脚本执行和解析。

尽量使用系统字体

使用系统字体可以避免额外的字体下载，提升首屏渲染速度。

将资源托管在 Shopify 服务器

尽可能使用 Shopify 的内容分发网络（CDN）托管资源。将资源保存在主题的 /assets 文件夹中，或通过 GitHub 集成、REST Admin API 上传。使用 URL 过滤器 创建资源链接。

👉 了解更多关于 Shopify CDN 的信息。

使用响应式图片

响应式图片会根据设备尺寸加载最适合的图像，避免加载过大的图片。

使用 image_tag 滤镜创建响应式图片：

  1. {{ product.featured_image | image_url: width: 2000 | image_tag }}

将输出一段包含 srcset 的 HTML，浏览器会自动选择合适尺寸的图片加载。

优化 Liquid 代码

Liquid 渲染性能也会影响页面速度。避免在循环中重复执行复杂操作。

例如，不要在循环中对产品重新排序，应提前完成排序操作。

你可以使用 Shopify Theme Inspector for Chrome 找出导致渲染缓慢的 Liquid 代码。查看 Shopify 工程博客的使用指南。

使用 Theme Check 检测性能问题

Theme Check 可检测 CSS 和 JS 包体积过大、远程资源引用、阻塞解析脚本等问题。👉 了解 Theme Check 的更多信息。

性能测试方法

Shopify 的 Web 性能报告

Shopify 提供 Web 性能仪表板和报告，帮助你根据 核心 Web 指标 (Core Web Vitals) 评估商店在加载速度、交互性和视觉稳定性方面的表现。

💡 此报告基于 真实用户监测（RUM） 数据。

你还可以通过 GraphQL Admin API 的 PerformanceMetrics 和 PerformanceEvents 查询性能数据。

使用 Shopify 数据运行 Lighthouse 测试

你可以模拟 Shopify 审核主题的方式执行 Lighthouse 测试：

  1. 创建一个 开发商店。
  2. 导入 测试产品 CSV 数据。
  3. 在开发商店中点击眼睛图标预览商店，获取 URL 中的 _bt 参数。
  4. 分别获取首页、产品页和集合页的 URL，并添加 _bt 参数。
  5. 使用 Google Lighthouse 对每个页面运行测试。

  6. 将结果代入公式：

    1. (_p_ × 31 + _c_ × 33 + _h_ × 13) / 77 = 主题速度评分

💡 建议运行多次测试，取中位数作为最终结果。

在 CI 中使用 Lighthouse 自动检查性能

如果你使用持续集成流程，可以借助 Shopify 的 Lighthouse CI GitHub Action，将主题上传到基准店进行性能检测，防止新提交拖慢主题速度。

在 Shopify 仪表板中查看已管理商店的性能

你可以在 Shopify 合作伙伴后台的 Store Performance 页面查看所管理商店的整体性能表现。