Site Speed: Why your Shopify theme lazy loads your LCP image (and how to fix it)

If you’ve checked your Core Web Vitals through Google’s Page Speed Insights tool and failed your LCP (Largest Contentful Paint) metric, you may be one of the 82.4% of Shopify sites that are making this mistake:

Lazy loading above the fold images.

The good news is it’s a relatively easy problem to fix – and Shopify has updated its Liquid code to make it even easier.

What is lazy loading and how does it impact LCP?

If you’ve never heard of lazy loading, let’s start with the basics:

What is Largest Contentful Paint?

In Google’s Core Web Vitals, Largest Contentful Paint measures how long it takes to display what it detects to be your “main content” on your page.

For Shopify merchants, the LCP is typically the hero banner or background image on an ecommerce home page, the image gallery on a product page, or the first product card on your collection page. But it can also be pop-up elements like your cookie policy or email modal.

You want your LCP to load in 2.5 seconds or less (and never longer than 4). Load time is impacted by the size (weight) of your content files, how you’ve instructed browsers to handle them, and any competing “render blocking resources” that load first.

What is lazy loading?

Lazy loading is a great way to optimize your site for better performance. It tells browsers to fetch content resources only when they’re visible to users, instead of trying to load everything all at once.

The problem is when lazy loading is applied to above the fold content (what your visitor sees immediately within their device viewport), browsers load your most important elements late, leaving visitors staring at blank placeholders on your page for as many seconds as they take to paint in.

You can see if a file is set to lazy load by the loading=”lazy” attribute in your source HTML.

Because lazy loading delays the rendering of your Largest Contentful Paint, this little attribute setting will most always cause you to fail your LCP score in Core Web Vitals.

Why does my theme lazy load all my images?

If your Shopify theme is lazy loading above the fold images, it’s not necessarily your theme developer’s fault.

It happens because Shopify gives you the flexibility to use section blocks in different positions within your theme, but until the fall of 2023, didn’t provide any logic for the img loading attribute, which means all images get treated the same regardless of where they appear.

Because theme developers can’t predict where you’ll position sections on your page, they’ve applied lazy loading to most or all sections.

How can I fix lazy loaded above the fold images in my Shopify theme?

The good news is Shopify’s 2 new Liquid properties give you more fine-tuned control over how above the fold content is tagged:

???Default lazy loading for the image_tag for sections further down the page

???New section properties that enable more control over image lazy loading within your theme

So long as you’re on a Shopify 2.0 compatible theme, you’ll be able to fix lazy loading on above the fold images with these new section properties by following the steps below.

?Looking for a faster Shopify theme? Enterprise and Canopy are built on Clean Canvas' performance-first framework

How the new image tag logic works

With this update, Shopify’s Liquid API will apply eager loading (you got it, the opposite of lazy loading) to images in the first 3 sections of your site, and lazy loading to everything after.

But Shopify won’t override any existing attributes you have, or ones you set manually. To get this new default setting, first remove any loading attributes by applying the image_tag filter to a bulk search.

This is a quick and scalable solution, but you may find you need more granular control over image loading for specific assets. For example, you may only have 2 sections above the fold, or more than 3.

How new section properties work

To add your own custom logic, Shopify has 3 new properties developers can use:

???section.index and section.index0 - Your developer can use either index method to define position order within a given section

???section.location - Your developer can define where in the header, footer, template area or custom location a section lives

Now developers can use these properties to tell Liquid how to apply loading attributes to different pieces of your theme, so that creating new pages and adding new content will auto-apply the right tags to images above and below the fold.

Section index values tell Liquid which sections count as “first 3 sections” for the default logic. Again, Shopify will automatically eager load your first 3 sections and lazy load everything else unless you override this with custom rules.

With index control, you can change the logic to eager load “sections 1-5” and define what those sections are, for example.

This extra control is helpful, especially on collection pages that may have banners or unique content across some but not all collections, or that have banner content added and removed seasonally. You want to ensure both banners and top product cards have the right attribution in each case.

?? Want a more technical breakdown of Shopify’s new section properties? Check out this Youtube video

What else to know about your Largest Contentful Paint score

The Liquid image tag will also convert your images to more modern file formats (.webp and .webm in its CDN. This can help your Largest Contentful Paint element load even faster.

But you can also apply a high fetch priority hint to your images to tell browsers to load your LCP element before the rest of the page starts rendering.

If your LCP is a background image, consider using the preload tag along with fetchpriority=high.

Just be careful not to set too many elements to high priority! If everything’s important, nothing’s important. Use your powers wisely.

This topic is commissioned by Ecom Ideas partner Clean Canvas, the performance-savvy Shopify theme developers behind Enterprise and Canopy (opinions are my own). Originally published on EcomIdeas.com