Website images slow to load both mobile and desktop

Technical Q&A
1

hello I am wanting to get someone to assist me in increasing the speed of my website, specifically the image loading time - I did use an image app to try to help reduce sizes but still find if you load a collection page for example the images take some time to load so you will see a white square for a moment. Please let me know if you can assist this issue.

Thanks

website - www.acornkids.com.au

1 Like
2

Hi @Fiona_Savaris ,

Did you try to clear your browser cache and check again? Because I have reviewed and seen your site quite fast.

3

Thanks @Dan-From-Ryviu I have just done this and I am still seeing that delay in images loading on my end? But I guess if its on my end then its not a issue for my customers so that for letting me know it looks ok for you!

4

Hi @Fiona_Savaris ,

The reason you see a white square is that your images are lazily loaded.

Lazy loading is a technique that consists of delaying the initialization of an object until it is needed. This technique actually improves your page speed and performance. Therefore, there’s no need to worry about it.

Here’s how lazy loading works:

Let’s consider a collection page for a Shopify store, where we can display up to 50 products per page. This alone is at least 50 images, without even counting the logo or a hero image in the header. This makes for a lot of content, which will further increase the loading time and size of the page.

By default, all images on the pages will be loaded at their full size, regardless of if the user is looking at only the top of the website. This further complicates the loading state as, sometimes, you don’t need all the images to load as they won’t be seen by the user.

Let’s say that you want to only see the first 10 products before navigating to the product page. If the webpage loads each of the 50 products, this will take a considerable amount of time—time which is wasted as the user was only interested in looking at the first few products.

In short, lazy loading images on Shopify is practically crucial. Every store has numerous product pages, which are usually very heavy on images. If not lazy-loaded, they will slow down the website, and rankings, conversion rates, as well as general performance will inevitably suffer.

To know more about lazy loading, you can refer to this blog.

I hope my answer helps.

5

Ah ok thanks that does make sense and I wont worry about it any further! thanks for your help