Autoptimize

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.

Or should you inline all CSS?

The short answer: probably not. Although inlining all CSS will make the CSS non-render blocking, it will result in your base HTML-page getting significantly bigger thus requiring more “roundtrip times”. Moreover when considering multiple pages being requested in a browsing session the inline CSS is sent over each time, whereas when not inlined it would be served from cache. Finally the inlined CSS will push the meta-tags in the HTML down to a position where Facebook or Whatsapp might not look for it any more, breaking e.g. thumbnails when sharing on these platforms.

My cache is getting huge, doesn’t Autoptimize purge the cache?

Autoptimize does not have its proper cache purging mechanism, as this could remove optimized CSS/JS which is still referred to in other caches, which would break your site. Moreover a fast growing cache is an indication of other problems you should avoid .

Instead you can keep the cache size at an acceptable level by either:

• disactivating the “aggregate inline JS” and/ or “aggregate inline CSS” options
• excluding JS-variables (or sometimes CSS-selectors) that change on a per page (or per pageload) basis. You can read how you can do that in this blogpost .

Despite above objections, there are 3rd party solutions to automatically purge the AO cache, e.g. using this code or this plugin , but for reasons above these are to be used only if you really know what you’re doing.

“Clear cache” doesn’t seem to work?

When clicking the “Delete Cache” link in the Autoptimize dropdown in the admin toolbar, you might to get a “Your cache might not have been purged successfully”. In that case go to Autoptimizes setting page and click the “Save changes & clear cache”-button.

Moreover don’t worry if your cache never is down to 0 files/ 0KB, as Autoptimize (as from version 2.2) will automatically preload the cache immediately after it has been cleared to speed further minification significantly up.

My site looks broken when I purge Autoptimize’s cache!

When clearing AO’s cache, no page cache should contain pages (HTML) that refers to the removed optimized CSS/ JS. Although for that purpose there is integration between Autoptimize and some page caches, this integration does not cover 100% of setups so you might need to purge your page cache manually.

Can I still use Cloudflare’s Rocket Loader?

Cloudflare Rocket Loader is a pretty advanced but invasive way to make JavaScript non-render-blocking, which Cloudflare still considers Beta . Sometimes Autoptimize & Rocket Loader work together, sometimes they don’t. The best approach is to disable Rocket Loader, configure Autoptimize and re-enable Rocket Loader (if you think it can help) after that and test if everything still works.

At the moment (June 2017) it seems RocketLoader might break AO’s “inline & defer CSS”, which is based on Filamentgroup’s loadCSS , resulting in the deferred CSS not loading.

I tried Autoptimize but my Google Pagespeed Scored barely improved

Autoptimize is not a simple “fix my Pagespeed-problems” plugin; it “only” aggregates & minifies (local) JS & CSS and images and allows for some nice extra’s as removing Google Fonts and deferring the loading of the CSS. As such Autoptimize will allow you to improve your performance (load time measured in seconds) and will probably also help you tackle some specific Pagespeed warnings. If you want to improve further, you will probably also have to look into e.g. page caching and your webserver configuration, which will improve real performance (again, load time as measured by e.g. https://webpagetest.org) and your “performance best practice” pagespeed ratings.

What can I do with the API?

A whole lot; there are filters you can use to conditionally disable Autoptimize per request, to change the CSS- and JS-excludes, to change the limit for CSS background-images to be inlined in the CSS, to define what JS-files are moved behind the aggregated one, to change the defer-attribute on the aggregated JS script-tag, … There are examples for some filters in autoptimize_helper.php_example and in this FAQ.

How does CDN work?

Starting from version 1.7.0, CDN is activated upon entering the CDN blog root directory (e.g. http://cdn.example.net/wordpress/). If that URL is present, it will used for all Autoptimize-generated files (i.e. aggregated CSS and JS), including background-images in the CSS (when not using data-uri’s).

If you want your uploaded images to be on the CDN as well, you can change the upload_url_path in your WordPress configuration (/wp-admin/options.php) to the target CDN upload directory (e.g. http://cdn.example.net/wordpress/wp-content/uploads/). Do take into consideration this only works for images uploaded from that point onwards, not for images that already were uploaded. Thanks to BeautyPirate for the tip !

Why aren’t my fonts put on the CDN as well?

Autoptimize supports this, but it is not enabled by default because non-local fonts might require some extra configuration . But if you have your cross-origin request policy in order, you can tell Autoptimize to put your fonts on the CDN by hooking into the API, setting autoptimize_filter_css_fonts_cdn to true this way;

add_filter( 'autoptimize_filter_css_fonts_cdn', '__return_true' ); I’m using Cloudflare, what should I enter as CDN root directory

Nothing, when on Cloudflare your autoptimized CSS/ JS is on the Cloudflare’s CDN automatically.

How can I force the aggregated files to be static CSS or JS instead of PHP?

If your webserver is properly configured to handle compression (gzip or deflate) and cache expiry (expires and cache-control with sufficient cacheability), you don’t need Autoptimize to handle that for you. In that case you can check the “Save aggregated script/css as static files?”-option, which will force Autoptimize to save the aggregated files as .css and .js-files (meaning no PHP is needed to serve these files). This setting is default as of Autoptimize 1.8.

How does “exclude from optimizing” work?

Both CSS and JS optimization can skip code from being aggregated and minimized by adding “identifiers” to the comma-separated e