WordPress.org

Make WordPress Core

Opened 18 months ago

Closed 18 months ago

Last modified 5 weeks ago

#22244 closed enhancement (wontfix)

jQuery should register in footer by default

Reported by: ryanve Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: Performance Keywords: 2nd-opinion
Focuses: Cc:

Description

jQuery is not needed on a page until just before the first script that depends on it. If scripts dependent on jQuery are registered properly via wp_register_script() or wp_enqueue_script(), then the script dependency system is smart enough to know where to load jQuery. Therefore jQuery should be registered in the footer by default (allowing the script dependency system to do its magic). This simple change can be made in wp-includes/script-loader.php in wp_default_scripts() and will no doubt improve performance on lots of sites. There may be some other default scripts that would benefit from this change too.

Change History (29)

comment:1 scribu18 months ago

This would be effective only if we make all the other scripts in Core that depend on jQuery also load in the footer by default.

comment:2 ryanve18 months ago

@scribu Yes that would be ideal. But even alone it'd still be effective for situations where the only scripts needing jQuery were non-default ones (from themes/plugins).

Last edited 18 months ago by ryanve (previous) (diff)

comment:3 in reply to: ↑ description alexvorn218 months ago

what about the scripts that load in the header?

comment:4 follow-up: ryanve18 months ago

@alexvorn2 It's no problem as long as they include the dependencies array when registering/enqueuing. If 'jquery' is registered in the footer and a plugin in the head properly lists 'jquery' as a dependency then 'jquery' will load in the head.

comment:5 in reply to: ↑ 4 alexvorn218 months ago

  • Keywords close added

Thanks! But at the end... I think jQuery should load in the header as default... Because most of the sites do so

Last edited 18 months ago by alexvorn2 (previous) (diff)

comment:6 scribu18 months ago

  • Keywords close removed

Appeal to popularity is a logical fallacy.

I, for one, would go so far as make $in_footer default to true, but that's another topic.

comment:7 nacin18 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to wontfix
  • Status changed from new to closed

jQuery's own sites (jquery.com, jqueryui.com to name two of them) loads jQuery in the header. There is of course a potential performance benefit to loading it in the footer, just as there is a potential functionality benefit to loading it in the header.

Unfortunately, this has the potential to break any code not properly (and completely) using the dependencies system. We have made a number of script enqueueing changes over the past few releases that has caused us accidental grief, so I'd rather not bring it upon ourselves and do a change deliberately.

comment:8 follow-up: ryanve18 months ago

  • Keywords 2nd-opinion added; needs-patch removed
  • Resolution wontfix deleted
  • Status changed from closed to reopened
  • Type changed from enhancement to defect (bug)

@alexvorn2 The reason many WP-powered sites load jQuery in the head is because that is the default behavior and because they don't any better. That's exactly the reason why the default should be changed. People perceive the default option as a recommendation.

The performance benefits of loading scripts in the footer are well-documented. The only plausible reason to load jQuery in the head would be it you have a UI that relies entirely on it and you'd rather have users see a blank screen than an FOUC. Edge case.

WP inherits the responsibility of helping guide its users towards the best practices. WP's defaults should favor the industry's best practices.

A lot of people doing something makes it a common practice—not a best practice. Would you rather take medical advice from 1 surgeon or a 100 laymen holding knives?

Last edited 18 months ago by ryanve (previous) (diff)

comment:9 in reply to: ↑ 8 alexvorn218 months ago

  • Resolution set to maybelater
  • Status changed from reopened to closed

This is not a bug.

comment:10 alexvorn218 months ago

  • Keywords dev-feedback 2nd-opinion removed

comment:11 ryanve18 months ago

@nacin Making the change would force people to write better code. But yea the change would need to be explained with the version release notes. Many themes and plugins circumvent the dependency system because it is so hard to customize or because they have no idea it exists. Even TwentyEleven uses stylesheet <link> tags directly in its header.php rather than using wp_enqueue_style(). Regarding jquery.com, follow this thread.

comment:12 ryanve18 months ago

@scribu Agreed. Exactly.

comment:13 follow-ups: scribu18 months ago

  • Keywords 2nd-opinion added
  • Milestone set to Awaiting Review
  • Resolution maybelater deleted
  • Status changed from closed to reopened

@alexvorn2: I would appreciate you not closing tickets willy-nilly. I know I've been trigger happy myself sometimes, but "This is not a bug." doesn't help.

there is a potential functionality benefit to loading it in the header.

Such as?

comment:14 scribu18 months ago

  • Type changed from defect (bug) to enhancement

comment:15 in reply to: ↑ 13 ; follow-up: alexvorn218 months ago

Replying to scribu:

@alexvorn2: I would appreciate you not closing tickets willy-nilly. I know I've been trigger happy myself sometimes, but "This is not a bug." doesn't help.

What? nacin closed it, and I did too, what is the problem ? :D

comment:16 alexvorn218 months ago

I added maybelater resolution because "maybe" later someone will come with a better feedback.

comment:17 scribu18 months ago

What? nacin closed it, and I did too, what is the problem ? :D

How old are you?

