[wp-trac] [WordPress Trac] #58870: Delay loading comment-reply script with async loading strategy

[WordPress Trac]

#58870: Delay loading comment-reply script with async loading strategy
-------------------------+--------------------------------------
 Reporter:  westonruter  |       Owner:  westonruter
     Type:  enhancement  |      Status:  accepted
 Priority:  normal       |   Milestone:  6.4
Component:  Comments     |     Version:  trunk
 Severity:  normal       |  Resolution:
 Keywords:  has-patch    |     Focuses:  javascript, performance
-------------------------+--------------------------------------
Description changed by westonruter:

Old description:

> Currently the `comment-reply` script is loaded in the footer. This is
> great because it doesn't block rendering, however it can still block
> other scripts from executing and thus it delays `DOMContentLoaded`. This
> means that if a theme has a script with logic running at
> `DOMContentLoaded` to add interactivity to the nav menu, this will get
> delayed for the sake of `comment-reply` which is not even needed unless
> the user scrolls down the page to the comments. In the worst case
> scenario, a user may try to tap on the nav menu too early and nothing may
> happen due to `comment-reply` causing an unnecessary delay.
>
> Adding either `defer` or `async` to the `comment-reply` script will cause
> the browser to treat it as low priority from a [https://web.dev/fetch-
> priority/#browser-priority-and-fetchpriority loading perspective].
> However, in the case of `defer` it will still block other `defer` scripts
> and the `DOMContentLoaded` event. With `async` there is the possibility
> that the execution may be delayed until after the DOM loads if the script
> is not in the cache yet. On the other hand, if the `async` script is
> cached, it may execute right away which would be no different than the
> current situation of it being a blocking script in the footer: so no
> better or worse. But for the case where the `comment-reply` script is not
> cached yet, `async` would surely be better.
>
> Additionally, according to [https://www.tunetheweb.com/about/ Barry
> Pollard] there is talk of executing all `defer` scripts together in one
> single task rather than running each in their own task. Using `async`
> would prevent adding another script to this `defer` group.

New description:

 Currently the `comment-reply` script is loaded in the footer. This is
 great because it doesn't block rendering, however it can still block other
 scripts from executing and thus it delays `DOMContentLoaded`. This means
 that if a theme has a script with logic running at `DOMContentLoaded` to
 add interactivity to the nav menu, this will get delayed for the sake of
 `comment-reply` which is not even needed unless the user scrolls down the
 page to the comments. In the worst case scenario, a user may try to tap on
 the nav menu too early and nothing may happen due to `comment-reply`
 causing an unnecessary delay.

 Adding either `defer` or `async` to the `comment-reply` script will cause
 the browser to treat it as low priority from a [https://web.dev/fetch-
 priority/#browser-priority-and-fetchpriority loading perspective].
 However, in the case of `defer` it will still block other `defer` scripts
 and the `DOMContentLoaded` event. With `async` there is the possibility
 that the execution may be delayed until after the DOM loads if the script
 is not in the cache yet. On the other hand, if the `async` script is
 cached, it may execute right away which would be no different than the
 current situation of it being a blocking script in the footer: so no
 better or worse. But for the case where the `comment-reply` script is not
 cached yet, `async` would surely be better.

 Additionally, according to [https://www.tunetheweb.com/about/ Barry
 Pollard]: "Current browsers ''may'' execute all `defer` scripts altogether
 in one single task (Chrome does). There is talk within the Chrome team as
 to whether these should run in their own tasks. Using `async` would
 prevent adding another script to this `defer` group."

--

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