WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 8 weeks ago

#12641 closed enhancement (fixed)

Move comment-reply to the bottom of the page

Reported by: josephscott Owned by: nacin
Milestone: 3.9 Priority: normal
Severity: normal Version: 3.0
Component: Themes Keywords: has-patch
Focuses: performance Cc:

Description

The general rule for browser performance is to load JavaScript as late in the page as possible. The TwentyTen theme makes use of the comment-reply JavaScript code that comes with WordPress, and includes in the header. From what I can tell there's no need to include it in the header, since it deals with the comment reply form, generally at the bottom of the page.

So I did some tests. I removed the

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

in header.php and replaced it with

<?php if ( is_singular() ) wp_print_scripts( 'comment-reply' ); ?>

at the very bottom of footer.php, just after the wp_footer() call and before the closing BODY and HTML tags. The idea being to allow browsers to load the comment-reply JS as late as possible.

I then used webpagetest.org to run load tests (IE8). Here's the waterfall chart before my changes - http://www.webpagetest.org/result/100318_63M1/1/details/ - and after my changes - http://www.webpagetest.org/result/100318_63M3/1/details/

You'll notice that the after chart has more parallel downloads of page resources. Specifically in the before chart all other downloads are blocking until it finished getting comment-reply.js.

I also looked at the charts in Chrome (resource inspector) and Firefox (firebug), both show similar results, with more parallel downloads happening with comment-reply JS moved to footer.php.

I haven't seen any downsides to this move so far. If this breaks something or causes other problems let's see what we can do to deal with them. In the mean time I'm including a simple patch to make this change.

Attachments (2)

twentyten.diff (1.0 KB) - added by josephscott 4 years ago.
12641.diff (735 bytes) - added by obenland 13 months ago.

Download all attachments as: .zip

Change History (17)

josephscott4 years ago

comment:1 follow-up: Viper007Bond4 years ago

Should work fine in most cases. It just needs to load before a user clicks a "Reply" link and the only time I could see a user beating the script is on REALLY long-to-load pages and they click a Reply link before the page finishes loading.

comment:2 in reply to: ↑ 1 ; follow-up: josephscott4 years ago

We could make comment-reply delay until the page load is completed just to be sure.

comment:3 follow-up: TobiasBg4 years ago

Shouldn't we just add the $in_footer = true parameter to the arguments of the wp_enqueue_script( 'comment-reply' ) (or rather the corresponding wp_register_script) call to have the script load in the footer?

I guess that would be the proper way to do it, instead of that slightly hacky wp_print_scripts approach, which can have downsides due to the included filter being called again (scribu knows more about this :-) ).

comment:4 in reply to: ↑ 3 Viper007Bond4 years ago

Replying to TobiasBg:

Shouldn't we just add the $in_footer = true parameter to the arguments of the wp_enqueue_script( 'comment-reply' ) (or rather the corresponding wp_register_script) call to have the script load in the footer?

I guess that would be the proper way to do it, instead of that slightly hacky wp_print_scripts approach, which can have downsides due to the included filter being called again (scribu knows more about this :-) ).

Filters should be smart. A few of my plugins call wp_print_scripts().

Anyway, I considered this as well but was a bit worried that it could break other themes possibly.

comment:5 in reply to: ↑ 2 ; follow-up: Viper007Bond4 years ago

Replying to josephscott:

We could make comment-reply delay until the page load is completed just to be sure.

The comment reply buttons directly call a JS function. If that function is not defined yet when the button is clicked, it'll throw an error.

comment:6 iammattthomas4 years ago

  • Cc mt@… added

comment:7 in reply to: ↑ 5 josephscott4 years ago

Replying to Viper007Bond:

Replying to josephscott:

We could make comment-reply delay until the page load is completed just to be sure.

The comment reply buttons directly call a JS function. If that function is not defined yet when the button is clicked, it'll throw an error.

Hmmm, more work to make this safe then. I think the concept is the right way to go.

comment:8 nacin4 years ago

  • Keywords needs-patch added; has-patch removed
  • Milestone changed from 3.0 to Future Release

comment:9 SergeyBiryukov16 months ago

  • Component changed from Themes to Bundled Theme

comment:10 SergeyBiryukov14 months ago

  • Milestone changed from Future Release to WordPress.org

obenland13 months ago

comment:12 obenland13 months ago

  • Component changed from Bundled Theme to Performance
  • Keywords has-patch added; needs-patch removed
  • Milestone changed from WordPress.org to Future Release
  • Summary changed from Move JavaScript to the bottom of the page in TwentyTen theme to Move comment-reply to the bottom of the page

As per IRC chat this morning, I think this is a core issue rather than a theme issue. Moving the script to the footer is code-wise fairly trivial, we just need to get a consensus if this is a step we should take.

comment:13 nacin3 months ago

  • Component changed from Performance to Themes
  • Focuses performance added
  • Milestone changed from Future Release to 3.9

One problem with this is comment-reply.js is (accidentally?) designed to work while the page is still loading. If you have a truckload of comments still loading and a person replies to the first one, the form will move up. Or maybe it won't, since the form won't be loaded yet. Yeah, I really have no idea why this doesn't load in the footer.

I'm happy to change it if no one can think of a reason otherwise. We can even change it in trunk and see if anything breaks.

comment:14 ircbot8 weeks ago

This ticket was mentioned in IRC in #wordpress-dev by obenland. View the logs.

comment:15 nacin8 weeks ago

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

In 27303:

Move comment-reply.js to the footer.

While it can function before the page is loaded, it works by moving the comment form, which is usually toward the bottom of the page. Please report any contraindications on the ticket.

props obenland.
fixes #12641.

Note: See TracTickets for help on using tickets.