With increasing usage of mobile devices for browsing the web, optimization of web pages has become a topic of utmost importance. Perhaps, this post is nothing more than stating the obvious, as techniques to be mentioned here are very well known for quite some time, yet, pretty often ignored or dismissed, leaving web pages bad performance.
In this post, I am going to describe some of the well known techniques for web page optimization and how they can be leveraged in ASP.NET web pages/applications. This post will cover:
- Bundling & Minification
- Image optimization
- Gzip compression
- Number of requests
Let’s get deeper into the topic.
Whilst, CSS files are required for proper appearance of the site. This suggests us, that CSS files usually have a higher priority for loading than JS files. As such, if we leave all CSS links at
head section, and move all JS references at the bottom of the page, right before the
body end tag, we will make the page appear before the whole site is loaded, thus giving a faster load time impression.
<link type="text/css" reference="stylesheet" src="~/styles/style1.css"/>
<link type="text/css" reference="stylesheet" src="~/styles/style2.css"/>
<link type="text/css" reference="stylesheet" src="~/styles/style3.css"/>
Bundling & Minification
Bundling is a technique used to collect all CSS files into one CSS file, and all JS files into a one JS file. ASP.NET as of version 4.5 has bundling and minification functionality included. Older versions can get System.WebOptimization packag by downloading it from NuGet.
When you create a new MVC 4 web application from Visual Studio, you get bundling and minification set up by default. Bundling and minification code can be found in App_Start folder within the solution, in BundleConfig.cs file. Here you may add files to be bundled and minified one by one by registering them with their relative path like this:
It is important to note that, bundling and minification will happen only when the application is on “Release” solution configuration. When in debug mode, bundling and minification will not happen.
Caching is a technique used to create a temporary faster storage of commonly used content. Caching can be done on two levels:
<clientCache cacheControlMaxAge="365:00:00" cacheControlMode="UseMaxAge"/>
This will tell the client to cache static content for a year from the date of request.
Optimizing images is a crucial point on web optimization. Most of the sites today have a lot of images, and by optimizing them a lot of page load size can be saved. Images can be optimized by using a image editing software. From Visual Studio, an extension called Image Optimizer can be used to optimize images.
Image optimizer extension for Visual Studio
This extension will allow you to right click an image, or an image folder and select Optimize images option, and it will do the optimization for you.
Gzip compression is a server side functionality for compressing the content sent to a client. By default, compression is enabled from IIS7.5 and above. If compression is enabled on web server, then we can influence this behavior from web config by specifying this:
If values are specified to false, then this will stop compression.
If you are using IIS Express, then you can activate compression by executing this command from iis express folder
appcmd set config -section:urlCompression /doDynamicCompression:true
Number of requests
By HTTP specification, the browser should download at most 2 resources in parallel from the same host. Most browsers comply with this, or up to 4 parallel downloads. This means, if there is a high number of requests to retrieve the whole site, the page load time will be slow.
This bottleneck can be addressed in different ways. Bundling & minification is one way to decrease the number of requests. CSS Sprites as well as embedding small background images to CSS also will help on this. One other way to help this is by putting resources in different hosts. Even subdomains will help on this, for e.g. putting images, scripts, and css on different subdomains like this:
will make the browser believe it is downloading files from different resources and throw more threads for parallel downloads.
Content Delivery Networks (CDNs)
CDN is a way to optimize a web page as well as save bandwidth at the same time. Most common libraries used, one of them being jQuery, are hosted by CDN providers such as Microsoft, Google, etc. You can even use custom CDNs such as Akamai and host your content.
CDNs will optimize content download from a geographically close location to the requester. This will also benefit from the fact that the browser will see a different host from your side, and will throw another thread for downloading content from CDN.
The techniques mentioned in this post are by no means all what can be done to optimize ASP.NET web pages. There are many other techniques with more specific usage and help optimization of web pages.