Front-End Performance Tips for ASP.NET Websites – Using Telerik to Speed Up the Page

Large ASP.NET pages have big ViewState size. I think this is one of the biggest downsizes that ASP.NET Webforms has because, if you have a big number of web controls in your page, the page size will increase exponentially after Postback.

A weeks ago I found that Telerik AJAX Controls Library has the RadCompression module which can enable the compression of the ViewState and the PostBack of a page at website level or at page level quite easy. Also I must say that the results are pretty amazing!

Take a look at the following image:

ViewState Compression

If you have Telerik license and want to enable RadCompression on your project, please follow the steps below:

1. Add the following key to the tag from the web.config file. If you don’t find tag, add it too to the tag:

<httpModules>
    <add name="RadCompression" type="Telerik.Web.UI.RadCompression" />
</httpModules>

2. Add to the tag the following key:

<modules>
    <add name="RadCompression" type="Telerik.Web.UI.RadCompression" />
</modules>

If you use .NET Framework 4.0, please remove the runAllManagedModulesForAllRequests property from tag.

3. Right click on your UI project, then click Add -> Add ASP.NET folder -> App_Browsers.

4. Right click on App_Browsers folder -> New Item… -> Select Browser File, rename the file and after that click Add.

5. Make sure that your .browser file looks like this:

<!--
    You can find existing browser definitions at
    <windir>\Microsoft.NET\Framework\<ver>\CONFIG\Browsers
-->
<browsers>
    <browser refID="Default">
        <controlAdapters>
            <adapter controlType="System.Web.UI.Page" 
adapterType="Telerik.Web.UI.RadHiddenFieldPageStateCompression" />
        </controlAdapters>
    </browser>
</browsers>

If you already have a .browser file, just add the tag with refID=”Default”.

Now you have ViewState compression enabled!

Postback Compression

6. For enabling Postback compression, add the following keys to the following tag:

<sectionGroup name="telerik.web.ui">
    <section name="radCompression" type="Telerik.Web.UI.RadCompressionConfigurationSection, 
Telerik.Web.UI, PublicKeyToken=121fae78165ba3d4" allowDefinition="MachineToApplication" 
requirePermission="false"/>
</sectionGroup>

Also add to the tag the following key:

<telerik.web.ui>
    <radCompression enablePostbackCompression="true"/>
</telerik.web.ui>

More information about RadCompression module you can find on Telerik’s website.