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

Reducing Page size in Asp.net application


ASP.Net ASP.Net 
Ratings:
0 Comment(s)
 2088  View(s)
Rate this:

Reducing Page size in Asp.net application

 

Introduction

Purpose of this article is to learn how to reduce the page size in asp.net applications. Another thing which we learn through this article is how to increase performance 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


Don't want to miss updates? Please click the below button!

Follow MindStick