优化主题代码，提升渲染速率

为了提升全站的渲染效率和质量，店匠进行了大范围的店铺耗时排查，发现部分商户网站的渲染速率较慢，影响了整体性能和用户体验。针对这一问题，我们已针对共性问题进行了一些优化，提升了整体渲染速度。

然而，根本问题依然在于代码质量的提升以及减少不必要的资源加载。为此，我们列出了一些优化实例，希望能帮助您提升站点的整体性能。

影响要素

主题渲染的影响因素主要包括三个方面：代码大小、资源内容和服务端渲染能力。

服务端渲染通常较为稳定，且由店匠专业技术团队全程保障。如果在使用过程中发现问题，请随时联系我们的技术支持，我们将提供及时的帮助。

而在资源利用和代码优化方面，核心需要店匠和商户侧双方紧密合作，才能达到最佳效果。

因此本文列出了一些常见问题及优化建议，希望能为您提供有价值的参考，帮助提升站点的性能。

减少循环资源使用

以For Loop 为例，当您需要在专辑内找到对应的商品时，使用如下写法：

在少量商品的专辑时是有效的，但当您的专辑存在大量的商品时，这样的使用会导致大量的专辑商品资源请求产生，大大提高渲染时延。在这种场景下，可以配合Limit 参数 来限制这类请求的资源数量。

减少动态资源大量预加载

大部分商家可能会在不同的页面动态展示不同的商品，而在全局的变量设置里将所有的商品写入，而在目前的预加载逻辑中，我们会将全局变量设置里的商品全部预读出来进行加载。

以下图为例，您可能只是想在tag为ab, cd的页面渲染这个ID，但是由于预加速机制，您的这个专辑可能会在所有页面被预先加载，如果这类专辑或商品资源较多，会导致资源数猛增。

如果您并不想所有页面都加载这个资源，只在使用时通过加载配置使用这个资源，可以避开id这个字段映射，例如：

当然，如果您的大部分页面确实需要加载这个专辑，那我们建议您填写在这里确实可以提升渲染的速度，这是一个权衡，您可以反复实践来试验最佳的效果。

使用 render 和 section

我们允许使用 render 和 section在页面中嵌入可重复使用的代码。 这有助于帮助您提高可维护性，并通过将Liquid代码分解成更小的、可重复使用的组件来减少冗余处理。

对于服务渲染来说，这些代码段还可以被缓存，从而避免我们的多次渲染重新计算相同的数据。

使用子商品请求限制

我们在全局配置里有product_variants_limit 字段 ，当您配置这个专辑并不想让他加载子商品，或者只想获取首个商品的图片时，您可以使用product_variants_limit字段，来对其进行限制。

如下图，仅会去加载这个专辑的首个子商品。 如果该参数为0，将不会请求对应子商品。

为脚本使用 defer 或 async属性

当然，这个实际上是JavaScript的特性。但减少它在初始渲染中的出现可以显著提高性能。通过向脚本添加 defer 或 async属性，可以防止它们阻止初始页面渲染。

总结

Liquid 代码对于网站渲染很重要，优化它可以真正提升您的页面性能，可以提升用户体验，最终增强转化。希望您能利用这些实践跟我们一起共同优化，让店铺达成最佳效果。