[!info] related notes

• 前置笔记: Shopify 主题
• 相关 MOC: Shopify MOC

Shopify 商店性能优化

目标

通过性能优化：

• 提升页面加载速度
• 改善用户体验
• 提高转化率（页面速度提升 1 秒 = 转化率提升 7%）

优化策略

1. 图片优化（最重要）

问题：图片通常占页面体积的 60-80%

解决方案：

<!-- 使用 Shopify 图片 CDN -->
{{ product.featured_image | image_url: width: 800 | image_tag }}

<!-- 响应式图片 -->
{{ product.featured_image | image_url: width: 1200 | image_tag: 
  widths: '400, 600, 800, 1200',
  sizes: '(max-width: 600px) 400px, 800px'
}}

<!-- 懒加载 -->
{{ product.featured_image | image_url: width: 800 | image_tag: loading: 'lazy' }}

2. 减少应用数量

每个应用平均减慢 0.5 秒

检查清单：

• 删除未使用的应用
• 寻找多功能应用替代多个单一功能应用
• 限制在 10 个应用以内

3. 优化 JavaScript

<!-- 延迟加载 JS -->
<script src="theme.js" defer></script>

<!-- 异步加载第三方脚本 -->
<script src="analytics.js" async></script>

4. 减少字体加载

/* 只加载需要的字体粗细 */
@font-face {
  font-family: 'My Font';
  src: url('font.woff2');
  font-weight: 400;  /* 只加载 regular */
  font-display: swap;  /* 避免 FOIT */
}

5. 使用 Shopify 2.0 主题

Shopify 2.0 主题性能更好：

• 更少的 JavaScript
• 更好的资源加载
• 原生懒加载

性能测试

使用 Shopify 在线商店速度报告

Admin → 在线商店 → 主题 → 速度分数

使用 Lighthouse

npx lighthouse https://your-store.myshopify.com

关键指标

• LCP（最大内容绘制）：< 2.5 秒
• FID（首次输入延迟）：< 100 毫秒
• CLS（累积布局偏移）：< 0.1

验证

优化前后对比：

• 页面速度分数提升
• 加载时间减少
• 跳出率降低

Related notes

• Shopify MOC
• Shopify 主题