Minify CSS: Reduce Page Size

CSS files consume bandwidth.

We reduce this by minifying the style sheets. This involves removing whitespaces and excess characters. CSS Tidy is a simple option for minifying style sheets.

Minify CSS Example: csstidy.exe
    Combining GZIP and minification was effective.

style-a.css [before]:           71300 bytes
style-a.css.gz:                 11396 bytes

style-b.css [csstidy highest]:  54171 bytes
style-b.css.gz:                  9626 bytes

style-c.css [csstidy remove_;]: 53692 bytes
style-c.css.gz:                  9616 bytes

CSSTidy. Here you need to go to SourceForge, a site that hosts open-source projects, to download the csstidy.exe program. This program is run on the command line, and doesn't have a GUI. It isn't being developed further, but it is complete.

CSSTidy

Files. In the file "csstidy-1.3-exe.zip" you have downloaded, extract the EXE and place it in your C:\ directory. You can place it anywhere, but for this tutorial, we will use the top-level C:\ directory.

Next: Find the CSS files you want to minify. For this example, I use a CSS file called "style-a.css".

Note: This is a style sheet I downloaded from a big website. Here I place it in the C:\ directory alongside the csstidy.exe file.

Commands. Open your Start menu and type "cmd" in the search box and press Enter. In Windows XP, go to Programs -> Accessories -> Command Prompt. The black command window will appear. Next, type in the following commands into the command line.

Note: Alternatively, you can copy these commands and right-click to paste them into the command line.

Example command line

C:\csstidy.exe C:\style-a.css --template=highest C:\style-b.css
<Enter>

Selectors: 740 | Properties: 1983
Input size: 69.63KiB  Output size: 52.901KiB  Compression ratio: 24.02%

Example command line that removes last semicolon

C:\csstidy.exe C:\style-a.css --template=highest
    --remove_last_;=true C:\style-c.css
<Enter>

Selectors: 740 | Properties: 1983
Input size: 69.63KiB  Output size: 52.434KiB  Compression ratio: 24.7%

Results. The results from the minification were that the style sheet was reduced by 24.02%, and 24.7% in the second test. This means that the style sheets require 24% fewer bytes, which will save you money and improve performance.

Removing the trailing semicolon in each property list saved more bytes. However, sometimes when you have GZIP-compressed the minified style sheet, this option will result in larger sizes.

Note: GZIP searches for patterns. So having the trailing semicolon can improve this algorithm's effectiveness.

Syntax. Here we see the syntax for the CSS Tidy executable on the command line, which you can see by running it with no options, such as running it with "C:\csstidy.exe". We see some descriptions after the syntax.

Usage

csstidy input_filename [
 --allow_html_in_templates=[false|true] |
 --compress_colors=[true|false] |
 --compress_font-weight=[true|false] |
 --discard_invalid_properties=[false|true] |
 --lowercase_s=[false|true] |
 --preserve_css=[false|true] |
 --remove_bslash=[true|false] |
 --remove_last_;=[false|true] |
 --silent=[false|true] |
 --sort_properties=[false|true] |
 --sort_selectors=[false|true] |
 --timestamp=[false|true] |
 --merge_selectors=[2|1|0] |
 --case_properties=[0|1|2] |
 --optimise_shorthands=[1|2|0] |
 --template=[default|filename|low|high|highest] |
 output_filename ]*

Template is the most useful option that controls the compression level. It is called template because it changes all the previous options. It can be set to three preset "level" values.

Template options

template=low:  Don't apply serious optimizations.

template=high: Apply high level of optimizations.
	       Keep each statement on a separate line.

template=highest: Remove all whitespace.
		  Results in the smallest file size.
		  Doesn't remove the trailing semicolon.

YUI Compressor. The other good option for minifying CSS is the YUI Compressor. In my testing it does not outperform CSS Tidy. But it is worth a try. It is based on Java so some downloads are required.

YUI Compressor

Build step. Most big sites have a build step where all the files are compiled and minified. You can write code that controls CSS Tidy and directs it to minify the CSS files at this point. This rapidly becomes complex.

So: My approach here is to simply use the -­-template=high option, and only minify the style sheets once.

Compression. Here are ways to minify style sheets even better. One trick is to use the lowercase version of the font names you use. For example, use "font-family: verdana" instead of "font-family: Verdana". Lowercase text compresses better.

Background: Use the "background: blue" property style instead of "background-color: blue". This saves more bytes in your CSS files.

Border: Instead of specifying "none" on the "border: none" property, use "border: 0", which means the same thing.

Element selectors: I recommend the lowercase tag name. Lowercase text compresses better with GZIP.

Tag names: Don't specify tag names when not necessary. You can often replace "div#id" with "#id", which is shorter.

Also, I encourage the use of inline style sheets in <style> tags in your HTML. This saves an HTTP request, and reduces the number of operations necessary for the user to see your page.

Tip: You can use PHP or ASP.NET to insert minified style sheets into your pages dynamically.

Caution: Inline style sheets can cause maintenance problems on large websites, depending on the system you use to generate pages.

Summary. Here we saw a tutorial for minifying and optimizing CSS files, by removing unneeded characters and line breaks. We saw the steps to use csstidy.exe on the command line. I discussed some tips on further optimizations of CSS files.

Related Links