Optimizing ASP.Net Application – The Presentation Layer (Part 2)

  • Article

 

Firstly, this is a continuation of my previous post Optimizing ASP.Net Application – The Presentation Layer (Part 1)

I am gonna discuss some other techniques and maybe introduce to some cool tools which will help you improve your site’s performance further.

Optimizing Images

This is one simple thing you could use to make your sites run faster. You site would definitely have multiple images and all of them can actually be optimized. Even if you create your own images using your favorite image editor like Photoshop, you can further optimize those images. The million dollar question would obviously be how ? Use Smush.IT or any similar tools which will trim off everything which is not required from your images, helping you reduce the image size a sizable chunk. You also have an offline version of this tool available at https://smushmysite.codeplex.com. I have personally not tried this offline tool but look like it works pretty much like the online one. https://punypng.com/ is another great service which you could use for “smushing” your images.

Now you can also do this from within your visual studio environment by using the Image Optimizer plugin

Remove Entity Tags

Entity tags (ETags) are a mechanism that web servers and browsers use to determine whether the component in the browser's cache matches the one on the origin server. (An "entity" is another word a "component": images, scripts, stylesheets, etc.) ETags were added to provide a mechanism for validating entities that is more flexible than the last-modified date. An ETag is a string that uniquely identifies a specific version of a component. The only format constraints are that the string be quoted. The origin server specifies the component's ETag using the ETag response header.

       HTTP/1.1 200 OK
      Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
      ETag: "10c24bc-4ab-457e1c1f"
      Content-Length: 12195

Later, if the browser has to validate a component, it uses the If-None-Match header to pass the ETag back to the origin server. If the ETags match, a 304 status code is returned reducing the response by 12195 bytes for this example.

       GET /i/yahoo.gif HTTP/1.1
      Host: us.yimg.com
      If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
      If-None-Match: "10c24bc-4ab-457e1c1f"
      HTTP/1.1 304 Not Modified

The problem with ETags is that they typically are constructed using attributes that make them unique to a specific server hosting a site. ETags won't match when a browser gets the original component from one server and later tries to validate that component on a different server, a situation that is all too common on Web sites that use a cluster of servers to handle requests. By default, both Apache and IIS embed data in the ETag that dramatically reduces the odds of the validity test succeeding on web sites with multiple servers.

So how do we remove them? Well you could do this in the web.config by adding the following :

 <httpProtocol>
  <customHeaders>
    <add name="ETag" value=" "/>
  </customHeaders>
</httpProtocol>

There are other things you could so as well like refer images as Data Uri and not the actual Image source, This will minimize the number of requests further.

You could also implement page caching for pages which hardly changes or changes in a predictable time interval.

Well that’s it for now I guess. I will add on a part 3 if I really come across something important.

Happy Coding !!