WordPress.org

Plugin Directory

Autoptimize

Autoptimize speeds up your website and helps you save bandwidth by aggregating and minimizing JS, CSS and HTML.

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

It concatenates all scripts and styles, minifies and compresses them, adds expires headers, caches them, and moves styles to the page head, and scripts to the footer. It also minifies the HTML code itself, making your page really lightweight.

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.

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 and esp. http://jonassebastianohlsson.com/criticalpathcssgenerator/ is an easy solution if you're not into node.js yourself.

Or should you inline all CSS?

The short answer: if you just want to improve your (mobile) pagespeed score; yes, otherwise maybe not.

Back in the days CSS optimization was easy; put all CSS in your head, aggregating everything in one CSS-file per media-type and you were good to go. But ever since Google included mobile in PageSpeed Insights and started complaining about redering blocking CSS, things got messy (see "deferring CSS" elsewhere in this FAQ). One of the solutions is inlining all your CSS, which as of Autoptimize 1.8.0 is supported.

Inlining all CSS has one clear advantage (better PageSpeed score) and one big disadvantage; your base HTML-page gets significantly bigger. The fact that the HTML gets heavier as such is not a huge issue; when looking at performance for a single page request/ response, performance will be better, as there's no overhead of one or more extra requests for CSS-files. But when looking at a test that includes multiple requests (let's say 5), performance will be worse, as the CSS-payload is sent over whereas normally the seperate CSS-files would not need to be sent any more as they would be in cache.

So the choice should be based on your answer to some site-specific questions; what is your site's bounce rate? How many pages per visit do your visitors request? If you have a high bounce rate and a low number of average pages per visit, inlining CSS looks like a good idea. But with a high number of pages/ visit, it's probably not a good idea. Except if all you care about is a stellar PageSpeed-score, off course.

You can find more information on this topic in this blog post.

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.

You can however keep the cache size at an acceptable level by either: * ticking the "look only in head" option for JS and/or CSS. * using the API to force AO not to aggregate inline CSS or JS (see example-code in autoptimize_helper.php_example). * 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.

Why is "look only in head" marked as deprecated

While "look only in head" still works, it will in the next major version be replaced by an option to choose if inline JS/ CSS should be autoptimized (which is much more useful). So this is just a small heads up, really.

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 behing the aggregated on, to change the defer-attribute on the aggregated JS script-tag, ... There are examples for many filters in autoptimize_helper.php_example.

How can I use/ activate autoptimize_helper.php_example?

