Why are images on the main page loading incorrectly in Shopify?

reyrr
Excursionist
38 0 10

Hey, 

Why are my images on the main page loading like this and what is it called? 

 

 

 nedladdning (1).jfif   nedladdning (2).jfif    nedladdning (3).jfif   nedladdning (4).jfif

Thanks for the help

Replies 6 (6)

PageFly-Victor
Shopify Partner
7865 1785 3050

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.

But I think if you want to check your store speed carefully, you can check on Google PageSpeed Insights for the site speed score. It will show you what you need to improve for faster loading speed (maybe resizing your images, reduce unnecessary CSS or Javascript, etc.)

We have a guide on how to improve your Shopify store speed, you can read it if you're interested.

 

reyrr
Excursionist
38 0 10

Here is my URL https://reyrr.se/

It's when you come into the landing page 😕

@PageFly-Victor 

Mircea_Piturca
Shopify Partner
1547 44 345

It is a bad way of lazy loading images.

Your hero image will be visible only after JavaScript kicks in. This can take time.

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.

Finally—Add variant descriptions to your products
reyrr
Excursionist
38 0 10

@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. 

Mircea_Piturca
Shopify Partner
1547 44 345

@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.

Finally—Add variant descriptions to your products

asjain
Excursionist
38 1 1

Hi @reyrr 

 

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!

 

 

Founder of W3 SpeedUp (Shopify optimization experts, theme customization, Can Speedup all types of CMS and Framework).
E-mail: support@w3speedup.com
Skype: support@w3speedup.com