How to speed up your MVC web application

Friday, 02 January 2015

This post will show some of the things that can be done to speed up your MVC web application. Applying all of these will decrease your page load time, meaning visitors won't have to wait as long to view your site.

How to check your current page speed

Before you start your quest to speed up your app, you should probably check how it's performing now so you know what's slowing it down.
There are some good sites out there that can analyse a page on your site and give you some useful information that you can use to improve the load time. Two that I use are Google page speed insights and Pingdom website speed test.

Google page speed has some rules that it will run against your page. Any violations of the rules will be categorized into should fix or consider fixing. Google page speed insights will identify which resources on your page are breaking which rules. It will even show you what you can do to fix any issues. Your page will be given a score out of 100 for both mobile & desktop browsers to give you an idea of how fast it was to load it.

Google page speed test
Google page speed insights test

Pingdom's speed test gives you the option of choosing where you want to run your test from. This is cool because you can see what speeds people in specific locations will be experiencing when accessing your site. Pingdom will give your page a performance grade out of 100 and shows what requests were made in order to load the page, in the familiar waterfall view. It also shows how long it took to load the page and compares this with other sites that have been tested.

Pingdom speed test
Pingdom's speed test

ASP.NET Bundling & Minification

Bundling & Minification are probably two of the easiest things you can do to decrease the page load time. Bundling improves load time by grouping files needed by your page so they can be downloaded with a single request. Minification improves the page load time by removing unnecessary whitespace, line breaks and comments from files to reduce their size. In some cases the minification process will also shorten variable names in javascript files.

To get started with ASP.NET Bundling & Minification, you need to first install the Microsoft ASP.NET Web Optimization Framework. This Article shows how you can create bundles and minify your resources. If you dont want to do more reading, the MVC project templates in visual studio come with bundling & minification setup by default. In the template, the bundles are defined in the bundleConfig.cs file and referenced in the layout file.

Cache your output

Output caching is another way you can increase the speed of your application. Output caching stores the content returned by a call to a controller action for a specific period of time. You can also use SqlCacheDependency to for pages that are dependent on data from a sql server db to cache requests until the data has been updated. This post has a walkthrough.

Enabling output caching is as simple as adding this attribute to the controller action you want to cache:

              [OutputCache(Duration = 3600, Location = System.Web.UI.OutputCacheLocation.ServerAndClient)]
                            

The duration parameter is how long you want the content to be cached for in seconds. The location is where you want the content to be cached. The full list of locations can be found here.

Use a Content Delivery Network (CDN)

A Content delivery network is a network of servers you can use to host your sites static content like images. These servers are located all over the world to allow clients to download your content from whichever server is closest to them. There are several companies that own CDN's which you can use as a service to host your files. Some of the main benefits of using a CDN are a reduced load on your web server and fast content delivery.

I use Cloudinary to host images. It has an easy to use API for .NET and has good image manipulation tools.

Optimize your images

The size of your images has a direct impact on your page load times. The larger the filesize of you images, the longer it will take for your page to load. You can decrease you image sizes by compressing them without sacrificing quality. There are a number of tools out there that can be used to do this, most of which are a google search away.

Cloudinary has a free add on that can optimize your hosted JPEG images by simply enabling the add on then changing the image src url.

Use GZIP compression

GZIP compression will help you reduce the file size of your content which will in turn reduce the page load time. I found this cool article which shows how to enable GZIP compression using a custom filter.

Asynchronously load Javascript files

When a web browser is rendering your content, if it reaches a script tag, it will stop the page rendering process to load the script. You can change this behaviour by adding the async attribute to your script tags. The async attribute tells the browser that the script should be loaded asynchronously so that it doesn't slow down the load and display of the rest of the page.

If you've used ASP.NET bundling for your scripts, you can insert the async attribute by using the Scripts.RenderFormat() helper method.

              @Scripts.RenderFormat("<script async type=\"text/javascript\" src=\"{0}\"></script>", "~/bundles/myScriptBundle")