Autoptimize is a popular WordPress plugin to optimize your WordPress sites with more than 1 million active installs and more than 1000 five stars reviews at WordPress.org.
In this post, we will discuss how to use Autoptimize to improve your WordPress performance.
Table Of Contents
- Who needs Autoptimize?
- Autoptimize + RunCloud Hub
- CSS Optimization
- HTML Optimization
- Extra Optimization
- Critical CSS / Above-the-fold CSS
- Misc Options
Who needs Autoptimize?
If you use lightweight WordPress theme/plugins in your WordPress site, you probably do not need any extra optimization. You only need to use a cloud server, and your WordPress will be fast. In this case, adding server-side page caching like RunCloud Hub is more than enough to improve WordPress performance.
Autoptimize + RunCloud Hub
Can we combine Autoptimize and RunCloud Hub?
Short answer, YES!
In fact, Autoptimize and RunCloud Hub are a perfect combination to optimize your WordPress site.
Autoptimize comes with some options to optimize CSS files in your web page. The main CSS files come from your active WordPress theme that controls the visual presentation of your web page. Other CSS files can come from your active WordPress plugins.
Please remember that these options work on your web page only if you have well-coded CSS codes. If you use theme/plugin that has poor-coded CSS codes, these options can break your web page layout.
If these options work nicely on your site, you can try to enable “Also aggregate inline CSS?” option.
For the “Inline and Defer CSS?” option, we will discuss it later.
Enabling the “Optimize HTML Code?” option will minify the HTML output of your web page. It will make the HTML output code is not easily readable, but the file size will be smaller.
Autoptimize has some extra auto-optimization options under the Extra tab.
Google Fonts optimization
You can use this option to optimize Google font loading on your website.
We recommend using either the “Combine and link in head” or “Combine and link deferred in head” option. Please test to see which one works best on your site.
Remove query strings from static resources
Please remember that this option will not improve your web loading time and performance, but it might improve performance scores when you test your website using any page speed testing tool.
Critical CSS / Above-the-fold CSS
The CSS optimization in Autoptimize is enough to optimize your CSS files on your site. The optimized CSS file is loaded in the head with render-blocking.
You probably know that Google Page Speed Insight complains about render-blocking CSS on your site. If you really want to optimize your website for Google Page Speed Insight, you will probably need above-the-fold CSS.
The idea is simple. Above-the-fold is all the content you see on page load, before scrolling. Above-the-fold CSS or critical CSS will be loaded inline on the head to render the content to your user as soon as possible. Other CSS files will be loaded later in non-render blocking after page load.
YES, critical CSS is part of CSS optimization, but not everyone needs it.
There are two ways to use critical CSS in your site using Autoptimize.
Same critical CSS for all pages
If you think you can use the same critical CSS for all pages, you can use the “Inline & defer CSS” option under the CSS Optimization section.
You can check this list of tools to generate critical CSS for your website.
Different critical CSS for different pages
In this case, you will need to sign up for a premium service criticalcss.com to generate different critical CSS for each page in your site automatically.
You will probably see some options in the “Misc Options” section. If needed, you can enable all of these options.
If you use RunCloud Hub and Autoptimize combo, when you click “Delete Cache” on Autoptimize, it will automatically clear RunCloud Hub caches. And when you click “Clear All Cache” on RunCloud Hub, it will also automatically clear Autoptimize caches.