Web app design: Local caching vs demanding

Question

I'm writing a web application in javascript that will be served to the clients' browser. The intent is for the app to appear to the client as a monolithic application, not a series of interlinked refreshing web pages.

My question deals with common architecture. In order to relate the question I'll mention a specific feature of the web app is a "tour"; when the client clicks a button labeled "tour" the web app will load a div with a bit about the app itself, and what it can do for the user. There are two ways this could be handled, the client browser could fetch the tour markup from the server when the user clicks the button, or the server could download it (and all other such features) when the app is initially downloaded.

If I fetch the tour on demand, then I possibly save network bandwidth as not everyone will take the tour, the app will be smaller too. But this means that in order for someone to fully use the app there will be more network congestion as there will be another hit on the network for loading the tour.

If I just serve all the features initially, the app is larger, but there is less congestion on the network because, once downloaded, there is less need to access the network (unless a fresh copy of the app is required (ie if-modified-since).

This 'tour' feature isn't really the issue itself, it's just an example to explain my question. How to balance caching vs demanding in web app design?

Answer 1

When you start discussing caching, there will be lots of opinions. No one outside your development team will be able to speak in certainties about your application. I would like to offer some guidelines to help you make your decision based on facts.

How to break down your application

You will have lots of different "containers" on any given web page. These could also be called views, segments, sections, or any number of other names. The information or actions performed in a container are where you want to start looking at breaking down a web page.

What to not cache

When you have a container (like your tour example) that will not be used frequently, you might not want to cache it as it will add to the page size and load time every time the page is loaded or reloaded. Even if this is a small size, it can add up over millions of page views to a size that might cause you distress. The reduced load on the server will make your web site perform better.

What to cache

A container that is used frequently is something you should cache. Suppose you have a survey to get information from your users. The questions of the survey will not change during a session under normal circumstances, so even if you change which questions are displayed in the container, caching the questions will save you bandwidth on the server. It will also help your page to appear to perform better.