跳到主要内容

性能

性能是商家选择在线商店 theme 时的重要考量因素。在构建或自定义 theme 时，您应始终将性能放在首位。优化 theme 性能是您所支持的商家成功与否以及其客户体验质量的关键。

性能优化​

在优化 theme 性能时，请参考以下最佳实践。

优化 JavaScript​

遵循以下原则优化 theme 中的 JavaScript。

减少 JavaScript 用量​

建议优先使用 HTML 和 CSS 构建 theme。theme 的基本功能（例如内容查找）不应依赖 JavaScript。您应仅将 JavaScript 作为渐进增强手段，且仅在没有可用的 HTML 或 CSS 方案时才使用。

CSS 的解析和渲染速度远快于 JavaScript，因此在构建交互功能时，应尽可能使用 CSS 特性。您可以在互联网上搜索"using CSS instead of JavaScript"获取更多相关信息。例如 Juan Martín García 撰写的博客文章 5 things you can do with CSS instead of JavaScript。

您的 JavaScript 压缩包大小应控制在 16 KB 以内。

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

如果必须使用 JavaScript，请尽量避免引入第三方框架、库和依赖项。应尽可能使用浏览器原生特性和现代 DOM API。在项目中引入 JavaScript 库会导致包体积过大、加载缓慢，进而损害客户体验。React、Angular、Vue 等框架以及 jQuery 等大型工具库都会带来显著的性能开销。请避免为过旧的浏览器（即不支持 async/await 的浏览器）引入 polyfill 库。

避免阻塞解析器的脚本​

阻塞解析器的脚本会阻碍 DOM 的构建和渲染，直到脚本加载、解析并执行完毕。它们还会造成网络拥堵，严重延迟页面渲染，影响 First Contentful Paint 和 Largest Contentful Paint 等指标。请在 script tags 上使用 defer 或 async 属性来避免此问题。

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

预加载资源使浏览器能够在发现资源之前提前下载。选择延迟加载部分资源并合理利用系统资源，有助于减少客户与页面进行有效交互前需要下载的初始资源包大小。

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

您可以在每个 template 的代码中最多添加两个资源提示，方法如下：

当 Shoplazza 渲染包含预加载指令的页面时，将在后续请求中以 Link 响应头的形式发送预加载资源提示。

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

优化 Liquid 代码​

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