[Solved] Telerik components request size vs standard

[Forascu]

Hi,

I am using telerik for some time, but due to some posts on stackoverflow site I was curious to see how much rad components
contribute(overhead) to request size. So i made a test project with simple telerik page and standard asp.net page:

Telerik(q3, trial)
- first request size: html + 93k resources(2 requests made only once)
- default empty aspx page = 550b
- 10 telerik empty grids: 17k
- 20 telerik textboxes 34k,10 telerik textboxes 18k, 20 standard textboxes 2k
- 20 telerik textboxes + 20 empty grids 48k, standard 2k
- 1 item scheduler - 22k

If web config is changed with:(http://www.telerik.com/help/aspnet-ajax/disabling_embedded_resources.html)
 <appSettings>
  <!-- Disables the embedded scripts and skins for all RadControls -->
  <add key="Telerik.EnableEmbeddedSkins" value="false"/>
  <add key="Telerik.EnableEmbeddedBaseStylesheet" value="false"/>
  <add key="Telerik.EnableEmbeddedScripts" value="false"/>         
</appSettings>

- first request size: html + 85k resources(2 requests)
- the rest ramain aprox the same(scheduler ->21k)

1. Is there a list of comparing tests or info about telerik components transfer(contribution to request) size; (only for component, not the axd resources once requests). Also it would be nice if I could see a compare between 2 pages one with standard controls and
javascript with jquerry, and the same features done with telerik.
2. The difference seems quite large vs standard.Have I missed something in the tests?

[Veselin Vasilev]

Hello Forascu,

To provide rich client-side functionality and nice look RadControls for ASP.NET AJAX uses javascript, css files and images. The HTML output of RadControls is bigger in size when compared to the standard MS controls - this is quite expected, but it is still optimized and semantic.

Let me give you a simple example:
if you use the standard <asp:DropDownList> control with just two items you will get this output:

<asp:DropDownList ID="ddl" runat="server">
    <asp:ListItem Text="Male" Value="m"></asp:ListItem>
    <asp:ListItem Text="Female" Value="f"></asp:ListItem>
</asp:DropDownList>

<select name="ddl" id="ddl">
    <option value="m">Male</option>
    <option value="f">Female</option>
</select>

On the other hand, the same combobox will produce this html:

<telerik:RadComboBox ID="combo1" runat="server">
    <Items>
        <telerik:RadComboBoxItem Text="Male" Value="m" />
        <telerik:RadComboBoxItem Text="Female" Value="f" />
    </Items>
</telerik:RadComboBox>

<div id="Div1" class="RadComboBox RadComboBox_Default" style="width: 160px; display: -moz-inline-stack;
    display: inline-block; zoom: 1; *display: inline;">
    <table cellpadding="0" cellspacing="0" summary="combobox" border="0" style="border-width: 0;
        table-layout: fixed; border-collapse: collapse; width: 100%">
        <tr class="rcbReadOnly">
            <td class="rcbInputCell rcbInputCellLeft" style="margin-top: -1px; margin-bottom: -1px;
                width: 100%;">
                <input name="combo1" type="text" class="rcbInput" id="combo1_Input" value="Male"
                    style="display: block;" readonly="readonly" />
            </td>
            <td class="rcbArrowCell rcbArrowCellRight" style="margin-top: -1px; margin-bottom: -1px;">
                <a id="combo1_Arrow" style="overflow: hidden; display: block; position: relative;
                    outline: none;">select</a>
            </td>
        </tr>
    </table>
    <div class="rcbSlide" style="z-index: 6000;">
        <div id="combo1_DropDown" class="RadComboBoxDropDown RadComboBoxDropDown_Default "
            style="float: left; display: none;">
            <div class="rcbScroll rcbWidth" style="width: 100%;">
                <ul class="rcbList" style="list-style: none; margin: 0; padding: 0; zoom: 1;">
                    <li class="rcbItem ">Male</li><li class="rcbItem ">Female</li></ul>
            </div>
        </div>
    </div>
    <input id="combo1_ClientState" name="combo1_ClientState" type="hidden" />
</div>

But the combobox will allow you to load the items on demand, autocomplete as you type, define templates, use animation and filtering and much more features.

There is always a compromise between a great looking control with a lot of features and the generated html/javascript output.

Still, there are quite a lot techniques to optimize your page that you can apply globally (RadScriptManager, RadStyleSheetManager, RadCompression) as well as per control.
You can start from our Top Performance page.

Let us know if you have any particular problem with any individual control and we will try to help you.

All the best,
Veselin Vasilev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.