每个Shopify主题的页面速度得分

由于大流行导致如此之多的当地企业被迫关闭，我很高兴看到Shopify的教程来帮助零售商建立“在线购买，皮卡路边”商店。

Shopify教程的第四步提出了一个免费的定制主题，称为Debut。

Shopify的“在线购买，取货路边”教程建议使用首次亮相主题。

本教程是一个有用的解释。 但是，它缺少有关为搜索引擎优化新网站或加快用户体验的说明。

在这篇文章中，我将分享我对Shopify主题的页面速度进行的研究。

Shopify主题

我最近与一个开发人员合作开发了一个项目，以帮助商人加快其Shopify商店的速度。 Google的PageSpeed Insights工具将移动页面速度从23提高到84。 桌面速度从77提高到94。我们在不同页面类型上实现了类似的改进。

但是最大的收获是Shopify主题如何影响页面速度。 商家自定义了精美且功能丰富的高级主题ShowTime。 不幸的是，它也很慢。 通过优化主题文件，开发人员大大提高了速度。

因此，在从事该项目并观察了首次亮相的主题之后，我有了一个主意。 如果我在Shopify商店中的所有主题上都运行了Google Lighthouse（包括PageSpeed Insights得分）怎么办？ 它可以帮助新商人找到一家快速商店，并避免以后优化慢主题的成本。

主题的页面速度

Shopify列出了72个主题。 可以手动检查每个速度。 但是，自动化该过程会更加有趣，因为我可以收集尽可能多的指标，并在主题更新时重复进行分析。

该研究的总结结果如下。 页面速度得分来自Google Lighthouse。 请注意，ShowTime是我们客户选择的主题，是移动性能中最慢的主题之一。 但是Shopify教程推荐的主题Debut接近顶部。 您可以按任何列对表进行排序。

为了在速度和功能之间取得折衷，请考虑使用更精细的速度指标。 为了提供帮助，我在Google表格中收集了六个这样的指标（在PageSpeed Insights上称为“实验室数据”）。 这些指标如下。

• First Contentful Paint会测量多长时间才能看到页面上的任何内容。 一个好的值是小于1秒。

• “第一个有意义的画图”测量页面的主要内容何时可见。 此指标的理想值是2秒以内。

• 速度索引用于衡量页面内容的可见填充速度。 低于4.3秒是好的。

• “第一CPU空闲”度量页面容纳输入所花费的时间。 一个好的值是在4.7秒以下。

• 互动时间用于衡量用户等待页面完全互动的时间。 该页面可能是完全可见的，但仍不准备接受用户的输入。 此指标的快速值小于5.2秒。

• 最大潜在输入延迟是衡量浏览器响应用户执行的典型任务（例如单击按钮）需要多长时间的最坏情况。 此指标的快速值小于130毫秒。

查看详细指标会产生细微差别。 例如，Avenue主题在移动页面速度上排名第47，但是“最大潜在输入延迟”为2,278毫秒（2.2秒）。

要在速度和功能之间取得折衷，请考虑PageSpeed Insights中的精细“实验室数据”速度指标。 点击图片放大。

流程

我从Shopify主题商店手动生成了主题列表（包括其演示站点URL）。

接下来，我编写了一个Python脚本，该脚本读取URL列表并针对每个URL六次运行PageSpeed Insights API：三次获取详细的移动指标，三次用于桌面。 重复测试对于解决网络条件的变化至关重要。 我在Google表格中报告了中位数结果。

PageSpeed Insights API返回的JSON输出是一个复杂的嵌套结构。 我使用JSONPath简化了提取过程。

我还发现JSONPath评估器非常有用。 我使用了方便的jsonpath-ng Python库来运行JSONPaths。

以下是我用来提取每个指标的JSONPath。

 jsonpath_first_contentful_paint = parse（“ $。lighthouseResult.audits.first-contentful-paint”）

 jsonpath_first_有意义的油漆= parse（“ $。lighthouseResult.audits.first-有意义的油漆”）= 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”）