overall loading time of telerik controls in UI for ASP.NET AJAX General Discussions

Piyush Bhatt

166 posts

Member since:
Nov 2007

Posted 15 Apr 2008 Link to this post

I created a sample project and dynamically loaded 50 text boxes, 1 menu with 20 odd items, 10 or so drop downs in a page.

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

Nikolay

Admin

3997 posts

Posted 16 Apr 2008 Link to this post

Hi Piyush,

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

Piyush Bhatt

166 posts

Member since:
Nov 2007

Posted 16 Apr 2008 Link to this post

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

Peter Zolja

119 posts

Member since:
Dec 2007

Posted 16 Apr 2008 Link to this post

Is this on your local machine or over the web? I can go to the demo page for the editor (so, not local) and it loads in under one second (from the time I see the editor and everything is ready). Have you tried using Fiddler to see what it's going on? Also, it is very important to deploy as release, otherwise all the javascript code will be re-downloaded for each request. For this you also have to make sure that debug is set to false in web.config. If you have control over the web server and you have at least IIS6 make sure you have turned compression on -- this can make a huge difference.

Good luck.

Blaize

88 posts

Member since:
Oct 2006

Posted 16 Apr 2008 Link to this post

Piyush,

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

Piyush Bhatt

166 posts

Member since:
Nov 2007

Posted 16 Apr 2008 Link to this post

Peter, now you are talking. Thanks for the tips on debug=false and IIS6 compression. I knew about web.config setting - but did not know that IIS 6 compression would help speed things up too. I did that.

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

Peter Zolja

119 posts

Member since:
Dec 2007

Posted 16 Apr 2008 Link to this post

You're welcome. To get an idea how much you save with the compression (and also check if it's working) you can go here: http://www.port80software.com/products/zipenable/ and type in your URL in the compression check. (I have no connection with Port80Software; I don't use their product, but it's a nice tool to check your site). If you want to go one step further you could use RadScriptManager instead of the ScriptManager that comes with ASP.NET AJAX. This way all your Telerik JS files will be grouped in a single request. This will help with first-load experience; if your project is configured for release all those JS "files" will be cached, so after the first load it should be the same.

donoho

21 posts

Member since:
Apr 2007

Posted 16 Apr 2008 Link to this post

Great advice Peter.

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

Piyush Bhatt

166 posts

Member since:
Nov 2007

Posted 17 Apr 2008 Link to this post

Yes I do use the RadScriptManager and RadStylesheetManager.

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

Peter Zolja

119 posts

Member since:
Dec 2007

Posted 17 Apr 2008 Link to this post

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.

Piyush Bhatt

166 posts

Member since:
Nov 2007

Posted 25 Apr 2008 Link to this post

I tested in IE6, IE7 and FF.

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

donoho

21 posts

Member since:
Apr 2007

Posted 25 Apr 2008 Link to this post

Firefox has been a bit... crashy as of late. Since 2.0.0.12. I'm sure the number of dubugging plugins I have installed is contributing.

Todd Anglin

2040 posts

Member since:
Aug 2005

Posted 25 Apr 2008 Link to this post

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.

In general, we try to do everything possible to make the RadControls render as efficiently as possible, up to the point that the browser limits our efficiency. At that point, the application must be designed smartly. Hopefully these tips and the others from the community help. Stay tuned for more info in the coming days.

-Todd

Tom Jaspering

34 posts

Member since:
May 2006

Posted 16 Jul 2008 Link to this post

Hello,

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

plamen

416 posts

Member since:
Oct 2006

Posted 16 Jul 2008 Link to this post

hi :)

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