Speed Up Delivery of your JavaScript Libraries
Web Development
|
Hello,
I am going to show you how to speed up delivery of you external .js files along with examples. I will use the prototype and scriptaculous javascript libraries as a benchmark which contains 8 seperate .js files.
Unoptimized .JS
Here are the results using YSlow to benchmark the speed of the JS files downloading when there is no gzip compression, no cdn, and no minification of the js code:
Response Time (ms): 4477 (all files)
File Size (kb): 248.7
4.4 seconds to download some JS files! Thats 4.4 seconds, on broadband, to wait before the page even renders!!! So lets get that optimized.
Option 1 - Optimized .JS - Using Google
http://code.google.com/apis/ajaxlibs/documentation/index.html
This is a very quick and easy way to speed up the delivery of the library files to an acceptable level. The same files, gziped with cdn (not minimized, but gzip kind of makes up for that loss)... results in the following:
Response Time (ms): 1920 (all files)
File Size (kb): 61.2
Thats not bad at all, especially considering you get all the advantages that google offers (see the url above). It can be improved even more if your prepared to do some manual work (see option 2)
Option 2 - Optimized .JS - Doing it yourself
We can cut out all the extra response times by just merging the files in to a single js file. That would then take it down from about 4.5 seconds, down to about 1 second and there is no need to do an extra DNS lookup like you would with option 1 - oh look - you've beaten google already!
Minimize the source code using a tool such as jsminify (PHP), and then gzip it when sending it over to the visitor. Resulting in the file going from 248.7Kb to around about 60Kb, and the response time being even faster!
Conclusion
Never run a large library such as scriptaculous on a live website in the unoptimized form. Most people would be more than happy using Option 1 because its much more convenient and gives acceptable speeds, but Option 2 gives you the best speed gains and your not relying on googles website to always be fast (and online) to get the gains but you do have to do a lot more work to get everything going.
If you use a JS library such as jQuery then i would just go with Option 1. Not worth all the extra effort and the gains won't be so great for a small 20Kb library. But for large libraries, especially your own, go with option 2.
Kind regards,
Scott
Please login to rate coding articles.
Click here to register a free account with us.
|
|
Comments
|
| Please login to post comments. |
|
|
"FireFox + FireFox (+ YSlow)" - i ment FireFox + FireBug + YSlow :-P my
bad.
Good job that info is in the comments now ;-)
Kind regards,
Scott
|
|
|
No, but I would not have known how to with firefox, too ;)
|
|
|
Dunno how you would benchmark it on other configurations than FireFox + FireFox (+
YSlow)
Know of any others?
Kind regards,
Scott
|
|
|
It would be interesting to know with which browser/browsers you got those results -
and maybe posting results of other browsers. Maybe other browsers have been optimized
for such cases.
|
|
|
Na, google use CDN's and if i'm affected thousands of others would be as
well. I also tried it from my own ISP and got the same kind of results.
|
|
|
Hmm, this can just be that your connection to Google's servers are faster than
CP's. Google has paid a lot of money to make sure it's server's are
fast and have very little traffic to each individual one, making processing time very
quick.
|
|
|
 |
Categories |
 |
|
|
