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.

Hominoid

Try not to pay attention to compression results when looking at extremely small files. Realize that deflate and gzip incur some overhead so the effect of the overhead is much greater when the file sizes are small. – Puseyism

A valid point. Still, I wasn't going to bore you guys with hundreds of lines of CSS/JS, when the code shown above aptly displays the principle of what I wanted to research. – Hominoid

@JamesMcMahon A valid point, but not an answer. – Ledoux

One thing that should be worth note is cache limit (it differs depending on the browser), but some mobile browsers cache based on the unzipped file size, and in those cases minification is your friend. Additionally I have a 2meg JavaScript web app (comments and reactJS and everything else) that when minified (uglified) and gzipped (using zopfli compression) is 75k (minification alone is roughly 200k). – Terrilyn

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.

Revell

Robert, that's the last option – Tum

71k to 26k is not typical minification results! In my tests, it was more like 20-25%. This also seems to be what Yahoo got: developer.yahoo.com/performance/rules.html. – Hypothec

The downsize on minification depends on a lot of factors.... one of them is how much you code is commented. More comments, more savings. Anyway... minification is important today specially because of mobile users. – Grenadines

Answer 2

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.)

Striation

You get 14% extra savings. This agrees with Steve Souders's results too. In his book "High Performance Websites", he has a section on gzip vs minification. (Chap10, p74) He goes from 85K (original), 68K (only JSMin), 23K (only gzip), to 19K (JSMin + gzip). That's about 20% saved due to minification. – Hypothec

These days there are also source maps that allow you to try to get the best of both worlds if you choose to minify. – Alan

Answer 3

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 and footer (about 20 bytes overhead) 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.

Cocoon

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.

Shut

How would minifying a gZipped file even work? Well-compressed files resemble random data and editing them requires extraction, modification, and re-compression. – Ruysdael

@ThorLancaster You are correct, minifying a gzipped file does not make much sense to me either. The suggestion always was to minify first, then gzip, not the other way around. – Shut

Answer 5

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.

Athalla

Answer 6

Why not use both?

Coshow

Sometimes minifying then gzipping achieves a worse result than doing just one of them. In fact, as madewulf tested, gzipping the plain CSS example file will give a bigger file than the original! – Shut

That's usually dependent on file sizes. Any of your CSS and JS files in production will benefit from minification and compression. If you have loads of files that are < 1KB, combine them all together then minify and gzip... – Puseyism

Answer 7

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.

Marney

In that case... I'd prefer to have the plain CSS files! Wow, 184 bytes for that little information... – Shut

You can use just gzip < infile > outfile on linux (or better yet, gzip < infile | wc). tar stores lots of metadata. – Groping

7-zip is NOT the same algorithm as gzip. – Grannias

Answer 8

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.

Dido

Answer 9

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.

Scherzando

Answer 10

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.

Tufa

Answer 11

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.

Bigley

Answer 12

this is the results when gziping the two files

bytes  File
45     min.txt
73     min.gz

72     normal.txt
81     normal.gz

Darmstadt

@madewulf, this is only the case when the files are so small and trivial that the additional of the GZIP file header actually makes more difference than the space saving. Nobody would use a CSS file this small in practice, or if they did, then compressing it shouldn't be their first concern. At any rate, it still shows that minifying + gzipping is more efficient than just gzipping, which of course is true. – Cocoon

Answer 13

You are correct, minify+gzip results in less bytes. No scientific proof though.

How come you have no method of testing?

Minify your code in one file, and leave it "unminified" on another. Upload to a webserver capable of gziping the output (mod_deflate for Apache, for example), install Firebug extension for firefox, clear your cache and access both files. Firebug's "NET" tab will contain the exact amount of data transfered, compare those and you have "empirical" proof.

Bisutun