What is Minification and How to Minify CSS, JS and HTML?

What is Minification?

Minification is the process of removing unnecessary spaces, formatting and comments from the files. Generally the file types of HTML, CSS and JS should be minified in order to improve the page loading speed. As search engines like Google penalizes slow loading pages, it is necessary to optimize these resource files. In addition, all images on a site should be optimized for search engines so that the page can load faster and provide better user experience.

How to Create Minified Files?

There are many tools available to minify your files. If you are using content management system like WordPress then the task is simple. Free plugins like W3 Total Cache will do CSS and JS minification along with HTML compression tasks for you. And plugins like WP Smush can do the image compression without loosing quality. But for other site builders like Weebly or Wix, every external file you upload should be minified before uploading with your own effort.

In order to reduce your effort, you can use the following free SEO tools:

• CSS Minifier
• JS Minifier
• HTML Minifier
• Image Compressor

Let us check how to use these tools to create the minified version of your CSS, JS and HTML files. We have also included the image compressor tool for optimizing your images for search engines.

CSS Minifier Tool

Go to CSS minifier tool and you will see the following two options:

• Paste the content – if you have only one CSS file to be minified then copy the content of the file and paste it on the text box. Enter the captcha code and click on the submit button to get the minified output on the screen. You can also download the minified CSS file and upload it to your site with .min.css extension.
• If you have more than one file, then navigate to “Upload CSS Files” tab. Here you can upload up to 10 files at time each 2MB in size. Choose the files from your computer and click on the “Compress Files” button to get the minified output. You can download the files to local computer and upload it on your server.

The results of the compression will be shown with progress bars like below:

JS Minifier Tool

Similar to CSS minifier, we have a free tool get your JavaScript files compressed. You can either upload multiple files and get the compressed files or paste the content of single file to get the output online with download option. You can access the JS minifier tool here.

HTML Minifier

HTML minification is also an important factor to improve the page loading speed. You can get the minified version of your HTML files using our free HTML minifier tool. You can upload up to 10 files and get the compressed files that can be downloaded to your site.

Image Compression Tool

Serving optimized images is very important as each image on a webpage sends separate HTTP request to the server. The unnecessary digital data can be removed using free image optimizer tool. You can upload up to 10 images at time with each image size should be less than 2MB. The tool supports PNG and JPG image formats.

Bonus – GZIP Compression Checker

GZIP is the file format used to server compressed files over network to save the bandwidth. Mostly all servers should have GZIP compressions enabled to serve compressed files when requested. You can check the status of GZIP compression using our free tool. The tool will show you the size of data saved with GZIP compression.

The tool will show you the HTTP header information like status code received from server which can be used for troubleshooting purposes.

Example of Normal and Minified Content

Let us try to find how the normal and minified content will look like with the following CSS:

/* Slider Comment1*/

#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}

/* Slider Comment 2*/

#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 300px;
  background: #ccc;
  text-align: center;
  line-height: 300px;
}

The minified version with the above CSS minifier toll will looks like below:

#slider ul{ position:relative; margin:0; padding:0; height:200px; list-style:none;}#slider ul li{ position:relative; display:block; float:left; margin:0; padding:0; width:500px; height:300px; background:#ccc; text-align:center; line-height:300px;}

As you can see all the comments and spaces are removed from the original version. Generally the minified version of the files are marked with .min extension like “style.min.css”.