How can I speed this page up?

Question

I have a ASP.Net WebForms page that has 2 drop-down lists (1 with 10 options, the other with about 600) and about 5 panels. Based on what value is selected from the drop-downs, other panels are made visible or invisible during async postback by querying a database.

My dilemma is this: The page is not fast enough on a slow connection, particularly during page load. When looking at the rendered page, the size of viewstate is large, even on initial load. Also, there is a large amount of data needing to populate the drop-downs, which could be contributing to the viewstate size.

Are there any suggestions to speed this page up?

Answer 1

Maybe load the options of the second dropdown list on-demand (eg using AutoComplete of the AJAX control toolkit or a similar control).

Answer 2

You can disable event validation for the page, which should lighten the load on your viewstate (that's the reason for lots of viewstate on initial load). Event validation ensures that every option available in a constrained input (dropdown, checkbox list, radio button list) has been registered before render. That info is serialized along with the viewstate - its killing you for sure.

You can also use a different approach on selection from the 600 item dropdown. Maybe you can provide an AJAX auto-complete textbox here instead of a dropdown or maybe some search facility for the user to search and see N matches of what they're looking for in hte list of 600 items.

Seems to me that 600 is just too much for a dropdown and you could get a lot more bang for your bandwidth buck if you put a little more into narrowing down the user's choices a little more dynamically... but yeah, my opinions on design aside, if you disable event validation for the page, you'll see a huge decrease right away...

<%@ Page Title="Home Page" EnableEventValidation="false" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"  ... more attribs ... />

Answer 3

If you can, populate the DropDownList controls in their respective Init events. This way, their options won't be stored in ViewState. That can save quite a few bytes.

Or better yet, can you get away with turning ViewState off altogether?

Answer 4

gzip html and json, reduce element count and anidation, simplify html, etceteras to reduce latency of traffic and rendering

Answer 5

You can do all sorts of things to eek out performance!

1) Take a look at Yahoo's performance rules to get you started. These are generally a list of best practices to help speed up your website.

2) Take a look at Chromes Inspector (Settings -> Tools -> Developer tools) or the equivalent for other browsers (Firebug in firefox and I believe IE9 has tooling as well) to find out where the major pain points are. They will show you everything from file sizes, to the number of requests made and the page load breakdown.

3) Look into AJAX and lazy loading things as necessary. The load time will still be there, but it will be much less noticeable to the user

4) Check the performance of your queries and see if you can optimize them.

Hope this helps!

Answer 6

If the requests accept zip or deflate make your response return it.

var response = HttpContext.Current.Response;                

string acceptEncoding = HttpContext.Current.Request.Headers["Accept-Encoding"] ?? "";
if (acceptEncoding.Contains("gzip"))
{
    response.Filter =
        new System.IO.Compression.GZipStream(response.Filter,
            System.IO.Compression.CompressionMode.Compress);
    response.AppendHeader("Content-Encoding", "gzip");
}
else if (acceptEncoding.Contains("deflate"))
{
    response.Filter =
        new System.IO.Compression.DeflateStream(response.Filter,
            System.IO.Compression.CompressionMode.Compress);
    response.AppendHeader("Content-Encoding", "deflate");
}

And move your ViewState to the session. Override this property on the base page class.

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