Online store performance and site speed optimization
Hi there.
I am preloading the product tag for speed improvement and I am using <picture> tag to load the product images.
The problem i have is that the preloaded image has a different version than the product image on the page:
preloaded image: _508x508.jpg?v=1612807210
image on the page: _508x508.jpg?v=1612807211
The code i am using for preloading is this:
<link rel="preload" as="image" href="{{ product.featured_image.src | img_url:'400x400' }}" media="(max-width: 767.98px)">
And the code inside product.liquid is this:
<picture>
<source media="(max-width: 767.98px)" srcset="{{ product.featured_image.src | img_url:'400x400' }}">
<img src="(min-width: 300px)" srcset="{{ product.featured_image.src | img_url:'400x400' }}"
alt="{{ image.alt | escape }}">
</picture>
Can anyone explain why this happens?
User | RANK |
---|---|
3 | |
2 | |
2 | |
2 | |
2 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022