Although current versions of Autoptimize can already tackle Google PageSpeed Insights’ “Eliminate render-blocking CSS in above-the-fold content” tip, the next release will allow you to do so in an even better way. As from version 1.9 you’ll be able to combine the best of both “inline CSS” and “defer CSS” worlds. “Defer” effectively becomes “Inline and defer“, allowing you to specify the “above the fold CSS” which is then inlined in the head of your HTML, while your normal autoptimized CSS is deferred until the page has finished loading.
Other improvements in the upcoming Autoptimize 1.9.0 include:
- Inlined Base64-encoded background Images will now be cached as well and the threshold for inlining these images has been bumped up to 4096 bytes (from 2560).
- Separate cache-directories for CSS and JS in /wp-content/cache/autoptimize, which should result in faster cache pruning (and in some cases possibly faster serving of individual aggregated files).
- CSS is now added before the <title>-tag, JS before </body> (and after </title> when forced in head). This can be overridden in the API.
- Some usability Improvements of the administration-page
- Multiple hooks added to the API a.o. filters to not aggregate inline CSS or JS and filters to aggregate but not minify CSS or JS.
- Multiple bugfixes & improvements
On the todo-list; testing, some translation updates (I’ll contact you translators in the coming week) and updating the readme.txt.
The first test-version of what will become 1.9.0 (still tagged 1.8.5 for now though) has been committed to wordpress.org’s plugin SVN and can be downloaded here. Anyone wanting to help out testing this new release, go and grab your copy and provide me with feedback.
I tried the new version of Autoptimize for my blog; it does the work perfectly and did not faced any issue.
Hello Frank,
Thanks so much for Autoptimize. I am sure you don’t hear it enough so I want to make sure you know it really is appreciated! I was wondering if you could help me with something concerning in-line and defer?
The problem I’m having is that I need to apply different “above the fold” CSS to A.) the homepage B.) a couple of other random pages/URLs C.) the blog index, and D.) blog posts [all blog posts need the same in-line CSS].
I have searched the support forum and found this code you gave to someone:
add_filter('autoptimize_filter_css_defer_inline','AJ_ao_css_defer_inline',10,1);function AJ_ao_css_defer_inline($inlined) {
if (strpos($_SERVER['REQUEST_URI'],'/gallery/')!==false) {
return $inlined.".gallery{display:block;}
} else {
return $inlined;
}
}
but I’m no coder and I don’t really understand what to do with it to remedy my problem. I have figured out how to get the different “above the fold” CSS I need for A.) the homepage B.) a couple of other random pages/URLs C.) the blog index, and D.) blog posts [all blog posts need the same in-line CSS], but what I can’t figure out is where in the above code snippet to put what. Would you be so kind as to provide an elaboration?
Hi Sam;
You would have to identify the specificity in each URL for those 4 categories and return the correct CSS. Suppose you have http://yoururl.com/pages/xyz for your pages and http://yoururl.com/posts/123, you would have
if (strpos($_SERVER['REQUEST_URI'],'/pages/')!==false) {
return "your inline css for pages here";
} else if (strpos($_SERVER['REQUEST_URI'].'/posts/')!==false) {
return "your inline css for posts here";
}
hope this helps,
frank