Async https://www.gstatic.com/charts/loader.js on theme templates

[jonoaldersonwp]

Theme templates like ​https://wordpress.org/themes/hello-elementor/ load ​https://www.gstatic.com/charts/loader.js in the footer, which is used to render the downloads statistics charts.

Thi script slows down the initial page load considerably, and the charts aren't (or at least, shouldn't be) critical for the initial critical rendering path.

As such, we should add a async property to the respective script tag.

[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/

[jonoaldersonwp]

Gah, yeah, this is more of a headache than I'd considered. Let's wontfix, and start thinking about a more modular approach to JS across the whole site(s)...