A modern web page requires the browser to make a number of requests to the web server for a page to download all its content. Most of the root cause analysis found that the web server spends 10-20 % of time in serving the dynamic part (code part) and rest of the time in serving most of the static content like CSS, JavaScript and Images. Correcting these web performance issues not only saves money by consuming less bandwidth but also saves money on infrastructure investments (less servers). Before we proceed some of the tools that help in monitoring the performance of web sites are Fiddler, Network Monitor and IIS logs. Fiddler and Network Monitor are freely downloadable from Microsoft.
Please remember the three key performance rules. All our performance suggestion will revolve around these rules
- Try to reduce the number of http calls to the server
- Send as little as possible
- Send as infrequently as possible
To do a performance improvement of a web site one should first consider
- Infrastructure Improvements which focus on IIS and other network settings
- Frontend Improvements
Infrastructure Improvements
Let’s get started with the infrastructure improvements which include 5 key areas. They are HttpCompression, Content Expiration, Content Distribution Network (CDNs), eTags, HttpHeaders. Please note that the infrastructure and frontend improvements are not limited to the items that are discussed in this post.
HttpCompression: One of the performance rules is to send as little as possible. IIS by default allows you send request in Http Compression. It is possible to send the compressed http request with both IIS 6.0 and IIS 7 and above. In IIS 7 by default compress static files. The compressed version consumes a less bandwidth and at times it reduces bandwidth up to 30-50%. There are two important factor you must consider before enabling HttpCompression.
- 1. Check applicationHost.config file and make sure the images are not enabled for compression. Images have their own compression logic and might cause bad performance if IIS compression is enabled for images.
- 2. IIS 7 & above uses CPU for http compression. Although not official by Microsoft but it is likely to be around 1%. IIS 7 has option to turn off the compression if the CPU usage goes beyond a certain preset limit. But looking at the benefits we are going to achieve it is advisable to enable it.
Content expiration: Based on the send as infrequent possible rule, we can use the client browser caching. Set up the up the expiration for all static content of your application. A good candidate for setting up the expiration are the static image, JavaScript files and CSS files. You may set the expiration based on your website needs.
Content Distribution Network (CDN): One of the items that we can think of is CDN. Let’s say a file which we want to refer in our internet site (say a JQuery file) instead of serving from our web server it is better to serve it from major player Microsoft etc. Major players have the CDN infrastructure to serve the page from a geographically closer location.
Although it adds some amount of performance improvement, one of the biggest disadvantages that it adds another failure point to your web application. If the major player site is down for some reason this will impact your site as well.
Removing E-Tags and Unnecessary Headers: One of the performance rules is ‘Send as little as possible’. By default IIS adds E-Tags and unnecessary headers like the version of ASP.Net etc with each request which you may not wish to show to the client browser. We may write a simple httpModule code to remove the unnecessary headers.
Note: we may need to have a careful consideration before trying something with the httpModules as it might have a negative impact as well.
Frontend performance Techniques
Externalize CSS & JavaScript: One of the performance rules again is to send as little as possible. With externalizing the CSS and JavaScript we can leverage the below
a. Reduce the page size
b. Allow reuse of the file
c. Allows us to set the expiration of the file which helps in browser caching.
Minification and Consolidation: Again with respect to send as little as possible, minification and consolidation plays a major role. Often the JavaScript, CSS files have lots of comments, blank spaces which goes to production as is. While it is necessary for the developer to understand the comments it is not necessary to move the same files to production. Minification of the file removes all the unnecessary items that need not move to production. Consolidation again removes number of https calls to the server. So instead of having multiple try to consolidate files as much as possible.
Tools that can be used for this is MS Build.
Image optimization: Image optimization plays a major role in the in the send as little as possible rule mentioned earlier. Free tools like Paint.Net have a ways to compress the images. To human eye it would not make any difference between the compressed and uncompressed images.
CSS Sprite: If you have multiple small images, whenever you web site is request the client makes a call to the server for each of the images. To reduce the number of hits on the server we can use the CSS sprites, where we can club multiple images into a single image file and css to control which section of the image to be shown.
There are multiple CSS sprite tools available online which generate a single image file and CSS from a number of images.
Apart from the infrastructure and frontend improvements there are miscelinious performance options like caching, tools like YSlow, making async calls etc to improve the performance. Again those can be explored as whenever it is necessary. I hope you enjoyed the content and happy coding.
