Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to Configure Autoptimize for Better Performance?

Does your website 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.

The article focuses on optimizing you website speed by minifying and combining all of the CSS and JS files along with the minification of HTML using the Autoptimize plugin.


A Brief about Autoptimize:

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.


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)
Installing the Autoptimize Plugin (Skip if you have already installed Autoptimize)

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

Configuring the Settings for Autoptimize.

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

Autoptimize Settings

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

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 from Autoptimize, which causes most of the error.

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

The post How to Configure Autoptimize for Better Performance? appeared first on WP VILLA.

This post first appeared on WP Villa - Blog For WordPress Enthusiasts, please read the originial post: here

Share the post

How to Configure Autoptimize for Better Performance?


Subscribe to Wp Villa - Blog For Wordpress Enthusiasts

Get updates delivered right to your inbox!

Thank you for your subscription