[wp-trac] [WordPress Trac] #33901: Defer embedding widget controls to improve DOM performance

[WordPress Trac]

#33901: Defer embedding widget controls to improve DOM performance
-------------------------+-----------------
 Reporter:  westonruter  |      Owner:
     Type:  enhancement  |     Status:  new
 Priority:  normal       |  Milestone:  4.4
Component:  Customize    |    Version:
 Severity:  normal       |   Keywords:
  Focuses:  performance  |
-------------------------+-----------------
 In working on a site with a lot of widgets in the Customizer, where these
 widgets are heavy with lots of inputs, I've found that the Customizer
 locks up at DOM ready for quite a while as it tries to embed all of the
 widget controls into the DOM. In a test where I have 100 widgets that each
 have ~300 inputs each, the Customizer took 40 seconds to finish rendering
 the page (to allow the user to click around) even it only took PHP half a
 second to send the HTML for the page.

 For the Menu Customizer feature merged in 4.3, there are a lot of nav menu
 item controls that get added to the Customizer and this introduced a very
 noticeable performance hit. This was addressed by only embedding the
 wrapper `li` element when the Customizer first loaded, and then to embed
 the rest of the nav menu item control with all of its UI once the
 containing menu section was expanded.

 We can take this same approach for widgets. First we can defer the
 embedding of the widget control accordion until the sidebar section is
 expanded. But then we can also defer the embedding of the actual contents
 of the widget form until the control itself is expanded.

 I have developed a proof of concept for this in a feature plugin:
 https://github.com/xwp/wp-customize-widgets-plus/pull/32

 With the feature plugin active, what used to take 40 seconds to render the
 page with 100 widgets containing 300 inputs each, it now takes only 3
 seconds and there is no perceived browser lockup in the UI.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/33901>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform