Autoptimize

About this plugin

Questions

What does the plugin do to help speed up my site?

It minifies all scripts and styles and configures your webserver to compresses them with good expires headers. JavaScript be default will be made non-render-blocking and CSS can be too by adding critical CSS. You can configure it to combine (aggregate) CSS & JS-files, in which case styles are moved to the page head, and scripts to the footer. It also minifies the HTML code and can also optimize images and Google Fonts, making your page really lightweight.

But I’m on HTTP/2, so I don’t need Autoptimize?

HTTP/2 is a great step forward for sure, reducing the impact of multiple requests from the same server significantly by using the same connection to perform several concurrent requests and for that reason on new installations Autoptimize will not aggregate CSS and JS files any more. That being said, concatenation of CSS/ JS can still make a lot of sense, as described in this css-tricks.com article and this blogpost from one of the Ebay engineers. The conclusion; configure, test, reconfigure, retest, tweak and look what works best in your context. Maybe it’s just HTTP/2, maybe it’s HTTP/2 + aggregation and minification, maybe it’s HTTP/2 + minification (which AO can do as well, simply untick the “aggregate JS-files” and/ or “aggregate CSS-files” options). And Autoptimize can do a lot more then “just” optimizing your JS & CSS off course 😉

Will this work with my blog?

Although Autoptimize comes without any warranties, it will in general work flawlessly if you configure it correctly. See “Troubleshooting” below for info on how to configure in case of problems. If you want you can test Autoptimize on a new free dummy site, courtesy of tastewp.com.

Why is jquery.min.js not optimized when aggregating JavaScript?

Starting from AO 2.1 WordPress core’s jquery.min.js is not optimized for the simple reason a lot of popular plugins inject inline JS that is not aggregated either (due to possible cache size issues with unique code in inline JS) which relies on jquery being available, so excluding jquery.min.js ensures that most sites will work out of the box. If you want optimize jquery as well, you can remove it from the JS optimization exclusion-list (you might have to enable “also aggregate inline JS” as well or switch to “force JS in head”).

Why is Autoptimized JS render blocking?

This happens when aggregating JavaSCript and ticking the “force in head” option or when not aggregating and not deferring. Consider changing settings.

Why is the autoptimized CSS still called out as render blocking?

With the default Autoptimize configuration the CSS is linked in the head, which is a safe default but has Google PageSpeed Insights complaining. You can look into “inline all CSS” (easy) or “inline and defer CSS” (better) which are explained in this FAQ as well.

What is the use of “inline and defer CSS”?

CSS in general should go in the head of the document. Recently a.o. Google started promoting deferring non-essential CSS, while inlining those styles needed to build the page above the fold. This is especially important to render pages as quickly as possible on mobile devices. As from Autoptimize 1.9.0 this is easy; select “inline and defer CSS”, paste the block of “above the fold CSS” in the input field (text area) and you’re good to go!

But how can one find out what the “above the fold CSS” is?

There’s no easy solution for that as “above the fold” depends on where the fold is, which in turn depends on screensize. There are some tools available however, which try to identify just what is “above the fold”. This list of tools is a great starting point. The Sitelocity critical CSS generator and Jonas Ohlsson’s criticalpathcssgenerator are nice basic solutions and http://criticalcss.com/ is a premium solution by the same Jonas Ohlsson. Alternatively this bookmarklet (Chrome-only) can be helpful as well.