In this guide you’ll learn:
- How autoptimize compares to WP-Rocket
- What are the advantages (and unique features) of each
- How you can use autoptimize & WP-Rocket together
Overview: WP Rocket vs. Autoptimize
Here’s a quick look at the key differences between these two tools.
- WP Rocket: All-in-one optimization plugin that has everything Autoptimize offers, plus page cache, HTML preloading, local analytics hosting, and critical CSS generation.
|Minify CSS & JS||Yes||Yes|
|Combine CSS & JS||Yes||Yes|
|Defer CSS & JS||Yes||Yes|
|Generate Critical CSS||$5/month per domain||Yes (built-in)|
|WebP Support||3rd-party integration||Yes|
|Pre-load next page||No||Yes|
The most important differences between WPRocket and Autoptimize are these:
- WP Rocket has a full HTML page cache
- WP Rocket includes Critical CSS generation
- WP Rocket lets you optimize the database & heartbeat
There is a decent amount of overlap between Autoptimize and WP Rocket, especially when it comes to script management (which is the core purpose of Autoptimize).
Both plugins also let you except specific files from optimization to make sure your page loads properly. For example, it’s usually wise to load jQuery early to make sure components that require it don’t break.
Autoptimize CSS & JS optimization
One key feature missing from Autoptimize is critical CSS generation. You can manually add critical CSS for each page, but that’s completely impractical. If you want to auto-generate this above-the-fold CSS, you need to pay a little over $5/month for a 3rd-party integration.
We’ll talk more about critical CSS in a bit.
WP Rocket CSS & JS optimization
WP Rocket includes all the same features as Autoptimize when it comes to loading your CSS and JS files efficiently.
You can minify, combine, and defer CSS files. There’s also a one-click option to optimize CSS delivery which improves first-paint times (in combination with the Critical CSS feature).
You get similar options for script management, and it’s mostly identical to Autoptimize.
It also adds some auto-detection options to fix common issues. You can easily detect and exempt scripts that commonly cause issues (e.g. JQuery).
Critical CSS Generation
What is Critical CSS? Critical CSS is the CSS styles that are required only to render the above-the-fold content properly (what you see without scrolling). By loading critical CSS inline, you can dramatically speed up the first-paint and largest contentful paint (LCP) for your site.
- WP Rocket: Built in, automatic generation
- Autoptimize: Critical-CSS is a paid addon (costs more than WP Rocket annually)
Technically, both these tools offer critical CSS generation, but only WPRocket has this feature built-in. It happens automatically and works really really well in my testing. You can even generate custom CSS for individual pages if they have non-standard styles.
Autoptimize, by contrast, integrates with a 3rd-party tool to generate critical CSS. In my testing it wasn’t as accurate as WP Rocket’s version, and didn’t properly detect some of my custom post types making it hard to add above-the-fold CSS for those pages.
The Autoptimize critical CSS addon costs $10/month, which is outragiously expensive in my opionion. Annually, that’s more than double the cost of a WP Rocket license.
Remove Unused CSS (WP Rocket)
Most sites have tons of unused CSS styles that are never actually applied to any element on the site. Think of all those Gutenberg blocks and shortcodes you’ve never used.
And on individual pages, it’s even worse. You likely need only 25% (or less) of all the CSS loaded by your site.
WP Rocket now includes the ability to remove unused CSS from your site on a per-page basis. This is a beta feature but will be a huge performance booster as it matures.
Previously, Perfmatters was the only performance plugin to do this well. WP Rocket clearly has them in their sites and plans to match (or beat) them on every feature.
Let’s be clear from the start, Autoptimize can’t compare to WP Rocket when it comes to caching. That’s because it doesn’t even include a page cache. It does, however, cache optimized CSS and JS files.
What’s a page cache?
Your WordPress posts and pages aren’t actually static HTML files. Instead, they’re built from entries in a database. Every time a visitor arrives at a URL on your site, a complex series of database queries is required to built the HTML page using PHP.
A page cache takes the resulting HTML output and stores it as a static file so that it can be loaded significantly faster on future visits. Effective caching is absolutely essential for a fast-loading site.
WP Rocket Caching
WPRocket was initially released as a caching plugin, and that’s still something it does extremely well.
WP Rocket is able to leverage both server-side caching as well as the browser cache on your visitor’s web browser for optimal performance. And it does it incredibly seemlessly. In fact, you only have a few cache options:
You can create a separate page cache for mobile devices (only needed if your site has a separate mobile version).
You can also specify the cache duration (how to long to keep the cached page before refreshing).
There are also separate settings about when to refresh the cache (e.g. when a new plugin is installed or a new post is published).
Neither of these plugins directly optimizes images, but they still have some essential image-optimization features including:
- Lazyload images
- Serve WebP images (via compatible plugin)
- Specify width & height for images (WP Rocket only)
Autoptimize image optimization
Autoptimize has built-in lazy loading for images, which means you don’t have to load the image until it scrolls into view. This decreases page size and can dramatically improve the fully loaded time in GTMetrix.
One of the settings I really like is the ability to .lazy-load from nth image’. This lets you exclude your above-the-fold images to make sure your LCP (Largest Contentful Paint) score doesn’t suffer.
Autoptimize can automatically service WebP images via Shortpixel’s CDN. Simply enter your Shortpixel API key and Autoptimize does the rest (lazyload must be enabled). This will serve on-the-fly optimized images at the exact size of the visitors viewport.
It works great and is quite affordable (I pay around $30 a year across multiple sites).
WP Rocket Image Optimization
WP Rocket also has built-in lazy-load, and it works well. And it’s not just for images, you can also lazy load iframes and embedded videos.
Lazy loading videos dramatically improves page-load times for pages that include videos. It works by displaying an image thumbnail of the video (with play button) until it is clicked. I use it on my homepage (which helps me score an ‘A’ on GTMetrix despite multiple embedded videos).
Unfortunately it doesn’t (yet) have the ‘lazyload from nth image’ feature of Autoptimize, but you can specify a custom class(es) to exclude.
Missing Image Dimensions
If an image doesn’t have specified width and height attributes in the HTML markup, WP Rocket can add them automatically. This helps with Cumulative Layout Shift (CLS) which is a Google Page Experience metric.
WP Rocket can serve WebP images if you have a compatible plugin installed. It integrates seamlessly with the Imagify plugin (by the same developer) but also works with Shortpixel and EWWW Image Optimizer.
What is preloading at why does it matter?
Preloading is an optimization technique that speeds up the connection to required resources and loads them before they are actually called in the document. This is useful for slow-loading resources like Fonts. WP Rocket can also pre-load entire webpages.
Autoptimize can pre-load Google Fonts or custom 3rd-party resources that you specify.
It also handles font fallback preferences such as font-display: swap;
WP Rocket Preloading
WP Rocket lets you pre load fonts (both local and 3rd-party) as well as pre-connect to any 3rd-party resources that you specify.
It take this a step further by letting you pre-load your sitemap (it auto-detects it in most SEO plugins like Yoast and Rankmath).
And the coolest feature is the ability to prefetch entire webpages when your visitors hover over a link. This makes additional pageviews appear to load instantly (similar to flying pages).
Additional Optimization (WP Rocket)
We’ve pretty much covered everything that Autoptimize is capable of, but WP Rocket is just getting started. There are even more ways it can speed up your website:
WP Rocket can clean up your database and remove spam comments, transients, temporary files and post revisions that can lower database performance.
It only takes a few clicks.
The WordPress heartbeat is an API that allows for data transfer between the server backend and the browser. It takes place every 15-60 seconds and leverages admin-ajax.php to do so.
On low-resource servers, the heartbeat can slow down page generation time and consume valuable resources. WP Rocket lets you manually adjust the heartbeat settings to further optimize your performance.
Using WP Rocket and Autoptimize together
It is definitely possible to use these two plugins together (I’ve done so on one six-figure website). However there are only very specific use cases where this would make sense.
That’s because WP Rocket has almost every feature that Autoptimize does (plus extras) so there’s very little advantage to using both.
Reasons to use Autoptimize with WP Rocket
There are a small number of features the Autoptimize either:
- does better than WP Rocket
- offers and WP Rocket doesn’t
Mostly this comes done to granular control of CSS and JS file loading. Autoptimize also has more advanced controls over Critical CSS generation (if using the paid integration).
Finally, Autoptimize offers the ‘lazyload after nth image’ feature.
Those are really the only reasons to consider using them together. In most cases you’d be better off just using WP Rocket and living with the minor difference in functionality.
That’s what I did in the end, and I deleted Autoptimize from my site altogether.
How to combine them
In most cases, you would let Autoptimize handle only the exact features you need (e.g. image lazyloading or script management) and let WP Rocket handle everything else.
This means you must go into the WP Rocket settings and disable whatever features you’re controlling with Autoptimize.
Verdict: Should you choose Autoptimize or WP Rocket?
WP Rocket won every round of our comparison and is a better, more powerful plugin in almost every respect. It’s not a fair fight, however, as Autoptimize is a free plugin whereas WP Rocket costs money.
If price is no object, you should go with WP Rocket every time. I install it on all of my production websites.
However if you’re on a budget, you can combine several free plugins to get most of the functionality that you get with WP Rocket.
For example, you use use Autoptimize with WP-Optimize and Flying Pages to get about 90% of what WP Rocket offers.
The most important missing feature? Critical CSS generation.
For me, Critical CSS is a must-have feature because it vastly improves my Pagespeed and core web vitals scores. I can’t live without it.
Secondly, using one plugin (rather than two or three) is always going to be more efficient. You’ll almost always get faster load times and fewer compatibility errors even with similar settings enabled.
Choose WP Rocket if:
Choose Autoptimize if:
- You can’t afford $40/yr
- You don’t care about critical CSS
- You already have a dialed-in cache plugin