Minify, gzip, or both? Or Neither?

I am working on an Angular project (angular being the thing to do now). Our production servers gzip the javascript and CSS files before serving them. The question came up, “should we minify this thing if we already gzip it?”

Why not to minify

First, let’s look at some reasons why not to minify. If you google the subject, it seems that most people land on the “just use the minified version and shut up about it” camp.

If I have a 0.5K javascript file, it hardly seems worth it to minify it saving maybe 250 bytes.

If you cannot do it in an automated way using some other tool that runs with your build, maybe it is a hassle that is not worth your time. Extra manual steps before a production deploy may be more risk than they are worth.

It may make it difficult to debug production problems if you are not using sourcemaps. Not all browsers support sourcemaps. If you require supporting an older browser and debugging in production, minifying might not be for you.

However, based on the results below, I would suggest you minify and gzip.

Comparison for Angular.js and Jquery

Angular.js      733,422 bytes
Angular.min.js  100,286 bytes

-gzipped
Angular.js.gzip         181,981 bytes
Angular.min.js.gzip     37,028 bytes

Jquery 1.11.0       282,944 bytes
Jquery 1.11.0.min   96,381 bytes

-gzipped
Jquery-1.11.0.js.gzip       83,932 bytes
Jquery 1.11.0.min.js.gzip   33,438 bytes

Conclusion

If your goal is the smallest file size possible, do both. Keep in mind that there is more to a performant web page than just small files. For example, serving 20 small files instead of 1 bigger file (those 20 files combined) would probably eat up any gains you made by minfying and gzipping those 20 files. Chrome audit tools and Firefox yslow can help you diagnose additional problems you may have.