type
status
date
slug
summary
tags
category
icon
password
一、优化性能
1.1 优化 JavaScript
减少 JavaScript 使用
尽量用 HTML 和 CSS 实现页面功能，避免不必要的 JavaScript。例如，使用 CSS 实现简单的过渡效果：
减少对外部框架和库的依赖
如果需要使用 JavaScript，尽量避免引入大型库。可以使用原生 JavaScript 替代 jQuery：
避免解析器阻塞脚本
使用
defer 或 async 属性来加载脚本，避免阻塞 DOM 渲染：1.2 预加载关键资源，推迟或避免加载其他资源
使用资源提示预加载关键资源
在
<head> 中添加 preload 资源提示：延迟加载首屏图像
使用
loading="lazy" 属性延迟加载非首屏图像：1.3 在交互时加载非关键资源
使用交互模式导入非关键资源，例如在用户点击按钮时加载模块：
1.4 考虑使用系统字体
使用系统字体可以减少加载时间，示例 CSS：
二、在 Shopify 服务器上托管资产
通过 Shopify CDN 托管资产，确保使用正确的 Liquid 过滤器：
三、使用响应式图像
使用
image_tag 过滤器生成响应式图像，确保图像根据设备大小调整：四、优化 Liquid 代码
优化 Liquid 代码，减少复杂操作的重复执行。示例：在循环外部进行排序：
4.1 使用缓存
使用 Liquid 缓存来提高性能，减少重复计算：
4.2 使用 Shopify 主题检查器
使用 Shopify 主题检查器识别性能瓶颈，定期检查 Liquid 代码的执行效率。
- 作者:HRope
- 链接:https://hrope.cn/article/best-practices
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。