How to Configure Autoptimize for Better Performance?

Does your WordPress Site experience high Bounce rate? or Does your GT Metrix report shows to minify HTML, CSS and JS files/Defer parsing of JavaScript? Well if you are running though this problem or similar problem of slow loading website, there’s a solution for boosting the speed.

If you have read our article on WordPress Speed Optimization you’ll find that Autoptimize is one of the Important Plugins for Speeding up your website.

Well this article provides a a detailed Process that’ll help you Configure Autoptimize Plugin to speed up your Site by minifying and combining all of the CSS and JS files along with the minification of the HTML Codes.

A Brief About Autoptimize


What is Autoptimize Plugin?

Autoptimize is one the coolest plugin that let’s you minify and combine all of the CSS and the JS files, and load it in a proper order that is the styles are moved to the header and scripts to the footer. Apart from this the plugin also helps in the minification of HTML codes and caching of the files.

Results after running the Plugin:

Autoptimize if run correctly, will definetly boost your website speed by:

Benefits of using Autoptimize How did this happen?
Reduction in the number of requests made to the server. Due to the concatenation of files into a lesser number.
Reduction in the page size/file size of the website. Due to the minification of the codes.
The website initial load time decreases. Since the processing of JS is deferred (JS files are moved to the footer)

Configure Various Autoptimize Settings – Step by Step

1. Installing the Plugin

1. Login to your admin.
2. Click on Plugins-> Add new -> Search for Autoptimize.
3. Click on Install-> Activate.

If you are a WordPress Beginner and want to know the different ways of Installing a WordPress Plugin, Please refer our guide to.

Different ways of Installing a Plugin in WordPress.

2. Optimize HTML, JavaScript and CSS Codes.

First of all find the installed Autoptimize plugin by clicking on, Plugins-> Installed Plugins. Find the plugin and click on settings.

Autoptimize Settings

(i) Optimizing the HTML Code.

In order to minify all the HTML code in your website, tick the first box, “optimize HTML code”.
This will remove all of the white spaces in between the HTML codes, which can ultimately help in reducing the file size of your website.

Autoptimize optimize HTML code

(ii) Optimizing the Javascript.

This is the most important part, since most of the errors that might occur is because of the Javascript files. To configure it properly, tick “Optimize Javascript Code” and “Also aggregate inline JS“.

Autoptimize Optimize Javascript Code

Now here comes the part if your site uses Sliders or any elements that has any effects such as transition/flasy, Some of the elements in the site might break or cause an error, in which it is important that you find the js file causing it and include it in the “Exclude Scripts from Autoptimize”.

In the Screenshot above, I have excluded the main Jquery file (jquery.js) from Autoptimize, which causes most of the error.

( iii) Optimizing the CSS Code.

In order for this to work you need to tick the “Optimize CSS Code” and “Also aggregate inline CSS”, Rarely though “If you encounter any error” or some of the elements doesn’t show up as it should be, you can exclude the CSS files from minification by including the file name in the “Exclude CSS from Autoptimize”.
Autoptimize Optimize CSS Code
This will minify all of your CSS code making making your website a little smoother by reducing the file size.

Last Step

Finally click on “Save Changes and Empty Cache”. Check your website and you website speed.
Autoptimize Save Changes


Please let us know in the comments below, What Plugins do you use to Speed up your Website?

Leave a Comment