Unable to preload same version of featured product image

bartprz
New Member
1 0 0

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 <head> tag:

{%- if template contains 'product' %}
<link rel="preload" as="image" href="{{ product.featured_image }}" imagesrcset="{{ product.featured_image | img_url: '360x' }} 360w, {{ product.featured_image | img_url: '540x' }} 540w, {{ product.featured_image | img_url: '720x' }} 720w, {{ product.featured_image | img_url: '900x' }} 900w, {{ product.featured_image | img_url: '1080x' }} 1080w" imagesizes="180vw">
{% 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.

0 Likes