I recently put together a simple public website created with ASP.NET for my company at Superexpert.com. I was surprised by the number of free tools that I ended up using to put together the website. Therefore, I thought it would be interesting to create a list of essential tools for building ASP.NET websites. These tools work equally well with both ASP.NET Web Forms and ASP.NET MVC.
After reading Steve Souders two (very excellent) books on front-end website performance High Performance Web Sites and Even Faster Web Sites, I have been super sensitive to front-end website performance. According to Souders’ Performance Golden Rule:
“Optimize front-end performance first, that’s where 80% or more of the end-user response time is spent”
1. Sprite and Image Optimization Framework
CSS sprites were first described in an article written for A List Apart entitled CSS sprites: Image Slicing’s Kiss of Death. When you use sprites, you combine multiple images used by a website into a single image. Next, you use CSS trickery to display particular sub-images from the combined image in a webpage.
However, most people avoid using sprites because they require a lot of work. You need to combine all of the images and write just the right CSS rules to display the sub-images. The Microsoft Sprite and Image Optimization Framework enables you to avoid all of this work. The framework combines the images for you automatically. Furthermore, the framework includes an ASP.NET Web Forms control and an ASP.NET MVC helper that makes it easy to display the sub-images. You can download the Sprite and Image Optimization Framework from CodePlex at http://aspnet.codeplex.com/releases/view/50869.
The Sprite and Image Optimization Framework was written by Morgan McClean who worked in the office next to mine at Microsoft. Morgan was a scary smart Intern from Canada and we discussed the Framework while he was building it (I was really excited to learn that he was working on it).
Morgan added some great advanced features to this framework. For example, the Sprite and Image Optimization Framework supports something called image inlining. When you use image inlining, the actual image is stored in the CSS file. Here’s an example of what image inlining looks like:
s+zNfREAAAAASUVORK5CYII=) no-repeat 0% 0%;
The actual image (in this case a picture of me that is displayed on the home page of the Superexpert.com website) is stored in the CSS file.
If you visit the Superexpert.com website then very few separate images are downloaded. For example, all of the images with a red border in the screenshot below take advantage of CSS sprites:
Unfortunately, there are some significant Gotchas that you need to be aware of when using the Sprite and Image Optimization Framework. There are workarounds for these Gotchas. I plan to write about these Gotchas and workarounds in a future blog entry.
2. Microsoft Ajax Minifier
The Microsoft Ajax Minifier was created by Microsoft employee Ron Logan. Internally, this tool was being used by several large Microsoft websites. We also used the tool heavily on the ASP.NET team. I convinced Ron to publish the tool on CodePlex so that everyone in the world could take advantage of it. You can download the tool from the ASP.NET Ajax website and read documentation for the tool here.
The ySlow tool is a free add-on for Firefox created by Yahoo that enables you to test the front-end of your website. For example, here are the current test results for the Superexpert.com website:
After publishing a website live to the world, you want to ensure that the website does not encounter any issues and that it stays live. I use the following tools to monitor the Superexpert.com website now that it is live.
ELMAH stands for Error Logging Modules and Handlers for ASP.NET. ELMAH enables you to record any errors that happen at your website so you can review them in the future. You can download ELMAH for free from the ELMAH project website.
ELMAH works great with both ASP.NET Web Forms and ASP.NET MVC. You can configure ELMAH to store errors in a number of different stores including XML files, the Event Log, an Access database, a SQL database, an Oracle database, or in computer RAM. You also can configure ELMAH to email error messages to you when they happen.
By default, you can access ELMAH by requesting the elmah.axd page from a website with ELMAH installed. Here’s what the elmah page looks like from the Superexpert.com website (this page is password-protected because secret information can be revealed in an error message):
If you click on a particular error message, you can view the original Yellow Screen ASP.NET error message (even when the error message was never displayed to the actual user).
I installed ELMAH by taking advantage of the new package manager for ASP.NET named NuGet (originally named NuPack). You can read the details about NuGet in the following blog entry by Scott Guthrie. You can download NuGet from CodePlex.
I use Pingdom to verify that the Superexpert.com website is always up. You can sign up for Pingdom by visiting Pingdom.com. You can use Pingdom to monitor a single website for free.
At the Pingdom website, you configure the frequency that your website gets pinged. I verify that the Superexpert.com website is up every 5 minutes. I have the Pingdom service verify that it can retrieve the string “Contact Us” from the website homepage.
If your website goes down, you can configure Pingdom so that it sends an email, Twitter, SMS, or iPhone alert. I use the Pingdom iPhone app which looks like this:
6. Host Tracker
If your website does go down then you need some way of determining whether it is a problem with your local network or if your website is down for everyone. I use a website named Host-Tracker.com to check how badly a website is down.
Here’s what the Host-Tracker website displays for the Superexpert.com website when the website can be successfully pinged from everywhere in the world:
Notice that Host-Tracker pinged the Superexpert.com website from 68 locations including Roubaix, France and Scranton, PA.
I mean debugging in the broadest possible sense. I use the following tools when building a website to verify that I have not made a mistake.
7. HTML Spell Checker
Why doesn’t Visual Studio have a built-in spell checker? Don’t know – I’ve always found this mysterious. Fortunately, however, a former member of the ASP.NET team wrote a free spell checker that you can use with your ASP.NET pages.
I find a spell checker indispensible. It is easy to delude yourself that you are capable of perfect spelling. I’m always super embarrassed when I actually run the spell checking tool and discover all of my spelling mistakes.
The fastest way to add the HTML Spell Checker extension to Visual Studio is to select the menu option Tools, Extension Manager within Visual Studio. Click on Online Gallery and search for HTML Spell Checker:
8. IIS SEO Toolkit
If people cannot find your website through Google then you should not even bother to create it. Microsoft has a great extension for IIS named the IIS Search Engine Optimization Toolkit that you can use to identify issue with your website that would hurt its page rank. You also can use this tool to quickly create a sitemap for your website that you can submit to Google or Bing. You can even generate the sitemap for an ASP.NET MVC website.
Here’s what the report overview for the Superexpert.com website looks like:
Notice that the Sueprexpert.com website had plenty of violations. For example, there are 65 cases in which a page has a broken hyperlink. You can drill into these violations to identity the exact page and location where these violations occur.
If your ASP.NET website accesses a database then you should be using LINQ to Entities with the Entity Framework. Using LINQ involves some magic. LINQ queries written in C# get converted into SQL queries for you. If you are not careful about how you write your LINQ queries, you could unintentionally build a really badly performing website.
LinqPad is a free
tool that enables you to experiment with your LINQ queries. It even works with Microsoft SQL CE 4 and Azure.
You can use LinqPad to execute a LINQ to Entities query and see the results. You also can use it to see the resulting SQL that gets executed against the database:
10. .NET Reflector
I use .NET Reflector daily. The .NET Reflector tool enables you to take any assembly and disassemble the assembly into C# or VB.NET code. You can use .NET Reflector to see the “Source Code” of an assembly even when you do not have the actual source code. You can download a free version of .NET Reflector from the Redgate website.
I use .NET Reflector primarily to help me understand what code is doing internally. For example, I used .NET Reflector with the Sprite and Image Optimization Framework to better understand how the MVC Image helper works. Here’s part of the disassembled code from the Image helper class:
In this blog entry, I’ve discussed several of the tools that I used to create the Superexpert.com website. These are tools that I use to improve the performance, improve the SEO, verify the uptime, or debug the Superexpert.com website. All of the tools discussed in this blog entry are free. Furthermore, all of these tools work with both ASP.NET Web Forms and ASP.NET MVC.
Let me know if there are any tools that you use daily when building ASP.NET websites.
Firebug always comes in handy.
Stephen is back and ready to write new good blog entries. That’s great 😀
There are 2 tools that are worth mentioning: Dot Less and Client Dependency Framework.
The former allows you to write your CSS code with variable, embedded rules, etc. You write your CSS rules in a programming way.
The latter combines your css and/or js files in one single file, compressed file that is cached. The tool targets ASP.NET stack, Web Forms or MVC.
Great post. Regarding ySlow, you can add an unlisted CDN to the cdn riule by following the steps in the ySlow FAQ.
Add Microsoft and sit back in glee as your ySlow gives you an almost perfect score 😀
Also, for optimizing both sprite- and non-sprite images, use this free Visual Studio extension visualstudiogallery.msdn.microsoft.com/…
It uses SmushIt under the hood
Great work… you can also add firebug in the list
Great article!!!!! Much appreciated!
Fiddler and HTTP Watch are also indispensable tools for measuring Web site performance.
Hmmmm, a guy selling X says “X is the area to improve”.
I think you’ll find if you profile your apps, and they have been written correctly, your apps spend 80% of their time in the business or database layer.
oh my god ….Don’t wanna learn more on ASP…Already head is full with PHP..Actually i am having little interest on ASP but i find it difficult for me….
Great article Stephen and lots of interesting points but I don’t like the first point.
Imho, in today’s world, why would someone bother putting multiple images into one and even putting images within css file itself when ASP.NET provides a very simple and effective caching mecanism and average home bandwidth speed keeps increasing?
I believe this method is adding unnecessary extra development time that could be well spent otherwise.
Cheers from Chambly, QC! 🙂
Senior .NET Developer
Add dynaTrace to the list, it’s free and an excellent performance measuring, debugging, diagnostic, and benchmarking tool for IE.
So with all this new spare time on your hands are you going to write ASP;NET 4.0 Unleashed a walkthrough building N-tier EF4 ASP.NET web site would be nice to have some guidance in since there is pretty much nothing out there the books out there on the subject are disappointing at best the ones I’ve read so far have give me good reason to keep working with classic ADO.NET and Linq to SQL
Thanks a lot to share such very useful things. Again thanks.
I am an open source fanatic, and thats why I really loved this blog post. Yslow and Pingdom are new stuff for me. Adding to that, ive been using the google seo toolkit and google analytics for quite some time, and thats a good stuff too.
Great article!!!!! Much appreciated!
Thanks for sharing this useful information! Hope that you will continue with the kind of stuff you are doing.
Great list of tools. Already use a few, will have to look at using the others.
Hmm only used three of those tools so far… time for me to get back on the new tech vibe?
unfortunately HTML Spell Checker is not available for Visual Studio 2008, and looks like it use MS Word spelling dictionary.
Nice cut and paste list, just like your book ASP.NET 3.5, what a waste of time trying to fix all the errors in that piece of garbage
These days, there are lots of tools and applications being launched by various companies. Now, it is getting difficult to find one that can give best result by following your pre-defined criteria.
The tools listed in this articles are very useful, in fact i have tested and used most of them and very happy with what they are providing.
Great list, thanks Stephen. I’m playing with the SIOF now…good stuff, and looking forward to your thoughts on the gotchas.
Congrats on the re-alignment with the company…was taken back a bit when the emails started bouncing. Glad to see you landing upright and all that. Best of luck.
A waste of time trying to fix all the errors in that piece of garbage …
thanks a lot stephen. Very helpful post. Most of stuff is the ones I have already been using but http://www.linqpad.net/ is very perfect.
Also we could add NuGet here even though it comes with vs 2010.
owww sorry stephen 🙁 you mentioned of NuGet on the Elmah part. My bad !
Very beautiful tools!!!
I might add that with ELMAH its possible to log that an event has occurred without throwing an exception. On my intranet site, I use this capture when a user has accessed the site using a browser other than IE 7 which is the current corporate standard. Once implemented, it allowed us to find about 20 users right off the bat that were still on IE 6.
‘Here’s the snippet at the heart of it all
Dim ExceptionMessage As New StringBuilder
Dim NewException As New NotSupportedException(ExceptionMessage.ToString)