According site requirements and business needs, your web application has to reach sometimes a higher level of reactivity. Most of the business applications does not encounter this situation because the main focus is set to business rules and engines(data manipulations and processes) and not really about interfaces and network… However, it’s an other deal with public and mobile web sites.
There are already many sites which propose some tips on site optimizations, but I’ll focus on ASP.NET Applications and my own feedbacks. Following some simples tips to gain performances in few changes…
Step 1: Activate GZip Compression !
It’s obvious that the best way to reduce network trafic is to lower byte tranfers… and that the role of the compressor. There are many mecanisms to include compress feature, the easiest way is to enable compression in IIS(ex: here). However, sometimes your are allowed to configure IIS(external hosting, policies, etc…) and you want to use compression on the application side. For that you can use some code to compress response output, managed through global.asax or an HttpModule. See about an existing one(ex: MbCompression or others). After activation, you will see immediatly an amazing gain on aspx pages, css and especially axd. Don’t hope more for pictures, most of the time already compressed(jpeg/gif).
Step 2: Combine and minify your Css & Javascript files
It’s important too to understand that it’s more effective to download one file than many. It’s more true when you don’t have the infrastructure to support separation of features/contents on many servers(ex: user content on one server, application on other, etc…). A simple thing is to combine Css and Javascript of your application to minimize tranfer. However, in real development situation, it can be difficult to work with only one file of each type… that’s why some great tools have been made to do the job, sometimes during compilation or execution. For example, SquishIt. It allows you to combine your css and Js when executing the page. Combine with MbCompression to compress your file, these kind of resources will be fully optimized for communication.
Step 3: Abuse of cache
Cache can be of a great use, at both server side and client side. On server side, you should already know Page Cache output, Application Cache, Request Cache or DB Cache. For client(browser), the brower file caching does well his job by managing file expiration and I’m not talking, for the moment, of the new stockage feature of HTML5. I’m not going to explain the cache on server side, because these part concerns the performance of the servers and it is a part that most of the developper often keep in mind when programming. I would like to draw attention on the reponse header of page, like page that generate pictures or reports(for security purposes or content creation). Indicate on your aspx page a Response.Cache expiration and, in addition some VaryByParams, you can save a lot of bandwith by request. Note: it’s the same principe with page output cache declaration on your aspx and ascx.
See here for more details…
Step 4: Optimize pictures and pictures definitions
Each developer is already aware to use a correct image container/compressor to gain bandwith in a web application(jpeg/gif/png). I’m not going to reach this point.
A simple and good habit is to define exactly the sizes of your pictures. And not only the Css, bu the Skin files too. A browser takes more time to interpret an image without dimensions than a one specified. The gain will not be fantastic, but why lose some performances for something that need to be done.
The state of the Art for picture management is the use of picture sprites. For example, creating a main picture with many icons a set for each icons the position on the picture. Only one big file to download and the css manages the presentation.
Step 5: Manage your HTML code and ViewState
Always think about the DOM that the browsers are going to manage. Sometimes, a div tag can be more efficient that a table and vice-versa. It’s often an experience feedback to know when to use one or other and avoid to build a infinite tree… “Always keep it as simple as possible”. It will be a little gain for browser and to maintain the application.
However the real pain can be the ViewState(for ASP.NET WebForms Web Site only). A great feature, but greedy if you don’t think about it. Try to analyse the purpose of a page and if some postbacks are required. If it’s not the case? disable ViewState. Otherwise, define the controls which have to keep there state and disable the others.
These main points will help you when you should optimize the UI part of your applications and the browsers reactivity. Sure there are others points required before that(I assume that all data access and business requests are optimized), but these five changes can do the difference between stay on a site or close it 
Some tools to help you on your site evaluation:
- Developer tools on navigators (Chrome, IE9, Firefox)
- YSlow (Plug-in)
