How To Use Autoptimize WordPress Plugin To Optimize Your Sites

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.

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 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 in 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. Smaller javascript filesize will make your web page more lightweight.

You can use “Aggregate JS files?” option to concatenate and combine javascript files in your web page, into one single javascript file, except jQuery file. It is important to reduce HTTP requests to improve your website performance.

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 theme/plugin that has poor-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.

For example, you can try to enable “Also aggregate inline JS?” option and remove the jQuery file (js/jquery/jquery.js) from “Exclude scripts from Autoptimize:” option. It will allow you to optimize all javascript codes, both inline javascript and external javascript files, including jQuery file, and load it in non-render blocking. Again, you can do it only if your theme and plugins support it.

CSS Optimization

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.

Similar to javascript optimization, you can use the “Optimize CSS Code?” option to minify your CSS files and “Aggregate CSS-files?” to combine your CSS files.

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.

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 is 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.

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.

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.

Source: https://web.dev/extract-critical-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.

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.

Summary

Autoptimize is a popular WordPress plugin to optimize javascript / CSS / HTML output of your web page to improve your WordPress performance.

It is a perfect combination to be used with RunCloud Hub for the server-side page caching.

Categories: WordPress, Tutorials

Simplifying Server Management

RunCloud is a cloud server management tool that allows you to maintain full control of your server and host multiple WordPress, WooCommerce, Laravel, and PHP applications with fast and easy configuration.

Start Your Free Trial

5 days free trial no credit card required cancel anytime

Leave a Comment

Your email address will not be published. Required fields are marked *