Question

I had a somewhat lively discussion the other day about minifying Javascript and CSS versus someone who prefers using Gzip.

I’ll call this person X.

X said that Gzip allready minifies the code, since it zips your files.

I disagree. Zip is a lossless method of shrinking filesize. Lossless means the original must be restored perfectly, meaning info must be stored to be able to restore the spaces, the un-needed characters, commented code and everything else. That takes up more space, since more must be compressed.

I have no method of testing, but I believe that the Gzip of this code:

.a1 {
    background-color:#FFFFFF;
    padding: 40px 40px 40px 40px;
}

Will still be bigger than the Gzip of this code:

.a1{body:background-color:#FFF;padding:40px}

Is there anybody who can prove this right or wrong.
And please don’t come saying “It’s right because that’s what I’ve always used”.

I am asking for scientific proof here.

Answer 1

Very simple to test. I took your js, put them in different files and ran gzip -9 on them. Here’s the result. This was done on a WinXP machine running Cygwin and gzip 1.3.12.

-rwx------  1 xxxxxxxx mkgroup-l-d     88 Apr 30 09:17 expanded.js.gz

-rwx------  1 xxxxxxxx mkgroup-l-d     81 Apr 30 09:18 minified.js.gz

Here’s a further test using a real-world JS example. The source file is “common.js” The original file size is 73134 bytes. Minified, it came to 26232 bytes.

Original file:

-rwxrwxrwx 1 xxxxxxxx mkgroup-l-d 73134 Apr 13 11:41 common.js

Minified file:

-rwxr-xr-x 1 xxxxxxxx mkgroup-l-d 26232 Apr 30 10:39 common-min.js

Original file gzipped with -9 option (same version as above):

-rwxrwxrwx 1 xxxxxxxx mkgroup-l-d 12402 Apr 13 11:41 common.js.gz

Minified file gzipped with -9 option (same version as above):

-rwxr-xr-x 1 xxxxxxxx mkgroup-l-d  5608 Apr 30 10:39 common-min.js.gz

As you can see, there is a definite difference between the various methods. The best bet is to both minify as well as gzip them.