Identify Liquid render issues using Shopify Theme Inspector

To run the Shopify Theme Inspector on a store, you need to have the Themes staff permission or a collaborator account with the same 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, and then log in using your Shopify login.

   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 isn't 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.

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 isn't equal to time to first byte (TTFB), because it doesn't 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.

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

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

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

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 unnecessarily repetitive because the value of products_by_price does not change per product.

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

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.

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, or a collaborator account with the same permission, on the store.

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

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

• Your account doesn't have access to the store that you're trying to profile.
• You're trying to profile a checkout page, which isn't supported by this extension.
• There was an unhandled error in the request, such as a timeout or a lost connection.