查看您共享的两个 GT Metrix 存档上的瀑布选项卡,我注意到的第一个大区别在于文件rt.application.scss.css
- 在缓慢加载时,该文件waiting
大约持续 6.5 秒
Shopify 将.scss
文件解析为常规.css
文件,因此我最初的怀疑是文件设置效率低下,并且 Shopify 将结果缓存了一段时间。快速加载将是 Shopify 为您提供缓存文件,慢速加载将是 Shopify 需要重建文件,因为其内部缓存已过期。
如果您的资产文件夹中的rt.application.scss
(或rt.application.scss.liquid
)文件很大,您可能想尝试提高效率(注意:“资产”中的文件将不包括.css
结尾。如果文件有.liquid
结尾,则意味着 Shopify 需要解析流生成文件时的代码,但.liquid
不会包含在最终文件名中)。
Shopify 的解析器需要应用任何流动代码(如果文件有.liquid
结尾),然后从.scss
格式转换为常规.css
代码。如果您习惯使用这两种语法中的一种或两种,您可以尝试缩减文件以查看是否有帮助。
您还可以查看呈现的 css 文件的解析内容(https://cdn.shopify.com/s/files/1/0076/6931/7690/t/10/assets/rt.application.scss.css? 8094593948347511375)并将该文件的内容保存到单独的 CSS 文件中,然后使用该文件而不是动态文件。如果这确实是罪魁祸首,您应该会看到您的页面测试时间变得更加一致。
更一般地说,在查看 GT Metrix 结果时,您可以使用瀑布视图来查找与其他文件相比似乎过长的任何加载条。等待时间长的文件(紫色编码)表明 Shopify 是延迟的来源,可能是因为文件相当服务器密集。接收时间长意味着文件本身非常大,可能会被压缩或缩小。
希望这可以帮助!