How can I make product images the first thing to load on product pages?

[Theo_Bee]

Hi! I have noticed that sometimes my product images are slow to load, and everything else below the fold loads before the product images. This is not ideal. 

It would be amazing if the first product image could be the first thing to load in the page. 

Does anyone know how to do this?

Here is a link to a product page on my store: https://nuvocollection.com/products/antonella-flower-claw-in-burgundy-bliss

I have about 20 different product page templates. If there are any other details I can provide that would help in finding a solution just let me know!

Kind regards

Theo

[Small_Task_Help]

Hi,

Hope this will help

- Preload first product image using <link rel="preload">.
- To load first use loading="eager" for the first image.
- To improve speed enable loading="lazy" for other images.
- Optimize image size to reduce loading time.
Shopify's image optimizer example

<img src="{{ product.featured_image | img_url: 'large' }}" alt="{{ product.title }}" loading="eager">

- Move slow-loading content (videos, descriptions) below image.

[Huptech-Web]

Hi @Theo_Bee 
Can you please add the CSS code below to theme.liquid

Goto current theme -> Edit code -> find theme.liquid add below code before </head>

<style>
body media-gallery:first-child {
    display: block !important;
}
</style>

Also, are you using any kind of app for slider?

[Theo_Bee]

Hi - thank you so much for taking the time to reply! 🙂

Your solution definitely made the product images load quicker and first, but it made it so my slider for the product images didn't work anymore. 

And to answer your question: yes, I'm using an app for the image slider. It's called "Swipper"

Do you perhaps know of a way to make your code work with my slider app? 

Kind regards

Theo

[Theo_Bee]

By the way, here is an image of what I mean when I say the slider stopped working when I implemented the code:

[Huptech-Web]

Hi @Theo_Bee 
I have added the app to my test store and also checked the app's documentation but unfortunately, there are no options to load images fast. 

[DaisyVo]

Hi @Theo_Bee 

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

media-gallerymedia-gallery {
    display: block !important;
}

Best

DaisyVo

[Bundler-Manuel]

Hi Theo @Theo_Bee  I wasn’t able to find a specific code or process for the product images to load first on the page but here’s a blog on how you could optimize your images to load much quicker in your store https://www.dash.app/blog/shopify-image-optimisation