Introduction

To minify CSS, JS, and HTML involves removing any unnecessary characters from within a file to help reduce its size and thus make it load faster. Examples of what is removed during file minification includes:

• Whitespace characters
• Comments
• Line breaks
• Block delimiters

Most times, the minification process does not affect the function of the file but rather simply optimizes it for downloading purposes. Minifying the CSS, JS, and HTML files in your production environment is especially useful. File changes are often time not made directly in production thus avoiding the need for visually appealing code. Additionally, since Google takes speed into consideration when ranking, minification helps speed up your website making both Google and your site visitors happy.

In order to distinguish minified files from unminified files, a .min is often times included within the file name (e.g. foobar.min.css).

Difference between Minification and Compression

File minification and file compression are not the same thing. Although both aim to achieve the same goal (faster load time) they are both different in how they work. Compression is used to reduce file size by using a compression scheme such as gzip or brotli. Files are compressed before they are sent from the server to the client therefore the compression process is carried out as follow:

1. Files are compressed via a compression method
2. A request is made for the compressed version of a file
3. The compressed file is sent from the server to the client
4. The client uncompresses the file and is able to read the information

Supported compression methods can vary by server as well as web browsers. When a browser makes a request to the server it tells the server which compression method it supports so that the server is able to optimize the response for that browser. If the browser does not support any compression method then the server will simply respond with uncompresses data.

Minification Example

The following example shows how a CSS file looks before and after minification.

Before CSS minification

.entry-content p {
font-size: 14px !important;
}
 
.entry-content ul li {
font-size: 14px !important;
}
 
.product_item p a {
 color: #000;
 padding: 10px 0px 0px 0;
 margin-bottom: 5px;
 border-bottom: none;
}

After CSS minification

.entry-content p,.entry-content ul li{font-size:14px!important}.product_item p a{color:#000;padding:10px 0 0;margin-bottom:5px;border-bottom:none}

As can be seen by the example above, after minification the CSS is harder to read as there is there are no line breaks, whitespace, etc. However, this optimized format requires less bytes thus making it to download.

Summary

In summary, the decision to minify CSS, JS, and HTML files provides advantages for both the website visitors as well as the site owner. By minifying your files you will benefit by reducing the amount of data transfer required, files will run more quickly in the client’s browser, and compression results are enhanced. Taking advantage of minification is a great way to help further optimize your site and is easily achievable with the above mentioned online tools and plugins.