[Note: The code for this project is available on GitHub.]
Imagine you’re building an ASP.NET MVC website which has some performance problems. I’m sure this would never actually happen to you, but imagine you’re facing this problem just for the sake of exploring the possibilities. :-)
Now, your web app is mostly fast and responsive, but there are certain types of data that just bring the whole thing to a grind. This article will cover a technique using ASP.NET MVC partial views, along with just a sprinkle of jQuery, JavaScript, and HTML5 to make your site feel nice and responsive even if you cannot increase the speed of certain operations.
First a disclaimer / warning. I’m going to show you how to make your site feel faster without speeding it up. If the users feel that it’s fast, then it’s fast enough. However, it might be better to try to just make it faster in the first place. This article assumes you have either tried or ruled out things like increasing the DB performance by adding the proper indexes, caching data where feasible, optimizing queries, etc. OK, assuming you’ve done as much as you can for pure performance, let’s get to improving the experience for the users.
Consider a basic website that shows data from several sources. In the sample case, it’s kind of an iGoogle landing page with different items: TODO, news, etc. In the screenshot below you can see there are several sets of information shown (my details, news, and most popular items).
(click to enlarge)
It turns out that my details and the main page are actually pretty fast. The news and popular items are not. Yet, we are computing them all at once in the MVC action. Thus the whole page feels sluggish and slow. Here is the underlying controller action method.
This is a perfectly reasonable action method. But after doing some profiling we see that we have the following performance footprint:
I don’t know about you, but 2.5 seconds seems like an unacceptable page load time. Don’t think so? Check out these amazing facts:
Latency is Everywhere and it Costs You Sales – How to Crush it
Latency matters. Amazon found every 100ms of latency cost them 1% in sales. Google found an extra .5 seconds in search page generation time dropped traffic by 20%.
So a simple solution would be to break the loading of the slower sections (news & popular in our case) apart from the faster sections in the page. We can load the fast data immediately using direct model to razor processing and push the loading of the slow parts to an asynchronous operation using AJAX.
That might be a lot of work in general. But with MVC we can employ a few techniques and really make this simple and foolproof.
First, we’re in luck from the start because we are already using partial views (a key step) for our razor code. If you don’t have partial views, they are easy to add. Here is the relevant page section which renders the data synchronously.
MVC will easily serve the PopularControl’s content up over AJAX and same for any other partial view. So let’s change our controller action in the most simple way to allow us to ask for those elements independently. Here’s the new controller code:
It is important to note that we are returning PartialView (not View) for the parts that were previously managed in the view (news & popular).
Assuming the metrics above, the page will now load in 10ms. That’s vastly better than 2,500ms. With razor rendering time and other overhead it’s more like 50ms, but still vastly better.
But our CSHTML is now messed up. What do we need to do to load this content asynchronously? First, we start by punching “holes” in our razor page where the JavaScript can add the content async. Notice how we use the data-url attribute to simplify coordinating the proper location for the content. We’ll see the JavaScript side of things shortly.
Each section that will be loaded asynchronously now has three changes.
We have a div with the class partialContents. We use this in jQuery to locate them.
Each partialContents section has a data-url for the location of the partialview controller action.
Each partialContents section has a message and image to show an AJAX indicator that we are working on that area. There is no extra effort to show this. It appears by default and will be replaced as the content loads.
So the controller is ready to serve up this partial content. The view is showing a pending action and has a place to put the results. The final step is to just add the smallest amount of jQuery to do the download and update.
Here is the JavaScript file that does the work. Notice we simply select all the partialContents sections on page load with jQuery. The foreach one we pull out the url and call jQuery.load(). This does the download and updates the HTML for the correct partialContents.
That’s it! Now our site loads the slow sections in parallel and asynchronously.
To fully appreciate the difference you should see it for yourself. Check out the live demo I’ve posted here:
Sample: Improve Perceived Performance with Async Partial Views
Slow Version: http://improve-mvc-perf-with-async-views.azurewebsites.net/home
Async Version: http://improve-mvc-perf-with-async-views.azurewebsites.net/async
Be sure to click between them with the nav in the top right. Download the code here:
AsyncPartialViewsSampleKennedy.zip
Finally, here is the original version with the timing measured in FireBug:
Slow, Synchronous Version:
Notice the time: 2.6 seconds. Yuck. Here is the timing after the improvement:
Much Faster Async Version:
Now it’s 50ms! That is pretty awesome. Of course, if you look at the AJAX requests, they still take the same amount of time. But we do get the added benefit of natural parallelism from AJAX:
Now the whole page is ready in around 2 seconds which is in some sense truly faster (not just perceived) than the original.
So to recap, here are the steps we performed.
Identified the segments of data that are slow.
Took the original action method and change it to only load the fast content in the controller.
Moved the CSHTML responsible for rendering each slow section to a partial view if it was not already done.
Added an action method returning a PartialViewResult for each async section.
Added a partialContent pending section with loading message and data-url to parts of the original page which are going to be loaded asynchronously.
Use jQuery to find and call .load() for each section.
That’s it. Hopefully you will find this a useful technique for your slower pages.
Cheers,
@mkennedy
Filed under: Articles Tagged: .NET, Articles, ASP.NET, jQuery, LearningLine, MVC, web