SHOPLINE 主题的性能最佳实践​

性能是商家在为其在线商店选择主题时的重要考虑因素。当你构建或定制主题时，应以性能为重心。优化主题性能是支持商家成功和提升其客户体验的关键。性能直接影响业务转化率、回头率和搜索引擎排名。

当主题提交到 SHOPLINE 主题商店时，该主题会在基准商店上进行测试以确定其性能分数。要进入 SHOPLINE 模版商店，模版在首页、商品详情页面和商品集合页面的平均 Lighthouse 性能得分必须至少为 60。你可以使用开发商店对你的主题运行类似的测试。

优化性能​

请考虑以下优化主题性能的最佳实践：

优化你的 JavaScript​

优化你的主题中的 JavaScript，请遵循以下原则。

减少 JavaScript 的使用​

考虑主要使用 HTML 和 CSS 构建主题。JavaScript 不应是实现主题基本功能（如查找或购买产品）的必需部分。相反，你应仅将 JavaScript 用作渐进增强，并且仅在没有 HTML 或 CSS 解决方案的情况下使用。

CSS 的解析和渲染速度比 JavaScript 快得多，因此应尽可能使用 CSS 特性来构建交互功能。你可以通过搜索关键字 “用 CSS 代替 JavaScript” 在互联网上找到更多信息。例如： Juan Martín García 的博客《使用 CSS 代替 JavaScript 可以做的 5 件事》。

压缩后的 JavaScript 包大小应尽量控制在 16KB 或更小。

避免命名空间冲突​

命名空间允许你将变量放入唯一的容器中，以防止全局范围内的变量的冲突。

为了避免全局变量冲突，请将 JavaScript 内容包裹在 function 块中。因为在 function 作用域中定义的值仅能在该作用域中使用，因此不存在与全局范围内定义的其他变量冲突的风险。

以下示例展示了如何在 function 作用域内定义 JavaScript 变量：

(function () {
  var test; function test_function() {}
})();

在这个例子中，我们使用了立即调用函数表达式（IIFE），这是一种 JavaScript 函数，一旦定义就立即执行。使用 IIFE 模式可以确保脚本定义的值的作用域被限制在 IIFE 函数作用域中，因此不会产生与全局命名空间发生冲突的风险。

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

如果需要使用 JavaScript，你应该尽可能的使用浏览器提供的原生能力及现代 DOM API，避免引入第三方框架、库或依赖项。

在代码中包含 JavaScript 库可能会导致代码包体积过大、加载时间缓慢以及客户体验不佳等问题。React、Angular、Vue 等框架以及 JQuery 等大型库都有极高的性能成本。

避免为非常旧的浏览器引入 polyfill 库（任何不支持 async / await 的浏览器）。如果你使用的是 browserslist ，那么你可以设置目标为市场份额 > 1% 的浏览器。

避免解析器阻塞脚本​

解析器阻塞脚本会阻塞 DOM 的构建和渲染，直到脚本完成加载、解析和执行完毕。这些脚本还会在网络上造成拥堵，并显著延迟页面渲染。这会影响 First Contentful Paint 和 Largest Contentful Paint 等指标。为了避免这种情况，请在脚本标签上使用 defer 或 async 属性。

<!-- 使用defer属性 -->
<script src="your-script.js" defer></script>
<!-- 使用async属性 -->
<script src="your-script.js" async></script>

• defer：脚本会在HTML解析完毕后执行，但在 DOMContentLoaded 事件触发之前执行，脚本按顺序执行。
• async：脚本会尽快加载并执行，不保证按顺序执行。

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

预加载资源允许浏览器在资源被发现之前下载资源。选择稍后加载某些资源并使用系统资源，有助于减少在客户可以有效地与页面交互之前需要下载的初始资源包的大小。

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

你可以使用哦以下方式之一在每个模板中最多添加两个资源提示：

• preload_tag helper
• stylesheet_tag 或 image_tag 过滤器上的 preload 关键字参数

当 SHOPLINE 渲染带有预加载指令的页面时，将在页面请求的 Link 响应头中携带预加载资源的提示。

你应该谨慎使用资源提示。例如，考虑仅预加载页面初始功能（例如首屏内容）所需的渲染阻塞样式表。

延迟加载非首屏图像​

仅在页面需要时才加载图片，并考虑在客户向下滚动页面之前使用占位符。这有助于提高用户感知性能，因为页面看起来比实际加载更快了。你可以使用 image_tag helper 向图像标签传递 loading: 'lazy' 属性，而不是使用库：

