15

Why people go through all the pain of minifying JavaScript and CSS files if they can just turn on gzip compression on the web server? This will give the same (or even better) result in traffic preformance.

Does minification give additional benifits?

Silver Light
  • 44,202
  • 36
  • 123
  • 164
  • Minification matters for certain mobile devices where files over a certain size were not cached. – cimmanon Apr 24 '13 at 15:49
  • 2
    Why not both? Removing comments, at least, and then gzipping? – FelipeAls Apr 24 '13 at 16:01
  • 1
    Concatenation is important to reduce the number of HTTP requests, but the web communities' obsession with minification I find pathetic. – Florian Ledermann Aug 21 '14 at 11:56
  • I like @FelipeAls's comment. There is no downside to minification,and it has a clear benefits: smaller files = lower service & client side bandwidth use – stackdump Oct 04 '14 at 20:52
  • 2
    @stackdump, it's a bit of a stretch to say there is *no* downside to minification. There are subtle bugs that can sneak in, obviously due to bad minification, but still. And those bugs are often not found during development, because minification typically happens at a later stage. It's also an additional build step. These things may be minor, but they *are* downsides. – nilskp Dec 30 '14 at 14:55

2 Answers2

12

You can use gzip (which is usually built into web servers) in combination with Minification. Minification does a lot of additional things that gzip can't, however, like removing comments, renaming long variables to shorter variable names, etc.

The resulting transferred data can be signicantly smaller than simply gzipping the original .js. It depends, obviously, on the source .js.

You can check out Compressorater(http://compressorrater.thruhere.net/). You can throw in your .js and it will minify using a variety of libraries with and without gzip and show you the results. You can see the comparion between simply gzipped and gzipped + minified by the various libraries.

Pete
  • 6,585
  • 5
  • 43
  • 69
  • 2
    Actually, minifying CSS can't shorten any names, only remove some unnecessary characters & comments, which sometimes is very little ;) I just tested minified + gzip vs gzip version of one of my css files and difference was so small i didnt even bother minifying it (yes, this project doesnt have a process set up for that, if it did, i wouldn't bother to even think about this difference :) ) – Pavelloz Sep 29 '16 at 12:42
  • @Pavelloz Sure it can, if it also minifies them from the html. – FINDarkside Oct 29 '18 at 01:17
  • Do you have any projects in the wild to show it off? Or just theory? – Pavelloz Feb 22 '19 at 18:44
3

Minifying Javascript and CSS not only zips it but it adds other optimisations that are impossible by zipping.

For example, by minifying you can modify the name of a long variable. All the instances of that variable will then be only one character. Another thing minification does it removing comments. This cannot be done by gzip.

Apart from that minification usually bundles various files into one thereby reducing the amount of requests

Apart from minification you should ALSO use gzip

Kenneth
  • 28,294
  • 6
  • 61
  • 84
  • "you can modify the name of a long variable." - That's not what minifying does. That's called obfuscation. – Ian Apr 24 '13 at 15:48
  • 3
    Minification will also reduce the length of variable names (if it considers it to be safe). Try out google's minifier or YUI minifier and you will see it does that too. Obviously this also obfuscates the code as it's harder to read, so it's basically a two in one operation. – Kenneth Apr 24 '13 at 15:50
  • But that's not what minification is. Minification removes whitespace, unnecessary characters, comments, etc. Obfuscation changes the code, but leaves its functinoality the same. Just because certain "minifiers" do both, doesn't mean that's what minification is. I know I'm being technical, but still – Ian Apr 24 '13 at 15:51
  • 1
    Well, you could argue about that. Strictly speaking, making a variable name shorter is also minifying it, since the total file size will be reduced. But again, semantics. The fact is that almost all minifiers also shorten variable names and function names. – Kenneth Apr 24 '13 at 15:52
  • @Ian, you might have some particular definition of minification that doesn't include variable renaming, but several very popular minifiers have that built-in, so I would consider it an optional part of the minification process. According to Wikipedia's minification article: "Minified source code may also be used as a kind of obfuscation..." – Pete Apr 24 '13 at 15:57
  • @Pete Minification is different than Minification Tools. It depends on how they implement it, which you've both clearly pointed out. But the OP wasn't asking about "Popular Minification Tools". If you want to explain that, it should be pointed out in the answer – Ian Apr 24 '13 at 15:59
  • Changing names of variables is known to me as *packing* (maybe after the terms used in "demo scene"?). CSS minification obviously doesn't include that, only JS – FelipeAls Apr 24 '13 at 15:59
  • @Ian, I disagree with your definition of minification, so I don't feel like I'm speaking of specific tools. I don't think I'm alone in this either (http://stackoverflow.com/questions/12768840/minify-and-variable-names). Minfication is about reducing the size of the code. Renaming variables achieves that goal. Thus it's a valid minification step in my book. – Pete Apr 24 '13 at 16:01
  • @Pete It's not about reducing the sizes of the code. It's about removing unnecessary characters. I think the definition of "Minification" has been shadowed by what popular minification tools do nowadays. I agree that renaming variables to be shorter is a great way to minimize the size of code, but I don't think that's a real task for minification. I may be completely wrong, I'm just trying to explain what I think of it. And no offense, but the link you provided, with one answer and one upvote, doesn't really help...to me, it's just an opinion – Ian Apr 24 '13 at 16:07
  • @Pete A good example of a minifying tool is from Google. Their description is "It combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers." which already does way too much for minification. That's all great, but I'd say it's just misnamed, and should be called like "Optimizer" or something...I don't know – Ian Apr 24 '13 at 16:08
  • @Pete To me, it would be more helpful to say something like "Minification removes unnecessary characters, but most minification tools do a lot more than that, such as: X, Y and Z...which is different from Gzip because A, B and C". I think that would be the best answer, which is what none of us have :) – Ian Apr 24 '13 at 16:11
  • @Ian I understand that, but to me, renaming variables to shorter names is part of minification because it's achieving that step directly, of minifying the size of your code. That it's also an obfuscation technique doesn't mean, to me, that it's not minification. It just happens to ALSO be obfuscation. – Pete Apr 24 '13 at 16:18
  • @Ian And to use your own words against you: "It's not about reducing the sizes of the code. It's about removing unnecessary characters." Turning 'ThisIsALongVariableName" into "a" is "removing unnecessary characters." – Pete Apr 24 '13 at 16:20
  • @Pete All very true. That's what I was debating myself - variable names having unnecessary characters. So I guess that works for me. At the same time, I would hope minifiers don't modify these variable names that aren't in a local scope...because in that case, the variable name's characters are all necessary. Anyways, obfuscation has a different point...but can do some of the same things as minification, as you said – Ian Apr 24 '13 at 16:29
  • @Pete, sorry I have to agree with Ian. Removing whitespace, deleting comments and such is a pretty simple and mechanical task. You can do it manually, with a hand tied behind your back and an eye closed. On the other hand, changing a variable's name requires the understanding of scope, shadowing, hoisting and whatever. We're getting into the realm of refactoring here. Try doing that manually. Not so relaxing. – Spyryto Dec 13 '18 at 15:27