[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:  10upsimon
     Type:  enhancement                          |      Status:  assigned
 Priority:  high                                 |   Milestone:  6.3
Component:  Script Loader                        |     Version:  4.6
 Severity:  normal                               |  Resolution:
 Keywords:  has-patch has-unit-tests 2nd-        |     Focuses:
  opinion                                        |  performance
-------------------------------------------------+-------------------------

Comment (by azaozz):

 @flixos90 @westonruter Seems we are not exactly "on the same page" here,
 lets try to get there :)

 The background:
 - Script loader is designed to load (legacy) scripts in a legacy way (that
 was considered "best practice" in late 2000s and early 2010s). Its main
 functionality is (in this order):
   1. Allow scripts to be enqueued and declare dependencies.
   2. Ensure the dependencies are added to the queue and moved up so they
 are outputted before the dependent scripts.
   3. Output scripts in the footer to increase page load performance.
   4. Concatenate scripts to increase page load performance.

 - The `async` and `defer` attributes are also "legacy" and can be used to
 increase page load performance. There are certain differences between
 them:
   1. Scripts without `defer` or `async`:
     - Are loaded synchronously with the rest of the HTML.
     - Are executed as soon as loaded.
     - Can be used as dependencies and have dependents as they maintain
 load order.
     - Block the parsed of the HTML while being loaded and executed.
     - Generally perform worse than scripts with `defer` and `async` (when
 the script is not in the browser cache).
   2. Scripts with `defer`:
     - Are loaded asynchronously while the HTML is being loaded.
     - Are executed after the HTML is parsed.
     - Can be used as dependencies and have dependents as they maintain
 load order.
     - Perform better than scripts with `async` and "blocking" scripts.
   3. Scripts with `async`:
     - Are loaded asynchronously while the HTML is being loaded.
     - Are executed as soon as loaded.
     - Cannot be used as a dependency or have dependents as the load order
 is undetermined.
     - Perform worse than scripts with `defer` as they block parsing while
 being executed (may happen in the middle of parsing the HTML).
     - Are executed immediately if cached by the browser. In that case
 their performance is identical to "blocking" scripts.

 So in theory scripts with `defer` would be most desirable and scripts with
 `async` would generally be unusable in Script loader.

 In practice that's not as simple. I looked around a bit to find websites
 that have scripts with `async` but couldn't find any. That's not very
 surprising as such scripts cannot be used in conjunction with the DOM. The
 only practical recommendation was to use `async` for truly
 "asynchronous/background" JS like Web Workers, etc. For comparison there
 are many sites that have scripts with `defer`.

 Imho the next step regarding adding support for scripts with `async` to
 Script loader would be to determine what is the practical use of them. It
 would also help to try to find examples of WP sites that currently have
 scripts with `async` especially when the script have dependencies or is
 used as a dependency.

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