{{ image_tag (image_url settings.favicon) loading='lazy' }}

任何出现在首屏上的内容都不应该被延迟加载。首屏内容是用户在页面加载时、向下滚动页面之前看到的内容。这些资源应该被视为关键资源，应正常加载。

在交互时加载非关键资源​

你的页面可能包含某个组件或资源的代码，但这些组件或资源并不总是被使用。你可以使用交互式加载模式来避免加载、解析和执行不必要的代码。

使用系统字体​

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

系统字体是已经安装在用户设备上的字体。直接使用系统字体可以避免依赖外部字体文件，这消除了浏览器在渲染字体前需要等待字体文件下载的时间，使得主题性能更好。

如果你选择使用系统字体，那么用于呈现文本的字体将取决于用户的操作系统。共有三种通用系统字体类型。以下是这些类型中的字体示例：

• mono- Menlo、Consolas、Monaco、Liberation Mono 和 Lucida Console
• sans-serif- BlinkMacSystemFont、Segoe UI、Roboto、Ubuntu 和 Helvetica Neue
• serif- Iowan Old Style、Apple Garamond、Baskerville、Times New Roman、Droid Serif、Times 和 Source Serif Pro

在 SHOPLINE 服务器上托管资源​

静态资源应尽可能由 SHOPLINE 内容交付网络（CDN）接管，这样可以保证静态资源使用相同域名，避免不必要的 HTTP 连接，并允许服务器通过使用 HTTP/2 优先级来确定阻塞资源传输的优先级。

在 SHOPLINE 的环境中，你可以手动或通过 Asset REST Admin API 将资源添加到主题的 /assets 文件夹中。你可以使用 URL helper 获取指向这些资源的链接。

使用响应式图片​

在小型设备上浏览大图片的用户体验会很差，并且会减低页面的加载速度。使用响应式图片可以自动根据用户使用的设备屏幕调整图片大小。

指定图片大小可以确保你下载尽可能小的图片，而不会降低质量。页面请求指定大小的图片，减少了从 CDN 下载的文件大小，同时还能减少浏览器对图片拉伸情况的出现。

你可以在主题中使用 image_tag helper 添加响应式图片。这个 helper 会自动配置图像的 srcset 属性。

输入：

{{ image_tag (image_url product.featured_image) }}

输出：

<img
    src="https://img.myshopline.com/image/store/3400001642/1668500337237/5a2bf4bbfbdf4d59a69aad12b0cf1c7c.jpg?w=1032&amp;h=1333"
    srcset="https://img.myshopline.com/image/store/3400001642/1668500337237/5a2bf4bbfbdf4d59a69aad12b0cf1c7c_375x.jpg?w=1032&amp;h=1333 375w,
        https://img.myshopline.com/image/store/3400001642/1668500337237/5a2bf4bbfbdf4d59a69aad12b0cf1c7c_540x.jpg?w=1032&amp;h=1333 540w,
        https://img.myshopline.com/image/store/3400001642/1668500337237/5a2bf4bbfbdf4d59a69aad12b0cf1c7c_720x.jpg?w=1032&amp;h=1333 720w"
    width="1032"
    height="1333">

优化 Handlebars 代码​

几乎整个商店都是基于 Handlebars 渲染的。不同的 Handlebars 代码执行效率会有高低的差异。重复执行复杂的操作会增加你的 Handlebars 渲染时间，从而影响你的店铺性能。

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

性能测试​

SHOPLINE 官方为商家提供了性能报告，用于帮助他们了解店铺的性能。该报告使用首页、商品详情页面和商品集合页面的 Lighthouse 性能得分的加权平均值。你可以手动运行 Lighthouse 审查获取分数来查看店铺的性能得分。

运行 Lighthouse 审查以使用 SHOPLINE 数据评估商店的性能​

你可以按照以下流程模拟 SHOPLINE 用于确定在线商店速度得分的测试。SHOPLINE 主题商店在发布主题之前都会进行类似的测试。你可以对你的主题运行类似的测试，以了解其性能。

1. 创建开发店铺
2. 将测试用的产品 csv 导入到你的店铺。店铺中不应该有其它的商品集合、商品或变体。
3. 在你的开发店铺中，获取主题的预览链接。
4. 获取你要审查页面的 URL。你应该测试首页（h）、任意商品详情页（p）和任意商品集合页（c）。
5. 打开 Google Lighthouse，然后按照步骤为每个页面运行报告。获取每个页面的移动端分数。
6. 使用以下公式计算你的结果：[(p 31) + (c 33) + (h * 13)] / 77。结果即为你的主题速度得分。