Why Do People Minify CSS and JavaScript, When We Have Gzip

Is there a benefit to minifying JavaScript before gzipping it?

Yes, there is definately a benefit.

Minifying is a lossy compression whereas gzipping is lossless. Ergo, with minifying you remove unneeded data (like comments and long variablenames) which will always help to make your file smaller. Even with gzip there will still be a difference in most cases.

Example:

function foo(this_is_my_variable){
    var this_is_my_other_variable = 0;
    this_is_my_other_variable = this_is_my_other_variable + this_is_my_variable;
    return this_is_my_other_variable;
}

That might be minified to:

function foo(a){
    var b = 0;
    b = b +a;
    return b;
}

Or if the minifier is smart:

function foo(a){
    return a;
}

All code gives the same results, but the size differs a lot.

Gzip versus minify

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.

What are the advantages of minified javascript code?

As @Jacob said.. Minified JavaScript means less bytes being downloaded from the client perspective.

Normally, developers will implement it in a full, commented version, and then use a tool like UglifyJs to generate a minified version.

It's common to see two versions of these files:

• myLib.js (the original version, meant to be included in development mode for debugging)
• myLib.min.js (the minified version, meant for production)

Moreover, with the rise of Node, it's becoming really common to implement your codebase as separate, readable modules and then use a bundling tool like Webpack and Browserify to generate a single bundle, that often contains not only your minified code, but also most of the dependencies in a single bundle.js. It's pretty straight forward.

Why people minify assets and not the HTML?

One likely reason is that markup typically changes MUCH more often, and would have to be minified for every page load. For instance on a given Stack Overflow page, there are timestamps, usernames, and rep counts that could change with every page load, meaning you would have to minify for each page load as well. With "static" files like css and javascript, you can minify far less often, so in the minds of some, it is worth the work up front.

Consider also that every major web server and browser support gzip, which compresses all of your markup (quickly) on the fly anyway. Because minifying is slower and much less effective than gzipping anyway, webmasters may decide that minifying for every page load isn't worth the processing cost.

Why do many sites minify CSS and JavaScript but not HTML?

Because if you're doing things properly you're serving HTML gzipped anyway, so the low-hanging fruit of HTML minification - whitespace - isn't all that relevant. There aren't lots of easy targets (e.g. variable names) for minification in HTML, which are present in CSS and JavaScript. Much of the content of HTML is the actual content of the page, which probably can't be minified (and, as others have pointed out, will almost certainly vary more frequently than your CSS or JS).

JavaScript minification and compression

Since minification makes the code difficult to debug, is it possible
to do on-demand de-minification on client-side to cover-up for cases
where you actually need to debug and investigate something on the
website?

Sort of. Minified javascript has the same structure, it just does things like delete extra spaces and shorten variable names. So you can easily make the code readable again, either manually or with a script, but you can't recover variable names, so the code will still be harder to work with. So, if you have the original code, definitely don't get rid of it. Save the minified code separately.

I remember reading somewhere that one can enable compression of all
resources (like images, css, javascript etc.) by setting some options
in the Apache Web Server.

Yes, it's called gzip compression. It's not unique to apache, but you would need to configure your server to enable it.

Is there any difference in the javascript compression done at Apache
level and, the one done using tools like YUI Compressor?

Yes. YUI compressor is a minifier - the output is valid javascript. Server-side compression is more analogous to zipping a file - the browser must decode it before it can be used. Using the two together would yield the smallest filesize.

Does minified JavaScript code improve performance?

Minifying improves performance for your page overall by decreasing the load time (even if only slightly).

Neither minifying nor obfuscating alter the execution time by any perceivable amount for the vast majority of JavaScript code out there.

I do recommend minifying for those reasons and more. Minifying multiple scripts together (like jQuery and its plugins) can yield even greater savings.

As pointed out, on constrained devices and/or with very large codebases minifying could yield a noticeable result.

Need to compress CSS and JavaScript via PHP but need to know performance implications and how to implement?

As suggested in the comments you could use one of the pre-built scripts for that. They make use of YUI compressor as well as other solutions even if you can't run Java on the server.

The first one was probably PHP Speedy, which still works but has been abandoned.

A new one is Minify, which offers a lot of features including general caching solution depending on the server's capabilities (APC, Memcached, File cache).

Another advantage of these projects is that your URLs won't have query strings in them (contrary to your current method), which causes troubles in a lot of browsers when it comes to caching. They also take care of gzipping and handling Expires headers for your content.

So I definitely recommend that you try out one of these projects as they offer immediate positive effects, with some simple steps of configuration.

---

Related Topics