Click here to Skip to main content
Click here to Skip to main content

Reducing the size of ASP.NET pages

, 23 Nov 2009 CPOL
Rate this:
Please Sign up or sign in to vote.
A technique to reduce the size of ASP.NET pages.

Introduction

We all know when a page is requested, ASP.NET processes the page, its server controls, and finally sends the HTML to the client-side for the browser to render it. The time taken to download the HTML at the client side depends mainly on the final size of the page. If your page is data rich, it would take a lot of time to fetch it. So here I am presenting a technique to reduce the size of ASP.NET web pages.

Background

When you see a page's HTML source by clicking “View Source” in the browser, you could see that there are a lot of white space on the left side of each line on the HTML. This is actually a waste. Try saving the HTML page to your desktop and notice its size. Then delete all the spaces on the left side and then check its size. You could see that the size of the page reduces considerably, sometimes more than 50%!! (watch the View Source of Orkut in a browser).

Using the code

Here is a technique to achieve the same.

  1. Create a class in App_Code that derives from the System.Web.UI.Page class.
  2. public class MyPageBase : System.Web.UI.Page
    {
    }
  3. Replace System.Web.UI.Page in all your web pages (.aspx.cs) with MyPageBase. This means that now all your web pages are deriving from MyPageBase.
  4. Override the Render function in this class:
  5. public class MyPageBase : System.Web.UI.Page
    {
        protected override void Render(HtmlTextWriter writer)
        {
        }
    }
  6. Place the code below inside the function, and also write a support function as shown below:
  7. public class MyPageBase : System.Web.UI.Page
    {
        protected override void Render(HtmlTextWriter writer)
        {
                base.Render(htmlwriter);
                string html = htmlwriter.InnerWriter.ToString().Trim();
    
                if (ConfigurationManager.AppSettings["OptimizeHtmlOutput"] != "0")
                {
                    bool isAsync = !html.StartsWith("<");
    
                    if (!isAsync)
                    {
                        StringBuilder sb = MyPageBase._TrimHtml(html);
                        writer.Write(sb.ToString());
                    }
                    else
                    {
                        StringBuilder sb = new StringBuilder();
    
                        int startIx = 0;
                        while (true)
                        {
                            int x = html.IndexOf("|updatePanel|", startIx);
    
                            if (x > -1)
                            {
                                int xS = html.LastIndexOf("\r\n", x);
                                xS = (xS < 0 ? 0 : xS);
                                int xE = html.IndexOf("\r\n", x) + 2;
    
                                string header = html.Substring(xS, xE - xS);
                                header = header.Trim().TrimStart('|', ' ');
    
                                string sLen = header.Substring(0, header.IndexOf('|'));
                                int cLen = int.Parse(sLen);
    
                                string content = html.Substring(xE - 2, cLen);
                                content = MyPageBase._TrimHtml(content).ToString().Trim();
    
                                startIx = xE - 2 + cLen;
    
                                cLen = content.Length + 4;
                                header = (xS > 0 ? "|" : string.Empty) + 
                                          cLen.ToString() + 
                                          header.Substring(header.IndexOf('|'));
    
                                sb.AppendLine(header);
                                sb.AppendLine(content);
                            }
                            else
                            {
                                string stateData = html.Substring(startIx);
                                sb.Append(stateData.Trim());
    
                                writer.Write(sb.ToString());
                                break;
                            }
                        }
                    }
                }
                else
                {
                    writer.Write(html);
                }
            }
        }
    
        private static StringBuilder _TrimHtml(string source)
        {
            StringBuilder sb = new StringBuilder();
    
            source = source.Trim();
            using (StringReader sr = new StringReader(source))
            {
                string data = string.Empty;
                while (data != null)
                {
                    data = sr.ReadLine();
                    if (data != null)
                    {
                        data = data.TrimStart(' ', '\t');
                        if (data != string.Empty) sb.AppendLine(data);
                    }
                }
            }
    
            return sb;
        }
    } 

Notes

  1. Notice the usage of ConfigurationManager.AppSettings["OptimizeHtmlOutput"] != "0". You can define a key in the appsettings section of the web.config file to enable or disable this feature. Any value other than “0” will enable optimization.
  2. This code works well in AJAX based applications as well. Compare the size difference and performance by changing the flag. This is very beneficial especially in pages which contain a huge amount of data.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Aj 2010
Software Developer (Senior)
India India
No Biography provided

Comments and Discussions

 
GeneralMy vote of 1 Pinmemberstolbovoy1-Dec-09 6:10 
GeneralRe: My vote of 1, My Vote of 1 to your Comment PinmemberKronass5-Jan-10 9:15 
GeneralDid you check the difference PinmemberAnurag Gandhi30-Nov-09 23:42 
GeneralMy vote of 1 PinmemberJacobs7630-Nov-09 22:49 
GeneralRe: My vote of 1 PinmemberAj Ind30-Nov-09 23:07 
What about 1st reduce the size with this and then use Gzip ?
Besides Gzip requires more CPU utilization both in server and client side.
On low end machines, the browser looks still loading until the data is decompressed.
And the browser's HTML parser can save some time for trimming these white spaces and extracting and needed HTML for rendering.
GeneralWill corrupt <pre> text</pre> Pinmember~Anders30-Nov-09 22:15 
GeneralRe: Will corrupt text PinmemberAj Ind30-Nov-09 23:02 
GeneralBetter ways to do this... PinmemberRick Hansen30-Nov-09 11:23 
GeneralRe: Better ways to do this... PinmemberAj Ind30-Nov-09 23:01 
GeneralHttpResponse Filter Pinmemberwebgruve30-Nov-09 11:23 
GeneralRe: HttpResponse Filter PinmemberAj Ind30-Nov-09 22:58 
GeneralMy vote of 2 PinmemberRick Hansen30-Nov-09 11:05 
GeneralRe: My vote of 2 PinmemberAj Ind30-Nov-09 22:46 
GeneralMy vote of 1 Pinmembervissuch24-Nov-09 2:53 
QuestionAppendLine vs Append Pinmemberromgun23-Nov-09 22:33 
AnswerRe: AppendLine vs Append PinmemberAj Ind23-Nov-09 22:47 
GeneralSuggest for modify your article Pinmembernicholas_pei23-Nov-09 15:07 
GeneralRe: Suggest for modify your article PinmemberAj Ind23-Nov-09 17:14 
GeneralBug fixed! PinmemberAj Ind23-Nov-09 7:02 
GeneralGZIP is the way to go . Pinmembervissuch23-Nov-09 6:50 
AnswerRe: GZIP is the way to go . PinmemberAndre Luiz V Sanches23-Nov-09 9:01 
GeneralRe: GZIP is the way to go . Pinmembervissuch23-Nov-09 12:25 
GeneralDont work!! Pinmemberraphaelm2223-Nov-09 6:15 
GeneralRe: Dont work!! PinmemberAj Ind23-Nov-09 7:03 
GeneralRe: Dont work!! PinmemberAj Ind23-Nov-09 7:07 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141223.1 | Last Updated 23 Nov 2009
Article Copyright 2009 by Aj 2010
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid