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.
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.
Minify HTML, CSS & Js Files Manually
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.
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 –
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.
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 –
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.
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.