jQuery should register in footer by default

[ryanve]

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.

[scribu]

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.

[ryanve]

@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).

[alexvorn2]

what about the scripts that load in the header?

[ryanve]

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

[alexvorn2]

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

[scribu]

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.

[nacin]

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.

[ryanve]

@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?

[alexvorn2]

This is not a bug.

[ryanve]

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

[ryanve]

@scribu Agreed. Exactly.

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

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

Such as?

[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

[alexvorn2]

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

[scribu]

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

How old are you?

[SergeyBiryukov]

Related: #20976

[alex-ye]

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 ?!

[scribu]

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

Source, please.

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

[nacin]

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.

[alexvorn2]

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

[scribu]

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.

[kswedberg]

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().

[ryanve]

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.

[nacin]

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.

[Marventus]

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?

[SergeyBiryukov]

Follow-up: #27407

[ocean90]

#28545 was marked as a duplicate.

[Looimaster]

I've just read the whole discussion and properly written themes and plugins use correct dependencies and they seek the best performance. Therefore, I suggest doing it in two steps:
1) Add jquery_in_footer filter or wp_modify_registered_script() which would allow to set in_footer to true for all the libraries that don't have it set to true at this moment.
2) Remove this filter or function in the future and make it become default behavior.

Is there any situation in which a developer should not load scripts in the footer? If there isn't then they should learn this or don't write code. 95% of properly written websites should suffer lower performance because 5% of developers are doing it wrong?

Another idea: add ability to add defer attribute to jQuery <script> tag.

Another idea: introduce wordpress-edge or wordpress-strict (like JavaScript's 'use strict') option that when set to true by a theme (not by plugins) would set all things to HTML5, to strict standards and the newest and the best practices. When set to false (default) it would work like it used to work.

[remzicavdar]

Replying to Looimaster:

I've just read the whole discussion and properly written themes and plugins use correct dependencies and they seek the best performance. Therefore, I suggest doing it in two steps:
1) Add jquery_in_footer filter or wp_modify_registered_script() which would allow to set in_footer to true for all the libraries that don't have it set to true at this moment.
2) Remove this filter or function in the future and make it become default behavior.

Is there any situation in which a developer should not load scripts in the footer? If there isn't then they should learn this or don't write code. 95% of properly written websites should suffer lower performance because 5% of developers are doing it wrong?

Another idea: add ability to add defer attribute to jQuery <script> tag.

Another idea: introduce wordpress-edge or wordpress-strict (like JavaScript's 'use strict') option that when set to true by a theme (not by plugins) would set all things to HTML5, to strict standards and the newest and the best practices. When set to false (default) it would work like it used to work.

I truly hope this will be reconsidered because loading your scripts in the footer is a good practice, especially for SEO