Slow nav-menus.php with X Theme enabled

[KMCTB]

Searching the Support Forum, I see a lot of other customers have had this same problem for over a year now but haven’t found a definitive solution yet.

My main site menu has 58 items. I am using XVersion: 6.4.6 and ProVersion: 2.5.5.

The Problem:
Using Google Chrome, nav-menus.php takes significantly longer to load, and mouse events on the page take several seconds to fire. This problem is consistently reproducible on multiple desktop computers. For machines more than a few years old, this page appears to hang indefinitely.

The following actions did not fix the problem:

• Increased PHP memory limit to 512 M as per this post.
• Disabled all plugins (Cornerstone was already disabled)

Observations and Investigation:
With X Pro Theme enabled, the nav-menus.php tab requires almost 700 MB, about 10x more than other pages in the WP control panel. Some examples:
Plugins: 51 MB
Pages: 63 MB
Manage Themes: 53 MB

When I changed the active theme to something other than X or Pro, the problem was immediately fixed. As soon as I changed my theme back to X (not even Pro) the problem reappeared.

I noticed that, curiously, when using Microsoft Edge the delays are approximately 1/3 to 1/2 as long, although still very cumbersome to use. This leads me to suspect a JavaScript bottleneck. Sure enough, Chrome’s Task Manager shows CPU over 100% for that tab when it loads or tries to respond to mouse events. Using Chrome’s Developer Tools Profiler on nav-menus.php, the page takes 45 seconds to fully load. 56% of this time (22.6 seconds) the browser spent in DOM GC, and 11% of the time (4.5 seconds) it was performing Major GC. Profiling a mouse click on a menu item’s dropdown to open it revealed about 36 seconds are spent processing the mouseUp Event in onloadwff.js (at or near LPSiteNotification.A(e) function).

Digging deeper, I found x-menus.js (v 2.5.5), set some breakpoints on the pretty-formatted version and reloaded the page. The ('select[class*="anchor_graphic_menu_item_display"]').each(...) and n.on("change", ...) lines are being invoked for every menu item being loaded. It looks like this code is registering at least 8 new change handlers for each item (the select[class...] returns an iterable of size 8), and each loop adds at least two new Function objects onto the memory heap. Maybe this is irrelevant, maybe not: I didn’t analyze the function closures to see how big they are.

I took a memory heap dump and can share that if it helps. I can also share the page load profile.

There’s clearly some JavaScript from the basic X Theme that hooks into nav-menus.php and is causing this issue. I really, really love the expressiveness and flexibility of this theme, but since I need to update my main menu on a regular basis I’m beginning to question whether it’s worth the pain. Any help is greatly appreciated.

[ruenel]

Hello @KMCTB,

Thank you for the very detailed post information. When you visit the nav-menus.php and if it is loading the page very slowly, this could mean that your PHP Max Input Vars is almost exhausted. Please check out this link to know how you can increase it:

• https://www.a2hosting.com/kb/developer-corner/php/using-php.ini-directives/php-max-input-vars-directive

Hope this helps. Kindly let us know.

[KMCTB]

I changed max_input_vars to 6000 but there is no change. This doesn’t appear to be a server-side problem but rather an issue with JavaScript performance on the client. Changing PHP settings on the server won’t help in this case because processing is CPU-bound and is not waiting on a response from the server.

[rad]

Hi @KMCTB,

Yes, the performance issue with Admin > Appearance > Menus is bound to happen if it’s related to javascript when it gets longer while the feature is increasing.

Our theme’s integration with that are these

And javascript manipulate those, Wordpress built-in javascript. The more feature and inputs, the more needed time for the javascript to process. Then multiply it with the number of your menu items. Those features alone aren’t enough to freeze it, but by the sheer amount of menu items, which, unfortunately, there is no way for the theme to control Wordpress’ own javascript.

Then it will get more serious if you also installed SuperFly and Ubermenu, it adds more javascript and features then multiply it too with menu counts. It can happen on any theme, it’s just that what you switched to doesn’t have enough features to trigger it.

And there is a bit confusing about the information you have posted, you have provided the memory in use within the server but then you also said it’s javascript related (device CPU). So perhaps multiple issue is happening, may I know which plugins are active when this happen?

Thanks!

[KMCTB]

Thanks for the explanation and screenshot. It certainly clears up my confusion, although it doesn’t solve my problem. Is there anything I can do to mitigate this?

The memory values (51 MB, 63 MB, 700 MB) in my original message are from the browser (Chrome) on the client side.

Update: disabling one of my Chrome browser extensions significantly improved the responsiveness of mouse events (e.g. expand/contract menu items), although the page load time is still slower. Maybe this will be of some help to others with the same problem.

[rad]

Hi EPC,

Chrome user definitely use large amount of memory, it’s to make itself faster. https://lifehacker.com/why-chrome-uses-so-much-freaking-ram-1702537477. Limiting or lowering its allowed RAM will result to slower performance, in fact, 700mb is still low. Mine is 2.5gb usage out of 8gb, so I assume your actual RAM is low which result to only 700mb. But regardless, it shouldn’t affect javascript performance that much, it only means it can process or execute more programs and codes at the same time, the greater the RAM. But that capability can be bottled-neck by CPU, and it’s the CPU that greatly affects javascript performance.

With that, anything that within the browser or user device can’t be controlled through the theme. Browser developers will not allow any code author to fully control your browser due to security.

Have you tried creating a new menu with less items to see if something improved? It sounds like it’s not a loading issue but rendering issue due to device performance (CPU related). Please also try closing all other programs on your device when testing.

Thanks!