Improve ASPX web page performance by combining Skin & CSS

               There has been numerous discussions happened on web site performance, ranging from UI design to Site Hosting. Out of this, one of the important step is, to reduce the size of Http Response size. Optimizing Http Response will considerably reduce the page loading time at the browser. There are many ways to create optimized HTML markups to improve client-side performance. I would like to explain one such a way of designing web page. The Loading time factor will mainly depends on the web page size that is going to download at the client's browser. In order to achieve this as a web developer, you will have to work on the following things at least.

• HTML -> Use XHTML markups with CSS always rather than using HTML tables with inline HTML style attributes unless it is required.
• CSS -> Keep all your style definitions in an external  stylesheet. It will make the page source clean and also reduce the Http Requests by caching these files at the client machine.

I don't want to discuss about JavaScript, since it might be deviating from the topic. As my title says, we can reduce the HTTP Response size by combining those two factors mentioned above with the help of Asp.Net Skin files.

As you know, Asp.Net 2.0 has introduced a new feature called Themes which helps to achieve consistent look and feel for websites. Themes may contain Skin files, CSS files, images etc. A Skin file is nothing but extensions of CSS definitions for the Asp.Net server controls. Themes and skins enables to handle style attributes from Application level to Control level. Skins are mainly used for Web controls such as Label, Button etc. There are two types of skin file, Default skin - which applies same style for all the controls of same type and Named Skin - which possess a SkinID property by which we can apply Style to the control's skinId. Here is an example for Skin file:

<asp:Button  SkinID="buttonStyle"     runat="server" BackColor="#2E132D" BorderColor="#507CD1"  Height="25px" Width="120px"
BorderStyle='Solid' BorderWidth='1px' Font-Names='Verdana' Font-Size='11px' ForeColor='White' Font-Bold='true' />

The main disadvantage on Skin file is, it renders the pre-defined style definitions as inline HTML style attributes attached with the control to which skin is applied. Lets see the skin given above, it renders into the browser as follows

<input type='submit' style='width:120px;height:25px;font-weight:bold;font-size:11px;font-family:Verdana;color:White;border-width:1px;border-style:Solid;border-color:#507CD1;background-color:#2E132D; />

These chunks of HTML markups generates every time when the associated web control renders into the browser. Even though the ASPX part looks neat and clean, the HTML markups rendered at the browser may reminds the old Web 1.0 page(ie: html tags without CSS) and also results in large size of HTTP Response.  Such pages will definitely affect the performance of the website. How can you avoid such scenario? Does it mean skin files are not good at website development? Will Css alone provide better performance?  I would say no and definitely continue with skin files, but combined with CSS. In such case, we'll be writing most of the style definitions in CSS classes and link that class to skin by using a skin control property called CssClass. This time, the above skin style will look like as

and it will render as

<input type='submit' class='normalButton' />

Did you see any difference? The chunks of HTML markups are gone!!!....The page size has reduced without removing skins, but by moving all style definitions into an external CSS file.