How do I preload the first image on product pages? And the first image in the slider?

Preben_Frenning · ‎10-01-2020

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]}">

oreoorbitz · ‎05-19-2021

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.

Available for freelance. I specialize in speed improvement and theme development.
https://www.upwork.com/fl/orionholmes

You can also contact me directly if you prefer.

View solution in original post

How do I preload the first image on product pages? And the first image in the slider?

Community Blog Articles

Shopify Community

Support

Shopify

Quick Links