Autoptimize WordPress Plugin – Minification, Aggregation, Optimization

1. Autoptimize Explained

With over 1 million active installs, Autoptimize is an extremely popular WordPress plugin. So well thought of in fact that it’s about to overtake the granddaddy of WordPress caching solutions – W3 Total Cache.

To be fair to both of the above, they should be seen more as close cousins that compliment one another. Not direct rivals. Even Autoptimize themselves say that it’s not a full-blown caching plugin.

If you consider performance important, you really should use one of the many caching plugins to do page caching. Frank Goossens, Autoptimize

They then go on to list several caching solutions, but fail to miss out W3. Probably because trying to boost W3’s real rivals is a smart way to gain pace in the numbers race. For everyone that has WordPress Super Cache installed, it’s one less that’s using ‘Total Cache.

Cunning as a fox is Mr Goossens, but that’s the type of guy we want making plugins on our behalf.

Actually, I was wrong. Frank has explained in an email that W3 is missed off due to them both offering minification. That’s fair enough then, especially as W3 can be a bit tricky with its minfication, though it’s a long time since I used it for anything other than caching.

So what is all the fuss about then? Let’s see…

• Minification – is the removal of unneccessary code. This is AO’s bread and butter.
• Aggregation – combining scripts and files to reduce network requests.
• Lazy loading – images are loaded when they scroll into view.
• Async/defer – loading of JavaScripts to optimize page loading.
• Emjoi/cruft removal – reduces page size and increases page speed.
• Google fonts – speeds up fonts by preloading in the head.
• Inlinine CSS – one of the easiest ways to decrease page loading time.
• Critical CSS – a more advanced version of the above targeting above the fold content.
• Include/exclude files – based on ID or class names.

You get the picture? Autoptimize is an extremely thorough and precise tool for WordPress optimizers.

In other words this plugin puts WordPress on a diet, then in a car crusher for an altogether faster experience for the end user. Oh, nearly forgot. It boosts your performance scores, too.

2. Benchmarking Autoptimize

To get a feel of where we’re at, I run a batch of tests on the home page and blog post of our test site. First of all, though, here’s a quick screenshot of the plugin situation.

Autoptimize was turned off for the first lot of tests, then I activated it to gauge the improvement.

The test blog is from a few trials I was doing to find out the optimal image solution, which ended up with me disregarding image plugins entirely.

A total page weight of nearly 7 MB is much bigger than most websites. However, not running any adverts or external scripts is one of the main reasons why I’m getting good grades relatively easily.

The home page is simply the blog roll with no images apart from the widgets in the footer.

With Autoptimize turned on it’s a different story.

It’s testament to how good modern themes like GeneratePress are. They only need a slight tweak with a caching and minification plugin and you’re almost cracking the double ton.

You’ve already seen the blog post in the slider, but here it is again…

No doubt the improvement would be more dramatic if we were starting off with a lower quality theme than GeneratePress.

Lighthouse test was next on the speed list. It’s the same engine that Google uses to run PageSpeed Insights and also WebPage Test, but the details and features vary for each one.

Render blocking resources can sometimes be tricky to eliminate, depending on how your site is set up. The easiest option in most cases is to inline your CSS.

There’s there’s three main ways to inline your CSS and I prefer the first option, as you don’t have to bother with critical CSS at all. Saves a lot of hassle.

1. Inline all CSS – the easiest option, as long as your HTML is around 50 – 60 KB max.
2. Inline critical CSS and defer the aggregated CSS file on single-page sites.
3. Multi-page sites need a more detailed solution, based on inline and defer, which I’ll explain shortly.

Critical CSS is generated using an online critical path CSS generator.

Another Google Easter Egg in the bag.

Luckily I didn’t need to bother with critical CSS. To be honest, the only time I’ve ever seen it work smoothly is with LiteSpeed Cache.

WebPage Test gives a better look at how good Autoptimize is at aggregating files and scripts.

Now let’s see the improvement with Autoptimize turned on and properly configured.

Looking at the GT Metrix tests gives the impression that there’s no real work being done, but when you see the next two waterfall charts you get the real picture. If a picture paints a thousand words, a waterfall chart is dictionary.

The purple bars are more like purple rain – just look at the size of them!

Autoptimize to the rescue, though. Now they’re almost gone.

That’s what 38 down to 8 requests looks like. It’s the code equivalent of the Atkins diet. The load time dropped from 9.5 to 0.5 seconds. Proof that lazy loading is the real deal.

You’ve now seen the power that minification plugins like Autoptimize and Fast Velocity Minify offer. They’re one of the best one-shot tools for blitzing page speed audits. Caching plugins probably offer the most real-world benefits, but script optimizers are a close second.

3. Autoptimize Settings

In hindsight, it would have made more sense to break down this section into its constituent parts. However, in order to replicate the plugin exactly, I left it in one lump.

If you follow my settings, it should be a good baseline for most sites. The heavier your site and more diverse, the more likely you’ll run into conficts so tread carefully.

For sensitive plugins, it is important to back up your site before jumping in and bricking everything, especially if you’ve got a big fan base. They won’t be happy if their daily reading is ruined.

