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 "human" lossy compression that preserves layout or some other important things and removes any not needed junk (whitespaces, comments, redundant things etc.) will be better than a lossless gZip compression.

For example, things like marks or function names will most likely be of a certain length to describe the meaning. Replacing this by names one character long will save much space and isn't possible with lossless compression.

By the way, for CSS there are tools like CSS compressor that'll do the lossy work for you.

However, you'll get the best results when combining "lossy optimization" and lossless compression.

Answer 2

There's a threshold at which gzip-encoding is advantageous. The general rule is: the larger the file, the better the compression and gzip will win hands down. Of course you can minify first then gzip after.

But if we're talking about gzip vs. minify on a small piece of text no more than 100bytes long, an "objective" comparison is unreliable, even pointless - unless we come out with a baseline text for establishing a standard means of benchmarking, like a Lorem Ipsum-type but written in Javascript or CSS.

So let me propose to benchmark the latest versions of jQuery and MooTools (the uncompressed versions) using my Fat-Free Minify (PHP) code (just plain stripping off whitespaces and comments, no shortening of variables, no baseX-encoding)

Here are the results of minify vs. gzip (at conservative level-5 compression) vs. minify+gzip:

MooTools-Core
-------------
Baseline 102,991 bytes
Minified 79,414 (77.1% of original)
Gzipped 27,406 (26.6%)
Minified+Gzipped 22,446 (21.8%)

jQuery
------
Baseline 170,095
Minified 99,735 (58.6% of original)
Gzipped 46,501 (27.3%)
Minified+Gzipped 27,938 (16.4%)

Before anyone jumps the gun, this is not a battle of JS libraries.

As you can see, minifying+gzipping gives you better compression on large files. Minifying code has its advantages, but the major factor is how much whitespace and comments are present in the original code. In this case, jQuery has more so it gives better minification (a lot more whitespaces in the inline documentation). Gzip compression's strength is in how much repetition there is in the content. So it's not about minify vs. gzip. They do things differently. And you get the best of both worlds by using both.

Answer 3

Here are the results of a test I did a while back, using a "real life" CSS file from my website. CSS Optimiser is used for minification. The standard Linux archive app that comes with Ubuntu was used for Gzipping.

Original: 28,781 bytes
Minified: 22,242 bytes
Gzipped: 6,969 bytes
Min+Gzip: 5,990 bytes

My personal opinion is to go for Gzipping first, since that obviously makes the biggest difference. As for minification, it depends on how you work. You'd have to keep the original CSS file in order to make edits further down the line. If it doesn't bother you to minify it after every change then go for it.

(Note: there are other solutions, such as running it through a minifier "on-demand" when serving the file, and caching it in the filesystem.)

Answer 4

Why not use both?

Answer 5

It is easy to test : just put the text of your css in text files and compress the files using an archiver like gzip on linux .

I have just done this, and it happens that for the first css, the size is 184 bytes and for the second one 162 bytes.

So, you are right, white space matters even for gzipped files, but as one can see from this little test, for really little files, the size of the compressed file may be greater than the size of the original file.

This is just due to the very little size of your example, for larger files, gzipping will get you smaller files.

Answer 6

this is the results when gziping the two files

bytes  File
45     min.txt
73     min.gz

72     normal.txt
81     normal.gz