Performance Optimization in ASP.NET Web Sites

Performance is an important aspect of the modern day web application development. Not only does it make a site seamless to use, but also increases the scalability of the website and makes it future proof. In this article, we will look at various aspects of improving the performance of ASP.NET web applications. We will only concentrate on the browser/web server side performance as opposed to server/app server/database server performance optimizations.

Before we get into the details, the first question is, do we really need to optimize web sites?

This article is published from the DotNetCurry .NET Magazine – A Free High Quality Digital Magazine for .NET professionals published once every two months. Subscribe to this eMagazine for Free and get access to hundreds of free .NET tutorials from experts

Here are some examples on why you would need optimized web sites.

- Amazon.com had performed a test on their web site, and when they slowed the site by 100ms, the sales drop was 1%. As you would imagine for a company like Amazon, 1% is a huge loss.

- Google slowed their Search Engine by 500ms, and the traffic dropped by 20%.

As you can see, performance is a very important aspect of modern web sites. It becomes more important as nowadays most sites require optimized sites for mobile, tablet devices and other portable devices that often run on low throughput wireless networks.

Here are some tips that you can consider while making a better performing website.

Using the right ASP.NET framework

Check your .NET framework. If you can upgrade your site to use .NET 4.5, then it has some great performance optimizations. .NET 4.5 has a new Garbage Collector which can handle large heap sizes (i.e tens of gigabytes). Some other improvements are Multi-core JIT compilation improvements, and ASP.NET App Suspension. These optimizations do not require code changes. A great article on an overview of performance improvements of .NET 4.5 is at http://msdn.microsoft.com/en-us/magazine/hh882452.aspx

File compression 

There are often requests bloated to the web server with lot of static content. These content can be compressed thereby reducing the bandwidth on requests.

The following setting is only available in II7 and later.

The above configuration setting has direct association with IIS and nothing to with ASP.NET. The urlCompression name sounds strange but it is not really the compressing of URLs. It is compressing or gzipping the content and that sent to the browser. By setting to true/enabling you can gzip content sent to the browser while saving lots of bandwidth. Also notice that the above settings does not only include static content such as CSS/JS, but also dynamic content such as .aspx pages or razor view.  

If your webserver is running in Windows Server 2008 R2 (IIS7.5), these settings are enabled by default. For other server environments, you would want to tweak the configuration as I just showed, so that you can take the advantage of compression.  

Reducing the number of requests to the Server 

It is very common that lot of websites use individual CSS files and JS files as static content. Usually each file is served per request. For a small site this seems minimal, but a number of large static files, when requested via the web server, utilizes lot of bandwidth over the network.  

ASP.NET provides a great way to bundle and minify these static content files. This way the number of requests to the server can be reduced.  

There are many ways to bundle and minify files. For example, MSbuild, third party tools, Bundle Configs etc. But the end result is the same. One of the easiest ways is to use the new Visual Studio Web Essentials Pack. You can download this extention from here http://vswebessentials.com/  

Once installed, you can create minified and bundled CSS and Script files using the Web Essential Pack as shown here:
 

The above menu items would create bundled/minified files, and add them to your project. Now instead of referencing multiple CSS and JS files, you can simply reference the minified and bundled versions. This would also mean that there will be lesser requests made to the server, which result in less bandwidth and faster responses.  

You may wonder that even if we have bundled all files together, the total size of these files remains the same, as compared to when we were to serve them individually. However this is not necessarily true. For example,  

a. The minified process would reduce the size of the files by removing comments, shortening variable, and removing spaces etc.  

b. Bundling them together would also remove the additional Http headers that would require for each individual request.  

You can also find some good information about bundling and minification in the following link http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification 
 

Get control of your image requests 

It is possible to reduce the number of requests for images. There are couple of ways to do this.  

a. You may create an Image Sprite. With image sprite, you can combine multiple different images into a single large image. Then use CSS to reposition those images within the site. 

The following article by ASP.NET MVP Abhimanyu shows how you can create Image Sprites using web essentials http://www.itorian.com/2014/02/creating-image-sprite-in-visual-studio.html  

b. Base64 Data URIs  

With this option, you would never make any requests to the server to obtain any images. In Visual Studio 2013, you can take your smaller images and directly embed them into you CSS/Stylesheet.  

So 

will become..

.main-content {
    background: url('data:image/png;base64,iVBORw0KGgoA………..+ ') 
    padding-left: 10px;
    padding-top: 30px;
}

Setting up expiry headers 

By default, static content served from the web server does not have expiry dates. We can instruct the browser on how to cache the content, and for how long.  

If you set the expiration to a future date, the browser will not make a request to the server but instead the static content will be served from the browser’s internal cache.  

In the web.config, there is a section where you can control these settings.

We can change these settings to cache all the static content requested from the server, for instance cache it maximum for a year. Note the expiration is a sliding expiration, which means the content will be server from the cache from today up to a year.

