Shopify 模版性能优化最佳实践

    28. August, 2024 — stylit tech team

    性能是商家选择在线商店模版时的重要因素。当你构建或自定义模版时，应以性能为核心进行设计。优化模版性能是支持商家成功和提升客户体验的关键因素，性能直接影响转换率、回头客和搜索引擎排名。

    在提交到 Shopify 主题商店时，模版将在基准商店上进行测试，以确定其性能评分。要进入 Shopify 主题商店，模版在主页、产品页和集合页上的 Lighthouse 性能得分平均值必须达到 60 分以上。你可以在开发商店上运行类似的测试，以评估你的模版性能。

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

    注意： Shopify 构建的 Dawn 主题就是以性能为核心设计的，你可以查看 Dawn 的代码库，了解 Shopify 如何应用这些原则。

    优化性能的最佳实践

    优化 JavaScript

    优化模版中的 JavaScript 时，遵循以下原则：

    减少 JavaScript 的使用

    考虑主要使用 HTML 和 CSS 构建你的模版。JavaScript 不应该是模版基本功能（例如查找或购买产品）的必要条件。相反，只应在没有 HTML 或 CSS 解决方案时，才使用 JavaScript 作为渐进增强。

    CSS 的解析和渲染速度远快于 JavaScript，因此在可能的情况下，应使用 CSS 特性来构建交互。有关更多信息，你可以在网络上搜索“使用 CSS 代替 JavaScript”。例如，Juan Martín García 的博客文章“5 things you can do with CSS instead of JavaScript”。

    建议 JavaScript 压缩包的大小应控制在 16 KB 以下。Shopify 在 storefront 请求时会自动压缩 JavaScript。

    避免命名空间冲突

    命名空间允许你将变量放入独特的容器中，以防止在全局作用域中发生冲突。然而，JavaScript 压缩工具会将变量重命名为较短的名称，这可能导致冲突。

    为避免全局作用域中的命名空间冲突，将 JavaScript 值包裹在函数作用域中。函数作用域内定义的值仅在该函数作用域内可用，因此不会与全局作用域中的其他变量发生冲突。

    例如，立即调用函数表达式（IIFE）模式是一种在定义后立即运行的 JavaScript 函数。IIFE 模式确保脚本定义的值限于该函数的作用域，避免在全局命名空间中发生冲突。

    注意： 在主题中注入的脚本应始终包裹在 IIFE 中，以防止全局命名空间冲突。

    减少对外部框架和库的依赖

    如果需要使用 JavaScript，尽量避免引入第三方框架、库和依赖项。相反，尽可能使用原生浏览器功能和现代 DOM API。在包中包含 JavaScript 库会导致包大小过大，加载时间过长，客户体验不佳。像 React、Angular 和 Vue 等框架以及像 jQuery 这样的大型工具库，都会对性能造成显著影响。避免为非常旧的浏览器（例如不支持 async/await 的浏览器）引入 Polyfill 库。如果使用 browserslist，可以针对市场份额大于 1% 的浏览器进行优化。

    避免阻塞解析的脚本

    阻塞解析的脚本会阻止 DOM 的构建和渲染，直到脚本加载、解析和执行完成。这些脚本还会在网络上造成拥塞，显著延迟页面渲染，影响诸如“首次内容绘制”（First Contentful Paint）和“最大内容绘制”（Largest Contentful Paint）等指标。使用 defer 或 async 属性在 script 标签中避免这种情况。

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

    预加载资源可以让浏览器在发现资源之前先行下载。选择在稍后加载某些资源并利用系统资源，有助于减少在客户可以实际与页面互动之前需要下载的初始资源包的大小。

    使用资源提示预加载关键资源

    你可以通过以下方式在每个模板中添加多达两个资源提示：

    • 使用 preload_tag 过滤器
    • 使用 stylesheet_tag 或 image_tag 过滤器中的 preload 关键字参数

    Shopify 在渲染带有预加载指令的页面时，会在后续请求中作为 Link 头部发送预加载资源提示。

    注意： 应谨慎使用资源提示。例如，仅预加载页面初始功能所需的阻塞样式表，如“折叠上方”内容（above-the-fold content）。

    延迟加载“折叠下方”图像

    仅在页面需要时加载图像，并考虑在客户滚动页面之前使用占位符。这也有助于提升感知性能，使页面看起来比实际加载更快。与其使用库，你应该通过 image_tag 过滤器将 loading: 'lazy' 属性传递给图像标签。

    位于页面“折叠上方”的内容不应进行延迟加载。折叠上方内容是指页面加载时用户在滚动之前看到的内容。折叠上方的资源应被视为关键资产，并应正常加载。

    提示： 有关使用响应式图像的更复杂示例，请参考“使用响应式图像”。

    根据用户互动加载非关键资源

    你的页面可能包含一些并非每次都使用的组件或资源。可以通过用户互动加载这些资源，避免加载、解析和执行不必要的代码。

    考虑使用系统字体

    使用系统字体可以避免客户在商店文本渲染之前需要下载其他资源。

    在 Shopify 服务器上托管资源

    尽可能多地从 Shopify 内容分发网络（CDN）提供资源。使用相同的主机托管资源可以避免不必要的 HTTP 连接，并允许服务器通过 HTTP/2 优先级传递阻塞资源。

    在 Shopify 环境中，你可以通过手动使用 GitHub 集成或使用 Asset REST Admin API 资源将资产添加到主题的 /assets 文件夹中。你可以使用 URL 过滤器创建这些资产的链接。了解更多关于 Shopify CDN 的信息。

    使用响应式图像

    在小设备上查看大图像可能令人沮丧，并且会降低页面加载速度。使用响应式图像会自动调整图像大小，以适应客户使用的设备屏幕。

    指定图像大小可确保你下载最小可能的图像，而不会降低质量。storefront 会请求要显示的图像大小，然后从 CDN 下载文件大小较小的图像。这减少了对浏览器端缩放的依赖。

    你可以使用 image_tag 过滤器将响应式图像添加到主题中。该过滤器会为图像返回一个智能默认集宽度的 srcset。你可以使用 sizes 关键字参数调整过滤器返回的 srcset 大小。

    优化 Liquid 代码

    你可以编辑用于渲染商店的几乎所有 Liquid 代码。编写 Liquid 代码有高效和低效的方式。反复执行复杂操作会增加 Liquid 渲染时间，从而影响整体商店速度。

    例如，如果你想按价格对集合中的产品进行排序，应在循环遍历产品之前进行排序，而不是在循环代码中排序。因为每个产品的排序顺序不会改变，而在请求中计算产品顺序会增加处理时间。

    运行 Shopify Theme Inspector for Chrome 可以识别在线商店中减慢页面速度的代码行。阅读 Shopify 工程博客上的指南，了解如何分析 Liquid 代码。

    使用 Theme Check 识别性能问题

    你可以使用 Theme Check 识别主题代码中的潜在性能问题，包括大型 CSS 和 JS 包、远程资源引用和阻塞解析的 JavaScript。了解更多关于 Theme Check 的信息。

    性能测试

    Shopify 提供了 Web 性能仪表板和报告，帮助你了解商店的性能。这一工具帮助你了解商店在加载速度、交互性和视觉稳定性（即核心网络生命力）方面的表现。Web 性能仪表板和报告是使用实际用户监控（RUM）数据计算的，旨在为你提供可靠的性能信号，并提供可操作的改进建议。

    注意： 以下查询目前仅在不稳定版的 GraphQL Admin API 中可用。

    你还可以访问 PerformanceMetrics 和 PerformanceEvents 以获取网络性能指标数据和 Shopify 事件数据。

    提示： 了解更多关于网络性能和核心网络生命力的信息。

    由于需要实际用户数据，你可能仍会选择在流量低或没有流量的商店中使用 Lighthouse 性能评分。你可以手动运行 Lighthouse 审核，也可以通过持续集成（CI）工具来执行，或查看你管理的商店的速度评分。

    使用 Shopify 数据运行 Lighthouse 审核

    以下步骤可以帮助你模拟 Shopify 用于确定在线商店速度评分的测试过程。Shopify 在主题提交到 Shopify 主题商店之前会运行类似的测试。你可以对你的主题运行类似的测试，以了解它的性能表现。

    1. 创建一个开发商店。

    2. 将测试产品 CSV 导入商店。商店中不应包含其他集合、产品或变体。

    3. 在开发商店中，点击在线商店旁边的眼睛图标预览商店。

    4. 从预览 URL 中复制 _bt 参数的值。

      • 如果你的预览 URL 没有 _bt 参数，那么你的开发商店可能是在 2020 年 8 月之前创建的。请参考“2020 年 8 月之前创建的开发商店”以了解如何找到这些商店的预览 URL。

    5. 获取你想要审核的页面的 URL。你应该测试主页（h）、任意产品页（p）和任意集合页（c）。

    6. 将你的主题的 _bt 值添加到每个 URL 的末尾。

      • 例如，URL https://{shop}.myshopify.com/products/sunglasses 变为 https://{shop}.myshopify.com/products/sunglasses?_bt=value-you-copied。

    7. 访问 Google Lighthouse，按照步骤为每个页面运行报告。记录每个页面的移动设备评分。

    8. 将结果应用到以下公式中：[(p * 31) + (c * 33) + (h * 13)] / 77。结果即为你主题的速度评分。

    2020 年 8 月之前创建的开发商店

    如果你的开发商店是在 2020 年 8 月之前创建的，请按照以下步骤获取测试的预览链接：

    1. 在开发商店的主题页面上，选择你要测试的主题。

    2. 点击操作 > 预览。将打开该主题的预览。

    3. 在页面右下角的预览栏中，点击共享预览。将打开一个包含预览 URL 的模态窗口。

    4. 在模态窗口中，点击复制链接。

    5. 对于你想要测试的每个页面，将基础 URL 替换为预览 URL。

      • 例如，要测试太阳镜产品，你可能需要将 URL 从 https://{shop}.myshopify.com/products/sunglasses 更改为 https://12345678.shopifypreview.com/products/sunglasses。

    提示： 你可以多次重复此过程，并使用评分的中位数来获得更准确的结果。

    使用 Lighthouse CI 及早捕获性能问题

    如果你在主题开发过程中使用持续集成（CI）流程，你可以添加 CI 检查，确保主题代码的更改不会对性能评分产生重大负面影响。你可以使用 Shopify 开发的 GitHub 动作 Shopify Lighthouse CI，该动作会将你的主题代码上传到基准商店，然后测量和计算你的速度评分。

    审查管理商店的性能

    你可以在 Shopify 仪表板中的商店性能页面上查看你管理的商店的性能。你可以通过登录合作伙伴仪表板，导航到商店页面，然后点击查看商店性能来访问此页面。了解更多关于商店性能页面的信息。

    相关文章