...

View Full Version : Combining JS to improve page download time



Drachsi
01-10-2012, 09:12 AM
I am try to reduce the time taken to download my home page. I purchased a template and then just modified what I wanted. There is a script that calls 21 other scripts.

I am told if I combined all this scripts into one or two scripts, my download time would go down.

Help appreciated.

Drachsi
www.drachsi.com (http://www.drachsi.com)

Philip M
01-10-2012, 09:40 AM
I am try to reduce the time taken to download my home page. I purchased a template and then just modified what I wanted. There is a script that calls 21 other scripts.

I am told if I combined all this scripts into one or two scripts, my download time would go down.

www.drachsi.com (http://www.drachsi.com)
If the 21(!) scripts were combined the download time would not be materially reduced.

If the download time of your webpage is excessive I would look for some other cause. It loaded for me on broadband in a second or so.

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

Old Pedant
01-10-2012, 09:46 AM
And is there a question in there?

The statement is probably true, but maybe not by as much as you might wish. It's not like combining them will make the total number of bytes smaller. You are only saving the HTTP request/response time needed for each one. But modern browsers can overlap those, thus minimizing the effects. (It's even possible that some browsers might be faster with multiple files than with one, though I admit that 21 seems excessive.)

Anyway, why not try it? It's just a matter of using an editor and hacking away.

Old Pedant
01-10-2012, 09:50 AM
Kind of funny that a website owner that offers to make a website audit for you would not know what is best on his own website. (Yes, I know...the website audit is of content, not coding. It's still a fun thing to contemplated. <grin/>)

rnd me
01-10-2012, 06:16 PM
It's not like combining them will make the total number of bytes smaller. You are only saving the HTTP request/response time needed for each one. But modern browsers can overlap those, thus minimizing the effects. (It's even possible that some browsers might be faster with multiple files than with one, though I admit that 21 seems excessive.)




If the 21(!) scripts were combined the download time would not be materially reduced.
.[/COLOR]


yes it will, and i would even venture to claim that it would reduce it substantially. there is no way it would not be reduced, just on physics alone, but then you throw in the social layer of browser design decisions going back 20 years, and you'll find it makes a big difference.


Browsers are conservative about HTTP pipelining. Firefox only does 4 (8 in beta versions) per server, meaning that even if the files are small and identically sized, the browser rendering process is stalled for a minimum of 5 round trips. depending on ping times, this is noticeable. Ever use the internet on an airplane, backyard fringe wifi, or a cell phone?

ATT claims 200ms (http://www.research.att.com/articles/featured_stories/2011_03/201102_Energy_efficient?fbid=Ihcx65_63HM)on thier 3G, which isn't great, and most user report lower performance than ATT claims.


20 files = 6 round trips in IE/ios, 3 in FF, 2 in chrome (all w/ default pipeline settings)

1 file = 1 round trip in all browsers.

6X200ms = 1.2s MIN to load a blank page that links to 21 scripts on an iphone. That's a VERY rosy estimate that assumes no competing <img> or CSS files are loaded from the page.

That also assumes a dom adder is being used that can pipeline JS requests. if they are hard-coded script tags or document.write-added script tags, those 20 files will arrive one-at-a-time, and not let the browser do anything else while they arrive. yikes!



Caching doesn't really help in this situation. HTTP caching does nothing for first visits, and subsequent visits still ping the server upon re-visit. While the server can respond with only a header, it's not much faster to send a header than a whole small file. Caching doesn't speed up much besides jQuery.js and other large multi-packet transfers.



a 2kb js file still need 3-6kb of HTTP headers.

20 files at 2kb each = ~100kb of badwidth (40kb data, 60kb headers)
20 files collated into 1 file = ~43kb of bandwidth.



of course, i can go on and on:

-battery life: 20 pings is a lot more than 1 ping, and network IO is the MOST battery-using aspect of mobile browsing. also, tying up 20 script requests means that the dom is in "active repaint"; as images and css (and quite possible js, if they use the dom like many plugins do) files arrive, the dom elements must be re-layed out, which is about the MOST CPU-intensive activity a web page can do.
With 21 js files, one has a lot more of the two most battery-killing operations, for a lot longer than need be. Every reload is the same story.



-did you know that opening a js file results in a parser overhead, equivalent to calling window.eval(). would any good programmer want to run eval() 20 extra times?


While it may be easy to sit on your office pc, click the page, and see it come up relatively quickly, the desktop and copper pipe is a dying horse. Mobile is where any and all growth is, and 21 small files is terrible for mobile networks.



This should have been an easy topic to address; a "duh" for any senior coder. Why some of our posters felt the need to dismiss the inquiry and even play devil advocate is beyond me. The naivety about network performance is also alarming to me, i hope that the posts here don't represent wide-spread mis-understanding in the javascript development community.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum