[wp-trac] [WordPress Trac] #12009: Add support for HTML 5 "async" and "defer" attributes

[WordPress Trac]

#12009: Add support for HTML 5 "async" and "defer" attributes
---------------------------+------------------------------
 Reporter:  Otto42         |       Owner:  azaozz
     Type:  enhancement    |      Status:  reopened
 Priority:  normal         |   Milestone:  Awaiting Review
Component:  Script Loader  |     Version:  4.6
 Severity:  normal         |  Resolution:
 Keywords:                 |     Focuses:
---------------------------+------------------------------

Comment (by mor10):

 Replying to [comment:39 azaozz]:
 > > async / defer is now considered best practice...
 >
 > Correct me if I'm wrong but both `async` and `defer` don't make much
 difference for scripts at the end of the HTML document (in the footer).

 The modern best practice is to load JavaScripts in the head section of the
 document and use `async` / `defer` to prevent render blocking. This allows
 the browser to pull in and cache the JavaScript files while waiting for
 the DOM to load. See
 https://developers.google.com/speed/docs/insights/BlockingJS

 > In addition they don't make sense when scripts are concatenated, i.e. in
 production.

 Concatenating JavaScript is an old patch to get around single-stream
 transfer under HTTP/1.1. With HTTP/2 multiplexing it is an anti-pattern
 that slows down performance. Componentizing, loading, and `async` /
 `defer` scripts in head + theoretically leveraging server-push
 dramatically improves performance.

 > In addition `async` cannot be used if the script has dependencies or is
 used as dependency for another script.

 Not entirely accurate. If  you `defer` a group of scripts, they will load
 and run in the document order, so dependencies still work. Putting that
 aside, this is the reason why `async` and `defer` need to be optional
 attributes that can be added at enqueue level.

 > So, what are the user cases for these attributes with the current
 script-loader?

 One immediate use case: `navigation.js` in _s should be loaded in head and
 deferred. Same with `skip-link-focus-fix.js`. Doing so removes render
 blocking and improves performance. As I said, `async` / `defer` is now
 best-practice.

 > As far as I see the only thing we can do is add `defer` to the script
 tag that loads the concatenated scripts in the footer. We probably can add
 `defer` when outputting single script tags for scripts that are enqueued
 for the footer. Not sure if either of these will make any significant
 difference :)

 IMO `async` / `defer` should have their own optional parameters in
 `wp_enqueue_script()` and `wp_register_script()` to give developers the
 ability to choose whether scripts should be loaded by default behavior,
 asynced, or deferred. Not doing so stands in the way of modern best
 practices.

 > Also thinking we should have another look at script-loader. Modern
 JavaScript is about modules and building (pre-concatenating). The current
 script-loader's dependency model and JIT concatenation may not be the best
 for it.

 Probably, though I think that's a separate conversation. `async` / `defer`
 should be handled immediately.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/12009#comment:40>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform