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

Solved
Preben_Frenning
Shopify Partner
39 0 13

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

Accepted Solution (1)

Accepted Solutions
oreoorbitz
Shopify Partner
205 24 114

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.

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

If your looking for a pagespeed solution for your Website, take a look at: https://renderbetter.com/

View solution in original post

Replies 15 (15)
cdnmikes
Excursionist
23 0 9

@Preben_Frenning did you figure out a good way to this yet?

I am looking for some examples of how to properly prefetch or preload items in a Shopify theme.

Something like loading product images on product pages on hover from a link on a collection page. Or prefetching collection page items from a link on the nav.

 

oreoorbitz
Shopify Partner
205 24 114

If your on the product page, you can access the product object for that product.

So product.media.first will get you the first media element, in your case an image.

Then you use the same image dimensions as you do on the product page,  so that the resulting url will match what you use on the product page. 

As for dynamically getting the first image of the carousel in the homepage, I have no idea besides writing a tool to find the image and dynamically inject a preload into your theme.

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

If your looking for a pagespeed solution for your Website, take a look at: https://renderbetter.com/
cdnmikes
Excursionist
23 0 9

Anyway we can do something like this Sapper - Prefetch in this video is shows how we can pre load data before the use goes to that page.

I am trying to set this up with themekit and webpack but haven't quite figured it out yet.

Preben_Frenning
Shopify Partner
39 0 13

I haven't had much time to look more into it unfortunately, but I am also looking to solve something similar. Ideally, also prefetching the cart page after adding a product to the cart with AJAX as well.

I did try Instantpage a little bit, but never had time to configure it properly to work well with Shopify. But I'm gonna try some manual prefetching next time I am working on performance. It felt great, and a lot faster, but had a negative impact on our CR, most likely because something interfered.

The preloading of the first image is mainly to improve the perceived speed and rendering, with the purpose of getting a better CLS and LCP.

Preben_Frenning
Shopify Partner
39 0 13

Thanks! I'll try this. Though find it a bit challenging to have it preload the same image size. Will need to look more into how that actually is determined in Shopify.

Preben_Frenning
Shopify Partner
39 0 13

This technique looks like it can be added to the code manually to places you know will work. I'll try adding it to the menu and collection pages this week.

pandicorn_app
New Member
4 0 0

You can preload the whole site by using this app: Fastify. The app automatically preloads the page that users are going to click on.

 

pandicorn.app
DariusWS
Explorer
49 1 7

For me working as charm like this: 

  {% if template contains 'product' %}
    <link rel="preload" href="{{ product.media.first | img_url: 'master' }}" as="image">
  {% endif %}

 

 

Mircea_Piturca
Shopify Partner
1540 43 331

@DariusWS DariusWS solution is the way to go but make sure about a few things:

You need to preload exactly the image displayed, product.media.first will return the first product image. You want to preload the featured_image or selected_or_first_available_variant image. This depends on your setup. Also, make sure that your img_url filter matches.

Preload exactly the same image displayed in your product gallery, otherwise, you can do more harm than good.

Finally—Add variant descriptions to your products
CoWa
New Member
6 0 0

Thanks for the advice and code here, I’ve been trying to find how to do this for a while as web.dev always recommends it on my product pages. Do you add this code to the header tag on the theme liquid file, or the product page liquid file? Thanks in advance! 

bestelectric11
New Member
2 0 0
Then you use the equal picture dimensions as you do on the product web page, so that the resulting Best Electric Smoker will fit what you use at the product page.
dbp
Excursionist
18 0 3

What about if my PLP is loading a specific version of the file that is 600px? Your solution would return /image_file_name.jpg?v=1621006829 , but I need it to return /image_file_name_600x.jpg?v=1621006829

oreoorbitz
Shopify Partner
205 24 114

It has to be exactly the same, so if the product has a size of 600, the preload has to also have it,
So refactoring the previously shared code snippet:

 

{% if template contains 'product' %}
    <link rel="preload" href="{{ product.media.first | img_url: '600x' }}" as="image">
  {% endif %}

 

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

If your looking for a pagespeed solution for your Website, take a look at: https://renderbetter.com/
DariusWS
Explorer
49 1 7

I gave the solution. But after some testing didn't see much of an impact on speed. Also worth to mention there is lazyloading with different screen sizes, I mean with js help it calculate what is screen size and load the needed image. Can't find a way to set the correct image size for preloading, because at the time I don't know the screen size.

oreoorbitz
Shopify Partner
205 24 114

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.

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

If your looking for a pagespeed solution for your Website, take a look at: https://renderbetter.com/