Other Settings | Improving theme code and page loading speed

A faster site creates a better experience for your customers and keeps visitors engaged. After reviewing common page loading challenges, we found several areas where you can improve performance and reduce delays. This guide outlines practical solutions to help optimize your site’s speed.

Several factors affect how quickly your site loads, including the size of your code, the way resources are handled, and the server’s ability to process requests. Server performance is typically stable and supported by our technical team. The biggest improvements usually come from refining resource usage and improving code quality, which often requires collaboration between store owners and technical experts.

Here are some common challenges and ways to make your site faster and more responsive.

Limit repetitive resource requests

• When displaying products from a collection in your theme code, you might use a loop like this:

  {% for product in collection.products %}
  {% if product.tag == "example_tag" %}
    {% include 'product_thumb' %}
  {% endif %}
{% endfor %}

• To improve performance, update your code in the collection template or section file to limit the number of products displayed:

{% for product in collection.products limit: 5 %}
  {{ product.title }}
{% endfor %}

This adjustment reduces the number of requests and helps the page load faster.

Avoid preloading unused resources

Preloading all product data across your entire site can cause slower load times, especially if many of the resources are not needed on every page.

Instead, configure your dynamic sections or product displays to load only the specific collections or tags needed. In your section settings or configuration files, apply targeted loading like this:

• Example using tags and a collection ID:

{
  "type": "recommend_likey",
  "settings": {
    "tags": "ab,cd",
    "collection": {
      "id": "f5767f79f-deff-44a7-248b-f2b6-f021478d80c"
    }
  }
}

• Alternative example using a collection CID:

{
  "type": "recommend_likey",
  "settings": {
    "tags": "ab,cd",
    "collection": {
      "cid": "f5767f79f-deff-44a7-248b-f2b6-f021478d80c"
    }
  }
}

Apply these configurations where you manage dynamic sections to load only the necessary data for specific pages.

Use reusable code sections

Organizing code into reusable sections or snippets improves both your site's performance and the way it’s maintained.

Instead of repeating product display code throughout your theme, create a reusable snippet. Then, reference it where needed, like this:

{% render 'product-card' product: product %}

This method reduces repetitive code and allows the server to cache and reuse components, improving loading speed.

Limit sub-item loading

Loading too many product variants (such as multiple sizes or colors) can slow down your pages. You can limit this by adjusting the product_variants_limit setting inside your section or dynamic block configuration.

• For example, when setting up a product list:

 {
  "heading": "Products list",
  "collection": {
    "id": "26559013-446e-4bd6-aea9-5c45d3c99892",
    "type": "collection"
  },
  "product_variants_limit": 1
}

Setting the limit to 1 will only load the first sub-item (such as the first product image). Setting it to 0 will exclude sub-items entirely.

This helps pages load faster by reducing the amount of data pulled.

Delay script loading for faster pages

JavaScript files can delay the loading of important page content if they are not handled properly. To address this, modify your script tags in the theme’s HTML files to use the defer or async attribute.

• For example:

<script src="shoplazza.js" defer></script>

This ensures the page’s visible content loads first before scripts finish loading in the background, improving overall speed and user experience.

Taking small steps to optimize how your site loads content can lead to a noticeable improvement in speed and customer satisfaction. Whether you apply these changes yourself or with the help of a developer, refining your site’s performance can make a real difference. In particular, optimizing your Liquid code not only improves page loading speed but also enhances the overall customer experience and store conversions.