Theme Customizer Performance

Adam_Weis
Shopify Partner
23 0 2

Hello,

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?

KarlOffenberger
Shopify Partner
1867 182 777

Hi Adam,

 

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.

 

Best wishes!

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
0 Likes
Adam_Weis
Shopify Partner
23 0 2

Hi Karl,

 

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. 

 

Screen Shot 2019-01-21 at 9.26.54 AM.png

 

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. 

0 Likes
Mircea_Piturca
Shopify Partner
1459 39 284

Hey Adam,

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.

Thanks

Finally—Add variant descriptions to your products
KarlOffenberger
Shopify Partner
1867 182 777

Yep, like @Mircea_Piturca said, that node size is ginormous and most likely the cause.

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
0 Likes
Mircea_Piturca
Shopify Partner
1459 39 284

@KarlOffenberger exactly, probably some intense Liquid loops in there.

The TTFB must be really high

Finally—Add variant descriptions to your products
0 Likes
Mircea_Piturca
Shopify Partner
1459 39 284

Actually the JS execution time is also very high, the DOM nodes are created in JS blocking everything until the end of the execution

Finally—Add variant descriptions to your products
0 Likes
Adam_Weis
Shopify Partner
23 0 2

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/

0 Likes
Adam_Weis
Shopify Partner
23 0 2

The homepage template (the initial screenshot) does have some loops, but nothing that should result in that drastic of a slowdown, IMO. Unfortunately, testing on the 404 template shows similar performance results in the theme customizer.

 

Screen Shot 2019-01-21 at 10.34.12 AM.png

 

 

 

0 Likes
Adam_Weis
Shopify Partner
23 0 2

Oh no, it looks like theme customizer loads up every single template and all of their sections into the customizer tool. No wonder the page has over 80k nodes and takes a minute to load.

Screen Shot 2019-01-21 at 10.40.31 AM.png

 

0 Likes