Optimizing for Core Web Vitals on Shopify

Optimizing for Core Web Vitals on Shopify

Let me preface by saying that Shopify is an incredible platform, but it has its limitations if you're on one of the basic (non-Shopify Plus) plans.

Basic Plans can be limiting in some cases when trying to make changes or edits not available through liquid templates.

Note: This is not comparing the availability of fixes you may have on a Shopify Plus plan which includes more flexibility on the backend side of things.

Shopify websites are Client-Side Rendered (CSR)

Websites naturally slow down when a user's browser has to process all the scripts upon loading. This happens when the DOM is processed. The usual suspects here that mostly cause the slow load time include Google Tag Manager, Facebook's Pixel, tracking codes etc. Processing these and other JS libraries impact TBT, FID and the overall page load speed.

How we fix this?

Our headless setup is Server-Side Rendered (SSR). This means that all pages on our website are already processed on the server (instead of user's browser) and have significantly shorter load times. I also use bundling here to minify JS libraries to the bare minimum and cache any instances of sparingly used JS libraries.

Images and other media

Images affect a lot of page speed factors but primarily CLS and LCP in the case of Core Web Vitals. Image sizing isn't the only issue that affects page speed.CLS - Images that jump around or increase or decrease in sizing upon page load.

LCP - Heavy uncompressed images, or using legacy file types (WebP images are 25 – 35% smaller than a jpeg at the exact same SSIM quality index)

When you use SSR such as GatsbyJS to process images, the following customizations are readily available:

  • Loads the optimal size of image for each device size and screen resolution - Improves CLS and LCP
  • Holds the image position while loading so your page doesn’t jump around as images load - Improves CLS
  • Uses the “blur-up” effect i.e. it loads a tiny version of the image to show while the full image is loading - Improves CLS
  • Lazy loads images, which reduces bandwidth and speeds the initial load time - Improves LCP
  • Uses WebP images, if browser supports the format - Improves LCP