Less intrusive plugins like Autoptimize shouldn’t cause too much damage, even if misconfigured. All you need to do is reverse the settings and clear the cache – that should get you back to normal.

On the contrary, .htaccess and functions.php code changes need more caution.

Another tip, I’ve used before is to turn everything on at once, then if there’s a problem, turn half back off. That way you’ll know which half of the settings the problem lies. Then turn off a quarter. So in two moves you’ve narrowed things down relatively quickly. 

Turning things on or off in isolation takes forever. Not that I’m trying to give out shady advice, but we all know there’s a difference between instructions and what we actually do in reality.

4. Image Settings

There’s not a lot to talk about in this section. You basically have three options.

• Sign up to ShortPixel’ Image CDN – this is an Autoptimize affiliate link.
• Lazy-load images – the option I’m using on this site.
• Lazy-load exclusions – you can add classes and ID’s here if you have problematic images.

It’s worth mentioning that WebP is super popular with website opitmizers, but in reality it’s not that big a difference. There are several reasons why it isn’t as handy as you’d think.

1. Apple doesn’t support WebP so you have to serve WebP and traditional imagery like JPG and PNG.
2. Well optimized JPEGs are only slightly bigger in size.
3. Cloudflare is a free CDN and superfast so why pay for an image CDN that is probably slower, offers less locations and only serves images?

If you take the time to get it running smoothly, you may well benefit from a decent image CDN. For me, though, they are overpriced and overrated. Cloudflare is all you really need.

Here’s an example that I used to disable lazy loading on my homepage. You can use the code snippets. plugin or add it to functions.php in your child theme.

add_filter('autoptimize_filter_imgopt_should_lazyload','pst_lazyload',10,0);
function pst_lazyload() {
	if ( is_front_page() ) {
		return false;
	} else 
		return true;	
}

This filter is thanks to the awesome support that Frank provides – all I did was ask on WordPress Autoptimize support forum and it was sorted.

Lazyload exclusions of a class-name does not work with a dot in front, so “.big-dog” should be “big-dog” (as literally found in the HTML).

5. Extra Autoptimizations

This section has some useful features that can make a difference to audit results. 

1. Google font optimizations.
2. Remove emojis – a staple of performance plugins.
3. Query string removal – this never seems to work 100%, but from what I can gather that is down to poor coding and developers not registering things correctly in WordPress.
4. Preconnect – helps speed up connections to external domains, but in reality won’t save much time on a fast connection. Every little helps, though.
5. Preload – fetch and load resources with this input field, but don’t go berserk.
6. Async JavaScript – you can defer script loading using this box.

6. Autoptmize More

Here we find the developer’s selection of affiliate links. You can decide whether that’s a good or bad thing. It’s understandable why these are included, because people have to make a living somewhow.

A million downloads sounds impressive, but not if they’re all free. Pride doesn’t put food in your belly.

My thoughts are as follows:

1. Autoptimize Pro Support – this is probably the best option of the lot if you are struggling to configure this plugin yourself. If Frank’s prices are too steep – give me a shout. 🙂
2. ShortPixel Image CDN – I’ve already said what I think about image CDNs. It’s not that they’re bad, they’re just not my cup of tea when you can use the likes of Cloudflare.
3. WP Rocket – it’s very popular, but again is that because it does something special that the likes of LiteSpeed Cache doesn’t do, or is it just because people have promoted the life out of it?
4. Critical CSS – you can try this as an Autoptimize add-on, but if you like free then you’ll want to check out my alternative.
5. Kinsta – has a good reputation, they use Key CDN, but their prices are steep. You can gat way better value with Hostinger and a bit of research.
6. Neve – this does seem like a good theme, if I wasn’t so entwined with GeneratePress, I’d give it a go. Especially compared to old-style themes that don’t sit well with Gutenberg.
7. Key CDN – also has a decent rep, but Cloudflare should be everyone’s first choice then Key CDN or Stackpath as a second option.

7. Critical CSS

As briefly touched on earlier, there are three main options for installing critical CSS. Let’s have a quick recap in more detail this time.

What solution suits you will depend on how often you edit your website and whether it’s a single or multi-page set up.

Inline all CSS – technically this isn’t really critical CSS, but it does the same job. Only now you have your critical and non-critical CSS all in one lump. Definitely the easiest solution. You can set and forget without messing on with individual pages.

Just follow the original CSS settings in the first section, as a starting point.

Inline and defer – you can use the Autoptimize critical CSS settings box for this method. There are several free online critical CSS generator’s. Most famous of all is Jonas Ohlsson’s that we already linked to. 

Critical CSS Multi-Page Website – this option is no more difficult than above, only now you have to insert your critical CSS block into each page seperately. 

If your theme doesn’t have an extra CSS box, if you add Simple CSS by Tom Usborne of GeneratePress fame, you’ll be good to go.

The Autoptimize settings are straightforward…

For your multi-page critical CSS to work, you’ll need to find the ID for the extra CSS box and exclude it from Autoptimize in the bottom box. 

8. Generating Critical CSS

