WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 15 months 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 (31)

comment:1 @scribu3 years 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 @ryanve3 years 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 3 years ago by ryanve (previous) (diff)

comment:3 in reply to: ↑ description @alexvorn23 years ago

what about the scripts that load in the header?

comment:4 follow-up: @ryanve3 years 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 @alexvorn23 years 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 3 years ago by alexvorn2 (previous) (diff)

comment:6 @scribu3 years 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 @nacin3 years 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: @ryanve3 years 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 3 years ago by ryanve (previous) (diff)

comment:9 in reply to: ↑ 8 @alexvorn23 years ago

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

This is not a bug.

comment:10 @alexvorn23 years ago

  • Keywords dev-feedback 2nd-opinion removed

comment:11 @ryanve3 years 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 @ryanve3 years ago

@scribu Agreed. Exactly.

comment:13 follow-ups: @scribu3 years 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 @scribu3 years ago

  • Type changed from defect (bug) to enhancement

comment:15 in reply to: ↑ 13 ; follow-up: @alexvorn23 years 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 @alexvorn23 years ago

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

comment:17 @scribu3 years ago

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

How old are you?

comment:19 @alex-ye3 years 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 @scribu3 years 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: @nacin3 years 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 @nacin3 years 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 3 years ago by scribu (previous) (diff)

comment:23 in reply to: ↑ 21 @alexvorn23 years 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 @scribu3 years 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 @kswedberg2 years 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: @ryanve2 years 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 @nacin2 years 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 @Marventus18 months 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 18 months ago by Marventus (previous) (diff)

comment:30 @ocean9015 months ago

#28545 was marked as a duplicate.

comment:31 @Looimaster15 months ago

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.

Note: See TracTickets for help on using tickets.