Javascript is becoming increasingly popular on websites, from loading dynamic data via AJAX to adding special effects to your page.
geez man… 
instead of plugins [web-developer toolbar]&[OctaGate SiteTimer] you can use an another great fx-plugin. this is firebug!
Probably not. Although some browsers can accept compressed javascript (myfile.js.gz) or files returned with the gzip encoding header, this behavior is not consistent between browsers and can be problematic.Can you be more specific about the problematic part? Because the great advantage of gzipping javascript is that the code is still readable.
I haven’t had any problems with it so far, but maybe I’m overlooking something.
@magic.ant: Thanks, I forgot about mentioning firebug. It’s great for debugging, but does it break down page sizes as well? (Update: Firebug does show page sizes on the Net tab, not sure how I missed that one! I’ve updated the article.)
@Blaise: The ThinkVitamin article goes into more detail – apparently some versions of Netscape and Internet Explorer (4-6) have issues correctly decompressing gzipped content:
“When loading gzipped JavaScript, Internet Explorer will sometimes incorrectly decompress the resource, or halt compression halfway through, presenting half a file to the client. If you rely on your JavaScript working, you need to avoid sending gzipped content to Internet Explorer.”
There may be workarounds by detecting the browser and returning different code, but I don’t think it’s worth the risk.
However, if you do get it working in all browsers, I’d love to hear about it!
[…] Speed Up Your Javascript Load Time | BetterExplained (tags: javascript optimization performance) […]
Agiliza la carga de tu Javascript…
Una serie de consejos para que la carga de los javacripts no se demoren demasiado y hagan al usuario esperar, algo que no suele gustar, sobre todo ahora que cada vez hay mas efectos y funcionalidades que hacen que las…
Nice article. You can also mention about merging all javascript files into one - this would reduce the no. of HTTP calls (even if the individual files are cached). And if you are pulling JS files from another host, it also makes sense to move those files to your domain, as this would reduce the server lookup time.
[…] I’m happy people are finding the article on javascript optimization useful. But I made giant, horrible mistake. A mistake that befalls many tutorials. […]
Thanks Anand, I had forgotten to mention that. I just put up Part 2 which has a script to combine your files into a javascript library.
HTTP already allows to gzip the payload, so there is really no need to think about gzipping.
[…] Speed Up Your Javascript Load Time | BetterExplained - Javascript is becoming increasingly popular on websites, from loading dynamic data via AJAX to adding special effects to your page… with a price […]
[…] Speed Up Your Javascript Load Time | BetterExplained (tags: JavaScript performance optimization programming webdev) […]
[…] O Javascript tornou-se incrivelmente popular nos sites com o carregamento dinâmico de dados via AJAX para adicionar efeitos especiais à página. Infelizmente, estas características tem um preço: ao usar bibliotecas Javascript, você adiciona dúzias ou eventualmente centenas de kilobites a sua página. Usuários detestam esperar; por isso, aqui você encontra algumas técnicas para usar em seus sites. […]
[…] Kulland???m?z Javascript’lerin sayfa h?z?m?z? ne kadar etkiliyor ve bu etkiyi ne kadar azalt?r?z hakk?nda yaz?lm?? ?ngilizce güzel bir makale. Link […]
[…] Speed Up Your Javascript Load Time Compress Your JS with JSLint, Rhino, etc., place your JS at the end of your HTML (user sees content loading, page looks responsive), load JS on-demand or use a delay (for fast initial page load), cache your files, combine your files (tags: JavaScript Cache) […]
i wrote n uploaded a javascript in my website
that script loads as the page loads
but i want to enter some 30 seconds delay in javascript to load
can i do it
plz help me
Hi Raheel, check out the example in part 2:
http://betterexplained.com/articles/optimized-javascript-example/
There’s a script that loads after 5 seconds – you can change the delay to 30 instead (30 * 1000).
Kalid, I don’t agree with your comment on not using gzip. Gzip is required to be supported by HTTP 1.1 protocol, which includes most modern browsers. The bug in IE 6 that is referenced by the ThinkVitamin article affects not just gzip content, but other content as well. People are far better off using gzip than not.
Also, regarding your comments on caching you need to be careful about what HTTP 1.1 caching commands you use because users could be going through proxies that are HTTP 1.0 resulting in odd/unexpected behavior.
Hi Trevin, thanks for the comments.
One problem with IE6 is that it says it accepts gzip’d content but may have problems decoding it:
http://www.google.com/search?q=ie6%20gzip%20problem
http://support.microsoft.com/default.aspx?scid=kb;en-us;Q312496
As a result, webmasters serving gzip’d content have to resort to hacks like detecting the browser user-agent and returning regular content to IE6, even if it says it can accept compressed content:
http://httpd.apache.org/docs/2.0/mod/mod_deflate.html
These tricks can be done, but may be tough for a newbie. Of course, we can just take a scorched earth approach and let IE6 choke if it can’t render the page, but this is tough stance to take given that IE6 still has a large fraction of browser share.
However, I agree with you that output compression is extremely valuable. In my tests it shaves over 2/3 of the bandwidth, so I really, really want to enable it (and find a suitable workaround for IE6).
In general though, it appears to me that an old HTTP 1.0 proxy won’t cache something a new HTTP 1.1 header is set. You might not get the performance benefit when using an old proxy, but I’m not sure what other impact there would be.
Both of these are probably topics for a follow-up article