Preload tag filter argument warning

Technical Q&A

Topic summary

A user encountered warnings in their theme.liquid file suggesting they use the preload argument for image and stylesheet tag filters instead of manually writing <link rel="preload"> tags for LCP (Largest Contentful Paint) optimization.

Key Technical Guidance:

  • The warnings recommend using Shopify’s preload_tag Liquid filter rather than hardcoded preload links
  • While the resulting HTML is similar, preload_tag also adds HTTP headers, making it slightly more effective
  • For responsive images with srcset, using imagesrcset for preloading may be more appropriate than preloading a single image file

Implementation Details:

  • Example syntax provided: {{ product.featured_image | img_url: 'master' | preload_tag: as: "image" }}
  • The user simplified this to: {{ 'image.jpg' | preload_tag: as: 'image' }}
  • The master parameter loads the largest image version; whether to include it depends on the specific use case

Resolution: The user successfully implemented the changes and eliminated the warnings.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I have some LCP elements on my website that need prioritising. But there are warnings inside my theme.liquid file when I hover over existing code:

prefer using the preload argument of the image tag filter

prefer using the preload argument of the stylesheet tag filter

I’m not certain how to exactly apply the new code correctly, need some assistance, please.

Thanks in advance.

2

Current code below:

LCP IMAGE

STYLESHEET

3

This is the reason – you’re writing <link rel=preload … yourself, but validator wants you to use the preload_tag liquid filter instead (https://shopify.dev/docs/api/liquid/filters/preload_tag).

Would not change much in relation to LCP because the resulting HTML code is the same.

However, preload tags also add HTTP headers, so, ultimately are a bit more effective.

Also, consider that your first code – would load only one image, while mostly themes use responsive images with srcset. So consider using imagesrcset for preloading image – https://web.dev/articles/preload-responsive-images

4

HI @tim_1 , thanks for your message.

Also, consider that your first code – would load only one image, while mostly themes use responsive images with srcset. So consider using imagesrcset for preloading image – https://web.dev/articles/preload-responsive-images

Yes I understand that, its the only image that needs it. So what would that line of code look like if i amended it:

  • In imagesrcset or
  • In preload_tag

Also, In terms of the css stylesheet, what would that code look like if i were to use the stylesheet tag filter,

5

Hi Tim,

Ok cool, FYI Its the only image (ie: LCP resource) I need to prioritise.

So, ultimately, what would that line of code look like if I were to mod that line in theme.liquid, with the preload_tag or with the imagesrcset. Ditto with the stylesheet_tag filter.

Need to know. Thanks.

6

This will require testing in each particular case.

Maybe it would be faster to load bigger image, but with preload_tag and request put into HTTP headers.

Preload tag may works like this to load the biggest version of the image:

{{ product.featured_image | img_url: 'master' | preload_tag: as: "image" }}

Or maybe the imagesrcset would be a better option – to load a smaller image, but start a bit later.
This you would need to construct yourself to mimic the srcset and sizes on your tag.

Again, heavily depends on your use case.

7

‘Again, heavily depends on your use case.’

Yeah got ya. Its only one image on one page, that’s the only one that i need to use this code for, as at the moment, the image is not LCP prioritized.

I noticed you used:

{{ product.featured_image | img_url: ‘master’ | preload_tag: as: “image” }}

I updated my code without the master parameter, like below:

{{ ‘image.jpg’ | preload_tag: as: ‘image’ }}

Which code is better?

Just for some context, the image file im using this code is an above-the-fold image so I could use master, but in your opinion, would website performance be better off with it or without it.

8

I got it working, no warnings now.