Autoptimize and WP Rocket

If you’re interested in optimizing WordPress performance, you’ve probably come across the free Autoptimize plugin. It’s quite popular – active on over one million sites – and it’s also racked up over one thousand five-star reviews at WordPress.org.

That might have you wondering – can you and/or should you use Autoptimize if you’re already using WP Rocket?

In this post, we’ll answer that question and also share some tips for how to properly configure Autoptimize.

Can You Use Autoptimize With WP Rocket?

Short Answer: Yes, you can use WP Rocket and Autoptimize at the same time. In fact, WP Rocket has built-in compatibility for Autoptimize to ensure smooth sailing.

However, WP Rocket and Autoptimize have different feature sets (though they overlap in some areas), so Autoptimize is not a standalone replacement for WP Rocket. Most notably, Autoptimize does not include page caching.

Long Answer: Read the rest of this section 🙂

High-Level Differences Between Autoptimize vs WP Rocket

WP Rocket and Autoptimize both help you speed up your WordPress website. However, they have different feature sets and approaches:

For clarity, it might help to define a few terms before continuing on with the differences:

However, Autoptimize does not provide other important optimization tactics such as:

For that reason, Autoptimize is not a replacement for WP Rocket.

Additionally, WP Rocket does include some features for code optimization. For example, WP Rocket can help you minify your HTML, CSS, and JavaScript and includes some concatenation features, so there is some overlap between features in WP Rocket and Autoptimize.

However, because Autoptimize is mainly focused on one thing (code optimization), it goes a little bit deeper into this area than WP Rocket does. So if you want even more granular control over code optimization, that would be a big reason why you might want to pair Autoptimize with WP Rocket.

To sum it up:

Specific Differences Between Autoptimize vs WP Rocket

In the previous section, we said that Autoptimize goes deeper in some areas than WP Rocket. Let’s compare the settings so that you can see the differences…

Here are the file optimization settings in WP Rocket (located in the File Optimization tab). At the top, you can:

File Optimization tab in WP Rocket
File Optimization tab

You also get similar options for JavaScript. You can:

JavaScript Files options in WP Rocket
JavaScript Files options

And here are the settings in Autoptimize.

JavaScript Options:

JavaScript Options in Autoptimize
JavaScript Options in Autoptimize

CSS Options

CSS Options Autoptimize
CSS Options Autoptimize

While there’s a lot of overlap, you also get a few other more advanced options that go beyond WP Rocket. For example, you can also exclude your excluded files from being minified, adjust how to save aggregated files, etc. With JavaScript, you can experiment with different configurations to solve certain issues, etc.

If you go to the Extra tab, you’ll see some more advanced options. For example, Autoptimize gives you five different options for optimizing Google Fonts:

Extra tab in Autoptimize
Extra tab in Autoptimize

From these comparisons, you can see that, at a high-level, WP Rocket is doing similar things to Autoptimize. However, Autoptimize goes a little more in-depth in some areas and gives you more control over how your file optimization works. 

The Google Fonts optimization is a good example of this difference:

I See the Autoptimize Cache, Isn’t That Doing the Same Thing As WP Rocket?

In the screenshots above, you can see the phrase “Autoptimize cache” in the Autoptimize settings. This might be one reason why some users think WP Rocket and Autoptimize are doing the same things.

The Autoptimize cache is not referring to page caching, which is what WP Rocket does.

The “Autoptimize cache” only refers to the optimized files that Autoptimize automatically generates (and caches). For example, if you have Autoptimize combine two separate CSS stylesheets into a single stylesheet, Autoptimize will cache that combined stylesheet so that it doesn’t need to manually create the combined stylesheet on every page load. The same is true of aggregated JavaScript.

Should You Use Autoptimize With WP Rocket?

You now know that you can use Autoptimize with WP Rocket and that, while there’s a lot of overlap, there are still some differences between the plugins. However, perhaps a more important question is should you use Autoptimize with WP Rocket?

Here, it really depends on how in-depth you want to go with tweaking your WordPress performance optimization. If you’re just a casual user looking for a simple solution to speed up WordPress, you’re totally fine to stick with just WP Rocket to keep things simple.

However, if you do want more control over code optimization, pairing Autoptimize with WP Rocket can be a great decision. Again, both plugins work well together and Autoptimize will give you slightly more control in some areas.

Summary:

How to Set Up Autoptimize With WP Rocket

Now, let’s get into how to set up Autoptimize with WP Rocket (if you want to go that route).

For this section, we’ll assume that you’ve already installed and configured WP Rocket. If you haven’t, you can purchase WP Rocket and then go through our Getting Started guide.

As we mentioned earlier, WP Rocket has built-in compatibility with Autoptimize. So as you configure Autoptimize, WP Rocket will automatically disable any WP Rocket features that might interfere with Autoptimize.

