Improving the performance of your MVC application
In the constant quest to deliver faster, slicker websites it is important to try and improve the users experience. This could include improving the page load speed, smooth navigation or page accessibility.
While working on this site, I have tried to improve page loading speeds as much as possible. There are a lot of tricks that you can do to improve the speed of your site. I have constantly been learning new things by delving into the world of site performance.
These are a few of the steps that I took to speed up my site.
Caching the Datalayer
I would say that for this site, caching the data layer has improved my site speed the most. By using the built in caching option that comes with ASP.net it is really easy to do this. Check out this link for more info.
Output Caching
Output caching is another way to greatly increase the speed of your mvc application. It greatly cuts back on the amount of work your application has to do, and I've definitely noticed a big increase in speed since adding this to my site.
By adding:
[OutputCache(Duration = 86400, VaryByParam = "None")]
Check out this link for more details
Minify Js & CSS
Minification involves removing unnecessary characters from code to reduce its size. This reduction in size greatly improves load times. There are some great tools out there to use - JSMin, YUI Compressor, etc.
There are also loads of articles out there on how to minify your JS and CSS. If you need a bit of help, I have written a custom T4 template to do this on this site
Gzip Compress
I have tried to use Gzip compression as much as possible on this site. This is an awesome article that allows you to easily do this on an MVC site with the use of MVC attributes.
Use a Content Delivery Network
Serving your content from multiple worldwide servers allows much faster loads time on the user's side. These servers can be used to cache and deliver all types of content. On this site I am using the Google CDN to load my jQuery API. To do this, you simply need to replace your local version of jQuery with the one on the CDN:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Google has support for loads of different javascript libraries. Microsoft also offers Microsoft AJAX CDN, which service you choose to go with is all up to you.
Combine Resources
Combining your resources into one file is another way to speed up your site. After some searching I came across this library called Combres for MVC.
I have recently added this functionality to my site and I'm giving it a trial run, but so far I have noticed decent results on different page speed analyzers. I might just keep it in there!
After updating the code as much as possible and following these rules, these are the before and after screen shots of the site speed.
Before:
After:
Its still not perfect, but as you can see this is a much better result.
Most of these techniques could also be used on sites that are not MVC sites. If you are a Firefox user, I recommend downloading and installing the page speed plugin. It is a great tool to help you identify areas in your site that need speeding up.
If you have any suggestions or tips that you would like to add to this, please drop me a mail. I am always keen to learn new techniques.
While working on this site, these are some of the links I picked up along the way: