2

I'm working on improving the page performance of my company's intranet page. We're looking to (dynamically) combine our javascript files as well as cache them for 30+ days. The page launches on login for everyone.

One of my coworkers asked if it's worth the time to combine the JS files if we're already caching them for a month. He's hesitant to do both because the combining tool is server side and doesn't run on our desktop, requiring a somewhat hacky workaround.

I've been doing some research and most of the recommendations for performance I've seen are for external sites. Since we're in a closed system it would seem like we wouldn't get much benefit from combining the files once everyone's cache is primed. What would combining the files buy us that aggressive caching wouldn't?

We're on IE8 if that makes any difference.

Tom Chandler
  • 642
  • 3
  • 9

2 Answers2

2

The most notable impact with having multiple JavaScript files is the time required to render the page. Each script tag is processed separately and adds time to the overall render process.

A pretty good answer can be found here @ multiple versus single script tags

If we are talking a large number of scripts then you may see an improvement in render time; if it is just two or three files then it likely won't bring abount a noticable difference once the files have been cached.

I would suggest testing the page render time in both cases and see how much improvement you see in your case and decide based on that information.

As a useful example, here are some stats from Xpedite (runtime minification tool I created a while back); note the difference in time from load to ready for combined vs uncombined scripts.

Community
  • 1
  • 1
Chris Baxter
  • 16,083
  • 9
  • 51
  • 72
  • I found all of this out already, and I would love to streamline the loading of our Javascript, but there are a few dozen inline script tags on the page and it'd require a pretty big rewrite. My question was around the impact of multiple script tags vs one script tag if the scripts they're referring to have already been cached. – Tom Chandler Nov 17 '11 at 16:36
  • @Zoho - The time required to parse the JS still applies even if the script has been cached; as mentioned the link to the related SO question provides more details. So the answer to your question is it may take more time to render the page with more script tags. – Chris Baxter Nov 17 '11 at 16:38
  • I figured it would be slower to parse multiple js files, even if they were cached, I just didn't have anything to cite. Thanks. – Tom Chandler Nov 17 '11 at 16:50
2
  1. Combine all your JavaScript files into a single big file (thus minimizing the number of requests made to the server), and set its name to something like "application_234234.js"; the number represents the last time you have changed the file and will help the browser know it's a new file (thus no cache when you change it).
  2. Add an Expires or a Cache-Control Header (set it really far into the future). Since the file name will change each time you'll modify it, you don't have to worry.
  3. Last and not least, compress and gzip the JavaScript file.

These are some important advices, but learn more about best practices on: http://developer.yahoo.com/performance/rules.html

alessioalex
  • 62,577
  • 16
  • 155
  • 122
  • I try to pracitce these already. We're using a runtime combine tool that runs on our web server to combine the files as they're requested. There's a lot of pushback from my team around combining/minifying the files before deployment because the tools we have to use make it hard for us to do local development with that. – Tom Chandler Nov 17 '11 at 16:32
  • I suggest your team should also set the "development" environment, in which files aren't minified or compressed into one single file. I guess that would make life easier for you guys. – alessioalex Nov 17 '11 at 16:57