If you have read our article on The INs and OUTs of WordPress Speed Optimization you’ll find that Autoptimize is one of the Important Plugins for Speeding up your website. Well this article is dedicated 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.
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.
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”.
This will minify all of your CSS code making making your website a little smoother by reducing the file size.
Finally click on “Save Changes and Empty Cache”. Check your website and you website speed.