Copy it to /wp-content/plugins/autoptimize_helper.php and activate it in WordPress' plugin page. After that you can simple remove the one of the comment-sequences (double-slash) to activate one (or more) of the functions in there.

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!

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-seperated exclusion list. The exact identifier string to use can be determined this way:

  • if you want to exclude a specific file, e.g. wp-content/plugins/funkyplugin/css/style.css, you could simply exclude "funkyplugin/css/style.css"
  • if you want to exclude all files of a specific plugin, e.g. wp-content/plugins/funkyplugin/js/*, you can exclude for example "funkyplugin/js/" or "plugins/funkyplugin"
  • if you want to exclude inline code, you'll have to find a specific, unique string in that block of code and add that to the exclusion list. Example: to exclude "funky_data='Won\'t you take me to, Funky Town'", the identifier is "funky_data".

Configuring & Troubleshooting Autoptimize

After having installed and activated the plugin, you'll have access to an admin page where you can to enable HTML, CSS and JavaScript optimization. According to your liking, you can start of just enabling all of them, or if you're more cautious one at a time.

If your blog doesn't function normally after having turned on Autoptimize, here are some pointers to identify & solve such issues using "advanced settings":

  • If all works but you notice your blog is slower, ensure you have a page caching plugin installed (WP Super Cache or similar).
  • In case your blog looks weird, i.e. when the layout gets messed up, there is problem with CSS optimization. In this case you can turn on the option "Look for styles on just head?" and see if that solves the problem. You can also force CSS not to be aggregated by wrapping it in noptimize-tags in your theme or widget or by adding filename (for external stylesheets) or string (for inline styles) to the exclude-list.
  • In case some functionality on your site stops working (a carroussel, a menu, the search input, ...) you're likely hitting JavaScript optimization trouble. Enable the option "Look for scripts only in head?" and/or "Force JavaScript in ?" and/or "Add try/catch wrapping" and try again. Alternatively -for the technically savvy- you can exclude specific scripts from being treated (moved and/ or aggregated) by Autoptimize by adding a string that will match the offending Javascript or excluding it from within your template files or widgets by wrapping the code between noptimize-tags. Identifying the offending JavaScript and choosing the correct exclusion-string can be trial and error, but in the majority of cases JavaScript optimization issues can be solved this way.
  • If your theme uses jQuery, you can try either forcing all in head or excluding jquery(-min).js (and jQuery-plugins if needed).
  • If you can't get either CSS or JS optimization working, you can off course always continue using the other two optimization-techniques.
  • If you tried the troubleshooting tips above and you still can't get CSS and JS working at all, you can ask for support on the WordPress Autoptimize support forum. See below for a description of what information you should provide in your "trouble ticket"

Help, I have a blank page or an internal server error after enabling Autoptimize!!

First of all make sure you're not running other HTML, CSS or JS minification plugins simultaneously with Autoptimize.

In some rare cases the CSS minification component currently used by Autoptimize crashes due to a lack of resources (see detailed technical explanation here). You can in that case either disable CSS optimization, try to exclude specific CSS from being aggregated or activate the legacy minifiers which don't have that problem. The latter can be accomplished by adding this to your wp-config.php:

define("AUTOPTIMIZE_LEGACY_MINIFIERS","true");

The "legacy minifiers" will remain in Autoptimize "for ever" and changes to wp-config.php are not affected by core-, theme- or plugin-upgrades so you should be good to go.

I use NextGen Galleries and a lot of JS is not aggregated/ minified?

NextGen Galleries does some nifty stuff to add JavaScript. In order for Autoptimize to be able to aggregate that, you'll need to tell it to initialize earlier, by adding this to your wp-config.php:

define("AUTOPTIMIZE_INIT_EARLIER","true");

What is noptimize?

Starting with version 1.6.6 Autoptimize excludes everything inside noptimize tags, e.g.:

<!--noptimize--><script>alert('this will not get autoptimized');</script><!--/noptimize-->

You can do this in your page/ post content, in widgets and in your theme files (consider creating a child theme to avoid your work being overwritten by theme updates).

Can I change the directory & filename of cached autoptimize files?

Yes, if you want to serve files from e.g. /wp-content/resources/aggregated_12345.css instead of the default /wp-content/cache/autoptimize/autoptimize_12345.css, then add this to wp-config.php:

define('AUTOPTIMIZE_CACHE_CHILD_DIR','/resources/');
define('AUTOPTIMIZE_CACHEFILE_PREFIX','aggregated_');

If you changed your wp-content-folder as per the WordPress guidelines, you can tell Autoptimize about that with;

define( 'AUTOPTIMIZE_WP_CONTENT_NAME','/content' );

Where can I report an error?

You can report problems on the wordpress.org support forum, or contact the maintainer using this contact form.

What information should I include when requesting support

  • A description of the problem, including screenshots and information from your browser's Error/ debug console
  • URL of your blog (you can turn Autoptimize off, but should be willing to turn it briefly on to have the error visible)
  • your Autoptimize settings (including a description of changes you made to the configuration to try to troubleshoot yourself)
  • the Theme used (including the Theme's download link)
  • optionally plugins used (if you suspect one or more plugins are raising havoc)

I want out, how should I remove Autoptimize?

  • Disable the plugin (this will remove options and cache)
  • Remove the plugin
  • Clear any cache that might still have pages which reference Autoptimized CSS/JS (e.g. of a page caching plugin such as WP Super Cache)

How can I help/ contribute?

Just fork Autoptimize on Github and code away!

Requires: 2.7 or higher
Compatible up to: 4.2.2
Last Updated: 2015-4-17
Active Installs: 70,000+

Ratings

4.8 out of 5 stars

Support

80 of 107 support threads in the last two months have been resolved.

Got something to say? Need help?

Compatibility

+
=
Not enough data

1 person says it works.
0 people say it's broken.

100,1,1 100,1,1
100,1,1
100,2,2
50,2,1
100,3,3 83,6,5 100,1,1
100,3,3 86,7,6
90,10,9
0,1,0
100,1,1
100,1,1
40,5,2
100,1,1
100,4,4
100,1,1
60,5,3
67,3,2
100,1,1
100,6,6
100,1,1
100,1,1 100,1,1
75,4,3 100,5,5
100,6,6 50,2,1 100,2,2 100,6,6 100,5,5 100,3,3 100,1,1 100,1,1
100,1,1 100,1,1
100,1,1 100,11,11
100,2,2 100,6,6 100,4,4
100,1,1
100,4,4 100,2,2 100,2,2 100,3,3
100,8,8
100,2,2 100,1,1 90,10,9 100,2,2 100,4,4 100,1,1
100,2,2
100,1,1
100,6,6
67,3,2 100,9,9 100,1,1
100,3,3
100,1,1
100,2,2 50,2,1 100,15,15
100,5,5 100,1,1
100,3,3 85,13,11
86,7,6 100,1,1 100,3,3
100,1,1
80,5,4
67,3,2
100,1,1