Moving ViewState to improve ASP.NET SEO

Without a doubt I love ASP.NET, but with any love there are some pet peeves you just learn to accept.  For me one of those has been the huge bag of the hidden ViewState element buried at the top of all of our forms.  At first, I don't think we really understood the impact of this element on our web sites, I mean really it is just more bits that need to get dumped to the browser and fed back to the ASP.NET engine when the form is posted back.  To me there are two things that a good programmer needs to understand that the ViewState hurts.

  1. Page Size
  2. Search Engine Optimization

Obviously the larger our page is, the longer it takes to render on the client side browser.  Smaller is better, trust me.  Just like sports, Speed Kills on the Internet too.  So we need to get faster.  I almost wish the default setting for each control in ASP.NET was EnableViewState='false' so we would have to turn it on to make it happen.  I wish the same were true of withholding taxes, but that is for another blog.  So every time you drop a control on a page think about whether you need to enable the viewstate or not.  If there is data in the control that will be needed when the Form is posted, then I would say enable it, other wise set it to false.

For example do you really need to store the ViewState for a literal control or even a label?  In most cases I think you can avoid it for a HyperLink and even Images and buttons too.  At worst turn the ViewState off for each control and see if your page blows up or not.  Another thing, if the page does not actually postback, then what good is the page's view state anyway.

A great tool to understand the contents of a page's View State is Fritz Onion's ViewStatedecoder.  This is a cool little tool that enables you to see exactly what is in your view state and more importantly how big it is.  A must have tool to help optimize your ASP.NET pages.

On to the second point, Search Engine Optimization.  I think it is safe to say that most ASP.NET professionals are aware to the term, but I think it is sadly evident that of those who do, little to none try to use it.  ASP.NET seems to be sorely lacking in the arts of Search engine optimization.  I am not going to get into the details of how to achieve this today, but ViewState is one of the reasons we do a terrible job at SEO.  One of the dirty little secrets of a search engine spider is they only index the first X bytes of text rerieved from a web page.  That's right.  Google gobbles the least, then Yahoo and finally MSN with the largest appetite.  What this means to us is get the crap out of the way.  No one is looking for 'dDw1Nzg4NDQzNDk7dDw7bDxpPDE+O2k8Mz47Pjts...' so let's get it out of the top of our page.

Scott Hanselman has a nice peice of code to move the ViewState to the bottom of the page that I have decided to integrate at the core of all my web pages.  I put it in my base page class that I use on every page I build.  I will be rolling this into each of my 2.0 sites as they have a natural upgrade.  Check out the source for FindMyGolfCourse.com.  First the ViewState is rather minimal and is at the bottom of the page.  Along with it are a couple of more controls, which you will see me moving by extending Scott's code in the snipet below.

Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)

Dim stringWriter As New System.IO.StringWriter()

Dim htmlWriter As New HtmlTextWriter(stringWriter)

MyBase.Render(htmlWriter)

Dim html As String = stringWriter.ToString()

Dim StartPoint As Integer = _

html.IndexOf('<input type=''hidden'' name=''__VIEWSTATE''')

If StartPoint >= 0 Then

Dim EndPoint As Integer = html.IndexOf('/>', StartPoint) + 2

Dim viewstateInput As String = _

html.Substring(StartPoint, EndPoint - StartPoint)

html = html.Remove(StartPoint, EndPoint - StartPoint)

Dim FormEndStart As Integer = html.IndexOf('</form>') - 1

If FormEndStart >= 0 Then

html = html.Insert(FormEndStart, viewstateInput) '

End If

End If

StartPoint = html.IndexOf('<input type=''hidden'' name=''__EVENTTARGET''')

If StartPoint >= 0 Then

Dim EndPoint As Integer = html.IndexOf('/>', StartPoint) + 2

Dim viewstateInput As String = _

html.Substring(StartPoint, EndPoint - StartPoint)

html = html.Remove(StartPoint, EndPoint - StartPoint)

Dim FormEndStart As Integer = html.IndexOf('</form>') - 1

If FormEndStart >= 0 Then

html = html.Insert(FormEndStart, viewstateInput) '

End If

End If

StartPoint = html.IndexOf('<input type=''hidden'' name=''__EVENTARGUMENT''')

If StartPoint >= 0 Then

Dim EndPoint As Integer = html.IndexOf('/>', StartPoint) + 2

Dim viewstateInput As String = _

html.Substring(StartPoint, EndPoint - StartPoint)

html = html.Remove(StartPoint, EndPoint - StartPoint)

Dim FormEndStart As Integer = html.IndexOf('</form>') - 1

If FormEndStart >= 0 Then

html = html.Insert(FormEndStart, viewstateInput) '

End If

End If

writer.Write(html)

End Sub 'Render

I noticed there are two more hidden controls, '__EVENTTARGET' and '__EVENTARGUMENT'  on my page too.  So I just grabbed them and dropped them at the bottom of the page too.  Every little bit helps.

So the point today is get a little more optimized and enjoy the benefits with faster pages and better index pages.  It only takes a little of effort to accomplish.

 

Share This Article With Your Friends!