3

So in my page I have some little scripts which I dont really need to load once you visit the site and in fact the user might not need them at all in their entire session.

Also, according to this: http://code.google.com/speed/page-speed/docs/payload.html#DeferLoadingJS its not a good practise either.

So for example, currently I have everything in 'When dom ready':

$(function() {
 // most of the code of which is not needed
});

If I dont place the code inside the Dom ready, its not executable at most of the times. So I thought of doing seperate functions for each snippet.

For exmaple:

function snippet1() {
   // Code here
}

and then when I need that snippet, I load it when needed with mouseclick. (Not always a mouselcick, depends what I need to load).

For example:

$('#button1').click(function() {
  snippet1();
});

So my question is: Is this the way of loading functions async so you reduce the page load time or is there a better way? I havent read this anywhere my examples, I just thought of it.

Note that I am aware of the asynch loading's but that is not my option here, since I could combine all the functions in just one js file which will be cached, so page load time will be less than loading every time asynch js files.

jQuerybeast
  • 14,130
  • 38
  • 118
  • 196

3 Answers3

6

You're mixing several things:

  1. Page load time
  2. JavaScript parsing time - After the script is loaded, it has to be parsed (error checking, compiling to byte code, etc)
  3. Function execution time

You can't do much about the page load time since you don't want to split the script. You may consider to split it into two parts: One which you always need and an "optional" part which is rarely needed. Load the rare functions in the background.

Note that page load times become pretty moot after the site has been visited once and you've made sure the browser can cache the files.

If you want to reduce parse times, you have two options:

  1. Don't load parts that you don't need.
  2. Compress the scripts. Google has a great tool for that: the Closure Compiler. Besides making your scripts faster, it will also check for many common mistakes.

The last part is the execution times. These are only relevant if the functions are called at all and when they do a lot. In your case, I guess you can ignore this point.

Aaron Digulla
  • 321,842
  • 108
  • 597
  • 820
  • 2
    Hi and thank you for your answer. I am aware of all the ways to minimize and reduce load times. What is left is the parsing time. All my scripts are loaded asynch, minified, cached on a Akamai's CDN etc etc. Its just I am one of those who are addicted with load time and performance and I am just trying to make everything everything possible. On all page load scripts online (webpagetest, yslow, google's page speed I get 100/100 or full A's. I'm not braging, Im just trying to explain that I am aware of pretty much most things). My actual page is even using cache manifest. – jQuerybeast Jan 13 '12 at 14:30
  • I am just trying to learn if there is a better practise that I am not aware of. – jQuerybeast Jan 13 '12 at 14:30
  • In that case, your only option left is to split the scripts. Since the browser will cache them, this won't affect load times too much if you split them only in 2-3. In fact, it might help since future changes will probably only affect one of the 2/3 scripts, so the browser won't have to reload everything. – Aaron Digulla Jan 13 '12 at 14:50
1

Yes, as much as possible you should define objects, functions, etc. outside of the document.ready wrapper. Some devs will define absolutely everything outside the wrapper and then just call an init() function inside the wrapper to load everything else. I am one such dev.

As for async, this doesn't do true async loading, but it speeds up your page since there is much less work to do on page load.

In general, if you're not using a script loader like requireJS or yepnope, it's a good idea to put all your script references – or at least those that don't need to be run instantly – at the end of your body so the page renders before the resources that aren't going to be run until after page load anyway.

glortho
  • 13,120
  • 8
  • 49
  • 45
  • Thank you. Sound a good advice. Is there any articles about it? – jQuerybeast Jan 13 '12 at 14:26
  • Check out this SO post and answers, which includes a link to Yahoo's seminal best practices article: http://stackoverflow.com/questions/143486/unobtrusive-javascript-script-at-the-top-or-the-bottom-of-the-html-code – glortho Jan 13 '12 at 14:44
1

I would load all additional resources using RequireJS ( http://requirejs.org/ ) or similar library.

Put everything that you don't need immediately to separate script and load it after main content is loaded.

Vadim Gulyakin
  • 1,415
  • 9
  • 7