Search Engine Optimization - Moving View State to the bottom of the page

Your DisplayName here! — Thu, 04 Dec 2008 19:26:16 GMT

One of the greatest problems when trying to optimize an ASP.NET page to be more search engine friendly is the view state hidden field. Most search engines give more score to the content of the firsts thousands of bytes of the document so if your first 2 KB are view state junk your pages are penalized. So the goal here is to move the view state data as down as possible.

I have seen some approaches to solve this problem rewriting the final HTML code of the response. While this approach works I think that it wastes some precious processor cycles that can be used to do other things. So I needed a way to do the same thing without wasting that CPU time. After some large reflector sessions I found a way to do it. My method uses the ASP.NET Control Adapter Architecture.

A control adapter is a class that can be used to control the HTML generated by the control it adapts. Since the Page class is the responsible of rendering the view state hidden field (Page.BeginFormRender calls Page.RenderViewStateFields), an adapter for the Page is needed. However, the view state hidden field plays a key role in the ASP.NET infrastructure (for example, the Page.IsPostBack property checks if the view state hidden field has been posted) and it is difficult to modify the associated HTML.

A PageAdapter has a method called GetStatePersister() that returns an object that inherits from PageStatePersister. The PageStatePersister is called when it is time to load and save the view state. There are 2 classes that inherit from PageStatePersister: HiddenFieldPageStatePersister and SessionPageStatePersister. The first one is the default, which stores the view state in the hidden field called __VIEWSTATE. The second one stores the view state in the session. So, we can easily create a custom PageStatePersister to control the view state load and save process. The big problem is how to create the hidden view state field before the closing form tag while being a fully transparent solution. After some tries I came up with a solution that I was happy with.

I realized that it was impossible to completely remove the view state hidden field from the top of the page, because it plays a key role in the ASP.NET infrastructure. However, with any custom page state persister the ASP.NET infrastructure renders at least an empty view state hidden field of only 70 bytes:

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="" />

My page adapter adds a hidden field to the bottom of the form called __SEOVIEWSTATE with the actual view state data, and the only limitation that it has it is that you can not use <% %>expressions directly inside the asp.net form. However, this restriction can be easily avoided putting the <% %>expression in a PlaceHolder control or inside another control. For an in-depth explanation of this limitation take a look here.

Let’s see an example of the adapter in action. The following ASP.NET page:

<%@
Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="SEOViewStateAdapterTest._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

    <title></title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        Enter a message: <br />

        <asp:TextBox ID="txtMessage" runat="server"></asp:TextBox><br />

        <asp:Button ID="bSaveMessage" runat="server" Text="Save
Message" onclick="bSaveMessage_Click" /><br />

        <asp:Label ID="lMessage" runat="server"></asp:Label><br />

        <p>Page
generated at <asp:PlaceHolder ID="PlaceHolder1" runat="server"><%=
DateTime.Now.ToString("hh:mm
dd/MM/yyy") %></asp:PlaceHolder></p>

    </div>

    </form>

</body>

</html>

With the associated code:

using System;

using System.Collections.Generic;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace SEOViewStateAdapterTest

{

    public partial class _Default : System.Web.UI.Page

    {

        protected void Page_Load(object sender,
EventArgs e)

        {

            if (!Page.IsPostBack) {

                ViewState["previousMessage"] = txtMessage.Text;

            }

        }

        protected void bSaveMessage_Click(object sender,
EventArgs e)

        {

            lMessage.Text = String.Format("The
current message is '{0}'. The previous message was '{1}'", txtMessage.Text, (string)ViewState["previousMessage"]);

            ViewState["previousMessage"] = txtMessage.Text;

        }

    }

}

after a couple of postbacks, without using the adapter, the HTML looks like this:

<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head><title>

</title></head>

<body>

    <form name="form1" method="post" action="Default.aspx" id="form1">

<div>

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJc01l[...]VwP+cfdSWI6Q==" />

</div>

<div>

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKb4uenCgK/1s7/DwKf8MMPfiUvZtKPSXk//XdxkLooz8QDI0Y=" />

</div>

    <div>

        Enter a message: <br />

        <input name="txtMessage" type="text" value="Message
2" id="txtMessage" /><br />

        <input type="submit" name="bSaveMessage" value="Save
Message" id="bSaveMessage" /><br />

        <span id="lMessage">The
current message is 'Message 2'. The previous message was 'Message 1'</span><br />

        <p>Page
generated at 08:13 04/12/2008</p>

    </div>

    </form>

</body>

</html>

and after a couple of postbacks, using the adapter, the HTML looks like this:

<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head><title>

</title></head>

<body>

    <form name="form1" method="post" action="Default.aspx" id="form1">

<div>

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="" />

</div>

<div>

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwL+raDpAgK/1s7/DwKf8MMPyF7nqN1AbwNwFBq8OAjEAQorsyo=" />

</div>

    <div>

        Enter a message: <br />

        <input name="txtMessage" type="text" value="Message
2" id="txtMessage" /><br />

        <input type="submit" name="bSaveMessage" value="Save
Message" id="bSaveMessage" /><br />

        <span id="lMessage">The
current message is 'Message 2'. The previous message was 'Message 1'</span><br />

        <p>Page
generated at 08:11 04/12/2008</p>

    </div>

    <input type="hidden" name="__SEOVIEWSTATE" id="__SEOVIEWSTATE" value="/wEPc01lc3[...]CdNY6AtgigHvU=" /></form>

</body>

</html>

In order to use the adapter, you have to add a reference to the assembly and add a file called SEOViewStateAdapter.browser (the name of the file does not matter. The extension needs to be the same. Or also you could merge the contents to another file if you already have one) to the App_Browsers folder. The content of the file should be:

<browsers>

    <!-- use the adapters
for all browsers -->

    <browser refID="Default">

        <controlAdapters>

            <!--
ths adapter is used to save the view and control state at the bottom of the form so
the page is more friendly to search engines -->

            <adapter controlType="System.Web.UI.Page" adapterType="Manu.Web.Adapters.SEOFriendlyViewStatePageAdapter,
SEOViewStateAdapter" />

        </controlAdapters>

    </browser>

</browsers>

That’s all. Enjoy!

SEOViewState.zip (29.67 KB)

Manuel Abadia's ASP.NET stuff - SEO

Search Engine Optimization - Moving View State to the bottom of the page