3

So here is my header:

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script> 
<script type="text/javascript" src="js/jdpicker/jquery.jdpicker.js"></script> 
<script type="text/javascript" src="js/uniform/jquery.uniform.min.js"></script> 
<script type="text/javascript" src="js/jquery.hotkeys.js"></script> 
<script type="text/javascript" src="js/visualize/visualize.jQuery.js"></script> 
<script type="text/javascript" src="js/jquery.cookie.js"></script> 
<script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script> 
<script type="text/javascript" src="js/jwysiwyg/jquery.wysiwyg.js"></script>

All of these have to be loaded and its lagging my site how can i get them cached so the load time is faster

competent_tech
  • 44,465
  • 11
  • 90
  • 113
Tahoe Cale
  • 83
  • 1
  • 2
  • 8

4 Answers4

7

You've got a big load of JavaScript in your pants! My suggestions would be (please don't be offended, as I'm sure you've already taken many of these steps):

  • Make sure that you need all of these js files on the page. Are you using fancybox? Are you using cookie.js? If there are any js files that you can remove from the list, do so.
  • Are any of these js files available over CDN? jQuery is. jQuery UI is. This will reduce the load on your server, and many users may come to your site with cached versions of these js libraries already in their laps!
  • Are there any lighter versions of your libraries that you could swap out for? If so, swap 'em!
  • For those files that you're hosting locally, minify and mash them. If you're working in Visual Studio, you can use Chirpy or Combres. If you're not using Visual Studio, plenty of other cool tools are out there to help you reduce the size of your CSS and JS assets.
  • Consider using Less for CSS and CoffeeScript for JS. They'll speed up your development cycle AND they'll pre-optimize a lot of your code (if you're lucky).
  • Now that you've got one big mashed, minified, optimized JS file, you can cache it. This step is platform specific, so you might need to go searching around.

Did I miss anything crucial? Those are the quick steps that I take. I think.

Community
  • 1
  • 1
Evan Nagle
  • 5,133
  • 1
  • 26
  • 24
3

I would suggest to Minify and COMBINE all of those into ONE file - less HTTP requests = faster load times

Leon
  • 4,532
  • 1
  • 19
  • 24
  • And then on visit 2 to the website when I change application code, my users need to re-download jquery. – Stefan Kendall Dec 10 '11 at 01:32
  • of course he could still split it in 3 files, jquery/jquery-ui/his own code, but note that in most cases just opening a new HTTP connection will take longer than just re-downloading the whole file. Besides, that also depends on how often you change your production application code... – Leon Dec 10 '11 at 01:34
  • Or, better yet, use the CDN jQuery and get cache hits from other websites. I actually just tested this recently, and script-download to application start time was only about 10ms faster on average (~1420ms vs 1430ms), and the combined file lost all hope of consistent cache hits over time. – Stefan Kendall Dec 10 '11 at 02:18
2

See If-Match and If-Modified-Since over here.

IIS will provide tag and last modified headers for any static content it returns, meaning static resources like js files will be automatically cached by the browser by default. Browser will attempt to fetch all those files on every page loads, but IIS will reutrn 304 and browser will use cached version. Yes, there is some processing time associated with making all those requests, but it is unlikely to have significant impact on your page load time. Also this will not help you in any way on your first page load, when you have to download those files no matter what.

Compare your first load time to the second and third. You can easily check that in Firebug. If they are not very different, then the issue is likely not the download size of js files, but rather complexity of the executed js code (assuming HTML loads quick enough).

Cut down on global initializers (i.e. code that is used only on 1 page, but executed for all pages on the site). Move code out of inline script tags and into the window load event. If done properly this is likely to help quiet a bit.

Ilia G
  • 10,043
  • 2
  • 40
  • 59
0

I like Minify.

It will do a lot more than cache the files on users' local machines, and its quite easy to get set up. One tip: don't try and develop/debug on your minified code! Keep a debug copy handy heh.

Here's a blurb from their front page, see if it fits your needs:

[Minify] combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers

The Maniac
  • 2,628
  • 3
  • 19
  • 29