Jump to content

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

Recommended Posts

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

Link to comment

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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!

Link to comment
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  ⬇️

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.