10 Ways to Speed Up Your ASP.NET MVC Application
Your audience wants a fast website. Don't disappoint them. In today's post, I cover ten ways to speed up your ASP.NET MVC application.
Everyone wants information fast.
I mean, they want it yesterday. No one likes to wait.
Waiting in line. Waiting for a red light. Waiting, waiting, waiting.
So naturally, we don't like waiting for our web pages to load especially on our mobile devices. The nerve of web developers making us wait.
Not only does your audience want your site to be fast, it's now one of Google's primary ranking factors. Along with that, they spawned an initiative with their Google AMP pages to make the web even faster.
It's a big issue with most websites so I thought this would be a great post to assist Microsoft developers in optimizing their site.
Today, I cover ten ways to speed up your ASP.NET MVC application.
1. Application Caching
Caching is one of those programming techniques that should be used as a last resort, but it definitely accelerates your application when used properly.
One excellent place to put application caching is when you make a database call to retrieve records.
Let's say you have a blog. When a person requests a particular post, you pull it from the database and place it in the cache. The next person who requests that same post by Id, the application will look for the post id in the cache and if it finds it, returns it without hitting the database.
It saves the costly access of a call to the database.
Ref: Make Your WebSite Scream By Adding a Simple Cache Layer to Your Repositories
2. Optimize Your Images
I never knew how much space images take up on a blog post. Depending on the post content, they are the biggest asset in the post.
You need to shrink some of those suckers. The smaller you make the images, the faster the web page renders.
A good add-on to Visual Studio is the Image Optimizer Addon. Select the images you want, pick Lossless or Lossy image optimization, and the images will be optimized with a percentage of the savings for each image.
Also, once you master front-end client-side tools like Grunt or Gulp, you can automatically have your images optimized when you build or deploy.
Ref: Visual Studio 2015 Image Optimizer Addon
3. Use Sprites
Every website has images. They are a necessity.
But what happens when you have a lot of tiny images? If you have 20 small images, that's 20 requests for retrieve each image.
That's where sprites come in.
Sprites are images inside a larger image. The browser makes a request for that one large image file and you use CSS to grab the images and display them on the webpage.
Now, I know when I mention CSS to developers, they glaze over. I would recommend looking at some resources and learning it. It is definitely useful.
However, there are online sprite generators that assist with this process (Piskel, Sprite Cow, Google: "Online Sprite Maker").
Ref: ASP.NET MVC: Data-Driven CSS Sprites
4. ETags
For those wondering what they are, ETags are used for web cache validation which allows conditional client requests.
It's a way for the browser to identify when an asset is not required and won't make a request to the server to pull it minimizing requests.
I've even included an ETag ActionFilter as one of my favorite ActionFilters. It definitely makes this site minimize requests to the server.
Ref: My Top 5 ASP.NET MVC ActionFilters
5. Bundle/Minify JavaScript/CSS
Bundling and minification has been around for a while.
Bundling is the process of taking all of your JavaScript and CSS and packaging it up into one JavaScript or CSS file. It's similar to the sprite technique, but only with JavaScript and CSS files. It saves a request for each and every JavaScript and CSS file.
Spaces are all over the JavaScript and CSS files and they take up...uhh...space. Minification is the process of removing spaces from a JavaScript or CSS file.
In your ASP.NET MVC project, there is a BundleConfig.cs in your App_Start folder. This is where you define your JavaScript and CSS files for bundling/minification.
Ref: Bundling and Minification
6. Compression/Zip
Can you see a pattern here?
There are two ways to do this. One way is to activate compression through IIS and the other way is through an ActionFilter.
When enabled, the server will compress the assets into one package and send it down to the client. The client uncompresses the package and displays the content.
This speeds up the transfer of the assets.
I also wrote a CompressFilter for such a task. Place this on top of an Action Method and you will have compression capabilities for that page.
Ref: My Top 5 ASP.NET MVC ActionFilters
7. Minified HTML
While discussing minification, I also realized that your HTML page has a lot of spaces in it.
The smaller the HTML, the faster it's delivered to the browser. Depending on the size of the HTML page, removing spaces can reduce the HTML by 20-50%.
There is also a Whitespace ActionFilter I wrote which is also one of my favorites.
Ref: My Top 5 ASP.NET MVC ActionFilters
8. Use AJAX When You Can
AJAX has been around for a while and for good reason. It blurs the distinction between a desktop and web application.
It can definitely speed up certain tasks on a site.
For example, I've built a couple dashboards in my time.
One technique is to have the page load with a skeleton dashboard. When the page is completely loaded, the JavaScript kicks in and requests the widget payload. Place spinners where a future widget will appear. When each widget is loaded, replace the spinner with the contents of the widget.
This gives the user the perspective that the web site is fast and gives them time to focus on things that have changed on the dashboard while the widgets are updating.
It's makes the audience's experience more enjoyable.
9. Minimize Database Calls
ORM (Object-Relational Mapping) libraries like Entity Framework and NHibernate can make hidden calls even though you never issued them.
There are a lot of gotchas with each ORM, but one thing you can do is confirm in your code that only one call is made to pull back the data you need.
I've been burned by Entity Framework a number of times when I first started working with it. I would make a call to retrieve a specific record. While retrieving that record, it would see the child objects and decide to retrieve those as well making another database call...for each entity (sometimes 200 calls to the database for each one, eek!).
My general rule of thumb now is:
- Determine if I need a record or multiple sets of records.
- If I need one record, I use a repository to pull back a record.
- If I need more than one or multiple result sets, I use a sproc (Stored Procedure)
If you are unsure about how to pull back multiple result sets, check out the post on using Entity Framework to retrieve multiple result sets.
Ref: ASP.NET MVC: Use Entity Framework To Return Multiple Result Sets From a Generic Repository
10. Use third-party services where they make sense
Remember when I said use AJAX where it makes sense?
This was my approach when I decided to ditch a custom commenting system and use Disqus.
Why? Five reasons:
- Disqus is free.
- Disqus requires a snippet of JavaScript and BAM! Instant commenting system.
- Once implemented, the page loads first, then Disqus loads in the background. Usually, since the comments are at the bottom, the user isn't looking at the comments yet.
- It's mobile-friendly.
- Disqus has a social networking aspect to it allowing others to see the comments regarding the post on Disqus's site.
This third-party service enhanced my website with common functionality and provides a fast, AJAX-enabled experience for my readers.
Ref: Disqus
Conclusion
A majority of these speed enhancements are coding-specific. You can easily implement these techniques to make your site scream.
All of these techniques are used on my site.
Don't believe me?
Right-click and view the source of this post. This implemented the Whitespace ActionFilter.
Did I miss any techniques? Post them below in the comments.
