[wp-trac] [WordPress Trac] #25698: Speed up slow Menus Panel for menus with many items

[WordPress Trac]

#25698: Speed up slow Menus Panel for menus with many items
-------------------------+-----------------------------
 Reporter:  sevenspark   |      Owner:
     Type:  enhancement  |     Status:  new
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  Menus        |    Version:
 Severity:  normal       |   Keywords:
-------------------------+-----------------------------
 '''Overview'''

 When the [https://core.trac.wordpress.org/ticket/14045 new accessibility
 enhancements]
 ([https://github.com/WordPress/WordPress/commit/9bd740f6165f26ee44f8bd19a3a8a565c640742b
 relevant commit]) were added to the Appearance > Menus Panel in WordPress
 3.6, it added a lot of extra javascript processing per menu item.  For
 large menus (say, > 50 menu items), this creates a bottleneck and slows
 down both the menu panel load time and the ability to manage the menu,
 resulting in a poor user experience - for a menu with 100 items, the lag
 is around 6 seconds in my tests (and in extreme cases, users have
 experienced browser crashing due to not being able to handle the
 javascript load).  Basically, the processing time for these accessibility
 enhancements increases linearly with each new menu item, slowing things
 down considerably once there are many menu items in play.

 '''Details & Demonstration'''

 I've written up a detailed article on the issue here:
 [http://sevenspark.com/wordpress/speeding-up-the-appearance-menus-screen-
 in-wordpress-3-6 Speeding up the Appearance > Menus Screen in WordPress
 3.6 ]

 I've also created a screencast demonstrating the issue:
 [http://www.youtube.com/watch?v=P1wOPN5zJz Video] - which shows and times
 the lag, as well as demonstrates the performance improvement using my
 "lazy" solution.

 (Please note I also tested in WordPress 3.7, and the same issue/solution
 applies.)

 '''Issue Source Synopsis'''

 After doing some troubleshooting, I believe that the issue occurs in wp-
 admin/js/nav-menu.js, in the function refreshAdvancedAccessibility().  The
 problem is that both on page load and any time a change is made, the
 entire set of menu items needs to be reprocessed, causing the page to
 become unresponsive for several seconds until the processing completes.
 (Please see linked article and video above for more detailed explanation)

 '''Potential Solution (including available plugin)'''

 I've outlined my solution in the article I linked to above.  Instead of
 processing every menu item every time, this solution takes a "lazy"
 approach and only processes menu items when the item is about to be
 interacted with (triggered on hover, focus, or touch).  This greatly
 reduces the processing load and allows the page to become immediately
 responsive, improving user experience.  The lag when moving menu items is
 also eliminated.  I am not an accessibility expert, but I believe
 triggering the processing on focus will ensure that the accessibility
 features are present for those interacting with the site without a pointer
 device.

 I've also written and released a plugin - [http://wordpress.org/plugins
 /faster-appearance-menus/ Faster Appearance - Menus] (also on
 [https://github.com/sevenspark/faster-appearance-menus github]) which
 implements this solution by replacing the default nav-menu.js with my
 modified version.  The plugin was released about 2 months ago, and has
 received positive feedback from many users who were encountering slow
 Menus Panel speeds (as someone who writes plugins dealing with the
 creation and management of menus with many items, I've encountered this
 issue with a lot of customers).  That being said, I'm sure it could be
 improved and needs more stringent testing and code review.


 Thanks!  This is my first ever submission to trac, so I do apologize if I
 have done anything wrong here.

--
Ticket URL: <http://core.trac.wordpress.org/ticket/25698>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software