Hi @reyrr, Since I don't have the link to your main page, so based on your captured images, I think it's lazy loading. Basically, is as you scroll down your page, the images will load when needed to reduce page weight.
We have a guide on how to improve your Shopify store speed, you can read it if you're interested.
It is a bad way of lazy loading images.
I don't recommend lazy loading "above the fold" images. You want to show this content as soon as possible and most of the time it is better to actually speed the image loading using the rel="preload" browser hint.
@Mircea_Piturca Thanks for the answer. For someone with limited experiance. What exactly do I have to do to make it work again?
Can I post my coding and you help me from there or is it something simple? Wasn't like this before. Just started.
@reyrr My advice would be to have a developer look into it. On the job board, there are many good devs that can help with this issue.
My way of doing this would be:
Use the <picture> element to server responsive images at different breakpoints
Use the preload hint to "tell" the browser that this image is important and you want to have it loaded fast.
As far as I can tell by looking at your site (https://reyrr.se/), the lazy-loading implementation has not been done right. The loading of key requests and above-the-fold content is not prioritized which is resulting in a lot of JS getting loaded before above-the-fold content becomes visible. It is not a good idea to not lazyload above-the-fold images, lazy-loading should only be applied to media that appears below-the-fold.
If you’d like further assistance or a more comprehensive explanation, then you can get in touch with us (https://w3speedup.com/contact-us/), and we’ll be happy to help you out!
On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...By Arno Nov 27, 2023
You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...By Skye Nov 8, 2023