Minification is a very widely recognized and useful process that helps us to improve the performance of a web application by removing the unnecessary parts, generally the whitespaces, line-breaks and comments from the HTML, CSS and JavaScript files.
Minification: It is the process of minimizing the size of a code or markup files inside your web application without changing the behavior and output of the application. In simple words, minification is the method of removing all the unnecessary things including whitespaces and comments from HTML, CSS, and JavaScript code that do not affect our output. It reduces the project size and improves performance.
How does minification work?
- The developers write the HTML, CSS, and JavaScript first because while developing the code needs to be well-readable and understandable. So we need the comments, line breaks, and white spaces during development.
- After the application is complete and it is now ready for deployment. We are going to minify all the HTML, CSS, and JavaScript codes before deployment. We are going to remove all the line breaks, white spaces, and comments from our code files.
- Deploy the optimized application to the server.
Methods of minification: There are generally three methods by which we can minify our HTML, CSS, and JavaScript files. They are
- The Manual Minification: This process is straightforward where the developer removes all the unnecessary parts from our application files. But if the project size is large then this method is not optimal as it is going to cost a lot of time from the development and the deployment side.
- Minification by Online ToolsThere are different websites that help us to minify our code automatically. But these websites are different for different programming and markup languages. The most widely used websites for such tasks are given below. Copy and paste the original code and it is going to generate the minified version automatically. This is the most optimal method.
-
For HTML:
https://html-minifier.com/
-
For CSS:
https://cssminifier.com/
-
For JavaScript:
https://javascript-minifier.com/
Editor extensions: Different extensions that the code editors like Visual Studio Code or Atom provide can also be very helpful and generate a minified version of the HTML, CSS, or JavaScript codes automatically. Google search according to the specific editor you use is going to show you the path to do it. JS & CSS Minifier (Minify) by olback is one of the most popular JavaScript and CSS minifier extensions at Visual Studio Code.
Advantages of minification: The main aspect of minification is that it reduces the size of the web application. That brings many advantages. They are as follows
- Improves loading time: The page that is minified takes lesser time to load than the time it was taking to be loaded before minification. Minification can reduce the app loading time up to 60% and this fact makes it one of the most important steps of developing a production-based web application.
- Lower space usage: As the size of the web application is reduced it takes very little storage and space in the server to build and stored. That reduces the server cost of the company while hosting the web application.
- Better user experience: The improved loading time due to minification gives a better and optimized experience to the user and makes the web application fast and responsive. The fast the application is the better the user experience.
Example:
HTML:
-
HTML Before Minification:
HTML<!DOCTYPE html><html><head><title>Page Title</title></head><body><h2>Welcome To GeeksforGeeks</h2><p>How to improve performance by Minify and Compress Files.</p></body></html> -
HTML After Minification:
HTML<!doctype html><html><head><title>Page Title</title></head><body><h2>Welcome To GeeksforGeeks</h2><p>How to improve performance by Minify and Compress Files.</p></body></html>
CSS:
-
CSS Before Minification:
CSSbody {background-color:#282c34;color:white;padding:40px;font-family:Arial;text-align:center;} -
CSS After Minification:
CSSbody{background-color:#282c34;color:#fff;padding:40px;font-family:Arial;text-align:center}
JavaScript:
-
JavaScript Before Minification
JavascriptfunctionhelloWorld() {console.log("Hello World!");} -
JavaScript After Minification:
JavascriptfunctionhelloWorld(){console.log("Hello World!")}
The Change in Output: Now we are going to check that if there is any change in output due to the minification of the CSS files. We are going to keep the HTML document unchanged throughout the examples.
Before Minification:
<!DOCTYPE html> <html>
<head>
<title>GFG</title>
<style>
body {
background-color: #282c34;
color: white;
padding: 40px;
font-family: Arial;
text-align: center;
}
</style>
</head>
<body>
<h2>Welcome To GFG</h2>
<p>How to improve performance by Minify and Compress Files</p>
</body>
</html>
|
Output:
After Minification:
<!DOCTYPE html> <html>
<head>
<title>GFG</title>
<style>body{background-color:#282c34;color:#fff;padding:40px;font-family:Arial;text-align:center}
</style>
</head>
<body>
<h2>Welcome To GFG</h2>
<p>How to improve performance by Minify and Compress Files</p>
</body>
</html>
|
Output: