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:
- WP Rocket is a full caching and performance plugin. It implements page caching plus a number of performance best practices across a broad range of areas.
For clarity, it might help to define a few terms before continuing on with the differences:
- Minification – removing unnecessary content from code to make it smaller without changing functionality. For example, removing white spaces or comments.
- Deferring code – waiting to load less important code until after more important content has loaded. For example, prioritizing loading the visible above-the-fold part of your site over a tracking script in the background.
However, Autoptimize does not provide other important optimization tactics such as:
For that reason, Autoptimize is not a replacement for WP Rocket.
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:
- WP Rocket is designed so that it’s the only WordPress performance plugin that most people need.
- Autoptimize is primarily focused on one part of performance optimization, which lets it go into a little more detail. You still need to pair it with a caching plugin like WP Rocket (at a bare minimum).
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:
- Minify CSS
- Optimize Google Fonts
- Optimize CSS deliver (Remove Unused CSS)
And here are the settings in Autoptimize.
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:
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:
- With WP Rocket, WP Rocket will automatically enable and apply optimizing Google Fonts with what we think are the optimal settings for most users.
- With Autoptimize, you can choose exactly how that optimization works. For example, you could load them render-blocking, defer them, remove them altogether, etc.
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.
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.
- For casual users, you’re totally fine to just use WP Rocket and skip Autoptimize. WP Rocket already covers most (but not all) of what Autoptimize does.
- For advanced users/tweakers who want more fine-tuned control, you might prefer the extra options in Autoptimize, in which case you can pair it with WP Rocket.
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).
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:
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:
- Try to find the specific file that’s causing problems and exclude it (if you have the technical knowledge to find the file).
- Disable that specific feature if you aren’t sure how to find the problematic file.
- Aggregate JS-files
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:
CSS Options – JS, CSS & HTML Tab
In the CSS options, a good starting point is to check the first three boxes:
- Optimize CSS Code
- Aggregate CSS-files
- Also, aggregate inline CSS
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.
At the bottom, you can also peruse the Misc Options. When in doubt, just leave these as the defaults.
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 (Short Pixel). However, WP Rocket already handles these features for you in the Media tab, so we recommend leaving them disabled in Autoptimize. Plus, it gets a little complicated with Autoptimize and setting up lazy loading
If you are using WP Rocket, we can still help with lazy loading your images and video, and add any missing image dimensions easily:
Autoptimize does not provide YouTube video lazy loading optimization and you will need to install another plugin:
We strongly recommend using an image optimization tool to help serve images in next-gen format:
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.
Note – In all of our experiments, utilizing the Used CSS option alone yielded better results than using it in conjunction with Critical Path CSS. The reason for this is that producing Critical path CSS can also result in Cumulative Layout Shift, therefore disabling this option would lower Cumulative Layout Shift and hence enhance the PageSpeed Insights grade.
Autoptimize does not provide Remove Unused CSS feature, or at least outsources this service to another party:
While WP Rocket does include this feature:
Just how important is this feature?
We conducted a number of experiments using some of the most popular page builders. We activated the new Remove Unused CSS option and monitored the results. As you can see, the CSS savings are significant, and they will have an effect on overall performance:
|Page Builder used with WooCommerce||CSS Before (KB)||CSS After (KB)||CSS Savings %|
CSS saving isn’t merely for the purpose of saving CSS. We can see how such enhancements might improve performance.
The Extra tab lets you configure a few additional advanced settings. However, most of these either:
- Directly overlap with WP Rocket in the case of disabling emojis or removing query strings.
Unless you’re an advanced user, you can probably ignore everything here and stick with the settings in WP Rocket.
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.
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.
If you want to keep things simple, it’s also totally fine to stick with WP Rocket alone because WP Rocket already includes most of the big features in Autoptimize. WP Rocket will automatically apply 80% of web performance best practices and help you save tons of time. You’ll see an instant improvement to the naked eye in performance and PageSpeed Insights score right away.
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!