9

Different pages of my site have different js needs (plugins mainly), some need a lightbox, some dont, some need a carousel, some dont etc.

With regards to pageloading speed should i

option 1 - reference each js file when it is needed:

so one page might have:

<script type="text/javascript" src="js/carousel/scrollable.js"></script>    
<script type="text/javascript" src="js/jquery.easydrag.js"></script>
<script type="text/javascript" src="js/colorbox/jquery.colorbox-min.js"></script>

and another have:

<script type="text/javascript" src="st_wd_assets/js/carousel/scrollable.js"></script>   
<script type="text/javascript" src="st_wd_assets/js/typewatch.js"></script>

option 2 - combine and compress into one site_wide.js file:

so each page would reference:

<script type="text/javascript" src="js/site_wide.js"></script>

there would be unused selectors/event listeners though, how bad is this? I would include any plugin notes/accreditations at the top of the site_wide.js file

Haroldo
  • 33,209
  • 46
  • 123
  • 164
  • http://stackoverflow.com/questions/2707499/improving-javascript-load-times-concatenation-vs-many-cache/2707544#2707544 http://stackoverflow.com/questions/1495338/use-cache-file-or-one-more-http-request – Marcel Korpel May 02 '10 at 11:06

2 Answers2

7

It's usually best to combine these and serve one file, which you set the cache headers so that the client holds onto it, not requesting it each page. Remember that if a jQuery selector doesn't find anything, it doesn't do anything so that's not a major deal as long as you're using a good portion of your script each page, it's just fine that it has selectors without matches.

Make sure it's being cached by the client though, of all your work is for naught. Also make sure it's served minified and gzipped. And last, look at hosting your main libraries from a CDN.

Community
  • 1
  • 1
Nick Craver
  • 594,859
  • 130
  • 1,270
  • 1,139
  • Remember that certain clients (like iPhones) don't cache files > 15 KB. Also, strange that this answer http://stackoverflow.com/questions/2707499/improving-javascript-load-times-concatenation-vs-many-cache/2707544#2707544 recommends the opposite. – Marcel Korpel May 02 '10 at 11:05
  • 3
    @Marcel - The limit is >25kb (and that's the **uncompressed** size, so pretty low) :) Since you're loading the library **itself** every page load though, the jQuery situation on the iPhone isn't that great until a mobile build comes out. If you have to round-trip for **any one** of your plugins (which you would have to with colorbox), it's best to get them all at once, since the request itself is what's so painful on a mobile device, getting a larger file with that request is much faster than making another. As an AT&T customer with one and crap/spotty service, I can attest to this :) – Nick Craver May 02 '10 at 11:12
  • According to this comment http://www.niallkennedy.com/blog/2008/02/iphone-cache-performance.html#comment255665 the size limit nowadays is 15 KB instead of 25 KB (OS 3.1). As I don't own an iPhone, I can't test this. Nice to know that the HTTP requests can be painfully slow on mobile connections, though. – Marcel Korpel May 02 '10 at 11:30
  • 1
    @Marcel - That comment came from here: http://www.phpied.com/iphone-caching/ but...the author didn't know how to set cache headers :) The limit *was* 25kb, but based on spots around the web it may have *increased* since then. If I get time later today I'll test it out and update here. – Nick Craver May 02 '10 at 12:01
2

Combine them into one large and minified external file, and include that in every page. After the first page load, the browser will cache it, so the user will only download it once.

GlenCrawford
  • 3,199
  • 3
  • 23
  • 32