Minify HTML, CSS & Js Files, 2 Methods

On the internet speed is everything, if your website is slow then it can impact the user experience a lot, if your website depends upon google for traffic then you will get very less love from google, because google also wants websites and web-apps to be faster.

Now there are lots of things that can effect your website speed, like number of js scripts, speed of your web server and the amount of code you have used.

Related Posts

From all those reasons that effect the speed of a website you can change a few of them for a faster website but it will be very expensive and will be time consuming, like you can buy a fast server, reduce the amount of scripts used and make your code more efficient.

Why Minify HTML, CSS & Js Files?

Because minifying html, css and js files will reduce the size of these files and thus make it more efficient and thus make it faster than before. Minimization of html, css, and js files doesn’t take a lot of time so it will be a fast and quick way to increase your website speed without spending money or without spending more time.

How Does Minify of HTML, CSS & Js Work?

The way minifying of website files work is that the regular code that people use has spaces and formatting in them, this is to make it look better for human use and understanding. What minifying does is that it removes these white spaces and formatting between the code, this reduces the size of the html, css, and js files in turn.

The Example given below displays what a minified and non-minified css code looks like.

difference between non-minimized and minimized css code

Minify HTML, CSS & Js Files Manually

There are two ways that you can minify html, css and JavaScript files, this method will show you the manual method which you can use to manually minify your website files. Manual method is recommend if you are minifying just a few files of code or you have a little amount of files to deal with.

Minify HTML Manually

To minify html code manually you can use a online html minifier tool. First you will need to go to this link here – http://kangax.github.io/html-minifier/

Now once you are in the Html Minifier website, copy your html code and paste it in the input box in the html minifier website, click on “Minify” to minify the html code that you pasted there.

Online Html Minifier

You will get the minified version of your html code in the same screen that you can copy and use. Now its always good to have a backup of your original html code as sometimes minifying the html code can give errors.

Alternative Online Html Minifier Tools –

  1. https://beautifytools.com/html-minifier.php
  2. https://www.toptal.com/developers/html-minifier/
  3. https://smallseotools.com/minify-html/
  4. https://codebeautify.org/minify-html

Minify CSS Manually

To Minify CSS codes you can use a online css minifier tool by Free Formatter, the link to the online tool is – https://www.freeformatter.com/css-minifier.html.

Now once you are in the free formatter css minifier you will get two options to minimize your css codes, you can copy and paste your raw css code in the input field or you can upload your css file then minify it.

CSS Minifier

After entering the css code in the input box or after selecting your css file click on the ‘Minify CSS’ button or the ‘Minify CSS in New Tab’. This will minify the css code and will give you the output.

Alternative Online CSS Minifier Tools –

  1. https://www.toptal.com/developers/cssminifier/
  2. https://www.cleancss.com/css-minify/
  3. https://www.giftofspeed.com/css-compressor/
  4. https://smallseotools.com/minify-css/
  5. https://beautifytools.com/css-minifier.php

Minify JavaScript Manually

To minify JavaScript you can use an online JavaScript minifier tool by tutorials point, the link is – https://www.tutorialspoint.com/online_javascript_minifier.htm.

Go to the link which will take you to the online js minifier tool, now once you are inside the tool you will need to remove the default demo JavaScript code from the left input box. After you do that enter your own JavaScript code in the input box and click on the ‘Minify’ button at the top. The minified JavaScript will be given on the right side of the screen.

Online Js Minifier

You can also upload the JavaScript file from your computer or you can also enter a URL to the js file you want to minimize.

Alternative Online JavaScript Minifier Tools –

  1. https://www.toptal.com/developers/javascript-minifier/
  2. https://www.minifier.org/
  3. https://codebeautify.org/minify-js
  4. https://www.digitalocean.com/community/tools/minify
  5. https://www.freeformatter.com/javascript-minifier.html

Minify HTML, CSS & Js Files Automatically

If you don’t want to minify your website files manually one by one then you can also use a automatic method that will minify your website html, css and js files on the fly. You can do this using Cloudflare on your website. Cloudflare is a content delivery network and DDoS mitigation company. It acts as a reverse proxy between a website’s visitor and the customer’s hosting provider.

Cloudflare is completely free for personal websites so you need have to pay anything. To start you will need to first connect your domain name with Cloudflare, you can do this by following the video tutorial below –

Now once you have Cloudflare connected to your domain name you can now enable html, css and js minify feature that Cloudflare has, which will automatically minify your website resources on the fly and serve the frontend users the minified version of the html, css and js files.

To enable it go and login to your Cloudflare account, after logging in select your domain name. Now once you are inside the settings of the domain name go to the ‘Speed’ tab.

In the ‘Speed’ tab go to ‘Optimization’, in the optimization tab scroll down a little to ‘Auto Minify’ setting. Now in Auto minify setting select what you want to minify, there will be three options, html, css and js. Select what you want to minify and check mark it.

Enable Autominify in Cloudflare

After that go to the ‘Overview’ tab at the top of the menu, in the overview tab click on the ‘Purge Cache’ option, after that click on ‘Purge Everything’ this will clear the Cloudflare cdn cache.

Now open your website in a incognito tab and check whether the html, css and js files that your website uses are minified or not. If they are then Auto Minify is working properly. Also check whether all the things on your website are working properly or not, because minifying css and js sometimes breaks the code of your website.

Conclusion

That is how you Minify your html, css and JavaScript files using both manual and automatic methods. I recommend you the automatic method compared to the manual one. If you need any help then send me a mail at – [email protected], thank you.