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.
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.
But when you use a WordPress theme and some plugins that add extra JavaScript and CSS files to your site, you will probably need Autoptimize to improve your site 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 works on the WordPress side to optimize your JavaScript / CSS / HTML files on your web page, and RunCloud Hub works on the server-side to cache the optimized version web page.
JavaScript Optimization
Autoptimize comes with some options to optimize JavaScript files on your web page. These JavaScript files come from WordPress core, theme, and active plugins. When you enable the “Optimize JavaScript Code?” option, JavaScript files will be minified and compressed to reduce the file size. A smaller JavaScript file size will make your web page more lightweight.
By default, the setting for JavaScript is “don’t aggregate but defer” and “also defer inline JS” and no exclusions. Aggregation is off by default since the number of HTTP requests aren’t as important with HTTP/2.
These two default options are enough for many WordPress sites to both minify and combine JavaScript files.
Please remember that these options work on your web page only if you have well-coded JavaScript codes. If you use a theme/plugin that has poorly coded JavaScript codes, these options can break some features in your web page that rely on JavaScript.
If these options work nicely on your site, then you can stop here or explore other JavaScript optimization features. You can also add a list of scripts that you do not want to optimize.
CSS Optimization
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.
HTML Optimization
HTML optimization is a bonus after you optimize JavaScript and CSS files in your site.
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.
Extra Optimization
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 emojis
You can enable this option to remove WordPress core emoji’s inline CSS and inline JavaScript, except you use this emoji feature on your website.
Remove query strings from static resources
If you enable JavaScript and CSS optimization, this option is no longer needed.
But if you disable JavaScript and CSS optimization, you can try to enable this option.
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.
Rules Panel
A rules panel is now available to help users create manual rules, even if you do not have a Critical CSS API key.
Misc Options
You will probably see some options in the “Misc Options” section. If needed, you can enable all of these options.
The “Save aggregated script/css as static files?” option is very important to cache the optimized JavaScript/CSS files as static files.
This is why you will see the “Autoptimize – Delete Cache” option on the admin bar to allow you to remove the optimized JavaScript/CSS files, and it will be regenerated again.
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
Autoptimize is a popular WordPress plugin to optimize JavaScript / CSS / HTML output of your web page to improve your WordPress performance. With its latest string of new features introduced in version 3.0.3, Autoptimize is a fantastic choice if you have additional CSS and Javascript files on your site. Do you use RunCloud’s server-side caching & are considering pairing it with Autoptimize? Awesome, feel free to join the conversation below to share your experience. 💬
