Improving theme code and speeding up page loading

To make your site faster and provide a better user experience, we reviewed common challenges with page loading. We identified several areas where improvements could be made to enhance performance and reduce delays. Below, we’ve compiled solutions to help optimize your site.

Three key factors impact how quickly your site displays content: code size, resource usage, and the server processes requests efficiently.

• Server performance: This is usually stable and backed by our technical team. If issues arise, feel free to contact our support team for help.
• Resource usage and code quality: These require collaboration between store owners and technical experts for the best results.

Here are common issues and actionable suggestions to help make your site faster and more responsive.

Limit repetitive resource requests

For example, if you use a loop to display products from a collection, the following approach is common:

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

This method works well for smaller collections, but for larger ones, it can cause significant delays due to the number of resource requests. You can reduce the load time by limiting the number of items processed:

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

This reduces unnecessary requests and speeds up loading.

Avoid preloading unused resources

Some sites preload all product data globally, even when certain pages don’t require it. This can lead to unnecessary loading, especially for larger collections or resources. Instead, you can configure your site to load only the resources needed for specific pages.

For example, when you want to load a collection using specific tags (ab,cd) or a particular ID (cid), you can modify your settings to load these resources dynamically:

Example with tags and collection ID:

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

Alternative using a collection CID:

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

These configurations ensure that only the relevant resources are loaded for the required pages, reducing unnecessary global preloading. Testing these settings will help you balance performance and resource availability.

Use reusable code sections

Breaking your code into reusable pieces improves organization and performance. Using sections or code snippets allows you to manage your site more easily and reduces repetitive work.

For example:

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

This approach simplifies updates and allows the server to reuse cached data, making your site faster.

Limit sub-item loading

You can control how many sub-items load by adjusting the product_variants_limit setting. For example, if you only need the first product image or want to exclude sub-items, configure the field accordingly.

Here’s an example:

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

Setting this to 1 will load only the first sub-item, while 0 excludes sub-items entirely.

Delay script loading for faster pages

Using defer or async attributes for JavaScript ensures scripts load after the main content, preventing delays in page display.

Here’s how it looks:

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

This simple adjustment prioritizes visible content and enhances the user experience.

Improving how your site loads content makes it faster and creates a better experience for your customers. Following these tips can enhance site performance, keep visitors engaged, and increase satisfaction. Let’s optimize your site together for the best results!