Online store performance and site speed optimization
Hi!
I've been wanting to preload the first image on product pages for quite some time now. As have I been wanting to preload the first image in the slider on our home page.
How can I do that?
Something like <link rel="preload" as="image" href="{ product.image[0]}">
Solved! Go to the solution
This is an accepted solution.
You can set responsive sizing in preloads with the imagesrcset attribute.
See this example from https://web.dev/preload-responsive-images/
<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">
Another thing to keep in mind is that lazyloading will slow down your image loading speed, so that might make preload redundant.
Another other thing is if your using something like Slick slide or Fotorama, the original image will be cloned and readded by the slider, so your image load time will be affected by that and preload will be redundant.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024