The title says it all; I just pushed the first beta of Autoptimize 2.7 which has some small fixes/ improvements but which most importantly finally sees the “Autoptimize CriticalCSS.com power-up” fully integrated.
Next to the actual integration and switching to object-oriented for most (but not all) of AOCCSS files, there are some minor functional changes as well, most visible ones being buttons to clear all rules and to clear all jobs from the queue.
I hope to be able to release AO27 officially in April, but for that I need the beta thoroughly tested off course. Most important part to test is the critical CSS logic obviously, so if you have the power-up running, download/ install the beta and simply disable the power-up to have Autoptimize fill that void (if the power-up is active, AO refrains from loading it’s own critical CSS functionality).
criticalcss.com
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).
Want to test automated Critical CSS creation?
Over 3 years ago Autoptimize added support for critical CSS and one and a half year ago the first “power-up” was released for Critical CSS rules creation.
But time flies and it’s time for a new evolution; automated creation of critical CSS, using a deep integration with https://criticalcss.com using their powerful API! A first version of the plugin is ready and the admin-page looks like this (look to the right of this paragraph);
The plan:
- beta-test (asap)
- release as separate plugin on wordpress.org (shooting for April)
- release as part of Autoptimize 2.5 (target mid 2018)
This new “criticalcss.com” power-up has been tested on a couple of sites already (including this little blog of mine) and we are now looking for a small group of to help beta-test for that first target. Beta-testers will be able to use criticalcss.com for free during the test (i.e. for one month). If you’re interested; head on up to the contact form and tell me what kind or site you would test this on (main plugins + theme; I’m very interesting in advanced plugins like WooCommerce, BuddyPress and some of the major themes such as Avada, Divi, Astra, GeneratePress, … ) and I’ll get back to you with further instructions.
