Using the New Autoptimize Aggregate Inline JS

On the 26^th of July, 2021, the well-known plugin Autoptimized released a new update that allows for deferring in-line JavaScript. Here’s the new option as seen in the settings screen:

This new ability, lets you final defer inline JavaScript so that it doesn’t mess up your page load times. But should you enable it? And is it better than the method I came up with last year to defer inline JS?

Probably not. Here’s why.

The Problem of Inline JavaScript

Ideally, we would want to defer all our JavaScript to the very end of the HTML. This is particularly true for libraries like jQuery that are huge, and significantly slow down the page load times. Unfortunately, doing this is likely to break a lot of inline JavaScript – the stuff that’s woven into our HTML, and that provides many useful functions like copy/paste buttons, etc.

The reason it breaks is that a lot of inline JS depends on jQuery. And if you’ve deferred jQuery to run after everything is loaded, then the inline JS will be calling jQuery functions that haven’t been declared yet. This throws an error and spoils your page functionality.

So if you want to defer jQuery, you only have the following options:

1. Remove all inline JS
2. Rewrite your inline JS to not use jQuery
3. Use my method to defer inline JS

Option 1 is usually undesirable. Who wants to reduce the functionality of their page? Option 2 is usually unfeasible because the inline JS typically comes from plugins and themes. And even if you were open to modifying their source code, you might not know how to rewrite them without a jQuery dependency.

Option 3 is (so far) still the best.

What Does the new Autoptimize Setting Do?

The new Autoptimize setting called “Aggregate Inline JS” does just that. It extracts the inline JavaScript and adds it to the cache that already contains the aggregated JavaScript from all the JS files on your page. So yes – the inline JS will still fail. But it’ll run again once the final JS file has been downloaded, and this time it’ll work correctly because jQuery has finally been downloaded and the functions declared.

Sounds good right? Not so fast.

This Causes Your Cache to Grow FAST!

The above solution is problematic because Autoptimize will create a cached file that’s likely to be different for each page or post. Often, the inline JavaScript code contains varies not just from page to page, but also possibly from user to user, or based on the time! So Autoptimize will start creating a unique cached copy of the JS files for each of these versions. Your cache can start expanding to unmanageable levels!

Under normal circumstances without the “Aggregate Inline JS” option, this isn’t a problem because most pages load the same set of static JS files. There’s very little variation, and you’re not adding special, constantly changing external JavaScript to the page. So Autoptimize can create a small bundle of cached files, and be done with it.

But using this option will cause the cache to balloon quickly, as the plugin struggles to create unique copies for each different combination of files and inline JS. It’s not a good idea unless you have a very specific configuration.

Just Use My “module” Method Instead

In the technique to which I linked at the beginning of this article, I was able to defer inline JS execution by changing the script declaration from type=”text/javascript” to <script type=”module”>. This solution avoids all the messy problems with caching above, and simply forces the JS to run after jQuery has been downloaded.

So until Autoptimize finds a better solution to this, I’m not recommending anyone to use the new “Aggregate inline JS” option.