The first thing you need to do is uncheck any inlined CSS in Autoptimize, then clear your page cache to reset everything.

After you’ve done that proceed to the page you are generating the critical CSS for and view the page source code. Then click on the aggregated – combined – CSS file.

Some web pages might have some smaller external CSS files, even after aggregating, so make sure you click on the right one. Next step is to view the source code and copy and paste it into the critical path CSS generator.

Soon as you’ve got that on your clip board, you can head over to the online generator.

Enter your relevant web-page URL into the form, paste the code into the left-hand side and click generate critical path CSS.

Due to the CSS minification, it looks like there is only one line of code, but there’s plenty. You can check the difference by the character count in the boxes at the bottom.

For sample page that I made, there was 110001 characters versus 9139 characters on the critical side. Roughly speaking that’s 10% of the gross total.

In truth, if you have a lighweight website that you take care of, critical CSS won’t do much for you apart from give you a headache. On the other hand, if you have a super size stylesheet, then you might see an improvement from using critical path CSS, but you’ll definitely still have a headache.

You’ve probably gathered by now that it’s a pain in the backside. 

Should you get it working without any juddering you’re a lucky person. Out of the ten or so times I’ve messed on with it, the only time I think it worked properly was with LiteSpeed Cache. Even with LSCWP the first time it was janky.

Penultimate job is to paste the CCSS into your Simple CSS box in your theme – either from the plugin or if you have a compatible theme such as Themify or WP Bakery. 

There are others that have an inbuilt extra CSS panel, but they are the only two I can name.

Save your work and blow your cache’s nose. If you’re then happy everything is sorted you can do this last job – find the ID of the Simple CSS box and exclude it from Autoptimize.

The hardest part will be finding the ID so here’s my tip. Use the CTRL + F shortcut to pop up the search box on your source code. You’ll either need to remember a sentence from the critical CSS or if you use the same plugin as me the ID is simple-css-output.

When you do it there will be a big chunk of critical CSS, unlike the 7 words above. That’s only because I deleted the test page before screenshoting the ID and had to make another test page.

9. Critical CSS Gotchas

Creating critical CSS isn’t really difficult, as you’ve seen. Maintaining critical CSS, though, is a different matter, especially for big sites.

Every time you make changes to a page or post you will need to generate fresh CCSS.

The autonomous paid methods still aren’t fully set and forget. 

If you’re on LiteSpeed Web Server with your hosting, the best option for you is LiteSpeed Cache due to its deeper integration with the server that other plugins and websites can’t match.

It goes without saying that you can synchronise your actions better when you’re controlling the plugin and server. That doesn’t mean it’s impossible by other means, just a bit trickier. Though the downside to any closely-knit software pairing is that it doesn’t have the flexibility of more generalised plugins.

LiteSpeed Cache and LiteSpeed Web Server gives you all the features, but W3 Total Cache and LiteSpeed Web Server, for example, won’t have the same symbiosis.

For the above reasons, it’s always preferable to avoid crticial CSS altogether. It’s effect, in most cases, is exaggerated anyway.

10. Asynchronous Loading JavaScript

There’s one last tip that I’ve found thanks to AJ from WP Faster – how to add the async flag to Autoptimize.

Although there is a form input specifically for async scripts in Autoptimize Extra, you have to add them one by one.

This bonus code snippet will add the async flag to all your JavaScripts. JavaScript is still deferred, but async can also be used instead.

If you’ve got a child theme just add the code snippet to functions.php.

For those without a child theme, there are plugins especially for code snippets.

add_filter('autoptimize_filter_js_defer','my_ao_override_defer',10,1);
function my_ao_override_defer($defer) {
return $defer."async ";
}

For example, if it’s not appropriate to asynchrously load the script, the browser will defer as priority. On the other hand, it won’t wait if it doesn’t need to.

You’re effectively giving the browser an alternative choice and this could improve your DOM loading time.

It won’t always be activated, but it’s worth giving it a go if you are running out of options.

The key things to remember with JavaScript async and defer are:

• Async scripts load when the browser has finished downloading them – non render blocking.
• Async scripts can load in any order, which can cause problems.
• Defer scripts load only when the parser has finished – non render blocking.
• Defer scripts will load in a known order – great for stability and less problematic.

You will probably have seen a diagram like the one below at some point, which is from Google Developers, but originally from Growing with the Web.

jQuery dependant themes tend to require it to load early so it’s impossible to defer loading of this important JavaScript library without setting a few alarms off.

11. Autoptimize Summary

We’ve touched on almost everything there is to know about Autoptimize. Let’s have a quick recap what this post has been about.

1. Autoptimzie features – what it does.
2. How to set up Autoptimize for best performance.
3. Critical CSS – pros and cons.
4. Async and defer attribute.

If there’s anything that seems unclear, please comment below and your suggestions will be used to improve this blog post.

Not forgetting, if you don’t break your site now and then you’re not trying hard enough.

We’ve all been there – so don’t feel bad when it’s your turn. Experimenting is the best way to learn new skills. As long as you take a back up beforehand you’ll be just fine.

So on that note, until next time – bye for now.