Improving Performance with Shopify’s New Theme Inspector (Gadget)

A blank white screen. It sits there for longer than is comfortable when you open your site in the browser. Why is it taking so long to see anything?

If you’ve experienced this on your Shopify site, your theme likely has inefficient Liquid code in it that needs some optimizing. Liquid is the templating language theme developers use to build in dynamic content — like product data or navigation links — within a template on Shopify’s servers.

We all know that page speed has a huge impact on the success of a website. There are many factors that comprise your page speed. In this article, we’ll be focusing on one, sometimes overlooked, aspect of page speed: TTFB or Time to First Byte. This is basically how long you have to wait before your page starts to appear in the browser, and during this time all you see is that blank white screen. We’ll explore how your developers can use Shopify’s new theme inspector gadget to analyze your theme’s Liquid performance, how Liquid code affects your TTFB, and what we can do about it.

A New Performance Tool

Shopify recently announced the release of a new tool for debugging Liquid performance issues. For those of us tasked with improving the performance of Shopify sites, this is a game-changer. Until now, we had no way to gain insights into why some pages have a huge delay in loading.

The new tool is a Chrome extension called “Shopify Theme Inspector”, and it allows you to see how long each piece of Liquid code on a page takes to render on Shopify’s servers.

How Does It Work?

Once installed, it adds a ‘Shopify’ panel to the Developers Tools in Chrome where you can run a profile of a Shopify page.

You must log in to your Shopify store through the extension in order for it to work. Unfortunately, it currently doesn’t work with collaborator accounts, only regular staff accounts. Shopify does, however, plan on working on that; though no ETA has been provided, you can subscribe to their open GitHub issue to be notified when they resolve it. In the meantime, you’ll have to request a regular staff account for the shops you want to inspect.

The Shopify Theme Inspector builds a flame graph to help visualize the Liquid components of a page. The longer the bar, the longer it took to render. The stacking of the bars indicates nested chunks of code. Nesting code too deeply becomes increasingly inefficient for the server to deal with, so that’s something to look out for as well.

You can learn more about how to use the tool on its GitHub page. Using this extension, you can now track down precisely which lines of Liquid code may be a factor in a slow page load.

How does Liquid affect performance?

Really inefficient Liquid code can contribute to a high TTFB (Time To First Byte). In short, TTFB is the time between a browser requesting a page and when it is received from the server. A lot of things happen during that round-trip, but the part of TTFB we’re focusing on is the time it takes Shopify’s server to render our page’s HTML. It’s really the only part Shopify developers have some small control over because of how we use Liquid in our templates.

The slower your TTFB, the slower your page loads. All you see is a blank white page during this time. Ideally, your TTFB should be 500ms or less. So if you’re seeing a TTFB of more than half a second, you may want to take a good hard look at your page’s Liquid code and see if you can trim that down.

You can check your page’s TTFB using the Network tab in Chrome’s Developer Tools. Here’s an example of a particularly bad TTFB of about 4 seconds!

That means the browser had to wait 4 whole seconds just to receive the HTML document from the server. After the browser receives the document, then it has to parse the document and display the page. That includes downloading assets (fonts, images, stylesheets, javascript files, etc), calculating the styles, painting the page, and running JavaScript. This is already the part that takes the longest, so adding a 4-second delay is really unacceptable.

Limitations of Liquid

Liquid, while it runs server-side, is not a true server-side language. While it’s a powerful templating language, it cannot do certain things as efficiently as a true server-side language. Some of these limitations are by design to actually help rendering performance. Shopify developers push the boundaries of what it can do with creative hacks in an effort to achieve a requested feature that isn’t readily available in Shopify. However, that can sometimes backfire and you end up with messy, inefficient code. So keep that in the back of your mind as you’re doing your next build.

So what can we do?

If we can pinpoint exactly which lines of Liquid code are taking the longest to render on Shopify’s servers (which we can do now!), we can try to fix them and improve our TTFB — and thus our overall page speed. Below are some techniques you may find useful when attempting to address inefficient Liquid code in your theme.

Optimize For Loops