You’ll see a message below the section in question and WP Rocket will disable/prevent you from activating any features that overlap:

CSS Options in WP Rocket
CSS Options in WP Rocket

Basically, you don’t really need to worry about accidentally hitting any compatibility issues – we’ve got you covered.

To configure Autoptimize, you go to Settings → Autoptimize. However, before we take you through the settings, we need to cover a quick note:

Whenever you’re editing/combining your site’s CSS or JavaScript, there’s always the potential to cause small issues (this is true for WP Rocket as well). For example, your site might look a little wonky after enabling a feature. If that’s the case, your best bets are to:

Typically, you’re most likely to hit these issues when combining CSS or JavaScript.

JavaScript Options – JS, CSS & HTML Tab

In the JavaScript Options, the safest choice is to check just the first two boxes:

You can also experiment with the Also aggregate inline JS option. However, pay attention to the warning as it might cause issues for some sites:

JavaScript Options Autoptimize
JavaScript Options Autoptimize

If you experience errors, you can play around with the options to force JavaScript in <head> or add try-catch wrapping – just pay attention to the warnings.

CSS Options – JS, CSS & HTML Tab

In the CSS options, a good starting point is to check the first three boxes:

CSS Options Autoptimize
CSS Options Autoptimize

More on the option to inline and defer CSS when we talk about the Critical CSS tab.

Other Settings – JS, CSS & HTML Tab

Under HTML Options, check the box to Optimize HTML Code.

If you’re using the content delivery network (CDN) feature in WP Rocket, you should also enter your CDN Base URL in the CDN Options setting. If you’re not using a CDN, you can ignore this setting.

HTML Options in Autoptimize
HTML Options in Autoptimize

At the bottom, you can also peruse the Misc Options. When in doubt, just leave these as the defaults.

Images Tab

Autoptimize doesn’t include its own image optimization feature. However, it does integrate with the ShortPixel Adaptive Images plugin.

Alternatively, you can use our own plugin, Imagify, to optimize your images.

Autoptimize can also help with lazy loading images and serving WebP images. However, WP Rocket already handles these features for you in the Media tab, so we recommend leaving them disabled in Autoptimize.

Critical CSS Tab

This one is kind of an advanced feature, so it’s a little outside the scope of this post.

I’ll give you the very short version here, but you can check out our full guide to critical CSS if you want to learn more.

Your site’s critical CSS (lower case “c” in critical) refers to the CSS needed to render the “above-the-fold” part of your website that first appears when it loads. You can take only the CSS for this code and “inline” it. Then, you can wait to load the rest of the CSS. This speeds up your site’s perceived load times.

If you’re not a CSS expert, understanding what is critical CSS and what isn’t can be difficult. WP Rocket can try to detect this CSS for you, but some sites can have certain configurations that might cause critical CSS issues.

That brings us to Critical CSS (capital “C“), which is a paid service that helps you automatically and accurately detect critical CSS (lower case “c”) on a page-by-page basis. If you’re willing to pay for the Critical CSS service, Autoptimize lets you integrate with that service in this tab.

Critical CSS in Autoptimize
Critical CSS in Autoptimize

Note WP Rocket 3.6 introduced much better handling of custom critical path CSS for different pages, so we recommend sticking with WP Rocket’s critical CSS feature rather than paying extra for the Critical CSS service.

Extra

The Extra tab lets you configure a few additional advanced settings. However, most of these either:

Unless you’re an advanced user, you can probably ignore everything here and stick with the settings in WP Rocket.

Extra tab in Autoptimize
Extra tab in Autoptimize

Get Paid Help From Autoptimize

If you struggle with setting up some of these features, Autoptimize offers a paid service to configure the plugin for €249.

Conclusion

To conclude, you can use Autoptimize and WP Rocket at the same time. Additionally, WP Rocket has a built-in integration so that it will automatically disable any overlapping features.

However, the plugins serve different functions so you cannot use Autoptimize as a complete replacement for WP Rocket. Instead, you can use it as a companion plugin to get a little bit more control over how you optimize your site’s code.

However, if you want to keep things simple, it’s also totally fine to just stick with WP Rocket alone because WP Rocket already includes most of the big features in Autoptimize.

Do you still have any questions about how to set up Autoptimize with WP Rocket? Let us know in the comments section and we’ll try to help!

Author's avatar

Colin Newcomer is a freelance writer who spends his days inside the WordPress dashboard. He lives a life of danger, riding a scooter through the chaos of Hanoi.

0 comments
Add a comment
Your email address will not be published. All fields are required. Comment policy: We love comments and appreciate the time that readers spend to shader ideas and give feedback. However, all comments are manually moderated and those deemed to be spam or solely promotional will be deleted.

Get a Faster Website in a Few Clicks

Setup Takes 3 Minutes Flat

Get WP Rocket Now What are you waiting for?

{"cart_token":"","hash":"","cart_data":""}