Manual: ViewState viewer

The feature "ViewState viewer" of Visual SEO Studio, documented in detail.

ViewState viewer

You will only care about looking at this tool when dealing with web pages built with old Microsoft "ASP.NET WebForms" technology.
Back at the time MS engineers had the terrible idea of hiding the Web stateless nature to an army of VB programmers who had not clue what the Web really was, to enable them building web applications similarly to the way they were used to.
To achieve this they placed within the pages generated with their IDE a hidden field which looks like this:

<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULL ...a potentially gigantic text value... dtBPL7w=" />

One of the many problems was that this hidden field was, more often than not, populated with a huge encoded text even for pages that did not even need it, like most of public pages of a web site.
The result was in many cases pages many MB heavy of useless data.

While soon appeared on the Internet several ViewState viewers to examine single pages, what really was missing before Visual SEO Studio implemented it was a tool able to analyze the ViewState of all website public pages.
So far we believe it to still be the only tool able to do it (see also features Performance suggestions and Custom Filters, which are able to analyze ViewState usage site-wide).

What to do once the tool has helped you to point out parts of the web page needlessly using the ViewState?
In ASP.NET WebForm each single server-side control supports the boolean attribute EnableViewState, which unfortunately defaults to true.
In our experience in public pages the most common culprits for bloating the ViewState are server-side generated tables.
When you understand a single control does not really need to use ViewState for the webpage to work, set the attribute - or ask your developer to do it - to false:

<asp:Table runat="server" EnableViewState="false" ...

In most cases you will be able to set EnableViewState="false" at page level:

<%@ Page EnableViewState = "false" ...

Just ensure with your developer you are not going to affect the correct functioning of the site when suppressing ViewState at page level.
Please refer to MS documentation for all about the ViewState and the EnableViewState attribute.

You can learn more about the ViewState viewer reading the blog post we wrote when we first published the feature.

General

The simple view in this tab sheet is conceived to show you at a glance what really matter to you about the page ViewState field: whether it is too big what it is all about.
If you realize it's not really a matter, you can be happy with it and move along. If instead you see its size is suspicious, you will have to select the Details tab sheet to inspect further.

Example of a site with a big ViewState, impairing its performances
Example of a site with a big ViewState (~400KB), impairing its performances

Bytes

The size in bytes of the ViewState field.
For technical reasons it is indicated as an approximation, although an exact estimation most of the times.

Page %

The percentage of the page which is dedicated to the ViewState.
It is the ratio of the ViewState size in bytes and the page size.

ViewState (decoded)

The ViewState field content, after it has been decoded from its Base64 representation.
This basically transforms non-ASCII characters back from their Base64 encoding, but that's all. Don't expect to make always full sense out of it as the ViewState field was not meant to be human-readable. That said, you'll often be able to understand several parts of it at a glance, or at least to recognize parts of the HTML code that should not be made redundant within the ViewState field.

Details

Hopefully the General tab sheet content will suffice you, but if you'll have to drill down on what the ViewState actually stores, a full-fledged ViewState viewer awaits you here.
We won't be too technical here, for a more in-depth read please consult Microsoft documentation.

ViewState viewer, details tree view
ViewState Viewer, details tree view

Column: Label

This columns shows a tree view with nodes labeled with the data type of the datum they hold. The short name notation is used.

Column: Type

The fully qualified data type name.

Column: Value

The actual value held by the node.

Type

The fully qualified data type name of the selected row in the tree view.

Value

The actual value held by the node of the selected row in the tree view.