Web browsers aren’t concerned about the readability of code, when it comes to generating a page or running a script. In order for the file to be executed, minification strips a code file of all data that isn’t required. With minified files, you don’t need to be decompressed before they can be read, modified or executed. This is so much different from traditional compression techniques. If you are a web developer or web designer, you may need to know further information about CSS minification.
After the code for a web application is written, and before the application is deployed, minification is performed. Minification can result in faster response times and lower bandwidth costs, as it sends the minified version instead of the full version. Nowadays, minification can be widely used in many websites ranging from small personal blogs to multi-million user services.
Minification Techniques and Tools
Minify is one of the more comprehensive minification tools. Minify handles minification, caching, and compression of CSS, HTML and JavaScript files. Minify also offers integration with popular web applications and frameworks including WordPress and the Zend Framework.
HTML minification
If you are looking for performance improvements to websites, you can find the PageSpeed Insights Chrome extension in Google. PageSpeed Insights provides a “Minify HTML” rule which generates a minified version of the open website.
CSS minification
Several online tools provide instant CSS minification, since CSS is less likely to change frequently. To get a quick and simple way to minify CSS, Refresh-SF uses multiple tools to minify CSS, HTML and JavaScript.
JavaScript minification
To create a more efficient copy of any JavaScript file, you can use Google’s JavaScript optimization tool, the Closure Compiler. Usually, a developer will use the Closure Compiler to minify the code and make change to a JavaScript file. For a user’s web browser, they can access the new file in the web server.
Example of Minification
The following code block shows an example of plain HTML and CSS:
<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>
Here are the same codes after minification:
<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
- As less unnecessary data needs to be downloaded, users can load content faster. Users experience identical service without the additional overhead.
- Lower bandwidth costs as less data is transmitted over the network. Developers no longer send the extra content that users don’t care about.
- Lower resource usage since less data needs to be processed for each request. The minified content need to be generated once, but can be used for an unlimited number of requests.