PowerPages – High Performance Guidelines: Reducing page size

Since Power Pages provide fine-grained control over PostBacks, data binding and caching, they can be leveraged to implement high performance pages.
The following article provides some guidelines and recommendations on how to achieve this.

This article addresses the topic of

• Reducing page size

See the links below for articles on other high performance topics:

• Reducing PostBacks
• Data binding
• Caching

Reducing page size

The size of the page being transferred back and forth between the browser and server can have an impact on load and response times, and cause a page to be less responsive.

Factors contributing to the overall pages size include:

1. Page markup
2. Control ViewState
3. CSS and JS includes

1. Page markup

Markup refers to the HTML markup in the page, including both static HTML and the markup that is dynamically generated by controls.
Reducing the amount of markup can reduce the size of the page.

1.1 Use modern layout techniques

Outdated layout techniques, such as using nested <table> tags, can result in bloated markup. Modern tags designed for layout (e.g <div>) along with CSS allows for a more compact markup.

1.2 Enable ‘Native’ mode in DevExpress controls

The DevExpress controls support ‘Native’ mode which renders controls in a more compact layout and uses native HTML controls.

2. Control ViewState

ASP.Net controls store their state data in a hidden field on the page. This data travels to the server and back and allows controls to maintain their state across PostBacks.
This state data is called ViewState and it an can get large if you have many controls on your form.

Disabling ViewState on controls that do not need to maintain their state across PostBacks will reduce the size of the page. This can be done by setting the EnableViewState property to false of the control. ViewState can also be disabled for the whole page (If you’re primarily using Callbacks to update your page you may not need ViewState enabled at all).

3. CSS and JS includes

3.1 Minify .css and .js files

Minification reduces the size of a .css/.js file by removing unnecessary or redundant data. It is recommended that you always link to the minified version of your .css/.js files.

3.2 Link .js files at the end of the page if possible

A general recommendation for improving the load time of a page is to include .js files at the end of the page. This allows the browser to load all the markup before downloading the linked .js files. This can however only be done for .js files that are not required for loading the page initially.

3.3 Opt for a .css file over in-line styles

Place CSS styling rules in a .css file rather than including in-line styles in the markup. This reduces the markup size and further improves load times since a file can be downloaded once and cached in the browser.