For loops are typically the main cause for slow and inefficient Liquid. A for loop is code that runs for every item in an array. That might be menu links, products in a collection, product images, etc.

The more items in your array, the more times that code has to run. This can get out of hand quite quickly if you’re not aware of the impacts. So look for ways to reduce the number of items you’re looping through. This could include reducing your pagination limit, reducing the number of featured or related products, and keeping your main navigation links (and child/grandchild links) to a minimum (beware of mega menus).

Generally speaking, you should also remove any unnecessary code from within the loop and try not to do too many complex operations within the loop as well.

Remember to use the {% break %} tag whenever you can to end a loop once you’ve gotten what you need. For example, if you need to check a product’s tags for a tag with a particular prefix. Once you find it, stop the loop with the {% break %} tag.

It’s also worth noting that you don’t have to loop through all the tags if you’re looking for a specific tag. You can do that using contains.

If you are looping through the same data multiple times on a page, consider using the {% capture %} tag to get multiple things done in one loop at the top of the page and then output your captures further down the page. Many themes loop through the main menu links twice, once for the desktop navigation and once for the mobile navigation. If your menu structure is extensive, this is really inefficient. Another example is looping through product images twice, once for the main image gallery, and again for the thumbnails.

Instead of this:

Do this:

Reign in Content

More content = more time. In a mobile-first mindset, you really need to think about what is absolutely necessary on page load and what can be eliminated entirely or lazy loaded in later. Ideally, you wouldn’t include any hidden content that isn’t critical to the page or would only be shown if some action is taken by the user. A classic example of this is Quick View content.

If a particular section of code is proving to increase the Liquid render time significantly (and therefore TTFB) and that section is far enough down the page (or hidden), it may be worth lazy loading the entire section, preferably on an event like scroll which indicates the user might actually get down the page far enough to see the content. If the user never scrolls down the page to that section, you just saved them some bandwidth and load time.

You can still use your Liquid code. Put it in a new template with {% layout none %}, then fetch it after the user starts to scroll down the page and append it to the page. Here’s a quick example:

Include an empty placeholder <div> for the section, a related products section in this example.

Put your Liquid snippet into a new product template called ‘product.related-products.liquid’. Then you can do something like this to fetch and append the HTML after the user starts to scroll down the page:

Reign in Theme Options

Themes out of the theme store come with a lot of configurable options so shops can brand and customize it for their own preferences. Once initially configured, a lot of those options will never be changed though, such as the position of the logo within the header, and some may never be used at all. It’s worth ripping out conditional statements and snippets for features that you will never use.

If you find that you are building in a lot of conditional features that are dependent on certain kinds of data being present, it may be time to start thinking about splitting these out into separate templates that can be assigned to items (e.g. products) that fit the data required, rather than trying to accommodate everything in one template. How to best determine the appropriate ways to split this out will be dependent on your variable data. Obviously you don’t want to have hundreds of templates to choose from. This would take some careful consideration, and it must make sense for the people in charge of managing the content.

Clean Up Apps

You may discover, using this new Liquid debugging tool, that a long delay in page load is coming from a snippet or multiple snippets placed on your theme by apps you’ve installed. Even if an app promises to boost sales, if it’s tanking your page speed, visitors are going to bounce before they get a chance to see the nifty thing the app does. If the delay caused by an app is particularly egregious, it’s probably time to uninstall that app if it’s not absolutely critical to the site’s functioning.

When you uninstall an app, it does not automatically remove the code snippets it placed in your theme when it was installed. So after uninstalling an app like this, be sure to do some cleanup in the theme to remove all traces of the app’s code. Some apps may have a support team that will do this cleanup for you upon request.

Big Things, Little Things, It All Counts

A slow page is rarely due to one or two major offenders, but rather it’s a cumulative effect of many factors. Anything you can do to shave even a few milliseconds off will help chip away at the load time. You’re still probably going to see the biggest improvements by addressing client-side issues (optimizing images, lazy loading, minifying files, etc), so that’s usually the best place to start, but let’s not forget to take a critical look at how each page is constructed with Liquid and how that can be optimized.

Written By: