Performance issues when placing widgets (drag & drop)

[MH Themes]

We've noticed performance issues since WordPress 4.2 with drag & drop of widgets in the dashboard under "Appearance => Widgets". This happens when there is a large number of widget areas. In WP 4.2 the performance lags were noticable, but since the nightly builds (especially WP 4.3 beta 3) placing widgets with drag & drop really has become a challenge.

The lags happen especially when moving a widget from the "Available widgets" section into a widget area. Changing the position of a widget within a widget area doesn't cause issues. Also moving widgets from the "Inactive Widgets" section doesn't cause that much lags like when adding new widgets.

This mainly seems to happen in Firefox, but it's also noticable in all other modern browsers and doesn't make much difference.

A staff member has tested it on several environments and with different themes (our themes and 3rd party) and whenever a theme has a large number of widget areas, the issue occurs. This is an additional note from the staff member who tested it:

This happens only on the nightly build, when dragging a new widget into a position, it increases Firefox's CPU usage by about 30% for 2 seconds at most, this is even enough to increase my PC fans via PWM (speed based on power useage) which is pretty odd for a browser task like this as the only things that use enough power to increase fan speeds are games and dreamweaver/photoshop with multiple files/tabs, now it's happening only briefly when I drag a widget!

You can reproduce it for example when adding a large number of widget areas to Twenty Fifteen and then place some widgets into the widget areas (e.g. 2 widgets / sidebar). When moving new widgets into a widget area, there is an extreme lag and the lags also occur when moving widgets from one widget area to another.

Again, this is a new issue which didn't happen before WP 4.2. In WP 4.2 it's noticable but in the nightly builds it has become a major issue as it makes drag & drop of widgets almost impossible and when this goes live, the only chance we have is recommending to use the customizer instead.

To easily repoduce it we have prepared some widget areas you can add to Twenty Fifteen or any other theme:

