Unable to preload same version of featured product image

Technical Q&A
1

I’m attempting to preload the first product image on each product page in order to help lower my Core Web Vitals LCP score. I’ve coded the following into my tag:

{%- if template contains ‘product’ %}

{% endif %}

I’m seeing the correct image being preloaded, but it’s not exactly working as intended.

The issue is that the preloaded image is loaded again further down the waterfall. I’m seeing the exact same image filename, but the ?v= version filter is different. For example, the preloaded image is “Product_Photo_1_1080x.jpg?v=1614287546” while later on, image file “Product_Photo_1_1080x.jpg?v=1568976280” is loaded.

Why would a different version of the same file be loaded later? Is there any way that I can prevent this so that the preload is actually working as intended?

Unfortunately, I’m not finding much information about the versioning and how that works. Any help with this would be greatly appreciated.

2

Hi there - I am looking at doing something similar myself as I cannot improved LCP on my product pages any other way. Did you resolve this issue in the end as any help on how you managed to implement this would be greatly appreciated?! Many thanks

3

Yes, I did figure it out. I was using “product.featured_image”, which for some reason loaded a different version of the image. I changed it to “product.featured_media” and that seems to work. Don’t ask me why, the Shopify documentation about this is not great. However, now, the image is preloaded correctly.

I did this to help out my product and category pages since they had relatively poor LCP performance. Here’s the exact code that I used:

{%- if template contains ‘product’ %}

{% endif %}

{%- if template contains ‘collection’ %}

{% endif %}

I hope that helps.