[wp-meta] [Making WordPress.org] #5253: Async https://www.gstatic.com/charts/loader.js on theme templates

[Making WordPress.org]

#5253: Async https://www.gstatic.com/charts/loader.js on theme templates
-----------------------------+---------------------
 Reporter:  jonoaldersonwp   |       Owner:  (none)
     Type:  defect           |      Status:  new
 Priority:  low              |   Milestone:
Component:  Theme Directory  |  Resolution:
 Keywords:  seo performance  |
-----------------------------+---------------------

Comment (by coffee2code):

 I tried this out and it's not as straightforward as adding `async` to the
 charts script tag.

 The theme's main JS file makes use of the charts library code to draw the
 chart. Adding `async` to the charts script tag unseats it from being
 sourced before the main JS file, throwing an error when the main JS file
 loads since the charts code hasn't been sourced yet. You can't add `async`
 to both scripts for the same reason, the order of files being sourced is
 not guaranteed.

 We could add `defer` to both, since that maintains source ordering, but
 I'm not sure that improves much. Plus that would defer ''all'' of the the
 theme-specific JS from executing, and as we know, the site it very JS-
 forward. I tried this out, and while everything seemed to work, a few
 unscientific load-time checks didn't produce any noticable differences to
 me from the current way of doing things.

 I imagine that the charts-specific code could be extracted from the main
 theme JS file and separately deferred with the charts JS leaving the main
 JS to load normally. Or the code that makes use of the charts could be
 reworked to only fire once the charts JS becomes available (I'm not sure
 what that looks like though).

 In short, because the script in question is a library and not fully self-
 contained, `async` will not be an option for it. `defer` is a possibility,
 but I'm not sure if it will gain us much for the effort.

 Also, in perusing the topic of using `async`/`defer`, there seemed to be
 debates suggesting the merit of either for script tags in the footer is
 moot since the page has been largely rendered by that point. Many of the
 discussions were dated though, so I'm not sure if that is still the case.

 (Another option: Move the script tags for the charts JS and the main theme
 JS to the head and mark each as `defer`. This does work and allows the
 scripts to potentially be downloaded while the DOM is parsing. But again,
 I don't know if this really gets us too much more, if anything, over what
 we're going now.)

 Refs:
 * https://flaviocopes.com/javascript-async-defer/
 * https://gomakethings.com/when-should-you-add-the-defer-attribute-to-the-
 script-element/

-- 
Ticket URL: <https://meta.trac.wordpress.org/ticket/5253#comment:1>
Making WordPress.org <https://meta.trac.wordpress.org/>
Making WordPress.org