Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Combining JS to improve page download time

    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

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Quote Originally Posted by Drachsi View Post
    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
    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.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,652
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    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.
    Last edited by Old Pedant; 01-10-2012 at 09:49 AM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,652
    Thanks
    80
    Thanked 4,638 Times in 4,600 Posts
    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/>)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,461
    Thanks
    11
    Thanked 600 Times in 580 Posts
    Quote Originally Posted by Old Pedant View Post
    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.)

    Quote Originally Posted by Philip M View Post
    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 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.
    Last edited by rnd me; 01-10-2012 at 06:20 PM.
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •