Shopify 使用什么来最小化 JavaScript 和 CSS?



我的测试站点加载时间很长,测试表明我可以通过缩小JS和CSS资产来降低性能。

Shopify 使用什么来最小化 JavaScript 和 CSS? 谢谢

Shopify没有自动缩小Javascript的能力(你需要自己做(,但它确实有能力通过给它一个"scss"后缀来自动缩小你的CSS,然后将其包含在你的网站中,后缀.scss.css

因此,如果您的 CSS 文件当前被命名为theme.css.liquid并包含在您的网站中,并带有{{ 'theme.css' | asset_url | stylesheet_tag }}

  • 将CSS文件的名称更改为以.scss结尾(或.scss.liquid,如果相关文件以.css.liquid结尾( - 因此在这种情况下,文件将变为theme.scss.liquid

  • 将对文件的引用更改为以.scss.css结尾 - 因此在这种情况下,包含将变为{{ 'theme.scss.css' | asset_url | stylesheet_tag }}(请注意,此处不包括.liquid后缀(如果有(

结果将是一个缩小的 CSS 文件,该文件由未缩小的源代码构建。

然而,正如约翰·贝尔(John Bell(在对您的主要帖子的评论中提到的,仅靠缩小可能无法解决根本问题。 如果您查看速度测试的瀑布结果,请查找具有较长的"等待"或"TTFB"时间的文件 - 这些文件需要很长时间才能编译 Shopify,并指示您的 Liquid 代码是需要优化的。 还要查找"下载"时间较长的文件,并查看这些文件是否可以压缩或仅延迟,以便它们仅在初始页面完成后加载。

最新更新