Improve your online store performance with Liquid

Before you begin

This workshop teaches you how to action performance opportunities identified by Google PageSpeed Insights for your Online Store.

By looking at these opportunities through the lens of a Shopify Online Store, you can make a series of alterations to your theme code which will ultimately improve the shopping experience for your buyers, and encourage better conversion rates.

This isn't an exhaustive look into Online Store performance, but is rather a springboard to get you started on your storefront performance journey.

Learning objectives

After you've finished this tutorial, you'll learn how to do the following:

• Identify and reduce excessive Liquid logic
• Reduce Cumulative Layout Shift (CLS) by using image dimension attributes
• Break down CSS + JS into sections-specific modulus
• Leverage lazy-loading to remove render blocking content

What you'll need (Shopify Account Requirements)

• If you don’t have one, create a Shopify partner account.
• If you don’t have one, create a Development store with pre-populated data where you can install and test your development theme.

What you'll need (Libraries and Tools)

• Clone this theme and open in your IDE of choice.
• Upload this theme to your Development store by downloading and importing the zip file.
• Import products from this CSV into your Development store.
• Optionally, install Shopify Theme CLI on your machine.
• Optionally, if using Chrome as your browser, install Shopify Theme Inspector Chrome Extension.