How to fix render-blocking jquery.js in Autoptimize

Autoptimize by default excludes inline JS and jquery.js from optimization. Inline JS is excluded because it is a typical cache-buster (due to changing variables in it) and as inline JS often requires jQuery being available as a consequence that needs to be excluded as well. The result of this “safe default” however is that jquery.js is a render-blocking resource. So even if you’re doing “inline & defer CSS” your Start-Render time (or one of the variations thereof) will be sub-optimal.
Jonas, the smart guy behind criticalcss.com, proposed to embed inline JS that requires jQuery in a function that executes after the DomContentLoaded event. And so I created a small code snippet as a proof of concept which hooks into Autoptimize’s API and that seems to work just fine;

The next step is having some cutting-edge Autoptimize users test this in the wild. You can view/ download the code from this gist  and add it as a code snippet (or if you insist in your theme’s functions.php). Your feedback is more then welcome, I’m sure you know where to find me!

New: Autoptimize CriticalCSS.com Power-Up released!

The Autoptimize criticalcss.com Power-up has just been released to the wordpress.org plugin repository!
This plugin integrates with and extends Autoptimize. It integrates with criticalcss.com, a premium service which uses a “headless” browser to extract real critical CSS. That way it  fully automates the extraction of high-quality critical CSS and the creation of rules for that critical CSS. It can work 100% automated, but also allows semi-automated jobs (where you enter a URL for which you want a specific rule, the power-up will do the rest) and manual rules (where you create the rule and add critical CSS yourself).

Autoptimize 2.1 and first Power-Up released

Yesterday evening I released Autoptimize 2.1 and the first Power-Up to manage critical CSS has been made available as a optional service over at criticalcss.com. This short video explains some of the logic behind the Autoptimize Critical CSS Power-Up:


But let’s not forget about Autoptimize 2.1! The new features include:
  • Autoptimize now appears in the admin-toolbar with an easy view on cache size and the possibility to purge the cache (thanks to Pablo Custo)
  • A “More Optimization”-tab is shown with info about optimization tools- and services.
  • settings-screen now accepts protocol-relative URL for CDN base URL
  • admin GUI updated and responsiveness added
  • If cache size becomes too big, a mail will be sent to the site admin
  • power-users can enable Autoptimize to pre-gzip the autoptimized files with a filter
  • new (smarter) defaults for JS and CSS optimization

Although excluding jQuery from autoptimization by default might seem counter-intuitive, the “smarter” defaults should allow more Autoptimize installs to work out-of-the-box (including on sites run by people who might not be inclined to troubleshoot/ reconfigure Autoptimize in the first place).
And thanks to the release I now have a better idea of the number of active installs (which wordpress.org lists as +100000); 2.1 was downloaded 3239 times yesterday evening and it is listed as running on 1.8% sites. Simple math learns that Autoptimize is currently active on approx. 180000 WordPress websites. Let’s aim for 200K by the end of 2016! 🙂