We are working on performance improvement and one task is to reduce size of generated HTML pages. For example, user stories list with 20 user stories weight was about 380K, which is too heavy. We've optimized it to 150K using several techniques listed below:
- Don't use ID in controls in GridView and Repeater if possible. Each ID (especially in named containers) adds several bytes to each row.
- Use shortest possible names in IDs. For example, "wpm" instead "WebPartsManager1". Here is the difference:
ctl00_wpm_gwpUserStoryList1_UserStoryList1_userStoryGrid_ ctl06_actors_lstActors_ctl02_assignedUsersList_pnlReassignmentsafterctl00_mainArea_us_ug_ctl26_a_rA_ctl00_aUL_prIn fact this is one of the most important thing for reducing HTML size
- Don't use spaces in ASPX/ASCX code. Use tabs instead (in Visual Studio click Options->Text Editor->HTML->Tabs->Keep Tabs option, then reformat all documents by Ctrl+K Ctrl+D). In fact it is better to remove all tabs in final release at all. Tabs saved us 40K!
- Don't use Labels in TemplateField if possible, use just plain Eval or Literal. Each label adds <span></span> around value.
<asp:templatefield headertext="ID" sortexpression="UserStoryID" accessibleheadertext="UserStoryID"> <itemtemplate> <%# Eval("UserStoryID") %> </itemtemplate> </asp:templatefield>
- Use IMG instead Image. Image adds often unnecessary style="border-width:0px;" to generated img tag
- Do not use inline styles, use classes instead. For example, class="topMenu" smaller than style="padding: 10px; font: 12px Arial; margin-bottom: 10px"
- Do not use base.Render() in custom controls that affects states of other controls only. For example, we've used so called Extenders to show/hide other controls based on some input parameters and these extenders rendered as <span></span>, which is just not required.
- Use WebParts with care. We've added WebPartsManager into master page and it affected all pages in application. We've moved it into customized pages only.