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

Solved
CoWa
New Member
4 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! 

0 Likes
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.
0 Likes
dbp
Excursionist
17 0 2

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

0 Likes
oreoorbitz
Shopify Partner
132 14 78

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
DariusWS
Excursionist
9 0 5

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.

0 Likes
oreoorbitz
Shopify Partner
132 14 78

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