Shopify CWV Improvements

Not every theme in Shopify loads content in an efficient way. There are a lot of opportunities to improve these speeds and Shopify does a great job of documenting how to do that.

It is highly recommended to reference the Shopify Liquid reference when working on Shopify themes.

It's preferred to use Shopfiy image objects when loading images instead of a standard HTML element for images. Shopify gives you more control over image loading using their image object. The way an image object works is this {{ image | image_url: width, height | image_tag }}. Basically, the first section of this object is the image. This is the string that contains the url of the image. This is usually grabbed dynamically. For example, product.image, featured_image, etc. The image_url portion of the object is required to load the width and/or height of the image. This requirement is important because it helps prevent CLS issues as well when providing width and height. The image_tag portion of the object is crucial is this is how shopify knows to load an <img> tag on your site. In additional to the image_tag, you can add preloading like so - image_tag: preload: true. You can also add any attributes after the image_tag like so - image_tag: preload: true, fetchpriority: 'high', loading: 'eager'. This will output something like this on the storefront - <img src="https://brodagency.com[image url]" fetchpriority="high" loading="eager">

This same format can be followed for stylesheets that need to be loaded. If a stylesheet is blocking, you can add stylesheet_tag: preload: true to the {{ link_to_stylesheet | style_url | stylesheet_tag: preload: true }}.

If you follow this same format for scripts, styles, and images, it will help improve your LCP in a meaningful way. 

Something to consider: If you have apps blocking your LCP image, you may have to preload the css for that specific app if it's a stylesheet blocking. Otherwise, you'll need to reach out to the app support if you can't load the app async/defer.