Something Went Wrong (There was a problem loading this website)

[BenjaminADK]

We are having issues with this page - https://la-design-concepts.myshopify.com/collections/get-inspired

If we get it to load successfully it works well for a day or so, but then returns to this error message.

The page is displaying Shoppable images, and since it has no limit on the number of images/products - it is currently fetching hundreds of products. The images themselves are lazy loaded, so I don't see think that is the issue - I am thinking it is just the amount of data being requested that is causing the issues. This is not an external app - this is code we came up with.

I am wondering if there is anything that can be done within a liquid based page like this that can improve the performance - its okay if it takes a couple seconds to load, as long as it loads. Or, are we better off building some sort of React (or similar) based app and embedding/inserting it here.

Happy to answer specific questions, supply code, if needed. But mostly trying to understand what the limitations are of Shopify liquid, as I am fairly new to working with this platform.

Thank you.

[tim]

Would be nice to see the code.

I guess you have some long nested loops and liquid renderer hits the timeout.

Historically, shopify answer to this was pagination -- you could not access more repeating objects (products, articles, etc) then your pagination size which was up to 50 initially, but then, I believe the limit was raised.

With this came infinite scrolling solutions which loaded these pages in background and added to the grid, thus saving processing power for shopify and memory in browser for visitors.

Do not forget that even though images are lazy-loaded, long render time server-side impacts TTFB (and therefore literally all other PageSpeed metrics). 

Huge DOM takes long to process, also impacting core vitals and can be difficult on lower spec devices.

https://shopify.dev/docs/storefronts/themes/tools/theme-inspector/using-the-theme-inspector can generally be a helpful tool in identifying what part of your liquid  code takes most time to render.