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.
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
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.
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.