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

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?

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?

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

So what can we do?

Optimize For Loops

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

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

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

Written By:

We lead fearless brands to limitless growth.