13

I have a 700kb decompressed JS file which is loaded on every page. Before I had 12 javascript files on each page but to reduce http requests I compressed them all into 1 file.

This file is ~130kb gzipped and is served over gzip. However on the local computer it is still unpacked and loaded on every page. Is this a performance issue?

I've profiled the javascript with firebug profiler but did not see any issues. The problem/illusion I am facing is there are jquery libraries compressed in that file that are sometimes not used on the current page.

For example jquery datatables is 200kb compressed and that is only loaded on 2 of my website pages. Another is jqplot and that is another 200kb.

I now have 400kb of excess code that isn't executed on 80% of the pages.

Should I leave everything in 1 file?

Should I take out the jquery libraries and load only relevant JS on the current page?

3
  • If have 700kb of JS code you really should re-split it and only include the scripts you really need. Also, using jQuery ("…write less, do more…") it seems a bit oversized to have such huge JS file. What the heck are you doing with such a mass of JS?
    – feeela
    Jun 27, 2012 at 9:15
  • @feeela take a look at jquery-ui, jquery.datatables. Those alone are 400kb together. I've got other plugins I use too such as jquery.validate, jquery.uniform -- this stuff adds up. xD
    – Kyle
    Jun 27, 2012 at 9:18
  • In that case – as said below – you really should split the scripts and load only what is needed…
    – feeela
    Jun 27, 2012 at 9:20

4 Answers 4

8

If your framework/CMS/whatever has the appropriate functions, you can include the scripting conditionally as @Michael suggests, but without the additional library.

Taking your datatables case, for example, WordPress might handle the situation via something like:

// For reference; this isn't functional code.
if (is_page('whatever')) {
    <script src="/path/to/datatables.js"><script>
    <script>
        [Your datatables setup here]
    </script>
}

There's nothing wrong with RequireJS; you just need to evaluate whether the additional level of complexity it adds(plus learning to use it in the first place) offsets what more readily-available tools can do for you. If you only have the two cases you mentioned above, this might be a better option. If you've got a lot more going on, then RequireJS might be a better approach on the whole.

1
  • I have a custom website I made from a html template I bought off of themeforest. The only problem is the dude had like 6 JS files scattered around and it was messy. So I put those into one file and that includes few libraries jqplot,datatables,jquery-ui. Those all add up to around 550-600kb. 100kb is my JS using those libraries. I feel like I should fix this instead of loading so much irrelevant JS libs on every page. Thank you for your suggestion! =)
    – Kyle
    Jun 27, 2012 at 9:20
6

You can use requirejs to dynamically load the libraries you need only on that pages. Then you only have to load the requirejs (which is about 14k) on all pages, saving about 385kb.

Integration is also very easy: just "wrap" the code you have with the require include stuff:

require(["jquery", "jquery.alpha", "jquery.beta"], function($) {
    //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
    $(function() {
        $('body').alpha().beta();
    });
})
4
  • 1
    I really like that website design. I've never heard of requirejs. How do you rate this over http requests? Doesn't this put more http requests on the page? (isn't that bad?) Sorry for my silly questions.
    – Kyle
    Jun 27, 2012 at 8:34
  • Having fewer requests is better of course, but saving >350k is also not too bad. Yes, your site will make one more request if you include another library on that page. If it's datatables on one site and jqplot on another, that is fine. Loading five more libs on 50% of the pages would make the advantage disappear, I agree. But in your case, I consider it a very good solution (assuming, that the rest of you js stays one gzipped file).
    – Michael
    Jun 27, 2012 at 8:45
  • Thanks Michael. This solution is rather brilliant. Before I was going to split up everything on one page but this... This is better than what I had in mind. Thank you for this suggestion. Since you are familiar with requirejs, do you think requirejs would be enough? I see on some websites they use google to load their jquery and other libraries, google.load('...').
    – Kyle
    Jun 27, 2012 at 8:50
  • 1
    I strongly recommend to load common libraries from Google (or other sites offering it). This has 2 advantages: a) the lib file is cached between different sites. Chances are that the user visited a site before, that also uses jquery loaded from Google. This file is then loaded from cache, not again from server! b) Even if it has to be loaded, it will be much faster to load it from Google CDN, than from your own webserver.
    – Michael
    Jun 27, 2012 at 10:16
6

700kb of JavaScript IS a performance issue, because it must be parsed after page load. Because of it, you should take care, that only those scripts, that are needed, are loaded. One big JavaScript may be OK on full AJAX sites, such as GMail, when the navigation is handled internally without leaving the single page. However, even full AJAX sites do dynamic JS loading to prevent loading unnecessary JS on start (both memory and speed isssues).

You've said you've wanted to reduce http traffic. You should play with HTTP caching. The issue is, that the changes to the JS may not be visible until the cache expires, if you set expire time too high.

There is a trick, however, that you don't refer to myscript.js, but myscript.js?version={myversion}. After application update you change the {myversion} and you force JavaScript reload.

1
  • Yep, with this size of JS, coupled with the fact that it's mostly fairly common libraries, the use of a CDN will be a big benefit. Jun 28, 2012 at 19:36
1

~700kb of JavaScript is a performance issue and if compressed and we have to see the Rules to be followed while dealing to optimize the Code are:

  1. Minify Javascripts - Simply you are compressing and decompressing, which didn't reduce the code, First of all use the good Minify JS tool and Minify your code. You are 12 Files and each file would be Minify sepratly before clubbing for best performance.

  2. Use asynchronous javascript loading, by Using asynchronous loading results in a very fast load time and rendering of the page. The user impact is very strong because good asynchronous loading won't block the rendering process and the feeled page load time is heavily decreased. Images and other displayed items regulary will be shown as of no javascript is loaded.

  3. Use GOOGLE cdn for JQUERY; I think you are using JQUERY and loading it from your own website which is also a added dis-advantage, kindly use the GOOGLE CDN (free) to load the JQUERY. As it is being used by almost every 3rd website and thus already available on client computer in cache.

  4. Custom long Expires Headers: Some how the website is loaded with issue of loading time then you must give the Long Expires for HTTP JS Files, so that they can't be downloaded every time, which will reduce the request for second time. According to my research, loading time taken on second page have more exits compared to first time page visit.

  5. Check with Page Speed: Some times other resources also effects the loading speed of the page kindly cross check and also try to optimize other resources also. As doing bit of step on every resource give a extra time to our JS loading.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.