All Tutorials

Optimize online store Liquid performance with the Shopify Theme Inspector for Chrome

All Tutorials

Optimize online store Liquid performance with the Shopify Theme Inspector for Chrome

Optimize online store Liquid performance with the Shopify Theme Inspector for Chrome

The Shopify Theme Inspector for Chrome is a browser plugin that visualizes Liquid render profiling data in a flame graph. This guide teaches you how to run the Shopify Theme Inspector on an online store and identify common Liquid render issues using the flame graph.

Running the Shopify Theme Inspector

To run the Shopify Theme Inspector on a store, you need to have the Themes staff permission. To verify that you have this permission, make sure that you can view the Themes page in the store's admin.

  1. Navigate to the Shopify store that you want to analyze.

    If you have collaborator access for the store that you want to analyze, then you need to open the store from your Partner Dashboard.

  2. From the Google Chrome browser frame, click the Shopify Theme Inspector for Chrome icon.

  3. Click Sign In, then log in using your Shopify ID.

    If you have collaborator access to the store that you want to analyze, then log in using the Partner account that has collaborator access to the store.

  4. Open Chrome DevTools and then select the Shopify tab. If the tab is not visible, then click the >> button to check for it in the overflow list. This tab is only available when you are viewing a Shopify store.

  5. Navigate to a page in the store that you want to profile.

  6. To generate a flame graph for the page, click the or Load Profile button.

Understanding the flame graph

The Shopify Theme Inspector generates a flame graph that represents when each node of Liquid ran and how long each node took to run.

Starting from the top of the stack, the Page node represents the total time the server spent to render the page.

The total time Page took to render does not equal to time to first byte (TTFB), because it does not account for additional application and network overhead, such as request routing and the TLS handshake.

The Page node contains all of the Liquid nodes used to render the page content. template:index is an example of top level liquid code that Page needs to resolve and render.

Learn more information about each node by clicking on the relevant bar in the flame graph. The following information is displayed, where available:

  • File - The file containing the code.
  • Total Time - The time it took for the server to render the code, including any child nodes.
  • Code snippet - The code that the server resolved. Click the link to view the snippet in the online store code editor.
  • Line - The line number where the code exists.

What to look for when debugging

Below are some trends you can observe in the Shopify Theme Inspector flame graph and their implications for your theme's performance.

Too many nodes

A flame graph with many nodes

The page's time to first byte (TTFB) is a combination of network overhead and the render time of the Liquid nodes. Each node your store has to load adds render time and increases your overall TTFB.

A deeply nested graph

A flame graph that has many nested nodes

If your flame graph has many layers of nested nodes, then your code might not be optimized. Below are some of the common causes of nested nodes. Your code might contain a combination of these causes.

  • Too many conditionals
  • Nested loops
  • Nested includes

Complex operations inside of loops

Doing complex operations inside of a loop has adverse effects on Liquid render time. In some cases, you can simplify template logic and restructure the code to significantly improve Liquid performance.

In the example below, an assign tag is nested in a for loop. The code loops through the products in the collection and creates a list of products_by_price with each iteration. The code is unneccessarily repetitive because value of products_by_price does not change per product.

{%- for product in collection.products -%}
 {% assign products_by_price = collection.products | sort: "price" %}

 // some liquid code
{%- endfor -%}

You can simplify the code to only generate products_by_price once, as in the example below. In this example, the sorting of the prices happens only once and can still be accessed within the loop when needed.

{% assign products_by_price = collection.products | sort: "price" %}

{%- for product in collection.products -%}
     // some liquid code
{%- endfor -%}

Non-visual sections

These sections could be for things like scripts, SEO, analytics, and more. Evaluate whether these sections are necessary or refactor them so they become more efficient.

Troubleshooting

Can I profile any Shopify store I want?

No, you can only profile a store in the following cases:

  • The store is linked to your Shopify ID.
  • You have a collaborator account for the store.
  • The store is not a development store.

To successfully run the Shopify Theme Inspector, you need to have the Online store > Themes staff permission on the store.

Can't see the Shopify tab in Chrome DevTools

The Shopify tab only appears when you are viewing a Shopify store.

This page cannot be profiled

You might see a This page cannot be profiled error in the following cases:

  • Your account does not have access to the store you are trying to profile.
  • You are trying to profile a checkout page, which is not supported by this extension.
  • There was an unhandled error in the request, such as a timeout or a lost connection.