Easy CSS Minification on Client and Server

Easy CSS Minification on Client and Server

While developing a website, it may help to add whitespace to your CSS to make it easier to read and maintain. However, when serving CSS to your actual visitors, it's often best to minify it, which involves removing that empty space. This makes the filesize smaller, reducing your bandwidth usage and improving page load time. You could see large improvements in filesize and load time, depending on your input.

The PHP example minifies your code on the server, before the page is sent to your visitor. The JavaScript example does the same thing, but after the visitor is already on the page. Obviously to reap the bandwidth and speed benefits you need to minify CSS on the server. However, by implementing this in JavaScript you can provide an easy cut-and-paste minification service to others.

Minifying CSS on the Server (PHP)

    // load your unminified CSS code
    $input = file_get_contents('/path/to/your/stylesheet.css');
    
    // minify it
    $output = preg_replace('/[\s\n]+/', ' ', $input);
    
    // on your actual site, you can refer to "minified.css"
    file_put_contents('/path/to/your/minified.css', $output);

Minifying CSS on the Client (JavaScript)

    // the regex is the same
    var output = input.replace(/[\s\n]+/g, ' ');

Simply paste a block of CSS in the text area below and press Go, and your code will be minified!

There are many additional measures you take if you want to squeeze every last byte out of your code, but even this is enough to noticeably improve your website's response time.

Tags

arguments.callee web design & development blog

Minifying CSS on the Server (PHP)

Minifying CSS on the Client (JavaScript)