What is Minification?
When a browser looks at the code for the website before it tries to piece it all together it is not concerned about the readability of the code. With the minification process, you can strip a code file of all the superfluous data that is not required for the file to be executed. Unlike other compression techniques, the file is not stripped of code rather than the code being compressed so the file can still be read, modified, and executed without the need for decompression.
Minification is a process that is performed after the code has been written but before it is put to use. When a user requests the web page the server will send the minified version which results in a faster response and load time with the bonus of lower bandwidth usage. Minification is used on a wide range of websites from the smallest personal blogs to huge international corporations.
How Does Minification Work?
The process of minifying a webpage starts by analysing and then rewriting the text-based sections of the code to reduce the overall file size. Minification does not only work for code but also for scripts, style sheets, and all sorts of other components that a web browser uses to render the web page you see on your monitor.
Here is a brief look at how minification works
- The web developer creates a file to be used on the website – JavaScript or CSS. These files are written by the developer and as they write the code visually it means that they use visual aids such as separate lines, comments, white space, and long variable names. These allow the code to be readable to a human but the browsers don’t require this.
- Once the developer has written the code he then applies a minification technique to it which converts the file into one that is much more optimised for a browser to read but much hard for a human to read.
- When the web page is requested from the server the minified file is sent to the browser which means faster loading, less bandwidth, and a better end-user experience.
Minification can be combined with other compression techniques to greatly reduce the bandwidth required for both the website owner and the end-user.
Tools & Techniques of Minification
One of the most compressive minification tools around is Minify. Minify can do minification for a wide range of use cases such as caching and compression of web page CSS, HTML and JavaScript. Minify also works well with WordPress. We offer minification with our web site builds.
HTML Minification
Google offers the PageSpeed Insights Chrome Browser extension which recommends improvements and performance enhancements to any website that you are viewing. PageSpeed Insights provides a “Minify HTML” option which will create a minified version of the current page.
CSS Minification
Since CSS doesn’t change so often many online tools provide instant CSS minification. One of the best ones is CSS Minifier and it is a quick, simple and easy way to minify your CSS code.
JavaScript Minification
Google has a very good JavaScript optimisation tool. Google’s tool is called “Closure Compiler” and it creates a more condensed version as with other minification techniques. Once done this file is pushed to the webserver.
Examples of minification
Below is an example of plain HTML and CSS minification.:
<html>
<head>
<style>
#myContent { font-family: Arial }
#myContent { font-size: 90% }
</style>
</head>
<body>
<!-- start myContent -->
<div id=”myContent”>
<p>Hello world!</p>
</div>
<!-- end myContent -->
</body>
</html>The next section of code has been through the minification process and you can see the reduction in size and content:
<html>
<head>
<style>#myContent{font-family:Arial;font-size:90%}</style>
</head>
<body>
<div id=”myContent”>
<p>Hello world!</p>
</div>
</body>
</html>Benefits of Minification
There are many benefits to minification and several are listed below:
- The content of the site loads faster as there is less unnecessary data that needs to be downloaded because of this the end-user will experience an identical service but with the added bonus of less bandwidth usage and a faster loading time.
- The website bandwidth requirements are reduced as all the data that only the web developer cares about has been removed and the optimised code is left.
- The minified contents only needs to be created once and can be used to serve unlimited requests.
Conclusion of Minification
By removing the excess code and reducing the size the minification process will lower system resource demand, increase load times by up to 60% and lead to performance gains without compromising the end-user experience.
