
On a client machine with 128 MB RAM and IE 6 - this page takes > 4 seconds to display properly. It takes 2 seconds to display everything and then > 2 seconds to run all telerik javascripts for the controls that are loaded.
This seems very slow and I hope there is some approach to make this quicker. Specially after the page displays, the time Javascripts take to load all controls is too much. For that much time, user can see the page but cannot do anything. If textboxes have Font-Size or Font-Bold etc set, then these javascripts apply these properties after displaying them with the default skin.
Let me know if there is a way to load these controls faster in a page.
Thanks,
Piyush
14 Answers, 1 is accepted
I suggest that you use the Load On Demand mechanism of RadComboBox (the drop-downs on your page) to populate the items. Thus, when the comboboxes are first displayed, you can leave them empty (the comboboxes will contain no items). This should make the page-loading faster. Using the load on demand mechanism of the comboboxes, you can load the items as the user types in the input part of the combobox. Please refer to the following example for more details:
Load On Demand ComboBox
Hope this helps.
Regards,
Nick
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center

I seriously wouldn't expect this as answer. Come on! I am talking about the general loading time not just Rad Combo Box. Even though I remove combo boxes from my example, the effect would still be same.
1) The issue with Textbox is if you have Font-Size, Font-Bold all those properties defined then after the page loads, the javascript will modify the visual properties of the text box. And user can see this happening.
2) After any page is loaded, the time javascript takes to reformat the visual of controls (like masked edit etc) - is considerable on some browsers or client machines with less memory. Even on my machine with 2 GB RAM I see the page displays first with a skin and then it is reformatted by the javascript. And user can see this change - that is the concern. Because user expects to start typing into some controls as soon as they are rendered. And they cannot do that until javascript finishes.
3) For RadComboBox with Load On Demand - there is issue of setting the first value. I already discussed that in one another post under RadComboBox. I am currently setting Text property from code behind. I am still not sure what is the best way to do it though!. (Someone asked about the Value property there too!)
I understand why there is time taken by Javascript. Question is how can we minimize it - are there some best practices on coding side to reduce that time.
Thanks,
Piyush

Good luck.

Do you mean you have 50 Rad textboxes and about 10 Rad dropdowns? This is a very big page, buddy - each control instance has its initialization code. I would consider reducing the complexity of the page...
Cheers,
Blaize

Blaize - page with 50 textboxes is just an example page to find out the time difference. I created a page with asp.net native controls and the same page with telerik controls and it would be around 5 times slow with telerik controls - and all due to the javascript calls after the page renders. That's what is bugging me currently.
But I do have a page where I have 5 boxes of contact addresses - each with 7 text boxes that makes it around 35 or more textboxes. Client likes features of Empty Message and Display Mask etc so there I have to use Rad boxes instead of .net natives.
-Piyush


Piyush, I found these links helpful from other posts:
Web Resources demystified: Part 1
Web Resources demystified: Part 2
Squeezing the last millisecond from the page load time

But I think people are still misreading my post. There are 3 types of time elements involved here - which are in developer's control. Exclude all network traffic time.
1) Server Processing Time - the time between BeginRequest and EndRequest. This can be improved by our C#/.Net coding.
2) Page Rendering Time - the time it takes for browser to start painting the page from <body> till </body>. Lesser the controls, lesser the html code, better the performance.
To measure this, put following code in the <head> section:
var startTime = new Date().
And after </body> tag.
var endTime = new Date(); alert(endTime-startTime).
3) Now, following is the time I am more concerned about. put following code in your page at the end of </body> tag:
var b4pageload = new Date().
function pageLoad()
{
var afterpageload = new Date();
alert(afterpageload - b4pageload);
}
This is the time taken by all javascripts that run after page is rendered to initialize all the telerik controls. Tell me, how can I reduce this time. It seems that if you use any UI property for text boxes or Masked properties for masked boxes this time is considerable.
I am changing my one page to remove telerik textbox/masked-text controls and replace them with .net native controls.
Thanks,
Piyush

Out of curiosity, could you test the exact same page in IE6 (which you said you were using), IE7, FF3, and Opera. IE7, and especially IE6, is much slower at processing certain JavaScript code (read most).
I have some custom JS in one of my pages where different parts are highlighted as you hover over so you can see associations. There is some processing behind the scenes, but in IE7 as I hover over I see serious delays (not real-time) and the CPU is 100% on one of the cores. With FF3 it goes about to 50%, while Opera barely touches 15-20%.
The RadComboBox you mentioned is heavily dependent on JS; if you have the option of switching over to the browser's combobox then do so as that will have the maximum performance.
Sorry I can't be of more assistance.

FF has started crashing with telerik - I don't know why. But anyhow, I have to support my app with IE so not worried.
IE6 was slower than IE7.
-Piyush


It looks like you've received some good tips in this thread. I will be soon compiling a number of these tips along with best practices in to an updated online article you can use to further tune your application. In the mean time, let me add a few more bits of info to assist your efforts to maximize performance:
- Use the Right Control for the Job- The number one piece of advice I give to developers looking to maximize page performance is be absolutely sure you're using the right control for the job. Just because Telerik makes a rich, interactive control that can replace an ASP.NET standard, it doesn't mean you should necessarily use it. It depends on what functionality you need on the page and what level of interactivity. There is a trade-off you must make between rich, responsive UIs and fast loading, "vanilla" UIs. This is just something we as web developers must deal with no matter what controls we're using.
And in the case of a page that is rendering 35+ rich controls, my first advice would be to cut the rich controls in favor of vanilla where you can. There is very little you can do when you start to litter your page with that many controls that must initialize.
- Use IIS for Testing- I learned this lesson the hard way. I got so used to using the built-in web server in Visual Studio for testing my websites locally that I forgot how much weaker it is than IIS. If you're conducting your tests with this debugging web server, it will significantly skew your results. Make sure you setup your site in IIS and then run your tests for the best possible accuracy.
-Todd

We have gotten past most of our loading issues and we're finding that, for the most part, the new ajax controls are loading as quickly as, if not faster than their counter-parts from the old classic rad controls. However, we have two pages where the initial load is fine, but after an ajax request, the reload is very slow. Server side processing is very fast (under 1 second) so the delay is occurring during the rendering/script processing in the browser. Both of these pages are large with a fair amount of embeded javascript. One uses a rather complicated heirarchical grid and the other just has a ton of input controls.
I'm wondering if anyone has reported similar issues. I don't understand why there would be such a difference between the initial rendering and the rendering following an ajax request.
Note that we have the exact same pages using standard rad controls for asp.net and they do not exhibit this behavior. Rendering following an ajax request is about 4 times faster for the old controls.
Thanks,
Tom

I will recommend you to optimize the client-side, more information you can find in the following help topic from the ajax online documentation:
http://www.telerik.com/help/aspnet-ajax/ajxclientsideperformance.html
Hope this helps...
<John:Peel />