Post
Ask Question

Reducing Page Size in ASP.NET Application

Introduction

The purpose of this article is to show how to reduce the page size in ASP.NET applications. Another thing that we learn in this article is how to increase the performance of an ASP.NET application by reducing the response time of ASP.NET pages.

We have several ways to reduce the page size, the following  are two of them:

  1. Page compression
  2. Storing Viewstate to the session or server-side.

By default Viewstate is persisted on the client side and that increases the page size. We can reduce this page size by storing viewstate on the server side.
In this article we will learn how to reduce the page size by storing the viewstate to the session.

Let's understand the problem first then we will rectify the problem.

Problem statement

Step 1: Create ASP.NET application

Step 2: Add the following class to the project: 

  1. [Serializable]  
  2. public class EmployeeClass  
  3. {  
  4.    public string FirstName { get; set; }  
  5.    public string LastName { get; set; }  
  6. }

Step 3: Add a GridView to the ASP.NET page.

Code:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ViewstateTest.aspx.cs"   
  2. Inherits="testViewState.ViewstateTest" %>  
  3. <!DOCTYPE html>  
  4. <html xmlns="http://www.w3.org/1999/xhtml">  
  5. <head runat="server">  
  6.     <title></title>  
  7. </head>  
  8. <body>  
  9.     <form id="form1" runat="server">  
  10.         <div>  
  11.             <asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="#999999"   
  12. BorderStyle="Solid" BorderWidth="1px" CellPadding="3" ForeColor="Black" GridLines="Vertical">  
  13.                 <AlternatingRowStyle BackColor="#CCCCCC" />  
  14.                 <FooterStyle BackColor="#CCCCCC" />  
  15.                 <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />  
  16.                 <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />  
  17.                 <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />  
  18.                 <SortedAscendingCellStyle BackColor="#F1F1F1" />  
  19.                 <SortedAscendingHeaderStyle BackColor="#808080" />  
  20.                 <SortedDescendingCellStyle BackColor="#CAC9C9" />  
  21.                 <SortedDescendingHeaderStyle BackColor="#383838" />  
  22.             </asp:GridView>  
  23.         </div>  
  24.     </form>  
  25. </body>  
  26. </html> 

Step 4: Add the following code to the page load:

  1. public partial class ViewstateTest : System.Web.UI.Page  
  2. {  
  3.     protected void Page_Load(object sender, EventArgs e)  
  4.     {  
  5.         if (!IsPostBack)  
  6.         {  
  7.             List<EmployeeClass> EmpList = new List<EmployeeClass>();  
  8.             for (int i = 0; i < 5000; i++)  
  9.             {  
  10.                 EmpList.Add(new EmployeeClass { FirstName = "DEVESH" + i, LastName = "OMAR" });  
  11.             }  
  12.             ViewState.Add("PersonList", EmpList);  
  13.             GridView1.DataSource = EmpList;  
  14.             GridView1.DataBind();  
  15.         }  
  16.     }  
  17. } 

Step 5: Understanding the preceding code:

  1. We created a list of EmployeeClasses and added 5000 objects to this list.
  2. We are using 5000 objects to make the page heavy to create the problem.
  3. We are adding this list to the viewstate.
  4. And finally we are binding the list of 5000 objects to the grdivew.
  5. To save the object to the viewstate we need to make a class of an object that is Serializable.

Step 6: Running the code

Serizable Code

In the page we are getting a big list with 5000 rows. The current screen has only a few records because the page is very big.

Step 7: Right-click on the page to see the page size.

Serizable Code with Properties

Pagesize: 859227 bytes

Step 8: Another way to see the page size is using F12 as in the following:

ViewsState Testing

Problem
Pagesize: .82 mb

The size of the page is very large because the data of the viewstate is always saved in a hidden field on the client side or web page.

Solution

Step 9: By default viewstate is saved in the browser in the form of a hidden field. If we save the viewstate to the seesion at the server then we can reduce the page size because in that case there would be no hidden fields in the ASP.NET page.

Step 10: Introduction of PageStatePersister class to the ASP.NET page

ViewState is saved by a descendant of PageStatePersister class. This class is an abstract class for saving and loading ViewsState and there are two implemented descendants of this class in the .Net Framework, named HiddenFieldPageStatePersister and SessionPageStatePersister. By default HiddenFieldPageStatePersister is used to save/load ViewState information, but we can easily get the SessionPageStatePersister to work and save ViewState in the Session object.

Step 11: But this technique will increase memory usage in the server so it would be a good approach for an intranet based application where the user density is low.

Step 12: Add the following code to the page:

  1. protected override PageStatePersister PageStatePersister  
  2. {  
  3.     get  
  4.     {  
  5.         return new SessionPageStatePersister(Page);  
  6.     }  
  7. } 

Step 13: Running the code, the following will be the screen shot.

ViewState Properties

Page size : 334861.

Reduced Page Size

Here the page size is reduced to 327 kb from .83 MB

Step 14: Comparison table

comparison

Step 15: Complete Code:

  1. public partial class TestViewstate : System.Web.UI.Page  
  2. {  
  3.     protected void Page_Load(object sender, EventArgs e)  
  4.     {  
  5.         if (!IsPostBack)  
  6.         {  
  7.             List<EmployeeClass> EmpList = new List<EmployeeClass>();  
  8.             for (int i = 0; i < 5000; i++)  
  9.             {  
  10.                 EmpList.Add(new EmployeeClass { FirstName = "DEVESH" + i, LastName = "OMAR" });  
  11.             }  
  12.             ViewState.Add("PersonList", EmpList);  
  13.             GridView1.DataSource = EmpList;  
  14.             GridView1.DataBind();  
  15.         }   
  16.     }  
  17.     protected override PageStatePersister PageStatePersister  
  18.     {  
  19.         get  
  20.         {  
  21.             return new SessionPageStatePersister(Page);  
  22.         }  
  23.     }   
  24. }  
  25. [Serializable]  
  26. public class EmployeeClass  
  27. {  
  28.     public string FirstName { get; set; }  
  29.     public string LastName { get; set; }  
  30. }   

 

Conclusion

We learned the following things in this article:

  1. PageStatePersister class
  2. SessionPageStatePersister
  3. HiddenFieldPageStatePersister

This approach is good for very large pages but has disadvantages too.

References

http://msdn.microsoft.com/en-us/library/aa479403.aspx


Similar Articles