Code Compression

When delivering large amounts of code to visitor to your website, you want it to be downloaded fast so the rest of your site can load smoothly. For instance, since CSS is usually one of the first render-blocking files that the web browser has to request and parse before the rest of the site loads, you’ll want this file to be as small as possible. Modifying your CSS file to be more optimized, such as combining rules, creating global classes and more can help reduce repeated CSS throughout your style-sheet. Along with optimizing your CSS and JavaScript, you should also compress your code.

What is Code Compression

Code Compression is the act or process of removing white space, unused function, combining functions and all around minimizing the bytes inside of a file. JavaScript Compression does take the compressing to a whole new level compared to CSS. Since CSS is linked so closely to HTML, you can’t modify a lot of the rules or shorten them. With JavaScript through, you can minimize all of the function names and variables to just letters and optimize the code to be much shorter than it was originally.

The most common code compressors will simply remove unneeded white-space such as tabs, spaces and line breaks. Inside of CSS, you can also optimize color codes from the six character codes to the three character codes (#FF0000 to #F00). This only works color codes where the two bytes next to each other are the same. Also in CSS, the last semicolon in a section can be omitted. That’s another few easy bytes you can regain.

Size Benefits

With Code Compression, the size of your JavaScript file can be reduced greatly. I’ve had files that when compressed where less than half of the original size. As for CSS, the most I get is about compression level of 25%, and that is even pushing it.

The reason why the file size is important comes down to internet speed and render blocking code. You will often have a few scripts in the header of your HTML file (although if it’s JavaScript you should move it to the footer). The code in the header has to be downloaded and parsed before the rest of the page can load. When you can reduce the amount of time this file takes to download by half, you will greatly improve the initial loading speed of your website.

Resources Available

Below are a few resources available for code compression. Just make sure when you do compress your code, you keep the original file also. You won’t be able to easily modify the compressed code.

CSS Compressors

• CSS Compressor: A very basic and miniamlist compressor. Very easy to use but does lack some options that other compressors have.
• Minify CSS: A very featured rich compressor with options on save to file or show the output. Also can modify selectors and join them together to help compress your CSS even further.
• Refresh-SF YUI Online: This online YUI compressor (Yahoo User Interface) can reduce both your CSS and JavaScript. Similar to CSS Compressor, this lacks a lot of features that Minify CSS has, but this can handle both CSS and JavaScript.

JavaScript Compressors

• Closure Compiler: This is my go-to compressor for JavaScript. You can modify at what level you want the JavaScript to compress. It’s very quick and has an API so you can integrate it into your existing software tools to save time and compress the file as you save it or upload it to your server.
• Refresh-SF YUI Online: This online YUI compressor (Yahoo User Interface) can reduce both your CSS and JavaScript.