Gzip versus minify

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

of course you can test - write your into a file and gzip it with zlib. You can also try with the "gzip" utility program.

back to your question - there's no definite relationship between the length of source and the compressed result. the key point is the 'entropy' (how different is each elements in the source).

so, that depends on how your source is. for example, lots of continous spaces (ex, > 1000) may be compressed as same size as few (ex, < 10) spaces.

Answer 2

Watch out when testing this: those two snippets of CSS are trivially small, so they don't benefit from GZIP compression - the addition of GZIP's small header alone will lose the gains made. In reality you would not have a CSS file this small and be concerned about compressing it.

minify+gzip compresses more than just gzip

The answer to the original question is, yes, minify + gzip will gain a significant amount more compression than just gzip. This is true for any non-trivial example (ie any useful JS or CSS code that is more than a few hundred bytes).

For examples of this in effect, grab Jquery source code which is available minified and uncompressed, compress them both with gzip and take a look.

It's worth noting that Javascript benefits a lot more from minification than well-optimised CSS, but there is still a benefit.

Reasoning:

GZIP compression is lossless. This means that it has to store all text, including the exact whitespace, comments, long variable names and so on, so they can be perfectly reproduced later. On the other hand, minification is lossy. If you minify your code, you are removing much of this information from your code, leaving less that GZIP needs to preserve.

• Minification discards unnecessarily whitespace, leaving spaces only where necessary for syntactical reasons.
• Minification removes comments.
• Code minification may replace identifier names with shorter names where there would be no side-effects.
• Code minification may make trivial 'compiler optimizations' to the code which are only possible by actually parsing the code
• CSS minification may eliminate redundant rules or combine rules which have the same selector.

Answer 3

There is a very simple method of testing this: Create a file consisting only of whitespace and another file that's really empty. Then Gzip both and compare their sizes. The file with the whitespace in it will of course be bigger.

Answer 4

You're right.

It's not the same to minify than gzipping (they would be called the same if that was the case). For example, it's not the same to gzip this:

var myIncrediblyLongNameForThisVariableThatDoesNothingButTakeUpSpace = null;

Than minify to end up with something like:

var a = null;

Of course, I'd say the best approach in most cases it to minify FIRST then Gzip, than just minifying or gzipping, although depending on the code sometimes just minifying or gzipping will give you better results than doing both.

Answer 5

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.

Answer 6

I did not see anyone mention Mangling so I am posting my results on that.

Here are some figures I came up with using UflifyJS for minification and Gzip. I had about 20 files that I concatenated together at about 2.5MB with comments and all.

Concat Files 2.5MB

uglify({
    mangle: false
})

Minified without mangling: 929kb

uglify({
    mangle: true
})

Minified and mangled: 617kb

Now if I take those files and gzip them I will get 239kb and 190kb respectively.