by Daniel Sim

There's a lot of talk about JavaScript, CSS, images and apps affecting the speed of your Shopify store but not so much about the 'server' code behind all shops: Liquid. Is it possible that is Liquid code can be slow?

The first crucial thing to talk about is caching.

Shopify Liquid caching

Web browsers don't understand Liquid code. The Shopify server takes the Liquid code of your shop and generates the final HTML code that your browser understands.

This generation of the HTML from the Liquid can take some time. The Shopify server has to pull out data from your database of products, create URLs for images and more to generate this HTML. It's a lot of work.

Let's say it takes 2 seconds to generate this HTML from Liquid and 0.5 seconds for a visitor to download the HTML.

First Visitor browses at 5pm - Shopify server response time 2.5 seconds

The Shopify server does this generation of HTML from Liquid. It then saves the HTML on the server, caching it, for later.

Second Visitor browses at 5:05pm - Shopify server response time 0.5 seconds

The Shopify server doesn't need to generate the HTML from the Liquid since it already has cached the HTML.

In this case the 2 seconds is saved by using the cached HTML.

Third Visitor browses at 5:10pm - Shopify server response time 0.5 seconds

Now all future visitors will have a much faster browsing time since the HTML has been cached by the Shopify server.

What this means is that (A) visitors browsing uncached pages will have a slower loading time than (B) those browsing cached pages.

To measure if Liquid can slow down your shop we need to focus on those (A) visitors and measure the Liquid to HTML generation time.

Slow Liquid

Because of caching, the Shopify server can usually generate the HTML from Liquid very quickly.

If we take a shop with 500 products using the Debut theme and visit the 'all' collection page:

First Visitor - Shopify server response time 0.8 seconds

Second Visitor - Shopify server response time 0.2 seconds

This means it takes around 0.6 seconds for the Shopify server to generate the HTML from the Liquid. That's fast. This 0.6 seconds is usually not the biggest contributor to the speed perceived by your shoppers.

But the amount of work the Shopify server has to do to generate the HTML increases as the complexity of the Liquid code increases.

Think of it by considering a simple product page Liquid that just has to fetch the name, description and price of a product from the database. Compare this to a complicated Liquid product page that does that plus displays other products in the same collection and lists out colour swatches. That's more work which will increase the time it takes the Shopify server to generate the HTML from Liquid.

What does 'slow' Liquid look like?

Here we're focussing specifically on the time it takes for the Shopify server to generate the HTML from Liquid. What happens if we take our 'all' collection with 500 products and rather than asking Shopify to display 20 of them, to display 500 of them.

First Visitor - 'All' collection with 20 products/page - Shopify server response time 0.8 seconds

Second Visitor - 'All' collection with 20 products/page - Shopify server response time 0.2 seconds

First Visitor - 'All' collection with 500 products/page - Shopify server response time 3.2 seconds

Second Visitor - 'All' collection with 500 products/page - Shopify server response time 0.3 seconds

Simply by fetching 500 products from the collection for display we can see that the first visitor experiences a much slower response time - 3.2 seconds vs. 0.8 seconds for 20 products. The response time for both second visitors is largely the same.

So a simple discovery is that pages that display lots of items of something (products / collections / blogs etc.) will take longer for the server to generate. Note this is true even if not all of the items are displayed.

In our tests like the one above we've found that Liquid can be slow (before it's cached) if:

  • It pulls out a lot of data. Note Shopify does restrict things like the number of products and collections returned in some cases, but it is still very possible to end up with a lot of data being pulled out to display just a single page
  • It has many nested loops. A loop is a programming term for when code goes over a list of items and does something with each of them. A nested loop is when a list item contains its own lists (like collections > products > variants). This might be 'for every product get all of their variants and then for every variant do ...' and so on. Big loops and many loop levels can get really slow.
  • It changes or searches big pieces of text. Pieces of text are called strings in programming. Liquid code that takes a big string of thousands or even tens of thousands of letters (characters) and changes or searches through it can be slow.

Is your Liquid code slow?

 

It's important with speed optimization to pinpoint exactly where slowness is happening. In our case we want to check if it is slow Liquid or not.

Generally it will be a specific part of your shop (like the product page, collection page, blog etc.) and not the whole shop that has slow Liquid code (even though that is possible).

You should repeat the steps below for all of the parts you suspect to be be slow.

We'll use the developer tools in Google Chrome to measure time to first byte (TTFB) as we did in our tests above.

    1. Take a copy of your current theme
    2. Preview the suspected slow page in a browser tab
    3. Open the Chrome developer tools
    4. Go to the Network tab, tick 'Disable cache', select Doc (as in the screenshot above)
    5. You're ready to measure!
    6. Make any change anywhere in the Liquid of the theme copy. This could be adding {% comment %}test{% endcomment %} to theme.liquid
    7. Refresh the suspected slow page
    8. Write down the TTFB time shown
    9. Refresh the suspected slow page again
    10. Write down the TTFB time shown

If the time you wrote down in 8 is significantly slower than 10 it is likely you have slow Liquid.

If they are similar it is likely slowness elsewhere like in HTML, CSS, JavaScript or images.

Fixing slow Liquid

Rewrite

Unfortunately there is no magic button to optimize slow Liquid code. It requires a skilled developer to look at what the code currently does and rewrite it in a more efficient way.

Writing Liquid code for Shopify can be quite different to writing code for a different platform like Wordpress or Magento, so it's worth finding someone who knows the best practices on Shopify.

While Shopify does have limitations there is likely another shop out there who's been able to code the feature with Liquid that performs well. There is rarely a need to switch to a new platform for this issue alone.

Avoid refreshing the cache

As we looked at above, making a change anywhere in your theme means Shopify will note that all pages need to be cached again when a visitor first views them.

This 'cache refresh' can lead to a shop that feels a bit slower than normal until all of its pages are cached again.

Under normal circumstances a cache refresh should happen only occasionally - when you change a theme setting, add/remove an app, or have a developer publish a new version of your shop.

Sometimes apps can get stuck in a loop or just by their design constantly update your theme. This is bad because a constant cache refresh leads to a shop that is never or hardly ever cached.

It's difficult to detect and measure this, but one sign can be a consistently poor TTFB measured over a longer period like a day (to eliminate temporary general server slowness).

Good caching and lightweight Liquid give you a fast shop

Shopify Liquid and the Shopify platform have been designed and built with performance in mind.

A lot of the 'limitations' with Liquid and the platform actually help shops avoid the pitfalls of poor performance found on other ecommerce platforms.

By following the measurement method and Liquid guidelines above you can be sure to eliminate Liquid as the cause of slowness in your shop.

 

Explore Our Apps

Sign up for our Actually Useful news