Your local area cable provider has been putting the concept of On-Demand to good use for years, providing television or movie titles only when specifically requested by the user. There are just too many titles out there to run them all simultaneously. The most popular and current titles are made available via traditional television channels and are always displayed on the guide.
This concept also carries over to web content. With any given page load, we could query every possible piece of relevant content from our various data sources (web files, database, external, etc), and display it all at once. But, this reveals two major problems. First, it would place an unreasonable load on our servers with each request. Second, it would overwhelm the user with the large amount of information that is spit out onto the page.
To solve the second problem, we use expand/collapse features or tabbed pages, made possible with the use of JavaScript. But, the information is still being loaded, tapping resources that might never be of interest to the user.
The first step to resolving this problem is knowing which pages are resource intensive.
Once you have this knowledge, it's a matter of stepping through each page, and determining where you can "cut back".
There are three basic approaches:
- Dedicate a separate page
This is the most obvious choice, and usually the simplest to implement. For less important information that happens to be resource intensive (pulls from multiple database queries or requires many calculations), placing that information on a separate page and linking to that page is a decent solution.
In terms of website maintenance, this is usually the most robust solution. However, it does require a complete page load, and additional "wait time" on behalf of the user.
This is used commonly in e-commerce, as the are many time dozens of queries involved with any given page. Instead of displaying all of the recent account information, most of the time a customer is presented with a "link dashboard" as seen in the example below:
This is a prime example of content on-demand. A user typically will only be interested in one aspect of their account when logging in, so why query the database for all of their information?
- Use query string parameters
This is very similar to method above. I only made the distinction to identify this particular method as content on-demand.
Perhaps the most common example of this is pagination. Although we usually don't consider it in this light, pagination is a resource saver. If 90% of users will only click through links in the top 10 query results of a search, it makes sense to display only those 10 results on the first page, then force the user to click to retrieve additional results from the server if desired.
Using a Google search result for example:
https://www.google.com/webhp?hl=en&sa=N&tab=lw#q=test&start=30
The start parameter designates to Google's server which page of results to show to the user.
- AJAX
Although not always the simplest to implement, loading content dynamically via JavaScript's XMLHttpRequest object on-demand is usually the least resource intensive and most seamless for the user. XMLHttpRequest sounds a lot scarier than it is. Most popular JavaScript libraries, such as jQuery, wrap this object in a nice, easy-to-use method.
The reason that this method consumes less bandwidth than it's "complete page load" counter part is that your are not doing a page load. All CSS, JavaScript and other external files do not need to be reloaded, parsed and rendered. The AJAX request simply brings new content to a page that has already been loaded.
Using the "My Account" example as shown above, we might instead divide the information into tabs. A tab for Order History, a tab for Reviews and a tab for Wish List, for example.
As the tabs are clicked, an AJAX request for the content is made. Once that content is available, it appended to the page, and the clicked tab is shown as active by adding a CSS class.YouTube's home page offers a great example of this (although the tabs look more like navigation controls). As you click on the navigation links, the page is not reloaded. Instead, content is loaded and applied to center content area via AJAX.
1 Comment