Why are my homepage images loading incorrectly?

[reyrr]

Hey, 

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

           

Thanks for the help

[PageFly-Victor]

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]

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

It's when you come into the landing page 😕

@PageFly-Victor 

[Mircea_Piturca]

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.

[reyrr]

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

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

[asjain]

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!