CSS compression and minification

Minifying CSS is not the same as compressing. Most developers who want to spare a significant amount of bandwidth and improve the performance of their sites (especially from a client-side perspective) get confused by these two terms. In simple words, minifying a CSS file means removing all unnecessary white-space characters from the file. New lines, spaces, form feeds, carriage return characters and tabs are all part of the more global white-space token. Obviously, since some white-space has a special meaning in CSS selectors and syntax, white-space must be removed by taking into account some special cases when it's actually required.

The YUI Compressor tool, for example, performs the aforementioned task on your CSS files, but it doesn't compress them. Compressing CSS files requires the use of a compression algorithm which, of course, is not the same as minifying them. Only your web server can actually compress your CSS files. For example, in this article it's clearly explained how to compress CSS and JavaScript files using the mod_deflate module of the Apache web server.

You can combine both techniques to get the best results: minifying your CSS files locally and then compress them on your web server. You'll surely experience a significant boost in your site performance and your visitors will enjoy a better surfing experience.

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

One thought on “CSS compression and minification”

Leave a Reply

Note: Only a member of this blog may post a comment.