Over the past several months, I've worked to build a fairly customized site for a client that makes heavy use of sections across a number of different product, page, and collection templates, but the performance of Shopify's theme editor has suffered.
Loading any page in the theme customizer tool has gotten increasingly slower with each new page template and is now at the point where loading any page takes 30-60 seconds. Obviously not a great experience for the end user.
My question is this: how can this be optimized? It seems as though the theme customizer cannot support such a large amount of custom sections, and Shopify offers no help because of the customizations.
Since all of the data is stored in a single settings_data.json file, I'm a little worried that there may not be an easy way to resolve this and it seems the problem lies within Shopify's tool and is out of our control.
Can anyone here offer any insights or experiences that might help to improve the performance of the customizer?
Have you had any luck resolving the performance issues you and your client have been observing?
If not, have you had a chance to assess the cause of the performance issues? While it may be perfectly possible and plausible to assume that many sections being the only change are automatically the cause of the performance degradation, it could also be just a single rogue script in one of the sections. The best course of action would be to carefully profile the theme while running in the customizer to observe extraneous redrawing, memory leaks and other common culprits.
Maybe it is, as you say, a matter of having too many sections and while they're performant on their own, they slow down the customizer due to all the configuration code from the settings_data.json and such. In that case, I'd measure again and drill down in to what takes long - is it a particular function, for instance you may find that it takes long to parse those settings and they get re-parsed with every reload which in turn happens with every settings change in the customizer.
There are solutions for that as always, but you must first know what you're looking for. It's difficult to give you any more specific advice given you're dealing with a very bespoke theme, but I hope the little advice I could offer helps you out and doesn't come too late.
Thanks for the response.
I did some quick performance audits using Chrome's built-in tools and it is definitely Shopify's theme editor getting overwhelmed in this case. The initial response from the server for this theme in the theme customizer is nearly 14 seconds.
Once the initial page download arrives, it then takes "admin/admin_jquery....js" almost 55 seconds to execute and another 10 seconds for "theme_editor/index...js" to do its thing.
Seeing this, do you have any suggestions on how I might be able to optimize this? It seems like maybe the only solution if Shopify will not refactor their code to execute faster is to reduce the number of custom templates we're using for this project.
The admin assets will not be loaded once you log off or on the markup that the regular users will see.
One thing that you definitely need to look in is the +80K nodelist!!!
Do you have a live link?
Really curious on what is there.
Node size in production isn't an issue, only in theme customizer. The same page loads with 852 nodes. Here's the link to the live site in case you want to check it out - https://www.backyardchickencoops.com.au/