WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#33015 closed defect (bug) (fixed)

Performance issues when placing widgets (drag & drop)

Reported by: MH Themes Owned by: azaozz
Milestone: 4.3 Priority: high
Severity: major Version: 4.3
Component: Widgets Keywords: dev-feedback has-patch
Focuses: javascript, administration, performance Cc:

Description

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');

Attachments (1)

33015.1.diff (445 bytes) - added by chriscct7 5 years ago.
Moves refresh outside of the class check and reverts the change from this to all sidebars done in [33088]

Download all attachments as: .zip

Change History (17)

#1 @MH Themes
5 years ago

  • Component changed from General to Administration

#2 @MH Themes
5 years ago

  • Severity changed from normal to major

#3 @MH Themes
5 years ago

  • Severity changed from major to normal

This ticket was mentioned in Slack in #core by mhthemes. View the logs.


5 years ago

#5 @ocean90
5 years ago

  • Component changed from Administration to Widgets
  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 4.3
  • Priority changed from normal to high
  • Severity changed from normal to major

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

#6 follow-up: @chriscct7
5 years ago

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

#7 in reply to: ↑ 6 ; follow-up: @obenland
5 years ago

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?

#8 in reply to: ↑ 7 @chriscct7
5 years ago

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)

#9 @chriscct7
5 years ago

Ok the bug is caused by when something is being dragged all widget areas are active, including ones that aren't being hovered over

Version 0, edited 5 years ago by chriscct7 (next)

#10 @chriscct7
5 years ago

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

#12 @chriscct7
5 years ago

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
5 years ago

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

#13 @chriscct7
5 years ago

  • Keywords dev-feedback added

This ticket was mentioned in Slack in #core by chriscct7. View the logs.


5 years ago

#15 @chriscct7
5 years ago

  • Keywords has-patch added; needs-patch removed

#16 @azaozz
5 years ago

  • Owner set to azaozz
  • Resolution set to fixed
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.