type
status
date
slug
summary
tags
category
icon
password
一、优化性能
1.1 优化JavaScript
减少JavaScript使用
考虑主要使用 HTML 和 CSS 构建您的主题。主题的基本功能（例如查找或购买产品）不应需要 JavaScript。相反，您应该只使用 JavaScript 作为渐进增强功能，并且仅在没有可用的 HTML 或 CSS 解决方案的情况下使用。
减少对外部框架和库的依赖
如果需要使用 JavaScript，请考虑避免引入第三方框架、库和依赖项。相反，应尽可能使用本机浏览器功能和现代 DOM API。在包中包含 JavaScript 库可能会导致包大小过大、加载时间缓慢以及客户体验不佳。 React、Angular 和 Vue 等框架以及 jQuery 等大型实用程序库具有显着的性能成本。避免为非常旧的浏览器引入polyfill库（任何不支持
async / await 的浏览器）。如果您使用浏览器列表，那么您可以定位市场份额 > 1% 的浏览器。避免解析器阻塞脚本
解析器阻塞脚本会阻塞 DOM 的构造和渲染，直到脚本被加载、解析和执行。它们还会造成网络拥塞并显着延迟页面渲染。这会影响“首次内容绘制”和“最大内容绘制”等指标。在脚本标记上使用
defer 或 async 属性可以避免这种情况。1.2 预加载关键资源，推迟或避免加载其他资源
预加载资源允许浏览器在发现资源之前下载资源。选择稍后加载一些资源并使用系统资源可帮助您减少在客户与页面进行有意义的交互之前需要下载的初始资源包的大小。
使用资源提示预加载关键资源
您可以使用以下方法之一向每个模板的代码中添加最多两个资源提示：
preload_tag 过滤器， https://shopify.dev/docs/api/liquid/filters/preload_tagstylesheet_tag 或 image_tag 过滤器上的 preload 关键字参数，
延迟加载首屏图像
仅在页面需要时加载图像，并考虑使用占位符，直到客户向下滚动页面。这也有助于提高感知性能，因为页面看起来加载速度比实际速度快。您应该使用
image_tag 过滤器将 loading: 'lazy' 属性传递给图像标记，而不是使用库：任何出现在首屏上方的内容都不应该被延迟加载。首屏内容是查看者在向下滚动页面之前在页面加载时看到的内容。首屏资源应被视为关键资产，并应正常加载。
在交互时加载非关键资源
您的页面可能包含并不总是使用的组件或资源的代码。您可以使用交互模式导入来加载这些资源，以避免加载、解析和执行不必要的代码。
原理参考：
考虑使用系统字体
使用系统字体可以避免客户端在呈现在线商店的文本之前需要下载其他资源。
二、在 Shopify 服务器上托管资产
通过 Shopify 内容交付网络 (CDN) 尽可能多地交付。为您的资产使用同一主机可以避免不必要的 HTTP 连接，并允许服务器使用 HTTP/2 优先级来确定阻塞资源传送的优先级。
改为：
三、使用响应式图像
在小型设备上查看大图像可能会令人沮丧，并且会降低页面加载速度。使用响应式图像会自动调整图像大小以适合客户正在使用的设备屏幕。
指定图像大小可确保您下载尽可能小的图像，而不会降低质量。店面请求要显示的图像大小，然后减少从 CDN 下载的文件大小。这减少了对浏览器端缩放的依赖。
您可以使用
image_tag 过滤器将响应式图像添加到主题中。此过滤器使用智能默认宽度集返回图像的 srcset。您可以使用 sizes 关键字参数调整过滤器返回的 srcset 大小。最后渲染输出：
四、优化 Liquid 代码
您可以编辑几乎所有用于渲染商店的 Liquid。编写 Liquid 代码有高效和低效的方法。重复执行复杂的操作会增加您的 Liquid 渲染时间，从而影响您的整体存储速度。
例如，如果您想按价格对集合中的产品进行排序，则应在循环访问集合中的产品之前执行此操作，而不是作为循环代码的一部分。这是因为每个产品的产品顺序不会改变，并且计算产品顺序会增加请求的处理时间。
运行适用于 Chrome 的 Shopify 主题检查器来识别导致在线商店页面速度减慢的代码行。在 Shopify 工程博客上阅读使用此工具分析 Liquid 的演练。
- 作者:HRope
- 链接:https://hrope.cn/article/best-practices
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。