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 tutorial minification

Share This

3 comments:

  1. This is an awesome post. Really very informative and creative contents. This concept is a good way to enhance knowledge. I like it and help me to development very well. Thank you for this brief explanation and very nice information. Well, got good knowledge.
    WordPress development company in Chennai

    ReplyDelete
  2. Thank you dear, I found your information really useful. I would like to say thanks once again for this information. keep posting all the new information.
    Minnesota Web Design
    rochester MN web design

    ReplyDelete
  3. The blog you have shared is incredibly helpful. The tips you have shared related to web development is really informative. Thanks for sharing this blog!
    Hire Opencart Developer
    Hire Php Programmer
    Hire Web Developer
    Hire wordpress developer India
    Hire a Programmer

    ReplyDelete

About
Creative Commons License
Blogger Book is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported License.
Misc