Tackling loading time! Limit number of products on store page?

Dear Forum!

This topic has come up a few times already, but unfortunately I'm still on a quest for the right solution. Hope you can help!

I've been trying to effectively reduce the page size of https://www.kaderdesign.com/available by following these steps provided by Squarespace. When running the page through Pingdom, I've learned the page is almost 8MB (heavily exceeding the advised 5MB limit) with a unattractive load time of almost 5 seconds. After cleaning up the images and reducing their size, I'm still left with a slow loading page..

The only other thing I can think of now is limiting the 7.1 built-in 'infinite scroll' with a cap on the number of products per page and a next/previous button at the bottom so that the page can be divided into smaller, faster loading chunks. It seems like there is no custom code for this. However, I've found another store page built with Squarespace that in fact does seem to demonstrate the method successfully: https://studioluxe.co/shop. Can anyone help with adjusting their code to work for my site?

Any other tips are very welcome too of course!!! Would be ever grateful for your helpful insights. Perhaps I'm better off rebuilding the store structure? Maybe adding a filter plug-in can help? I'm still something of a rookie compared to most of you so eager to learn.

Thanks in advance and warm greetings from Amsterdam,
Celina

You can use Filter Plugin to limit number of products on store page, plugin will allow you some options

• add pagination (1, 2, 3...) to bottom of page
• add load more button (click on it >> load more products under current product)

Link plugin here (affiliate link) - or this link  (non-affiliate link)

If you need an example, you can duplicate the site & add me, I can create a quick example for you, so you can test loading time

Dear Tuanphan,

Thanks for your reply and help. I've indeed had my eyes on this Filter Plugin, so your reference is certainly encouraging.

If it's easy for you to make a quick example that would be soooo great! Would love to suggest this to my client and having something to show would definitely be helpful. I've now duplicated the site (quillfish-tan-2896.squarespace.com). Should I add you by email or in another way?

Thanks a lot, very grateful for your help!

On 10/24/2023 at 2:12 PM, Celina said:

The only other thing I can think of now is limiting the 7.1 built-in 'infinite scroll' with a cap on the number of products per page and a next/previous button at the bottom so that the page can be divided into smaller, faster loading chunks.

Hi Celina

Here are some things worth considering:

• The hover effect is currently enabled, where an alternative image is shown when you hover over a product. This will require twice as many images (and twice as much data) to be loaded.
• Some of your product images are animated GIFs so are up to 3MB each, as opposed to the typical image size of around 75KB.
• Although the PLP will load the first 200 products, it shouldn't load the images until they are needed - it should lazy load them in response to scrolling. This can be particularly helpful on mobile, where only one image is initially visible. This should counter the potential speed issues of showing many products on a single page.
• Squarespace 7.1 will download around 1.3MB of scripts for an empty page and around 2MB of scripts for a Product List Page (PLP). That's before any products or images are downloaded. 
• "Real world" testing may show different results than speed tests. It's worth testing the site on different devices and on different networks to see what actual performance looks like. If a site has been viewed before, or another Squarespace 7.1 site has been viewed, the Squarespace scripts should be cached and won't need to load again. With cache disabled, it loads in 1.3s for me on mobile (transferring 6.9MB).

Did this help? Please give feedback by clicking an icon below  ⬇️

Hi Paul,

Thank you so much! Your insights and feedback are truly helpful. Much appreciated, I'm very grateful. This definitely gives me a few more options to get the basics right. Will get straight to it 🙂

you can also try minifying any custom code.

Thanks 2Eyeballs. Good one! Found that tip just recently and applied it already. Looks like slowly (no pun intended) things are starting to speed up 🙂