Minification is the process by which all unnecessary characters, including white spaces are removed from the source files so as to reduce the size of the file, without comprising any of the functionality of the program. The unnecessary characters can include spaces, blank, new line and comments.
Almost all web programming or rendering languages such as HTML, JavaScript and Style-sheets can execute just the same without these characters. These languages are interpretive languages, which means that the source code needs to be downloaded by the client or the web browser in order to execute them. Thus, minification can reduce the data that needs to be downloaded.
The purpose of these characters such as spaces, comments and new line are just to make the code more human readable. This makes it easier to develop and maintain the source but is not needed in the execution or rendering of the web page.
Minification is just one of the process in the overall process of optimizing the code. Other processes include using smaller variable names and rearranging code to generate repeating character sequence to facilitate a good compression ratio. Let’s quickly look at what can be done to get the maximum optimization…
Use of smaller variable names: The length of variable names in JavaScript can be reduced as much as possible. Longer and descriptive names do provide readability and maintainability, but also do increase the length of the file. The same goes for class names and IDs in the CSS files. Descriptive and long CSS class names mean longer CSS files as well as HTML files, where they are used.
Use repeating character sequences: Using a prefix to the CSS class names has some advantages, as it will allow you to keep your variable names different from other rules from other CSS files. This is helpful especially if you use a lot of plugins (e.g.: WordPress plugins) all of which have their own style-sheets. Even so, you can make sure that the rules appear in the same order inside CSS, eg: alphabetize the rules inside classes. This is helpful if you use the same rules for multiple CSS classes as it will maximize the probability of having repeating character sequences.
Minification is definitely not a process that you want to do manually. It is extremely time-consuming and error prone. There are several different software and utilities that will allow you to automate the process. Moreover, you would want to keep the original source for further development and maintenance …
Common Minification Tools
You can use a standalone minification tools or use plugins that do it dynamically if you are on web application framework such as WordPress or Blogger. Usually, standalone minification tools are appropriate for websites such as those are not on a web framework and uses simple HTML, CSS and JavaScript.
Minify : Minify is a PHP app that allows you to minify both CSS and JS files. It can be used standalone from the command line. It is also integrated into several other plugins and utilities, such WP-Minify and W3 Total Cache.
UglifyJS: UglifyJS is a parser and minifier utility for JS files. It can be used from the command line, which you will have to compress your files manually and that you can reference in your webpages.
YUI Compressor: This is again a command line tool that can be used to compress both CSS and JS files.
Using command line tools have the overhead that you will need to run the tool every time you modify the file. Otherwise, you can look at some of the Content Delivery Networks (CDN) which have the feature built into it. Most of the CDN such as Google Page Speed Services and CloudFlare provide this functionality.
If you are on the WordPress platform, there are several plugins that provide the functionality. Some of them are plugins that just does the minification while others SEO or Cache plugins that have the feature built into it.
WP-Minify: This plugin can minify JS, CSS and HTML files for you. Internally it uses the minify tool that was referred earlier.
Better WordPress Minify: Another plugin for WordPress that again uses the minify tool.
W3 Total Cache: This is a caching tool for WordPress with the minification feature built into it. It does have the option to choose from a couple of different tools to do the compression for CSS and JS files.
It does not matter how you achieve the minification of your files, but it can save bandwidth and reduce page load times dramatically when done correctly.
