7 Tips made rendering HTML faster (Do it lately!)

Any serious web developers should experience a too long rendering time for his/her web pages. Here is the list that I usually do it before release my web application to production stage. I call it my “Optimization check-list”. Please note that, some of tip should be used on ASP.NET specifically and any other may not.

Please keep in mind that, these tips can be effectively used after you’ve completed develop your web application too. As it doesn’t required much effort to re-design or re-programming. I’ll release another tips series that can be done before development begin too as It’s very effective than these tips.

Let’s roll out your hand now.

Tip 1 : Turn off debugging (Very effective)

This tip is for ASP.NET only, just go to your web.config and finding <compilation> then change debug=”false”

This will increase your web application performance dramatically!

What’s behind the scene?

When you change debug flag to false. All web resources (WebResource.axd?xyz) will be cached by browser while not when debug flag is true. Also, any script related with ASP.NET will be decreased in size. The output assembly will reduce on size too.

Don’t thinks much, when you go to production stage. Just turn it off!

Tip 2 : Turn off un-necessary ViewStates (Very effective)

This be able to do with ASP.NET only and will dramatically decrease your output HTML size! and you can do it just like turn off debug flag at the above.

Find out your ASP.NET standard control tags and check to see whether its state needed to be kept on every page lifecycle? If not, change the attribute “EnableViewState” to “false”. Do it all for every ASP.NET controls in your pages.

What’s behind the scene?

ViewState was used to keep the state on every page lifecycle. They implement by adding some characters into your output HTML. You can see it by view source at the browser and finding for ViewState keyword. You then see the unreadable characters in the output HTML. There is where the control’s state be kept. This tip can reduce much size on the output HTML!

Tip 3 : Re-organize objects in the page

Re-organize, I means revise the order of objects in your pages. Move your unnecessary objects (objects in my meaning is everything that reside on HTML including HTML tags, script, CSS, …) to the bottom of the page. Such as move your big script into the bottom of the page. This will let browser render the layout first then load big scripts later. In some case, very effective!. In one of my project, I can use this method to reduce around 12-15 seconds by re-organize objects in the page.

Tip 4 : Wrap up your inline/external script into a big external file

This means if you have write your javascript inline in the page. You may consider to wrap it up into one single external file. (assume myscripts.js)

Also, If you have many external files. (many .js) You may consider to combine all of them in to one big file instead of.

What’s behind the scene?

Browser can cache the external script file. (.js) and combine them into one single file will benefits on reducing the number of roundtrip when browser need to do cache validation.

Tip 5 : Change your HTML formatting style into CSS style

Throw away the old HTML formatting style such as <FONT…>,<COLOR…>, etc…

Replace with CSS formatting style that use class based. Define the formatting class then apply it to any tag you want.

eg.

.hilight
{
font-family:tahoma;
font-size:small;
color:white;
}

When any tags want to use this format, just apply to it.

eg.

<span class=”hilight” …>…</span>

Then combine your all classes into one big CSS file. (.css) This will gain the benefits like what Tip 6 did. Browser will cache it and reduce the number of roundtrip when browser do some cache validation.

Tip 6 : Use progressive rendering on your <TABLE>

If your targeted browser is Mozilla FireFox, just skip this tip as FireFox will do it naturally. But for Internet Explorer? No luck today. We’ve to do it ourselves to let Internet Explorer do progressive rendering. Before we go,

What’s progressive rendering?

In nature, when Internet Explorer found <TABLE> tag that generally be used to arrange the page’s layout. Internet Explorer will need to …

- Determine the table’s size by determine every cell’s size first

- Rendering entire table

This means, when Internet Explorer can’t determine the cell’s size then it will slow on rendering. Such as the case that you have a complex content in some cells that can’t be determine the content’s size. So, Internet Explorer should wait until all content be loaded and it’ll be able to determine the cell’s size now then it will render table later.

So, this will generate a very slow rendering for Internet Explorer when it found many complex content within the table.

Now, we should known the key that made Internet Explorer so slow rendering on table. Because it needs to know every cell’s size first!

So, what will happen if we can fix the size of cell?

Absolutely, it’ll render much faster and this is what we call “Progressive Rendering”. So now, how can I do it?

Here are the steps…

1. Apply CSS attribute called “table-layout:fixed” to <TABLE>.

2. Enter the <TABLE>’s width in style-sheet.

Here is what we’ll get…

<TABLE style=”table-layout:fixed;width:780px;” …> …

3. Enter each column’s width by using <colgroup> tag and style-sheet class.

For style-sheet,

.col1 {width: 31px;}
.col2 {width: 118px;}
.col3 {width: 109px;}
.col4 {width: 140px;}
.col5 {width: 376px;}
.col6 {width: 9px;}
.col7 {width: 200px;}
.col8 {width: 17px;}
.col9 {width: 1px;}

For <TABLE> tag,

<table style=”table-layout:fixed;width:780px;”>
<colgroup>
<col class=”col1″ />
<col class=”col2″ />
<col class=”col3″ />
<col class=”col4″ />
<col class=”col5″ />
<col class=”col6″ />
<col class=”col7″ />
<col class=”col8″ />
<col class=”col9″ />
</colgroup>

<tr>…
…

4. That’s all!

Tip 7 : Don’t slice your image too many!

Wow, go to the previous time. Web developer try to do their page to response faster by slicing a large image into many small images and use table to lay it out. It’s good for the pass, but in my opinion. It’s bad for now if you slice the images too much.

Why?

You may know that the browser such as Internet Explorer has a main thread to load for main page and 2 children threads to load related resources from the main page. So, what will happen If you have too much resources in the page? Even all of the resources are small. It loads very fast, but how about the roundtrip occurred? I seen many cases that too many small files will be loaded much slower than a few medium files.

So, just try and prove yourself that too many resource files can be pain to your page than a less but larger in size.

Conclusion

In the next time, I’ll write the optimization check-list that you can do it in design stage and can gain much benefits than these methods. I’ll include how-to do things like what PageFlake, NetVibes did. Highly interactive with fast response time. Ajax!