The best way to do wordpress optimization is to use a plugin. A typical site contains HTML, CSS, JS, image files, font files, ad scripts and many others. Bloating of this code will result in a slow speed of the site.
You can achieve better search results through a faster site and a good user experience.
Google made it clear in 2020 that page user experience signals would be considered from June 2021. Core Web Vitals are the crucial signals to indicate this change.
Autoptimize is a performance-enhancing plugin for WordPress sites. It has more than 1+ million active installations. It can work on the PHP version of 5.7.2 and was updated two months ago.
Table of Contents
In an earlier post, we have done a case study on the influence of minification on core web vitals. Caching and wordpress minify plugins are different. Unless both are involved, we don’t get the desired results.
The same site is being used to check the performance metrics of the Autoptimize plugin. It does minify HTML, CSS and JS resources as any other optimization plugin. It had advanced features for more tech-savvy WordPress users.
Test Site Details
You can go through the FVM wordpress minify case study to know the complete details of the site under test.
It is mainly helpful for optimizing your site. The main pro of this plugin is that it can aggregate, minify and cache scripts and styles. It injects CSS in the page head in the free version.
If you are using the CriticalCSS, then you can also inline and defer the aggregated full CSS. It can move and defer scripts to the footer.
Minification of HTML is possible. Optimize Google fonts and lazy-load images. It can improve the performance of the site even with HTTP/2. A page caching plugin in addition to Autoptimize is recommended.
The following 4 tabs were available as general settings –
- JS, CSS & HTML
- Critical CSS
The following sub-options under each category were activated. It is different from the default settings.
Since we were using the RocketLoader option in Cloudflare, I thought it would be best to disable this feature. Also, when I tested the page speed results using this option, I didn’t get any good results.
- Optimize CSS Code – Enabled
- Aggregate CSS Files – Enabled
- Also aggregate inline CSS – Enabled
- Inline and Defer CSS – It is fully automated using the CriticalCSS tab.
Note: The WordPress version costs $10/month for the first domain. For each additional part, it costs an extra $7. It is a fully automated version. All the deferred CSS are generated automatically by this service.
The regular version costs $3. It would help if you did it manually.
- Optimize HTML Code – Enabled.
- MISC Options
- Save aggregated script/CSS as static files? Yes
- Minify excluded CSS and JS files? Yes
- Enable 404 fallbacks? Yes
- Also, optimize for logged-in editors/ administrators? Yes
I enabled no options here.
I used the API key from the purchased plan. The rest of the things were done automatically. Only it takes some time.
- Extra Auto-Optimizations
- Google Fonts – Leave as is
- Remove emojis – enabled
- Remove query strings from static resources – enabled.
We did not check the rest of the settings.
Autoptimize Performance – GTMetrix Test
In this test, the time to first byte (TTFB) value was 350ms. Related to this metric, it is average performance. The fully loaded time was 30.3s. It is very high compared to the size of the page.
The main reason for such a result is video ads. Since they execute scripts endlessly, thus the result. The total page size is 1.98MB, and the total page requests are 266. The top issues and recommendations from GTMetrix for this page are –
- Avoid long main thread tasks.
- Serve static assets with an efficient cache policy.
- Use a content delivery network (CDN)
- Avoid document.write()
Web Vitals Score
- LCP (largest contentful paint) = 956ms – Good
- CLS (cumulative layout shift) = 0.15 – Ok, but consider improvement.
- TBT (Total blocking time) = 1.1s – Much longer than recommended
There were 36 requests from HTML of size 365.3KB. Most of the time, taking ones was related to google ads. 6 bids from CSS resources of 25.3KB. Most of them are Google font files.
It indicates that Autoptimize is good at CSS minification and optimization.
101 requests related to JS and of size 1.1MB. Most of the big-sized resources were from google and video ads. Since both of them were loading many scripts, that could be seen in the waterfall view.
Images were 244.2 KB in size and created 52 requests. Most of them were from google and video ads.
The number of images in the post was 6.
The Imagify plugin has reduced the size a lot. But other files from video and google ad network were plenty.
Autoptimize uses Shortpixel’s global CDN. It is a premium service. Since we have disabled this option in the settings, not much image optimization came from Autoptimize.
Autoptimize Performance Test – PageSpeed Insights
The latest Lighthouse tool, 8.0.0 on Chrome 90.0.4430.97, was used. The mobile score was 59, and the desktop score was 64.
It is an official tool from Google. So the core web vitals are considered more reliable than other tools.
Mobile Test Results
LCP – 3.2s, FID – 23ms, CLS – 0.
The lab data shows that,
LCP – 4.8s, TBT – 110ms, CLS – 0.
The largest contentful paint was in the red zone. The other two metrics of FID and CLS were in the green.
Autoptimize does not play many roles in mobile optimization as we served AMP pages.
Cdn.ampproject.org and other scripts did all the optimization. Since we were also using the Sitekit plugin, it created duplicate hands, which spoiled a perfect score.
Desktop Test Results
This test has more relevance to Autoptimize optimization performance. Since minification and CSS optimization show better results on desktop pages, the core web vitals in this test show the truth of the plugin.
FID = 3ms ; LCP = 3.7s ; CLS = 0.16.
LCP – 1.4s, CLS – 0.164, TBT – 440ms.
The opportunities for this page are –
- Reduce initial server response time.
Diagnostics Information –
- Ensure text remains visible during webfont load
- Reduce the impact of third-party code
- Does not use passive listeners to improve scrolling performance.
- Avoid document.write()
- Serve static assets with an efficient cache policy.
- Minimize main-thread work.
Autoptimize is better at improving page loading time compared to the user experience. LCP, CLS are core web vitals related to how the elements of the page load. It has less to do related to optimization scores.
So the next test of page performance will be more indicative of Autoptimize features.
WebPageTest Results – Autoptimize Performance
In this test, the first-byte time was 0.313s. The web vitals stats were LCP – 1.718s, CLS – 0.134 and TBT > 0.889s. It is tested for a desktop page.
LCP was green, CLS was orange and TBT in red. This tool indicates TBT as a core web vitals metric compared to FID in the PageSpeed Insights tool.
The fully loaded time was 5.653s, loaded 112 requests and page size was 1.585MB.
The HTML, CSS, JS, image and font files were able to load within 1.7s.
The other additional loading time was because of google Adsense scripts. The total blocking time of 0.889s also added to the fully loaded time.
Cache static was 52%, and CDN detected was 92%. The other web page speed metrics were 100%. GZip compression was 100%. Leverage browser caching failed in certain aspects.
JS was consuming the majority of the resources. Nineteen requests were from the original domain, and the rest mainly from Adsense ads, font files.
In size, the video ad domain consumed the maximum extent.
Following were font files and Adsense ads. The parent domain consumed only 156KB.
As a result of the DreamPress plan, Imagify plugin, crticalcss.com options, the page’s loading time was significantly reduced. Autoptimize was good at HTML and CSS optimization. It was also doing the GZip compression well.
Without the ads, the page loaded within 1.7s. It is a perfect load time. But the core web vitals were not wholly perfect. As observed in the previous case study, it is related to the position of the elements, height of the ads and user experience.
Finally, we can say that Autoptimize does best at complete minification and small optimization.
But it is not a full-page caching plugin, unlike WPRocket and other plugins. Unless a caching plugin is used in addition to Autoptimize, we cannot see better performance scores.
Setting the height of Adsense ads improved the CLS score. So if we can do the same on desktop pages, we may get a perfect 0 score.