How to Minify HTML, CSS and JavaScript Using Autoptimize Plugin

Google and other Search Engines give value to your website if it loads so quickly. Because none of the viewers has many patients to wait long to view your content and you just have 1.5 seconds to grab their attention. If your site takes to long to open, you usually lose your viewers. So, this is essential to speed up your website. There are several ways you can optimize your site. But one of the most important parts is to Minify HTML, CSS and JavaScript.

If you ever did a Speed test on Google PageSpeed or GTmetrix, you probably see that option.

Every website loads with a lot of files contain HTML, CSS and JavaScript. And most of the files include a lot of space, comments, Block delimiters etc. So, significantly it takes extra times to load properly.

This also depends on the Theme quality. For example, a premium theme quality always better than a Free theme. Premium themes are well coded and built by highly skilled developers. But all themes are not the same and have different type of functions. So, by Minifying those HTML, CSS and JavaScript file, you can strategically increase your site speed and make your visitors happy.

What is Minify and Why it is Beneficial?

Minification is a programming language that removes all unnecessary characters from source code without changing its functionality. These unnecessary characters usually contain “white space characters, new line characters, comments, and block delimiters”.

Before Minify and After Minify

They are used to add readability to the code but are not required for it to execute. This way it reduces the amount of code that has to be transferred over the web and saves your bandwidth. So by minifying HTML, CSS and JavaScript, you can easily remove that unnecessary characters from your site and significantly increase your site speed.

How to Minify HTML, CSS and JavaScript

There are two ways you can Minify HTML, CSS & JavaScript. Either you can do by editing your theme code or you can use a WordPress plugin, called Autoptimize. In this article, we will show you the both process about How to Minify HTML, CSS and JavaScript.

To know the exact HTML, CSS or JavaScript file that is causing the issue, you need to check it on any site speed test tool like Google PageSpeed tool or GTmetrix. Because not all of your files contains these type of unnecessary characters.

After checking your site result, you will get it. Here is a picture below of my site that considers fixing CSS and JavaScript.

Minifying Css, JavaScript

It defers on your theme quality. So, nothing to worry if you see both are said to Minify and it is better to get a Premium theme.

There are some online tools by which you can Minify HTML, CSS and JavaScript code.

Before you make any change, take a backup of that file.

#1 Minify Code:

Minify Code Tool

Minify Code is an All in One Minifying tool. It can Minify your JavaScript, CSS and HTML codes. All you need to copy the HTML or CSS or JavaScript code and paste it here. Then Click on Minify Option. This tool automatically Minify your code. After that, copy the Minified code in that file.

You can also Minify your CSS and JavaScript code like HTML code with that tool.

# 2 Willpeavy:

Willpeavy

Willpeavy is another great tool to Minify HTML codes. This tool works the same way as minify code does. It Minifies HTML and any CSS or JS included in your markup. To use this tool, you just need to copy your code here and click on Minify.

Minify Using Autoptimize Plugin

Autoptimize

If you are not familiar with such coding, then it’s better to use a plugin and recommended for beginners. So here comes the Autoptimize plugin for WordPress users.

Autoptimize concatenates all scripts and style codes and makes them smaller that loads so quickly. It minifies all the HTML, CSS & Javascript code itself and making your page really lightweight. With Minification, this plugin adds expires headers and moves styles to the page head and can move scripts to the footer.

Autoptimize Recommend Settings

You can easily do all stuff from plugin settings. After activating this plugin, go to Settings> Autoptimize. Click on the “Show advanced settings” button.

In the HTML section, check “Optimize HTML Code” and “Keep HTML comments” for faster performance.

Autoptimize HTML options

In the JavaScript section, enable “Optimize JavaScript Code”. You can also enable “Force JavaScript in <head>” to load JS early and reduce the chance of JS errors. In case if your JS breaks scripts, then you can enable “Add try-catch wrapping”.
Autoptimize JavaScript Options

In CSS section, enable “Optimize CSS Code”, “Also aggregate inline CSS”. You can also enable “Inline and Defer CSS” if you have minified CSS. Try this tool to minify your CSS and paste it in the box.

Autoptimize CSS options

Enter your CDN URL in the “CDN Base URL” field. For example, ‘//cdn.example.com/’.

And last, enable “Save aggregated script/css as static file”. But make sure, your webserver can properly handle the compression and expiry.

Autoptimize CDN options

After Minifying your code, don’t forget to check your site speed again. Then compare it with that past results. If your site getting some problem or doesn’t show properly, you may try to clear the Cache.

Conclusion

Minifying HTML, CSS and JS is beneficially for your site. It removes your code’s unnecessary characters and making them smaller that are browser friendly. This way you can improve your site loading speed.

If this tutorial helps to Minify HTML, CSS and JavaScript, please do share this article on Facebook, Twitter, Google+.

Jyoti Ray

Jyoti Ray is the founder of WPMyWeb.com. He writes about Blogging, WordPress tutorials, Hosting, Affiliate marketing etc. He mostly spends times on blogging, reading books and cooking.