articles

Home / DeveloperSection / Articles / Reducing Page size in Asp.net application

Reducing Page size in Asp.net application

Devesh Omar5120 19-May-2014
Introduction

Purpose of this article is to learn how to reduce the page size in

asp.netapplications. Another thing which we learn through this article is how to

increaseperformance of asp.net application by reducing response time of asp.net

pages.

We have several ways to reduce page size


a.      Page compression

b.      Storing Viewstate to session or server side. 


By default Viewstate persist on client side which increases page size we can reduce

this page size by storing viewstate on server side. 


In this article we will learn reducing page size by storing viewstate to session. 

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

 

Problem statement
 Steps.


1.      Create asp.net application


2.      Add following class to project.


            [Serializable]
    public class EmployeeClass
    {
        public string FirstName { getset; }
        public string LastName { getset; }
     } 

3.      Add Gridview to Asp.net page.

 

Code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ViewstateTest.aspx.cs"Inherits="testViewState.ViewstateTest" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="#999999" BorderStyle="Solid"BorderWidth="1px" CellPadding="3" ForeColor="Black" GridLines="Vertical">
            <AlternatingRowStyle BackColor="#CCCCCC" />
            <FooterStyle BackColor="#CCCCCC" />
            <HeaderStyle BackColor="Black" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
            <SortedAscendingCellStyle BackColor="#F1F1F1" />
            <SortedAscendingHeaderStyle BackColor="#808080" />
            <SortedDescendingCellStyle BackColor="#CAC9C9" />
            <SortedDescendingHeaderStyle BackColor="#383838" />
        </asp:GridView>
    </div>
    </form>
</body>
</html>

 

 

 4.       Add following code to page load

   public partial class ViewstateTest : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            
            if (!IsPostBack)
            {
                List<EmployeeClass> EmpList = new List<EmployeeClass>();
                for (int i = 0; i < 5000; i++)
                {
                    EmpList.Add(new EmployeeClass { FirstName = "DEVESH"+i, LastName = "OMAR" });
                }
                ViewState.Add("PersonList", EmpList);
                GridView1.DataSource = EmpList;
                GridView1.DataBind();
            }
        }
}

 

5.      Understanding the above code

i)      We have created list of EmployeeClass and added 5000 objects to this list

ii)     We are using 5000 objects to make the page heavy so that we would encounter the problem.

iii)   We are adding this list to viewstate

iv)     And finally we are binding list of 5000 object to grdivew.

v)      To save the object to viewstate we need to make class of object as Serializable. 

6.      Running the code. 


Reducing Page size in Asp.net application 


In page we are getting big list having 5000 rows. Current screen have only few records because page is very big. 

7.      Right click on page to see page size.


Reducing Page size in Asp.net application 


Pagesize : 859227 bytes 

8.      Another way to see page size using f12

Reducing Page size in Asp.net application 


Problem

Pagesize: .82 mb 

Size of page is very big because data of viewstate always save in hidden field on client side or web page. 

Solution 


9.      By default viewstate save on browser in form of hidden field. If we save viewstate to seesion at server then we can reduce page size because in that case there would be no hidden fields on asp.net page. 
10.  Introduction of  PageStatePersister  class to 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 .Net Framework, named HiddenFieldPageStatePersister andSessionPageStatePersister. By default HiddenFieldPageStatePersister is used to save/load ViewState information, but we can easily get the SessionPageStatePersister to work and save ViewState in Session object.

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

12.  Add following Code to page. 

protected override PageStatePersister PageStatePersister
        {
            get
            {
                return new SessionPageStatePersister(Page);
            }
        }


13.  Running the code, following would be screen shot.


Reducing Page size in Asp.net application


Page size : 334861.


Reducing Page size in Asp.net application


Here page size reduced to 327 kb from .83 MB  


14.  Comparison  table

Page Size before

Page Size after

860KB or 859227 bytes

327 KB or 334861 Bytes

 

 

 

15.  Complete Code.

 

Reducing Page size in Asp.net application

 

16.  Code

 

public partial class TestViewstate : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                List<EmployeeClass> EmpList = new List<EmployeeClass>();
                for (int i = 0; i < 5000; i++)
                {
                    EmpList.Add(new EmployeeClass { FirstName = "DEVESH" + i, LastName = "OMAR" });
                }
                ViewState.Add("PersonList", EmpList);
                GridView1.DataSource = EmpList;
                GridView1.DataBind();
            }
 
        }
        protected override PageStatePersister PageStatePersister
        {
            get
            {
                return new SessionPageStatePersister(Page);
            }
        }
 
    }
 
    [Serializable]
    public class EmployeeClass
    {
        public string FirstName { getset; }
        public string LastName { getset; }
     }

 

 
Conclusion



We learn following things in this article.


a.      PageStatePersister class


b.      SessionPageStatePersister



c.  HiddenFieldPageStatePersister

 

This approach is good for very big pages but has disadvantage too.

 

References

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


Updated 07-Sep-2019
I am Software Professional

Leave Comment

Comments

Liked By