Optimization Tips:The Rad Managers for ASP.NET AJAX

Today I am kicking-off a new series of blog posts that will focus on showing you specific ways you can optimize the performance of your applications built with Telerik's RadControls for ASP.NET AJAX. Whenever we use UI components to accelerate our web development, it is easy to forget that we still need to be "smart" developers when it comes to optimizing our web applications. Telerik tries to do as much as is possible at a component level to help with optimization, but as with any good thing like rich UI controls, too much is a bad thing. In this post and those that follow, I will delve in to optimization tips and tricks and show you the effects of each on a sample application. Hopefully it will help you become a better developer and enable you to maximize the performance of your apps, especially those with Telerik's RadControls.

Today's focus is on the new RadScriptManager and RadStyleSheetManager controls. These "manager" controls enable you to easily combine in to a single link all of the JavaScript and CSS links required by the RadControls. Why combine? One of the biggest bottlenecks for browsers these days is created by the concurrent requests limit. By default, both IE and Firefox limit concurrent requests per server to 4, as is recommend by the HTTP RFC guidelines. This limit can be changed, but expect few of your users to actually have done so as the process requires advanced computer skills.

With a limit of 4 concurrent requests (2 persistent connections), you can see how easy it is to clog the pipe with all of the request for images, JavaScript, and CSS on your page. Combining many links for CSS and JavaScript in to a single request can significantly improve your page load time by reducing the number of round-trip requests your page makes when it loads. And by doing the combining dynamically at runtime you don't have to send any unnecessary JavaScript to the client (for controls not in use) or manually maintain combined JavaScript files. It's one of the easiest and most effective optimization tips available.

Let's see the effect of these managers on a simple demo app that uses RadGrid, RadMenu, RadTreeview, RadAjax, and RadSplitter. We'll use FireBug (in Firefox 2) and Fiddler for our tests, and we'll run our site from IIS to ensure we get accurate performance numbers.

Requests and Bytes
The first thing you should notice when using the Managers is that the number of requests your page generates is reduced significantly. Let's take a look at the difference:

• Requests without Managers
• Unprimed cache: 32 @ 21.4 KB
• Primed cache: 3 @ 2.6 KB
• Requests with Managers
• Unprimed cache: 16 @ 11.2 KB
• Primed cache: 1 @ 1.8 KB

Clearly, the managers have a significant impact on your requests. In this demo app, they cut in half the number of requests and the number of bytes sent to the server on page load. That's a pretty significant gain and bandwidth savings for your user. Even on the download side, the Managers reduced the payload sent from the server about 11% on average, for both primed and unprimed page loads.

Page Load Times
While reducing the number of requests and bytes is good academically, it's ultimately page load time that matters to users. To see the effect the Managers have on page load time, I ran the demo through the online stopwatch in IE7, IE8 beta 1, FF2, and FF3 beta 5. I ran the stop watch 6 times for each browser, 3 unprimed cache tests, 3 primed cache tests. I then compiled the results in to the following chart.


This chart reveals a few interesting facts about the Mangers' effect on page load time:

• Usually, for both primed and unprimed caches, the Managers reduce page load time
• Unprimed improvement: 30%
• Primed Improvement: less than 1%
  
• Primed Improvement without FF2: 3%
• As has been observed in other performance tests, FF2 is a poor performing browser
• It renders pages slowly and renders cached pages slower than first request pages
• FF3 is a lot faster than FF2 (yay!)
• Almost all browsers tested render the test page in less than 1 sec with Managers
• True for primed and unprimed cache
  
• Key exception is FF2, but see note above. FF3 solves the problem.

Whether or not you'll see a 30% improvement on initial page load time in your app will require your own testing, but this analysis definitely makes it clear that the Managers can have a very real impact on improving your page's load time.

Optimization Tip Summary
To cut significantly reduce the requests and bandwidth required by your page on the initial visit, and to significantly trim your initial page load time, you should add the RadScriptManager and RadStyleSheetManager to your ASP.NET AJAX applications. For more details on how to add these controls to your page, see this page for the ScriptManager and this page for the StyleSheetManager in the Telerik documentation.

Next up, we'll look at the impact debug=true and the Visual Studio development server have on your page's performance.