关于 Shopify 与电商的报道与研究
Shopify 的两款官方免费主题,在各自的官方演示站上并排审计:每款三次移动端 Lighthouse 跑分。Horizon 的引擎更干净,但 LCP 是前者的两倍。
每一位 Shopify 店主最先接触的都是这两款主题:Dawn,多年来作为平台参考主题的开源主力;以及 Horizon,Shopify 现在推给新商家的较新官方主题家族。围绕这两者的搜索热度不断上升,而 Google 结果页最顶端是一堆交换主观印象的 Reddit 帖子。所以,这里不谈印象,只给实测数据。
| 指标(3 次运行的中位数) | Dawn | Horizon | 更优 |
|---|---|---|---|
| LCP | 6.17s | 12.32s | Dawn,2× |
| Total Blocking Time | 57ms | 29ms | Horizon,2× |
| CLS | 0.000 | 0.000 | 平局 |
| First Contentful Paint | 2.80s | 3.57s | Dawn |
| Speed Index | 5.51s | 7.01s | Dawn |
| Lighthouse 性能得分 | 69 | 62 | Dawn |
最抢眼的结论——Dawn 绘制最大元素的速度快一倍——反而掩盖了更有意思的发现。
Horizon 的引擎是两者中更轻量的那个。 29ms 的 Total Blocking Time 是一个非常优秀的数字;它意味着几乎没有 JavaScript 挡在购物者和可交互页面之间。Dawn 的 57ms 也不错,但 Horizon 的运行时做的工作更少。主题的代码不是问题所在。
问题在 Horizon 的展示内容。 Shopify 为 Horizon 演示站套上了这款主题想要卖点的满屏、重媒体风格,而正是这些媒体素材在受限的移动网络下需要 12.3 秒才能绘制完成。这件事的影响超出演示站本身:一款主题自带的区块和默认设置,往往就是大多数商家最终保留下来的东西。如果你安装了 Horizon 并保留首屏视频和超大图片,你就继承了那个 LCP。如果你换成克制、尺寸合理的媒体素材,你得到的是 Horizon 干净的引擎,而没有演示站的体积负担。
Dawn 保持乏味,然后赢了。 Dawn 的演示站很朴素,图片更小、没有视频,而它把这份克制转化成了 6.17s 的 LCP 和更高的总分。这就是 Dawn 的全部理念,在它的源码里一目了然:极少的 JavaScript、优先使用系统资源、不与网络对抗的默认设置。
按你实际会怎么使用媒体素材来选。想做满屏视频叙事的商家,无论用哪款主题都会变慢,但在 Horizon 上起点是更轻量的运行时。想要一个尽可能快的合理免费店面、并且会把图片保持朴素的商家,用 Dawn 能更快达成目标。
而如果开箱即用的速度是决定性因素,请注意:两款免费主题都没有在我们的完整测试中领先——我们测到最快的演示站是 Ultra,LCP 为 1.91s,它是 UTD 在官方商店上架的六款主题之一,其中三款占据了15 款主题排名的前三位。免费是正确的默认选择;它只是不代表速度的天花板。
Horizon 是 Shopify 最新的官方主题家族,并作为新店铺的默认选项之一发布,而 Dawn 仍可在 Theme Store 中获取,也仍作为开源参考托管在 GitHub 上。商家论坛对接替关系争论不休,但两者目前都在维护,且都是免费的。
在各自的官方演示店、相同的移动端 Lighthouse 条件下,Dawn 的 LCP 中位数为 6.17 秒,Horizon 为 12.32 秒。但 Horizon 的 Total Blocking Time 更低(29ms 对 57ms),所以它绘制更慢是演示站媒体体积所致,而非引擎负担。
是的。两者都是 Shopify 官方主题,无需付费,这也是为什么它们是任何付费主题购买决策的默认对比基准。