How can I minimize the weight of my ASP.NET pages?

Question

Hi everyone and thanks in advance for helping.

I rely heavily on nested Master Pages in my web portal, this causes ASP.NET to generate huge ID tags for controls it creates, for example: "ctl00_ctl00_MainBody_ctl00_lblDescription"

for a lblDescription Label i've created.

Is there any way to reduce this clutter?

Any other techniques(sorry for being general) to reduce page weight other than removing the viewstate?

Thanks, Eytan

Answer 1

Whenever possible use HTML Controls. HTML Controls. They are lighter since don't have server-side objects unless you specify the runat="server" attribute.

Answer 2

I don't know how to remove the client id bloat but some general tips for making your pages smaller would be:

• Minify and combine any .js/ .css into one file.
• include css at the top of the page and js at the bottom (not really going to make it smaller but UI will load faster)

Answer 3

I guess if you were desperate to do this without retooling your pages (and none of the other sensible ideas worked ;) ), you could do this:

Write an http module that parses and extracts the ids with shorter, recognizable unique ids on the fly as the page is sent to the client, and store them in an application scope hash table. Then, on the return trip perform the reverse step for the incoming data.

At least, that's what I'd try. I'm not sure how nicely it would play with certain html and/or javascript constructs, but I think it could be done. I suspect it would be a pain in the butt to do, especially if the shorter unique ids happened to conflict with any legitmate non-id values.

EDIT: Just remembered. You'd need to handle the ViewState too... (that would need to be decoded, fixed and re-encoded. Seems like a lot of trouble :) But then again, if you're going to go to that trouble, you can compress the viewstate a lot better by overriding the load/save viewstate methods... I cut some huge pages (200K of html) down to about 30K using that method a couple of years back. In fact, using custom compression on the ViewState can often be enough to reduce a page size hugely.

Answer 4

In your case of using a label, make sure that you really need to use the label (which generates the text in a <span> tag. You could use a Literal instead.

Set EnableViewState="False" on controls that don't need it (or on the entire page/website)

If you're trying change the obscure ids generated by ASP.NET, there's not much you can do there.

Answer 5

• Look at Yslow and do what it tells you (I would start here)
• Turn off viewstate
• Use jsmin to reduce the size of your JavaScript files
• Reduce the size of your CSS
• Compress your response with standard gzip/deflate compression
• Using ASP.NET MVC will give you smaller IDs

Answer 6

Use html/css to style your pages, avoid tables for layout, when creating a label specify the id, shorter it is, the better.

Answer 7

Turning off the viewstate, as you mention, is good. Also I have noticed that the ASP.NET tree control generates a very large amount of HTML (if you have a fair number of nodes). I ended up writing my own tree control that generates 1/4 the HTML of the standard tree control. So you could look for controls like that, that are especially bad, and write your own control.

Answer 8

• Enable IIS static/dynamic compression
• Use caching for controls and pages
• Ajax content loading - it's helps when you want to see main content faster than content with less priority

Answer 9

Terrapin has some great suggestions, but they are pretty idealistic. If you are looking for more applicable solutions to your current situation, check out control adapters.

The CSS Friendly adapters will do a lot of work for you to convert your ASP.NET controls from large ugly, long id named tables into more concise divs, with shorter names.

I have used them in a past and they can really make a huge difference. Other than that, turn the viewstate off on any control that doesn't need it. Conform to proper CSS/HTML and it will make another significant difference.

Best of luck!

Answer 10

To minimize the weight of your ASP.NET pages, you can also override the PageStatePersister property (of the Page class) with SessionPageStatePersister. See example here. That way, the Viewstate will be kept in the Session object on the server side, thus reducing the size of the html page on the client side.

Answer 11

Especially inside repeaters, ListViews and GridViews, name your controls something short.

This should be obvious by the Context (A list of Products)

If you have only one HyperLink inside a repeater, call it hl. You don't need to call these controls HyperLinkProduct.

<asp:Repeater id="rptProducts" runat="server">
    <ItemTemplate>
       <asp:HyperLink id="hl" runat="server" NavigateUrl='<%# Eval("URL") %>'>
            <%# Eval("Name") %>
       </asp:HyperLink>
       <asp:Image id="img" runat="server" ImageUrl='<%# Eval("ImageUrl") %>' />
    </ItemTemplate>
</asp:Repeater>

This will render something like:

<a id="ctl00_rptProducts_ctrl0_hl" href="/products.aspx?id=5">
  Product Name
</a>
<img id="ctl00_rptProducts_ctrl0_img" src="images/5.png"/>

Multiply those ID names by a 100, and your IDs start to take up a lot more space if you use long descriptive names. Inside Repeaters, short IDs should be clear enough, if your Repeater is well-named.

Answer 12

Using CSS Sprites can speed up your page by reducing the number of requests. Here are a few articles I found.