function twentyfifteen_widgets_test() {
	register_sidebar(array('name' => sprintf(_x('Sidebar %d - Global Widget Area', 'widget area name', 'twentyfifteen'), 1), 'id' => 'tf-sidebar-1', 'description' => __('Sidebar widget area on posts, pages and archives.', 'twentyfifteen'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="sb-widget-title">', 'after_title' => '</h4>'));
	register_sidebar(array('name' => sprintf(_x('Sidebar %d - Global Widget Area', 'widget area name', 'twentyfifteen'), 2), 'id' => 'tf-sidebar-2', 'description' => __('Sidebar widget area on posts, pages and archives.', 'twentyfifteen'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="sb-widget-title">', 'after_title' => '</h4>'));
	register_sidebar(array('name' => sprintf(_x('Sidebar %d - Global Widget Area', 'widget area name', 'twentyfifteen'), 3), 'id' => 'tf-sidebar-3', 'description' => __('Sidebar widget area on posts, pages and archives.', 'twentyfifteen'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="sb-widget-title">', 'after_title' => '</h4>'));
	register_sidebar(array('name' => sprintf(_x('Sidebar %d - Global Widget Area', 'widget area name', 'twentyfifteen'), 4), 'id' => 'tf-sidebar-4', 'description' => __('Sidebar widget area on posts, pages and archives.', 'twentyfifteen'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="sb-widget-title">', 'after_title' => '</h4>'));
	register_sidebar(array('name' => sprintf(_x('Sidebar %d - Global Widget Area', 'widget area name', 'twentyfifteen'), 5), 'id' => 'tf-sidebar-5', 'description' => __('Sidebar widget area on posts, pages and archives.', 'twentyfifteen'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="sb-widget-title">', 'after_title' => '</h4>'));
	register_sidebar(array('name' => sprintf(_x('Sidebar %d - Global Widget Area', 'widget area name', 'twentyfifteen'), 6), 'id' => 'tf-sidebar-6', 'description' => __('Sidebar widget area on posts, pages and archives.', 'twentyfifteen'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="sb-widget-title">', 'after_title' => '</h4>'));
	register_sidebar(array('name' => sprintf(_x('Sidebar %d - Global Widget Area', 'widget area name', 'twentyfifteen'), 7), 'id' => 'tf-sidebar-7', 'description' => __('Sidebar widget area on posts, pages and archives.', 'twentyfifteen'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="sb-widget-title">', 'after_title' => '</h4>'));
	register_sidebar(array('name' => sprintf(_x('Sidebar %d - Global Widget Area', 'widget area name', 'twentyfifteen'), 8), 'id' => 'tf-sidebar-8', 'description' => __('Sidebar widget area on posts, pages and archives.', 'twentyfifteen'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="sb-widget-title">', 'after_title' => '</h4>'));
	register_sidebar(array('name' => sprintf(_x('Sidebar %d - Global Widget Area', 'widget area name', 'twentyfifteen'), 9), 'id' => 'tf-sidebar-9', 'description' => __('Sidebar widget area on posts, pages and archives.', 'twentyfifteen'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="sb-widget-title">', 'after_title' => '</h4>'));
	register_sidebar(array('name' => sprintf(_x('Sidebar %d - Global Widget Area', 'widget area name', 'twentyfifteen'), 10), 'id' => 'tf-sidebar-10', 'description' => __('Sidebar widget area on posts, pages and archives.', 'twentyfifteen'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="sb-widget-title">', 'after_title' => '</h4>'));
	register_sidebar(array('name' => sprintf(_x('Sidebar %d - Global Widget Area', 'widget area name', 'twentyfifteen'), 11), 'id' => 'tf-sidebar-11', 'description' => __('Sidebar widget area on posts, pages and archives.', 'twentyfifteen'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="sb-widget-title">', 'after_title' => '</h4>'));
	register_sidebar(array('name' => sprintf(_x('Sidebar %d - Global Widget Area', 'widget area name', 'twentyfifteen'), 12), 'id' => 'tf-sidebar-12', 'description' => __('Sidebar widget area on posts, pages and archives.', 'twentyfifteen'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="sb-widget-title">', 'after_title' => '</h4>'));
	register_sidebar(array('name' => sprintf(_x('Sidebar %d - Global Widget Area', 'widget area name', 'twentyfifteen'), 13), 'id' => 'tf-sidebar-13', 'description' => __('Sidebar widget area on posts, pages and archives.', 'twentyfifteen'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="sb-widget-title">', 'after_title' => '</h4>'));
	register_sidebar(array('name' => sprintf(_x('Sidebar %d - Global Widget Area', 'widget area name', 'twentyfifteen'), 14), 'id' => 'tf-sidebar-14', 'description' => __('Sidebar widget area on posts, pages and archives.', 'twentyfifteen'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="sb-widget-title">', 'after_title' => '</h4>'));
	register_sidebar(array('name' => sprintf(_x('Sidebar %d - Global Widget Area', 'widget area name', 'twentyfifteen'), 15), 'id' => 'tf-sidebar-15', 'description' => __('Sidebar widget area on posts, pages and archives.', 'twentyfifteen'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="sb-widget-title">', 'after_title' => '</h4>'));
	register_sidebar(array('name' => sprintf(_x('Sidebar %d - Global Widget Area', 'widget area name', 'twentyfifteen'), 16), 'id' => 'tf-sidebar-16', 'description' => __('Sidebar widget area on posts, pages and archives.', 'twentyfifteen'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="sb-widget-title">', 'after_title' => '</h4>'));
	register_sidebar(array('name' => sprintf(_x('Sidebar %d - Global Widget Area', 'widget area name', 'twentyfifteen'), 17), 'id' => 'tf-sidebar-17', 'description' => __('Sidebar widget area on posts, pages and archives.', 'twentyfifteen'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="sb-widget-title">', 'after_title' => '</h4>'));
	register_sidebar(array('name' => sprintf(_x('Sidebar %d - Global Widget Area', 'widget area name', 'twentyfifteen'), 18), 'id' => 'tf-sidebar-18', 'description' => __('Sidebar widget area on posts, pages and archives.', 'twentyfifteen'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="sb-widget-title">', 'after_title' => '</h4>'));
	register_sidebar(array('name' => sprintf(_x('Sidebar %d - Global Widget Area', 'widget area name', 'twentyfifteen'), 19), 'id' => 'tf-sidebar-19', 'description' => __('Sidebar widget area on posts, pages and archives.', 'twentyfifteen'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="sb-widget-title">', 'after_title' => '</h4>'));
	register_sidebar(array('name' => sprintf(_x('Sidebar %d - Global Widget Area', 'widget area name', 'twentyfifteen'), 20), 'id' => 'tf-sidebar-20', 'description' => __('Sidebar widget area on posts, pages and archives.', 'twentyfifteen'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="sb-widget-title">', 'after_title' => '</h4>'));
	register_sidebar(array('name' => sprintf(_x('Sidebar %d - Global Widget Area', 'widget area name', 'twentyfifteen'), 21), 'id' => 'tf-sidebar-21', 'description' => __('Sidebar widget area on posts, pages and archives.', 'twentyfifteen'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="sb-widget-title">', 'after_title' => '</h4>'));
	register_sidebar(array('name' => sprintf(_x('Sidebar %d - Global Widget Area', 'widget area name', 'twentyfifteen'), 22), 'id' => 'tf-sidebar-22', 'description' => __('Sidebar widget area on posts, pages and archives.', 'twentyfifteen'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="sb-widget-title">', 'after_title' => '</h4>'));
	register_sidebar(array('name' => sprintf(_x('Sidebar %d - Global Widget Area', 'widget area name', 'twentyfifteen'), 23), 'id' => 'tf-sidebar-23', 'description' => __('Sidebar widget area on posts, pages and archives.', 'twentyfifteen'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="sb-widget-title">', 'after_title' => '</h4>'));
	register_sidebar(array('name' => sprintf(_x('Sidebar %d - Global Widget Area', 'widget area name', 'twentyfifteen'), 24), 'id' => 'tf-sidebar-24', 'description' => __('Sidebar widget area on posts, pages and archives.', 'twentyfifteen'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="sb-widget-title">', 'after_title' => '</h4>'));
	register_sidebar(array('name' => sprintf(_x('Sidebar %d - Global Widget Area', 'widget area name', 'twentyfifteen'), 25), 'id' => 'tf-sidebar-25', 'description' => __('Sidebar widget area on posts, pages and archives.', 'twentyfifteen'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="sb-widget-title">', 'after_title' => '</h4>'));
	register_sidebar(array('name' => sprintf(_x('Sidebar %d - Global Widget Area', 'widget area name', 'twentyfifteen'), 26), 'id' => 'tf-sidebar-26', 'description' => __('Sidebar widget area on posts, pages and archives.', 'twentyfifteen'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="sb-widget-title">', 'after_title' => '</h4>'));
	register_sidebar(array('name' => sprintf(_x('Sidebar %d - Global Widget Area', 'widget area name', 'twentyfifteen'), 27), 'id' => 'tf-sidebar-27', 'description' => __('Sidebar widget area on posts, pages and archives.', 'twentyfifteen'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="sb-widget-title">', 'after_title' => '</h4>'));
	register_sidebar(array('name' => sprintf(_x('Sidebar %d - Global Widget Area', 'widget area name', 'twentyfifteen'), 28), 'id' => 'tf-sidebar-28', 'description' => __('Sidebar widget area on posts, pages and archives.', 'twentyfifteen'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="sb-widget-title">', 'after_title' => '</h4>'));
	register_sidebar(array('name' => sprintf(_x('Sidebar %d - Global Widget Area', 'widget area name', 'twentyfifteen'), 29), 'id' => 'tf-sidebar-29', 'description' => __('Sidebar widget area on posts, pages and archives.', 'twentyfifteen'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="sb-widget-title">', 'after_title' => '</h4>'));
	register_sidebar(array('name' => sprintf(_x('Sidebar %d - Global Widget Area', 'widget area name', 'twentyfifteen'), 30), 'id' => 'tf-sidebar-30', 'description' => __('Sidebar widget area on posts, pages and archives.', 'twentyfifteen'), 'before_widget' => '<div class="sb-widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4 class="sb-widget-title">', 'after_title' => '</h4>'));
}
add_action('widgets_init', 'twentyfifteen_widgets_test');

[ocean90]

Related: #13524

Thanks for the report. I could reproduce the issue in Chrome with only 4 or 5 sidebars too. Reverting [33088] makes the the screen usable again.

\cc @polevaultweb

[chriscct7]

I think we should work on fixing the Javascript involved, given the feature itself is quite nice when you have many closed sidebars

[obenland]

Replying to chriscct7:

I think we should work on fixing the Javascript involved, given the feature itself is quite nice when you have many closed sidebars

When you say we, do you mean you?

[chriscct7]

Replying to obenland:

Replying to chriscct7:

I think we should work on fixing the Javascript involved, given the feature itself is quite nice when you have many closed sidebars

When you say we, do you mean you?

I was referring to me, polevault( if he has bandwidth, and ocean90 (if he wanted to work on it)

[chriscct7]

Ok the bug is caused by the event of going off a hover on a sidebar and onto a new one.

[chriscct7]

Concur with Ocean, reverting https://core.trac.wordpress.org/changeset/33088 fixes it.

[chriscct7]

Specifically the issue was this change on [33088]: https://core.trac.wordpress.org/ticket/13524#comment:44

[chriscct7]

From https://core.trac.wordpress.org/ticket/13524#comment:44

The only small change there is to do sidebars.sortable( 'refresh' ); instead of $( this ).sortable( 'refresh' ); so when dragging over a closed sidebar to another closed sidebar, the second one is always refreshed too.

Is that really necessary though? Couldn't the refresh be outside the has class "closed" so it fires on any over?

[chriscct7]

Moves refresh outside of the class check and reverts the change from this to all sidebars done in [33088]

[azaozz]

In 33354:

Widgets screen: while dragging a widget over a closed sidebar refresh only the widgets in the current sidebar instead of all widgets in all sidebars.
Props chriscct7. Fixes #33015.