comment:19 alex-ye18 months ago

  • Cc nashwan.doaqan@… added

It sounds great to load jQuery in the footer , That's actually will increase WordPress performance but I am really worried about ompatibility problems especially that I heard there is a problems with jQuery UI and some other jQuery plugins ... anyway I was wondering Why jQuery.com loads jQuery in the <head> element ?!

comment:20 scribu18 months ago

I heard there is a problems with jQuery UI and some other jQuery plugins

Source, please.

comment:21 in reply to: ↑ 15 ; follow-up: nacin18 months ago

Replying to alexvorn2:

Replying to scribu:

@alexvorn2: I would appreciate you not closing tickets willy-nilly. I know I've been trigger happy myself sometimes, but "This is not a bug." doesn't help.

What? nacin closed it, and I did too, what is the problem ? :D

Once a ticket is re-opened, it is usually best to ride it out (and at least let a core developer deal with it). Close/reopen/close/reopen is annoying and unnecessary. Conversations can continue regardless of status.

comment:22 nacin18 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to wontfix
  • Status changed from reopened to closed

This is unfortunately a wontfix. Yes, loading scripts in the footer can mean more HTML gets downloaded first, though the difference is negligible and there are better ways to extract speed from a site.

But: Changing jQuery to load in the footer can instantly break JavaScript that previously worked. This can include JavaScript inserted directly into post content, or scripts loaded in the header or in the middle of the page, or scripts printed in the footer but before jQuery.

This would break because jQuery would be forced to the footer, while the other script would print in the header:

wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'something-that-uses-jquery', 'something-that-uses-jquery.js' );

It does not matter that dependencies should have been used. It is too late to make a change like this. Common practices sometimes beat out best practices. You can do this on your own site if you'd like, but we will not be making a change in core. Sorry. Most other scripts are registered for the footer, and including all of jQuery UI.

Last edited 18 months ago by scribu (previous) (diff)

comment:23 in reply to: ↑ 21 alexvorn218 months ago

Replying to nacin:

Replying to alexvorn2:

Replying to scribu:

@alexvorn2: I would appreciate you not closing tickets willy-nilly. I know I've been trigger happy myself sometimes, but "This is not a bug." doesn't help.

What? nacin closed it, and I did too, what is the problem ? :D

Once a ticket is re-opened, it is usually best to ride it out (and at least let a core developer deal with it). Close/reopen/close/reopen is annoying and unnecessary. Conversations can continue regardless of status.

:) I know! And I knew that this ticket will be closed at the end...

comment:24 scribu18 months ago

This would break because jQuery would be forced to the footer, while the other script would print in the header:

wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'something-that-uses-jquery', 'something-that-uses-jquery.js' );

I was thinking more of scripts that didn't use wp_enqueue_script() at all, but yeah, I've seen this pattern enough times to agree with you that it wouldn't be a good idea.

comment:25 in reply to: ↑ 13 kswedberg13 months ago

Replying to scribu:

there is a potential functionality benefit to loading it in the header.

Such as?

I realize the issue is closed, but since your question went unanswered as far as I could tell, I thought I'd give an example. One functionality benefit is not having to wait until the whole page loads before using jQuery for non-DOM-related tasks such as asynchronously loading other resources with $.ajax().

comment:26 follow-up: ryanve13 months ago

I still think the default should be in the footer. When the script queue functions are used properly then WP can accurately determine if jQuery needs to load in the head. There is no need to support misuse of the queue. Any script that needs jQuery should be listing it as a dependency.

comment:27 in reply to: ↑ 26 nacin13 months ago

Replying to ryanve:

I still think the default should be in the footer.

kswedberg is on the jQuery Foundation's board of advisors and quite literally wrote the book on jQuery. More importantly, he is right. Loading jQuery in the header does come with benefits, and if we change default behavior, we will break scripts that are using its header placement to their benefit.

comment:28 Marventus5 weeks ago

Hi, there. I apologize in advanced for reopening the discussion on a 17-month old ticket. Here's the thing: has anyone actually tried to force jquery to load in the footer? Using latest wp-trunk version, TwentyTwelve theme, and all plugins disabled, the following script registration procedure (as a plugin) fails to load jQuery in the footer:

function tgi_jquery_in_footer_test() {
    wp_register_script('tgi-jquery-js', "//some/uri/name.js", array("jquery"), "0.1", true);
    wp_enqueue_script('tgi-jquery-js');
}
add_action('wp_enqueue_scripts', 'tgi_jquery_in_footer_test');

Even re-registering jquery with the same options and in_footer param set to true doesn't seem to cut it:

function tgi_jquery_in_footer_test() {
    wp_deregister_script("jquery");
    wp_register_script("jquery", false, array("jquery-core", "jquery-migrate"), "1.11", true);
    wp_register_script('tgi-jquery-js', "//some/uri/name.js", array("jquery"), "0.1", true);
    wp_enqueue_script('tgi-jquery-js');
}
add_action('wp_enqueue_scripts', 'tgi_jquery_in_footer_test');

Could anyone try to replicate this?

Last edited 5 weeks ago by Marventus (previous) (diff)
Note: See TracTickets for help on using tickets.