Autoptimize is a popular WordPress plugin to optimize your WordPress sites with more than 1 million active installs and around 1,200 five stars reviews at WordPress.org.
In this post, we’ll discuss how to use Autoptimize to improve the performance of your WordPress websites.
Table Of Contents
- Who needs Autoptimize?
- Autoptimize + RunCloud Hub
- CSS Optimization
- HTML Optimization
- Extra Optimization
- Critical CSS / Above-the-fold CSS
- Misc Options
- After Action Report — Autoptimize Helps Boost Site Performance
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 on 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.
CSS aggregation is off by default, though you can enable it with a click. Please remember that these options work on your web page only if you have well-coded CSS codes. It’s off by default to prevent any major issues.
If you use a theme/plugin that has poorly coded CSS codes, these options can break your web page layout.
If these options work nicely on your site, you can try to enable the “Also aggregate inline CSS?” option. Autoptimize will aggregate CSS in the HTML.
Enabling the “Optimize HTML Code?” option will minify the HTML output of your web page. It will make the HTML output code 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.
If your website caters to visitors from the European Economic Area, you may want to learn how to stay GDPR compliant while using Google Fonts.
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.
Remove global styles
Introduced with WordPress 5.9, global styles often add CSS & scalable vector graphics (SVG) to your pages automatically. An option is now available to remove global styles.
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 on your site automatically.
A rules panel is now available to help users create manual rules, even if you do not have a Critical CSS API key.
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.
You can now “Enable configuration per post/page?” to change settings per page, or per post, which is ideal for optimizing Largest Contentful Paint for your site.
After Action Report — Autoptimize Helps Boost Site Performance