Aug 21 2007
Gzip Your Minified JavaScript Files
Today, I found out that the good folks behind jQuery were using Packer, another great JavaScript compression utility by Dean Edwards, to distribute their compressed version of the library. The result: an amazingly small 21KB download! My first thought was: Wow, that is small! I then tried the YUI Compressor on the uncompressed version of the jQuery library and obtained a 31KB file. Not bad, but not nearly as good as Packer… I then decided to compare the gzipped version of these files. Here are my findings:
| File | File size | Gzipped file size |
|---|---|---|
| Original jQuery library | 62,885 bytes | 19,758 bytes |
| jQuery minified with JSMin | 36,391 bytes | 11,541 bytes |
| jQuery minified with Packer | 21,557 bytes | 11,119 bytes |
| jQuery minified with the YUI Compressor | 31,822 bytes | 10,818 bytes |
These results are amazing! The smallest file is the file obtained by minifying jQuery using the YUI Compressor and then gzipping. I would have thought that using Packer would have yielded the smallest file. In fact, it appears that Packer’s redundancy reduction algorithm is detrimental to gzip compression.
In addition to that, using Packer’s redundancy reduction algorithm adds a delay at the time the script gets executed (because the script needs to be unpacked and then eval’ed) On my laptop, this delay is about 200 msec. The conclusion is clear: for optimal performance, gzip your JavaScript code, and stay away from “advanced” JavaScript compression schemes that look attractive on paper, but end up degrading the performance of your site.
If your web hosting company does not offer HTTP compression, but gives you access to PHP (that’s the case of Yahoo! Web Hosting), I wrote a simple PHP script that will compress files and set the cache control headers so that the requested files actually get cached by the browser. I used this script with great success for a web site I worked on recently: http://www.okomis.com/
Note: yahoo-dom-event.js, minified with the YUI Compressor and gzipped only weighs 9,476 bytes. Not bad!
Update: Read this article by John Resig on JavaScript library Loading Speed.
51 Responses to “Gzip Your Minified JavaScript Files”
Julien,
I found out about your YUI Compressor a week ago on ajaxian, and found it to be a useful neat tool. A week ago, it was still only a command line tool, so over the weekend I started to turn it into a web tool. I’m close to deploying, but today, just found out you released 1.1 which has a web front to it. Have not looked, but do see a need for me to even continue.
YUI Compressor is looking better every day! Julien has reviewed this in his other study, but we see it here, too. Gzipping is great, typically reducing file size by 70%. In this example it cut 69%. But using minification in combination with gzipping has even more savings, and is definitely worthwhile. Minifying the file with YUI Compressor and then gzipping it reduced the file by another 14%, for a total reduction of 83%!! It’s worthwhile to note that 90%+ of today’s browsers support gzip, so combining minification with gzipping is the way to go.
Steve Souders
Chief Performance Yahoo! and YSlow author
I am finding that using deflate gives an even slightly better compression that gzip. I think that most browsers support that as well, but I’m wondering why nobody talks about it too much… any ideas?
I agree YUI compressor is looking really good. I’ve also found in my own tests that the extra compression gained by base62 in Packer is erased because gzip can’t compress it too well.
I’m going to publish some comprehensive stats hopefully within the week.
Hiya! There’s a thread on the jQuery mailing list which covers exactly this topic:
http://groups.google.com/group/jquery-en/browse_thread/thread/3d54b9c96f97d324/69b3972335566b69
Regarding your gzip PHP script: note that caching the compressed results on the server can be a bad idea. On hosting services where the web server is run as a different user than the account for which the server is hosted, the files/dirs will normally be created with access rights which disallow the account owner to delete/modify them. This happens, e.g., on the SourceForge servers. When it comes to general-purpose solutions, writing to the filesystem is ALWAYS a bad idea, as it does not port easily to all environments.
You can avoid toying with the filesystem by using PHP’s built-in support which functions similarly to mod_deflate. See the above link for a trivial script which does this. If you apache has mod_deflate/mod_gzip activated then you don’t need any of this because the server will do it transparently.
@Stephan
You’re absolutely right, and I never claimed the PHP script I provide in this article was the ultimate solution (my experience with PHP is rather limited) It however performed very well for me at both compressing AND setting the cache control headers (the latter being more important to me) and I thought I’d share it for people to play with.
Regards
@Arthur
Just to answer my own question about DEFLATE compression:
I read over the Wikipedia articles on gzip and deflate in some depth. Really deflate and gzip are the same. gzip just adds an extra header, and a crc plus a count at the end. So gzip will always add some extra overhead (I find it’s always 12 bytes with the Java implementation) and maybe give you some peace of mind about the integrity of the stream.
However, TCP already has that built in, so I’m not so sure it is necessary in this context. So, using deflate instead of gzip is an option for those who might want to obtain that last extra ounce of compression.
With this knowledge in mind, I think I’ll take the deflate stat out of the CompressorRater, as it just adds more noise to the mix (since it’s essentially the same number as gzip, minus a few bytes.)
Seeing this prompted me to dig up something similar I wrote a while ago, using a fork of the Narcissus JavaScript engine. It’s a bit more aggressive than yours so it’ll save a little more space. If you’re interested you can try it at:
http://crunchy.nfshost.com/
To run it you paste the code in the top box, and then click ‘crunch’. It probably only works on firefox.
Although, I’m not pushing it, as it’s not finished or supported and probably has some horrible bug somewhere.
But what you might be interested in are the test cases:
http://js-crunchy.googlecode.com/svn/trunk/crunchy/tests.js
It’s not a very comprehensive test suite – but it does test for some subtle problems with this kind of compression. I’d always meant to test it against the mozilla test suite, but running it at the command line was pretty painful. Yours should be better at that.
> The conclusion is clear: for optimal performance, gzip your JavaScript code, and stay away from “advanced†JavaScript compression schemes
I agree. :-)
http://dean.edwards.name/weblog/2007/08/js-compression/
> The conclusion is clear: for optimal performance, gzip your JavaScript code, and stay away from “advanced†JavaScript compression schemes
I agree too. My personnal experiments learn me that the browser spend more time in the javacript decompression process that in the download process.
[...] jQuery Minified (14kb with Gzipping) [...]
[...] jQuery Minified (14kb with Gzipping) [...]
[...] jQuery Minified (14kb with Gzipping) [...]
I have mod_gzip enabled on my server, but it’s only gzipping my php/html file. Is it possible to add support for other file-types, like .js files, via an .htaccess file? Also, here’s a great site to test if mod_gzip is enabled on your server.
http://www.gidnetwork.com/tools/gzip-test.php
If you want to gzip your files using asp.net
here is a script
http://www.rodrigodiniz.qsh.eu/testgzip.aspx
You can see the script in action and also download it.
[...] jQuery 1.2 (14kb, Minified and Gzipped) Great for production [...]
[...] jQuery Minified (14kb with Gzipping) [...]
[...] jQuery Minified (14kb with Gzipping) [...]
[...] Julien Lecomte’s Blog » Gzip Your Minified JavaScript Files (tags: javascript gzip compression performance) [...]
GZip is absolutely the correct way to compress javascript.
No eval-based compression scheme should be used because it simply takes too long to decompress the javascript file in the browser.
Don’t believe me? Consider the savings. If you save 40 kB by compression from 60 kB to 20 kB, it only takes 40 ms longer to download the full file the first time using a 8M ADSL connection.
Afterwards, you pay for the compression every time when the page is being reloaded. If it only takes 10 ms to decompress (and my measurements indicate that for my hardware it’s more like 20 ms), then after 8 page refreshes the advantage is gone.
So say yes to minimification schemes that make it possible to cache and reuse the javasciprt file without a “decompression” step.
Size isn’t everything.
[...] jQuery 缩å°ç‰ˆæœ¬ (14kb 使用了 Gzipping) [...]
That’s all nice, but IE6’s gzip uncompression is unreliable, not only with CSS also with js, and this is not covered while it’s still the most popular browser.
@Jan
I heard that rumor a long time ago. It seems to come back every so often, but nobody has ever been able to present me with hard evidence. All big Internet companies (Google and Yahoo! to cite only two) do gzip their assets if the browser requests it (accept-encoding header) and nobody seems to have any problem…
IE6 is not the most popular browser anymore. IE7 recently surpassed it.
It’s no rumour because I had to disable it for IE6 just because of this. Mysteriously, sometimes the javascript would not load, and I traced it back to this. Part of it (but I’m not sure of this) might be that I run one of those “Multiple IE” packages. This means, I think, I’m running an “out-of-the-box” IE6, without any patches or service packs. In that version, any gzipped file, be it CSS or JS which is loaded from a page fails 1 in 5 times or so. Using MS script debugger, the script is 0 bytes in those cases. After I patched httpd.conf to disable gzip compression for IE6, it worked fine again.
This is my output filter in httpd.conf:
# Insert filter
SetOutputFilter DEFLATE
# Netscape 4.x has some problems…
BrowserMatch ^Mozilla/4 gzip-only-text/html
# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE no-gzip
# NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48
# the above regex won’t work. You can use the following
# workaround to get the desired effect:
BrowserMatch \bMSIE\s7 !no-gzip !gzip-only-text/html
# Don’t compress images
SetEnvIfNoCase Request_URI \
\.(?:gif|jpe?g|png|zip|gz)$ no-gzip dont-vary
# Make sure proxies don’t deliver the wrong content
Header append Vary User-Agent env=!dont-vary
@Jan
You’re using an unsupported environment. I am aware of many bugs that appear with those “multiple IEs” installs that do not exist with a normal environment. Again, if Google and Yahoo! use gzip compression, you can be sure that it’s safe (or they wouldn’t do it…) If I were you, I would test multiple IE versions using VMWare or Parallel.
If an expert in Apache configuration is reading this blog, please go over Jan’s config. Thanks.
Regards
[...] jQuery Minified (14kb with Gzipping) [...]
[...] jQuery Minified (14kb with Gzipping) [...]
[...] jQuery Minified (14kb with Gzipping) [...]
There is some bugs in some versions of IE (and Netscape 4.0):
http://support.microsoft.com/kb/321722/EN-US/ (IE5.5, IE6 and IE6SP1 always cache gzip encoded content)
http://support.microsoft.com/default.aspx?scid=kb;LN;Q312496 (IE6<sp1 could lose the first 2ko of the gzip document)
http://support.microsoft.com/default.aspx?scid=kb;en-us;823386&Product=ie600 (IE6sp1, compressed HTML pages only partially appear)
IE6 on XP SP2 should be safe even if I could not check the fix for the last bug is in SP2. Can someone check with Microsoft or on a fresh installation of Windows XP SP2?
[...] jQuery Minified (14kb with Gzipping) [...]
@DinoBoff
Interesting, thanks for that.
If we presume that this problem no longer occurs at Service Pack 2, then this means all IE6 version with ‘SV1′ in the user agent string should be OK:
http://support.microsoft.com/kb/884323/
Looking at these browser stats:
http://www.ews.uiuc.edu/bstats/latest-month.html
..that means over 5% still have a problem with gzip compression? Hmm…
[...] ä¸è¿‡ï¼ŒjQueryé…åˆâ€œè€å¯¹æ‰‹â€çš„YUI compressor+GZIP居然å¯ä»¥å°†ä»£ç é‡åŽ‹ç¼©åˆ°10k，这一点确实让我们很惊讶。大家有空å¯ä»¥çœ‹çœ‹è¿™ç¯‡æ–‡ç« 。 [...]
[...] Some are “better” than others, both in terms of how much they break stuff and how much they compress [...]
Update: Yahoo! uses a user agent white list in order to figure out whether content should be served compressed. I plan to make changes to my PHP script to include this.
[...] Julien Lecomte’s Blog » Gzip Your Minified JavaScript Files I wrote a simple PHP script that will compress files and set the cache control headers so that the requested files actually get cached by the browser. I used this script with great success for a web site I worked on recently: http://www.okomis.com/ (tags: compression gzip jquery yui javascript php optimization packers) [...]
Update: Traditional Yahoo! web servers serve compressed content to only ‘good’ browsers, and always with “Cache-Control: private”. Newer Yahoo! web servers serve compressed content if the incoming request asks for it. No check is performed on the UA.
As the number of browsers that ask for compressed content but don’t handle it well has severely dwindled, we’re beginning to shift our default behavior towards believing the browser when it says it can handle compression.
[...] jQuery 1.2.1 (14kb, Minified and Gzipped) Great for production [...]
Best Practices in Javascript Library Design…
Last night, I'd the chance to look at John Resig 's talk on the Best Practices in Javascript…
[...] jQuery 1.2.1 (14kb, Minified and Gzipped) Great for production [...]
ç›®å‰ä¸ºæ¢ï¼ŒJSAä¾ç„¶æ˜¯æœ€å¼ºå¤§çš„脚本压缩工具。
As i know,JSA is the most powerfull compressor for javascript.
for jquery1.2.1 (80,469 byte;)
compressor beforegzip aftergzip
source: 80,469; 24,975;
jquery default: 46,437; 14,641;
yuicomressor: 46,210; 14,452;
JSA(without eval): 40,704; 13,604;
JSA(with eval): 26,157; 13,549;
JSA(webstart): http://www.xidea.org/webstart/JSA.jnlp
hi guys,
yet another minifying and gzipping solution is available at:
http://farhadi.ir/jsmart.html
[...] Download jQuery 1.2.1 – (14kb, Minified and Gzipped) [...]
[...] Gziping files in general is a good thing to help you minimize files. There is a good script to minimize files here. [...]
When i try to use your script this returns:
“The HTTP extensions to PHP does not seem to be installed.”
how can i install the http extension do my php?
i googled it but i was not sucessiful!
There’s a bug on line 169 of gz.php: $uri should be $src_uri. Without that change, the file only shows up on the initial load (as uncompressed).
(Actually, you wouldn’t notice this bug if register_globals is on.)
[...] can be compressed upwards of 50% by just doing some simple JS compression techniques (you can also GZip the contents for an even bigger gain). For example, JQuery 1.2.1 uncompressed is 77Kb, and packed it is 26Kb and [...]
It would be nice if the script would not rely on the PECL http extension.
I’ve created a patch, but it’s untested.
It uses the HTTP_IF_MODIFIED_SINCE and HTTP_IF_NONE_MATCH $_SERVER keys instead.
You can get it from http://codeprobe.de/patches/gz.php-do-not-depend-on-pecl-http.diff
[...] I managed to reduce the load from 200Kb in 12 requests to about 50Kb in 5 requests. According to 2, I managed to reduce the load from 200Kb in 12 requests to about 50Kb in 5 requests. According to [...]
Could anybody tell me, where can i get the Gzipped version of jquery. If any body has it, please do share it.
Could anybody share the GZipped version of JQUERY.
@Cherry
It is on the jQuery.com site : http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.1.min.js