疫情期间，Shopify 教程帮助零售商设置“线上下单，路边取货”模式，值得肯定。该教程第四步建议使用免费自定义主题 Debut。
Shopify “在线购买，路边取货”教程推荐使用 Debut 主题
尽管教程解释详尽，但缺乏针对搜索引擎优化（SEO）及提升用户体验的说明。本文将分享关于 Shopify 主题页面速度的研究成果，助力新商家规避后期优化成本。
Shopify 主题速度实测
近期协助某商家优化 Shopify 商店速度时，通过 Google PageSpeed Insights 工具，将移动端得分从 23 分提升至 84 分，桌面端从 77 分提升至 94 分。该项目使用的 ShowTime 高级主题虽功能丰富、美观，但运行缓慢；经代码优化后速度显著改善。
受此启发，我对 Shopify 商店中所有主题进行了 Google Lighthouse 测试（含 PageSpeed Insights 评分）。结果显示，客户选用的 ShowTime 主题移动端性能垫底，而教程推荐的 Debut 主题则名列前茅。完整数据如下表所示：
| 主题 | 页面速度得分： 移动端 |
页面速度得分： 桌面端 |
|---|---|---|
| 简单 | 0.92 | 0.99 |
| 社论 | 0.89 | 0.99 |
| 无边界 | 0.88 | 0.97 |
| 首秀 | 0.88 | 0.99 |
| 供应 | 0.86 | 0.99 |
| 风险投资 | 0.85 | 0.99 |
| 区域 | 0.83 | 0.94 |
| 展示 | 0.82 | 0.98 |
| 资本 | 0.81 | 0.98 |
| 本地 | 0.8 | 0.98 |
| 叙事 | 0.8 | 1 |
| 简化 | 0.79 | 0.99 |
| 标签 | 0.79 | 0.99 |
| 王国 | 0.78 | 0.98 |
| 极简主义 | 0.78 | 0.99 |
| 提升 | 0.77 | 0.98 |
| 时尚帝国主义 | 0.74 | 0.97 |
| 模块化 | 0.73 | 0.98 |
| 网格 | 0.72 | 0.97 |
| 布鲁克林 | 0.72 | 0.98 |
| 表达 | 0.7 | 0.97 |
| 日出 | 0.7 | 0.99 |
| 瀑布 | 0.69 | 1 |
| 冲动 | 0.68 | 0.92 |
| 拆分 | 0.68 | 0.92 |
| 帝国 | 0.68 | 0.99 |
| 大西洋 | 0.68 | 0.99 |
| 对称性 | 0.67 | 0.98 |
| 声望 | 0.66 | 0.96 |
| 艾拉 | 0.66 | 0.96 |
| 镜 | 0.66 | 0.97 |
| Vantage | 0.64 | 0.9 |
| 故事 | 0.64 | 0.98 |
| 版本 | 0.63 | 0.97 |
| Focal | 0.62 | 0.94 |
| Alchemy | 0.62 | 0.94 |
| Artisan | 0.61 | 0.97 |
| 商标 | 0.6 | 0.95 |
| 砌体 | 0.57 | 0.88 |
| Testament | 0.55 | 0.94 |
| 管道 | 0.54 | 0.93 |
| 流量 | 0.53 | 0.66 |
| 颜色 | 0.53 | 0.95 |
| Mobilia | 0.53 | 0.96 |
| Canopy | 0.5 | 0.97 |
| 响应式 | 0.49 | 0.93 |
| 大道 | 0.48 | 0.77 |
| 启动 | 0.48 | 0.81 |
| 制造者 | 0.48 | 0.87 |
| 时尚 | 0.47 | 0.88 |
| 启动 | 0.43 | 0.86 |
| 普罗维登斯 | 0.41 | 0.75 |
| 仓库 | 0.41 | 0.88 |
| 方便 | 0.4 | 0.85 |
| 加利福尼亚 | 0.4 | 0.95 |
| 帕克先生 | 0.4 | 0.95 |
| 上下文 | 0.37 | 0.79 |
| Blockshop | 0.37 | 0.81 |
| 图标 | 0.36 | 0.93 |
| 广播 | 0.34 | 0.77 |
| 太平洋 | 0.34 | 0.81 |
| 触达 | 0.33 | 0.81 |
| 场地 | 0.33 | 0.81 |
| 动态 | 0.32 | 0.8 |
| 嫉妒 | 0.31 | 0.81 |
| 视差 | 0.31 | 0.82 |
| Lorenza | 0.3 | 0.67 |
| Galleria | 0.3 | 0.78 |
| Palo Alto | 0.29 | 0.77 |
| ShowTime | 0.25 | 0.83 |
| Loft | 0.23 | 0.86 |
| Retina | 0.08 | 0.58 |
为平衡速度与功能，建议参考 PageSpeed Insights 中的六项核心“实验室数据”指标：
- 首次内容绘制 (FCP)：衡量页面出现任何内容的时间，优秀值应 <1秒。
- 首次有意义绘制 (FMP)：衡量主要内容可见时间，优秀值应 ≤2秒。
- 速度指数 (SI)：衡量页面内容填充速度，优秀值应 <4.3秒。
- 首次 CPU 空闲 (FCI)：衡量页面适应输入的时间，优秀值应 ≤4.7秒。
- 可交互时间 (TTI)：衡量页面完全可交互所需时间，优秀值应 ≤5.2秒。
- 最大潜在输入延迟 (Max Potential FID)：衡量浏览器响应用户操作的最坏情况耗时，优秀值应 ≤130毫秒。
细分指标能揭示更多细节。例如，Avenue 主题移动端总分排名第 47，但其最大潜在输入延迟高达 2,278 毫秒（2.2秒），体验较差。
PageSpeed Insights 中的细致“实验室数据”有助于平衡速度与功能（点击图片放大）
测试流程与方法
首先从 Shopify 主题商店手动整理主题列表及演示站点 URL。随后编写 Python 脚本，调用 PageSpeed Insights API 对每个 URL 执行 6 次测试（移动端与桌面端各 3 次），以消除网络波动影响，最终取中位数结果录入 Google Sheets。
由于 API 返回的 JSON 结构复杂，使用 jsonpath-ng 库配合 JSONPath 语法进行高效解析。关键指标提取路径如下：
jsonpath_first_contentful_paint = parse("$.lighthouseResult.audits.first-contentful-paint")
jsonpath_first_meaningful_paint = parse("$.lighthouseResult.audits.first-meaningful-paint")
jsonpath_speed_index = parse("$.lighthouseResult.audits.speed-index")
jsonpath_first_cpu_idle = parse("$.lighthouseResult.audits.first-cpu-idle")
jsonpath_interactive = parse("$.lighthouseResult.audits.interactive")
jsonpath_max_potential_fid = parse("$.lighthouseResult.audits.max-potential-fid")
jsonpath_score = parse("$.lighthouseResult.categories.performance.score")