Move comment-reply to the bottom of the page

[josephscott]

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.

[Viper007Bond]

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.

[josephscott]

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

[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 :-) ).

[Viper007Bond]

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.

[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.

[josephscott]

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.

[obenland]

Related: #23772

[obenland]

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.

[nacin]

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.

[nacin]

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.