Now the web server will automatically add this header to the static files.
 

(Note : The above Type ‘doc(1)’ is the Html dynamic file hence the cache settings are not applied.)  

This is all good, but what would happen if you make a change to your CSS/JS file. With the above settings in place, the browser will not serve those changes for the entire year. One way to tackle this issue is to force the browser to refresh the cache. You may also change the URL (i.e add query string, fingerprint/timestamp) to treat the page as a new URL, so the cache get refreshed.  

Script rendering order 

If possible, you can move the script tags

By using the defer attribute, you can specify the script not to run until the page has been fully loaded. Check out some limitations of the defer attribute https://developers.google.com/speed/pagespeed/service/DeferJavaScript  

Another way is to configure your scripts to run asynchronously.  

Using the above async tag, the scripts will be run asynchronously, as soon as it is available. 
 

Defer and async do almost the same thing, i.e. allow the script to be downloaded in the background without blocking. The real difference is that ‘conceptually’ defer guarantees that scripts execute in the order they were declared on the page, which means although some scripts may be downloaded sooner than the others, they have to wait for scripts that were declared before them.  

By the way, there’s nothing stoping you from doing this:

in which case, async overrides defer.  

Optimizing images 

Images are static content and they do take some bandwidth when requested via a web server. One way to solve this is to reduce the size of the images, in other words optimize the images.  

Image “Optimization” does not mean that it reduces the quality of the image. But it will re-arrange the pixels and palettes to make the overall size smaller.  

Web Definition of Image Optimization is “This term is used to describe the process of image slicing and resolution reduction. This is done to make file sizes smaller so images will load faster.”  

So how you optimize images?  

There are many third-party tools that can optimize images. The following VS extension would do the trick for you - http://visualstudiogallery.msdn.microsoft.com/a56eddd3-d79b-48ac-8c8f-2db06ade77c3.  

Alternatively if you are using png’s in your site, tinypny.org is a good place to reduce the file size of those images.  

Size of favicon: This is often ignored but you may have not noticed that sometimes the size of favicon is considerably large. A favicon for a website normally has to be a cacheable *.ico file and can be 32x32 or 16x16. You can also read http://stackoverflow.com/questions/1344122/favicon-png-vs-favicon-ico-why-should-i-use-png-instead-of-ico for a good discussion on which format to use and why.  

Caching HTML 

If you have pages that never get updated, you can cache those pages for a certain period. For example, if you use Web Forms or ASP.NET MVC, you could use ASP.NET Output Caching.  

http://msdn.microsoft.com/en-us/library/xsbfdd8c(v=vs.90).aspx  

With ASP.NET Web Pages you can modify the response headers for caching. Here are two links with some caching techniques to follow for web pages: 

 http://msdn.microsoft.com/en-us/library/vstudio/06bh14hk(v=vs.100).aspx 

 http://www.asp.net/web-pages/tutorials/performance-and-traffic/15-caching-to-improve-the-performance-of-your-website 
 

It is important to note that this would only work if you have pages that do not require frequent updates.  

Tooling support for Optimizing ASP.NET Web Sites 

I believe that this is the most important aspect of this article, as the right tool goes a long way in producing optimized web sites. There are a number of tools, but then two of them always stand out.  

1. Yahoo’s YSlow (https://developer.yahoo.com/yslow/)
 

It is a Firefox Add-On and one of the most popular tool among web developers. 

YSlow has some great features including a grading system, and instructions to make your site optimized. Most of the tips I described in this article are also provided as tips in this tool, so once your site is optimized, your grading should go up.  

2. Google’s PageSpeed  

This is another great Chrome browser extension. Once installed, it is also available as a part of the chrome developer tool bar. 

There is no guarantee that you could make all the optimizations that these tools suggest. At the end, it is all based on the website, and requirements you need to support. But combining both of these tools to measure your site’s performance and applying some of the tips I mentioned earlier, is a great start.  

Conclusion 

In this article, we looked at some of the approaches that you can take to make optimized and better performing web sites. This included, reducing number of requests to the server, changes to the .NET framework, compressing techniques and finally some tools that allow you to make better decisions on optimizing web site performances.  

It is also important to consider that whilst these techniques optimize web site/ web server performances, the overall performance can be based on a number of other factors. This includes performance of Application Server, Database Server (in a multi-tiered setup) and so on. However to start with, there are a lot of performance improvements you can gain by optimizing sites as described in this article.

This article has been editorially reviewed by Suprotim Agarwal.

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

Author

Raj Aththanayake is a Microsoft ASP.NET Web Developer specializing in Agile Development practices such Test Driven Development (TDD) and Unit Testing. He is also passionate in technologies such as ASP.NET MVC. He regularly presents at community user groups and conferences. Raj also writes articles in his blog http://blog.rajsoftware.com. You can follow Raj on twitter @raj_kba