Minification and Caching can do wonders for WordPress optimization.
WP Rocket is the #1 cache optimization plugin from different polls and reviews. It also has the most uncomplicated interface.
On the other side, Autoptimize is good at code optimization. It can minify HTML, CSS and JS. In addition, it is helpful for developers to fine-tune performance.
But how can we use WP Rocket and Autoptimize together?
Many WordPress users have this question. Autoptimize is a free service, while WP Rocket is a paid one.
We already did a performance test with Autoptimize related to speed and user experience. The results about minification were good but not great on a total score. It does not do full page caching.
WP Rocket plugin is where it fills the gap. It can do minification and cache.
You can only use this plugin only for all purposes.
But Autoptimize has more fine-tune settings that experts can use.
In this performance test, we shall see the optimization results of WP Rocket and Autoptimize used together with 3 testing tools.
Table of Contents
Performance Test Scenario
The test site configuration mentioned in the FVM case study. A test web page of the same site with Autoptimize and WP Rocket together used. So there is not much difference related to plugins, themes, or code.
Autoptimize settings are the same. criticalcss.com are still being used. WP Rocket better optimized to defer CSS code using its inbuilt mechanism. But for testing purposes, we are using the Autoptimize features.
WP Rocket version 3.8.8 used in the test. But as of date, the latest version is 18.104.22.168. The screenshots are of the latest settings.
Web Page Test Review
As we have said earlier, the fully loaded time does not have much relevance in the speed and user experience metrics. The first paint time is what Google and other search engines consider a significant impact in ranking.
Ads play a significant role in the complete loading of the site.
If you are running video ads, then the page continues to load forever. Testing tools do not give a fair score for this hiccup. Instead, some devices can show degradation of score and speed.
Each test uses a different toolset to test the optimization features of the wordpress site and page.
Also, speed is a more impact signal than core web vitals.
User experience signals. Considered for ranking from June 2021. But core web vitals are a minor ranking factor at the current time.
WP Rocket Settings
Following settings used for this test.
RocketCDN not used for the test. Rocket Analytics turned off.
Since we are using AMP pages, mobile cache switched off. User cache is also off as we did not have much restricted content.
Cache lifespan set to 24 hours. CSS minification turned off in WP Rocket as Autoptimize settings were doing it. Minificaton of JS files enabled.
Following JS options turned on.
Lazy load enabled for images, iframes and videos. YouTube iframe replaced with preview image. Add missing images dimensions checked. WordPress embed disabled.
WebP cachning enabled. Imagify plugin used to create and convert WebP images.
Preload cache and Preload links enabled. No settings in Optimize Database turned on. We were using another plugin to clear transient data and optimize it.
Control Heartbeat enabled. Varnish cache automatically detected by WP Rocket.
GTMetrix Test – WP Rocket + Autoptimize
If you consider the paint metrics as an essential signal for ranking, then both these tools together do a great job.
The time to first byte (TTFB) value is 197ms, onload time is 533ms, first contentful paint is 552 ms and time to interactive is 1.0s.
The web vitals are as following –
- Largest Contentful Paint (LCP) = 8.0s
- Total Blocking time (TBT) = 112ms
- Cumulative Layout Shift (CLS) = 0.16
The total page size after optimization was 1.71 MB. The total page requests were 166. The top issues recommended by this tool for this test page and site were as follows –
- Use a Content Delivery Network (CDN)
- Serve static assets with an efficient cache policy
- Avoid document.write()
Most of the issues were medium to med-low impact. Most of them are related to google Ads and video ad codes. Lot of third-party scripts created by both these ad agencies. Most of the issues will resolve, if the ads are removed. Then, we will have a perfect score.
HTML size was 217KB and had 7 requests.
CSS size was 24KB and had 2 requests.
JS size was 660KB and had 28 requests.
Fonts were 165KB in size and had 8 requests.
Images were 107KB in size and had 93 requests.
This test was using Chrome 90.0.4430.212 and the Lighthouse version of 7.4.0.
Google PageSpeed Insights – WP Rocket + Autoptimize
The total score was 95 on the desktop. Though it is not of complete relevance, WP Rocket and Autoptimize could move the score to a perfect 100.
The Origin summary was as follows –
Lab Data was the following –
From the above image, we can say that the core web vitals had a green score on most metrics. The largest contentful paint was only 0.8s, the first contentful paint of 0.7s, a total blocking time of 0ms and a cumulative layout shift of 0.159.
This test was using Chrome 90.0.4430.97 and the Lighthouse version of 8.0.0.
WebPageTest – WP Rocket + Autoptimize
Most of the performance metrics were green in this test also.
The first view parameters were as follows.
- First byte – 0.400s
- Start render – 0.800s
- First contentful paint – 0.802s
- Speed Index – 0.819s
The web vitals were as follows –
- Largest Conteful Paint (LCP) – 0.802s
- Cumulative Layout Shift (CLS) – 0.173
- Total Blocking times – 0.040s
The fully loaded results were –
- Time – 2.439s
- Requests – 30
- Bytes – 591KB.
In all the 3 testing tools, the page speed and user experience signals were very good with WP Rocket and Autoptimize settings.
The same test page did not have a great score with the Autoptimize plugin. It is because of full page caching not enabled.
But WP Rocket does a great job at both caching and minification.
In another case study, we are going to use only WP Rocket settings and check the results.