How to make Html rendering fast.

Question

I am working on a web application developed on c#/asp.net. We are using third party controls for displaying Grids, Tabs, Trees and other complex controls in our pages. The problem is that these controls render a huge amount of Html. Due to this size of pages have grown heavily and browser takes a while to load a page. I want to find out some general techniques to make Html rendering in browser (IE, Firefox, etc) fast.

Note that all the pages have viewstate turned off.

Answer 1

gzip the HTML - won't increase the rendering speed, but will massively reduce the page size.

Make sure you aren't using a table based layout, and make sure any javascript or css that's used is minified, gzipped, and linked in the head so that it can be cached.

Answer 2

1) compress the HTML using a 3rd party tool or at least by using the IIS6 built-in compression option here.

2) Evaluate the third party controls to see if they are necessary. If they are, write your own for your own needs and/or use their controls if they are "AJAX-enabled." Most popular 3rd party controls do have AJAX capabilities and would allow the data to be populated after the rest of the page loads thus showing the user some progress.

3) Turn off ViewState if it is not needed. When using third party controls, ViewState can get huge.

UPDATE: I've blogged about this at http://weblogs.asp.net/jgaylord/archive/2008/09/29/web-site-performance.aspx

Answer 3

I would take a look at the Viewstate of the controls on the page. You should disable it if at all possible, since it gets serialized (and Base64 encoded I think) and stuffed in the page. If your updating the data in the controls on each post-back you should be able to safely disable viewstate and likely save a good chunk of bandwidth.

Answer 4

For third-party controls, all you can do is to bug there support to improve its performance.

But when coding you can use several techniques. One key is to understand that JavaScript DOM call are way slower than html parsing. So if you set innerHTML = " .... " with thousands of rows, it will be extremely fast compared to rendering it via document.createElement() calls in a loop.

Here are tips from MSDN:

http://msdn.microsoft.com/en-us/library/ms533019.aspx

Answer 5

I would strongly suggest looking at the Yahoo CSS & Javascript compressor which will not only reduce your css & javascript file sizes but also raise any errors & possible duplication in your code. A definate must in any web developers tool box.

Answer 6

If the problem rests with the control itself, perhaps shopping around for a new vendor. I do realize this would involve a reinvestment in time and money, but I may need to be tabled for the next major revision if you can not gain the result you need with the previously mentioned compression methods.

And remember, set EnableViewstate to false where you can

Answer 7

Open your normal pages, and type this in the URL, and press enter:

javascript:var tags = document.getElementsByTagName('*');alert('Page weight: ' + tags.length + ' tags.');

(you can even save it as a Bookmarklet)

If you have OVER 500 tags, you likely want to look at cleaning up some of the "tag soup" where possible.

Digg's homepage weighs in around 1,000 tags! thus is very slow to render (first time)

MSN's homepage weighs in around 700+ tags... thus is quite slow to render

Yahoo's homepage weighs in around 600 tags... thus renders faster

Google's homepage weighs in around 92 tags!... thus renders like lightning!

Answer 8

Compression doesn't accelerate rendering at all, it just accelerate content delivering.

I would recomment to do some sort of 'profiling' - make test page with a lot of some kind of your html objects (like table row or some common div-container) - and then use plugins like YSlow to test how much time it takes to render for example 10K of such elements. After profiling you will see the actual rendering botleneck..

Btw, the problem may be actually with content delivering, not rendering. YSlow will also show where it is. You also can use some visual tools to verify site loading speed, like http://Site-Perf.com/

Answer 9

To speed up rendering of grids, use grid paging.
Grid paging will cause less rendering by reducing number of gridlines shown.

We usually start out with 50 rows per page and always set the number of gridrows as a systemparameter which easily can be decreased or increased after deployment.

When using standard ASP.NET controls, also found that they are faster when using CSS Friendly control adapters. CSS Friendly control adapters