Keeping your WordPress website fast can become pretty tricky once you start installing plugins and off-the-shelf themes. Everything seems to want to load at least one CSS stylesheet, and sometimes a dozen or more JavaScript script files. Some also inject great chunks of CSS and JavaScript into every page. Luckily, there’s the handy Autoptimize plugin to help you sort all of that out.

Autoptimize is a WordPress plugin for improving your website performance. It scans the output of your WordPress website to reduce the size and number of files that web browsers download from your website. Here’s a quick rundown of what it can do:

• strip comments and redundant whitespace from the HTML
• strip comments and whitespace from CSS stylesheets
• strip comments and whitespace from JavaScript scripts
• concatenate scripts from your website into a single downloadable file
• concatenate stylesheets from your website into a single downloadable file
• move in-line scripts and stylesheets into the concatenated files

Each of those actions is configurable too, which is great. In fact, it’s absolutely necessary, because each of those functions can break your website in fun and fascinating ways! Some scripts and stylesheets just don’t want to play ball, so Autoptimize isn’t something you can just install and turn on, then head to the pub for a congratulatory cider. You need to test everything!

Three things in particular can bring Autoptimized websites unstuck:

• rearranging order-sensitive scripts or stylesheets into the wrong order
• including unique resources in concatenated files, forcing a unique concatenated file for every page/post
• including big scripts or stylesheets used on every page/post in concatenated files

The first mistake can break your website. The second one probably won’t break it, but it’ll mean that you won’t benefit from web browser caching of your concatenated files. The third one means that each of your concatenated files includes a pile of stuff that the browser has already loaded, and could have cached.

JavaScript configuration

JavaScript can be either embedded directly on the page, or loaded from a linked file. Autoptimize sweeps both types up and serves it all from a single file. That doesn’t always work well, so here’s a few tweaks to get the best out of Autoptimize without breaking your website.

• push jQuery off to Google’s CDN with Use Google Libraries — that will reduce the size of each .js cached file, because jQuery is usually loaded on every page
• look at the cache folder, see if there are lots of .js files, which indicates too much uniqueness in cached script — probably an embedded script block that is unique to each page/post
• test every page — some scripts need special handling and may break with default settings

Once you’ve identified your problems, you can add exceptions to the Autoptimize settings:

Here’s a list I’ve compiled for various common plugins

• Disqus — disqus_config,disqusConfig,disqusShortname
• Easy Digital Downloads — edd_scripts,edd_global_vars
• Flexible Map — flxmap
• Gist — gist.github.com
• NextCellent Gallery with Shutter Reloaded — ngg,shutter,jquery.cycle,googleapis
• ReCAPTCHA — recaptcha
• Use Google Libraries — jQuery.noConflict
• general catch-all for many plugins: CDATA

Why you shouldn’t use Autoptimize

OK, so you want to make your website load faster. Adding Autoptomize might make it slower. This is because Autoptimize has to capture everything on every page, sift out the CSS and JavaScript, and minify and concatenate it all — that’s work. It’s useful work if it doesn’t have to do it often, so Autoptimize works well when added to a site with page caching. If your site doesn’t have page caching, or can’t benefit from it because typical visitors are logged in, then don’t use Autoptimize — it will add load to your website.

Alternatives

For shared hosting websites, I like Autoptimize because it’s easy to configure and does a great job. There are other options, however; just look at the list of minify plugins on WordPress.org! Some page caching plugins also offer minification / concatenation, e.g. W3 Total Cache. For me, Autoptimize + WP Super Cache and some custom .htaccess rules gets me where I want to go, simply and quickly.

If you have control of your website configuration, you’re better off using the PageSpeed module. It can do what Autoptimize does, and more — but it does it at the web server level, outside of WordPress. It has a pile of configuration options so you can really fine-tune your website.

If you have CloudFlare, you can turn on some minification / concatenation features of its service with the Rocket Loader and let CloudFlare take the load for you. It can be harder to control, however, because opting a script out of Rocket Loader requires changing script tags.

Summation

Autoptimize can really help reduce the size and number of resources your website pages load, leading to a faster website. Just make sure you test everything carefully, check that you don’t have lots of similar concatenated files in the cache, and use judiciously where it can help your website, not hurt it. Otherwise you might find, as Eric Sevareid once said:

The chief cause of problems is solutions