Minification refers to the method of removing unnecessary or redundant data while not affecting how the resource is processed by the browser - e.g. code comments and data formatting, removing unused code, using shorter variable and function names, and so on.
When it comes to generating a page or running a script, internet browsers aren’t concerned regarding the readability of code. Minification strips a code file of all information that isn’t needed in order for the file to be executed. Not like usual compression techniques, minified files don’t need to be decompressed before they'll be read, changed or executed.
Minification is performed when the code for a web application is written, but before the application is deployed. Once a user requests a webpage, the minified version is distributed rather than the complete version, leading to faster response times and lower bandwidth costs.
When making HTML, CSS and JavaScript (JS) files, developers tend to use spacing, comments and well-named variables to create code and markup readable for themselves. It also helps others who would possibly later work on the assets. While this can be a positive score within the development phase, it becomes a negative once it comes to serving your pages. Web servers and browsers will parse file content without comments and well-structured code, each of that produce extra network traffic without providing any functional benefit.
To minify JS CSS and HTML files, comments and additional spaces need to be removed, as well as variable names thus resulting minimized code and reduce file size. The minified file version provides identical functionality and reducing the bandwidth of network requests.
Example Normal JS
// The following variables are defined in the global scope
var num1 = 20,
num2 = 3;
// This function is defined in the global scope
function multiply() {
return num1 * num2;
}
Minified Result
var num1=20,num2=3;function multiply(){return num1*num2}
How to minify HTML, JS, CSS
To minify resource, itcan be done by removing white space and unused line manually or by using tools.
For further reading, see Google Developer Insight page at MinifyResources
Tips and Tricks
