[wp-trac] [WordPress Trac] #33015: Performance issues when placing widgets (drag & drop)
WordPress Trac
noreply at wordpress.org
Thu Jul 16 14:47:54 UTC 2015
#33015: Performance issues when placing widgets (drag & drop)
-------------------------------------------------+-------------------------
Reporter: MH Themes | Owner:
Type: defect (bug) | Status: new
Priority: normal | Milestone: Awaiting
Component: General | Review
Severity: normal | Version: trunk
Focuses: javascript, administration, | Keywords:
performance |
-------------------------------------------------+-------------------------
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');
}}}
--
Ticket URL: <https://core.trac.wordpress.org/ticket/33015>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform
More information about the wp-trac
mailing list