Techniques For Improving Website Performance

Annotated below is a presentation from Nik Molnar, co-founder of the open source debugging and diagnostics tool Glimpse, who demonstrates several different strategies for improving the performance of your web application. This is easily one of the most useful conference presentations I have ever seen and I wanted to share it with everyone. If were curious about how to do any of the following tasks, this presentation will cover those for you. Next to each point is a bookmark for you to jump to that portion of the presentation.

  • Using browser tools to analyze usable content and latency for each request [13:00]
  • How to use HAR files for analyzing performance metrics [14:30]
  • Using the ‘Audits’ tab in Chrome to make recommendations [15:40]
  • Adding Google PageSpeed to the browser tools and how to use it [16:45]
  • Specifying in the web.config how to use compression for static and dynamic files. [17:50]
  • How to enable client side caching with the expires header [19:00]
  • How to use bundling in ASP.NET to bundle and minify CSS and JS files. [19:35]
  • How to use Web Essentials Visual Studio plugin to easily do image sprites [20:40]
  • Using to optimize PNG images with lossy compression [22:00]
  • Using Web Essentials to embed small images as base64 encoded text in CSS [24:22]
  • Using async script attribute and img lazyload attribute to lazy load resources [26:19]
  • Pre-caching client data using dns-prefetch, prefetch, and prerender HTML tags [28:30]
  • Using the RedGate CPU profiler to identify bottleneck code (note: Visual Studio has a simpler built in feature) [35:00]
  • High level thoughts on how to improve server side performance [35:55]
  • Using browser tools like Octane to profile Javascript CPU performance [38:30]
  • High level thoughts on how to improve javascript performance [42:25]
  • Understanding frame rates and the concept of jank [44:05]

Link to the video in it’s entirety
Link to baseball demo site used in presentation


ThatConference 2014

For the past three years, a group of very smart and very generous people, have hosted a wonderful summer camp themed conference in Wisconsin titled ‘That Conference’.   It’s hosted at a giant indoor/outdoor waterpark and convention center, Kalahari Resorts.  The number and quality of the sessions is impressive, and may shock you a bit when you consider the entire ticket cost is currently under $400.

Most of the presentations I attended were put on by Microsoft MVPs, people who are recognized by Microsoft as leaders in the community and have demonstrated a strong ability to teach and inform others about the technology stack.

Each day starts off with a keynote.  Day 1 was Elizabeth Naramore,  who artfully spoke about how destructive FUD (fear, uncertainty, and doubt) can be.  Day 2 was Tim Huckaby, a long time Microsoft collaborator  turned entrepreneur and founder of Interknowlogy, who spoke on the importance of design.  Day 3 was Mike Mcgee, who is the co-founder of Starter League, a rapid learning school hosted in Chicago.  Mike gave us his inspiring story of how he took risks, turned down offers, and maintained a focus on his business until it reached success.

Some of the favorite talks I participated in were:

SDK for your API by Wade Wegner

Understanding OWIN by Keith Dahlby (author of Posh Git)

RavenDB for the .NET Developer by Judah Himango

ORMs – You’re doing it wrong by Jimmy Bogard (founder of Automapper)

Building a Flexible Client API Library by Darrel Miller

Full Stack Web Performance by Nik Molnar (co-founder of Glimpse)

In addition to all the wonderful technical presentations, there were great opportunities to meet other like minded individuals.  There was a meet & greet for early check-in attendees, a happy hour with great food the first night, a full pig roast the second, and plenty of chances to interact and reflect on the final day.

Generous sponsors brought technology for everyone to experiment with.  Omni Resources brought an Oculus DK2 which I thought was amazing, Skyline Technologies made a flappy bird clone that utilized the Kinect to wave your arms to move, another company brought Google Glasses for people to try.   All the sponsors were developer focused, knowledgeable, and polite to the “campers”.

ThatConference will be 8/10/15 to 8/12/15 next year and I already have it noted on my calendar.


Future of Technology

The number of technologies in development, that are real and not science fiction, is astounding. These are technological advances are that are just over the horizon and are simply a matter of time to come to market at a reasonable cost for all of us.

Do you remember what life was like before GPS, cell phones, personal computers, the internet? Sure, life was good, and we all got by just fine, but these advances all make life so much more enjoyable and interactive for all of us lucky enough to inhabit it.

I believe will permeate all our lives within the next 10 years, and these are just a few of many:

– Wearable devices (watches, glasses)
– Bitcoin
– Virtual Reality (Oculus VR)
– Self driving cars
– Gene therapy
– 3d Printing
– Stem cell technology (new organs, disease treatment)
– Mind controlled prosthetics
– Electric cars
– Artificial intelligence / Learning systems

It’s a great time to be alive as a technology enthusiast. The future is bright, and I’m glad to be a part of it.


Create a push notification system with SignalR and Toastr

Do you have events in your application that you would like to trigger a notification to other users? How about if a user places an order on a website and you want the website administrator to see a notification, or a sale on Apple products is initiated and you want to notify customers?

Note: If you wish to download the code to follow along instead of going step by step, you may download it on Github here.

SignalR is a library for .NET that enables real-time communication. It does this via web-sockets, which is typically available in modern browsers, but also degrades gradually to other methods that are supported by the older browsers. You just need to worry about the SignalR framework not the underlying architecture. Toastr is javascript framework for non-blocking notifications. With just a few lines of code you can get a nice popup system in place.

Let’s walk through the steps, it’s not too difficult.

1. Create a new MVC project in your favorite language, I’ll be using C#. I disable user authentication and name it ‘SignalrToastr’ but you can name it whatever you would like.

2. Open ‘package manager console’ for your application, and install the SignalR package.

3. Create a class file named ‘Startup.cs’ and place it in the root of your application. Give the following contents to your new file. This file is an Owin startup file, which is outside the scope of this discussion, but is worth noting as Owin will become a larger part of ASP.NET vNext. It is a middleware framework that resides outside of IIS. Microsoft also uses Owin for the ‘Individual Accounts’ user manager, so if you left user authentication enabled in step #1, you can simply add the ‘MapSignalR’ line below to the Startup.cs class it created for you.

using Microsoft.Owin;
using Owin;

[assembly: OwinStartup(typeof(SignalrToastr.Startup))]
namespace SignalrToastr
    public class Startup
        public void Configuration(IAppBuilder app)
            // Any connection or hub wire up and configuration should go here

4. Create a folder called ‘Hubs’ and add a file named ‘ContactHub.cs’. Enter the following contents into the file.

using Microsoft.AspNet.SignalR;

namespace SignalrToastr.Hubs
    public class ContactHub : Hub
        public void ContactFormSubmitted(string name, string message)
            // Calls the 'notifyUsers' method on the client side.
            //  Note:  You can change 'All' to target only certain clients.
            //  Note:  Code after 'All' is dynamic, and you can specify whatever name you wish.

SignalR uses ‘Hub’ objects to communicate between the client and the server. We will go over more on what is actually happening here in a later step. For now, you should note that ‘ContactFormSubmitted’ is a method being called on the server, from the client. The client passes this server method two parameters, name and message. This server side method then notifies ‘All’ clients to execute a JS method named ‘notifyUsers’ which takes one parameter, name. Outside the scope of this tutorial is how you can narrow down which clients you want to send the message to.

5. Modify the ASP.NET templated view that comes installed ‘~/Views/Home/Contact.cshtml’ and replace it’s contents entirely with the following:

<form class="form-horizontal">

        <!-- Form Name -->

        <!-- Text input-->
        <div class="control-group">
            <label class="control-label" for="txtName">Name</label>
            <div class="controls">
                <input id="txtName" name="txtName" type="text" class="input-medium">


        <!-- Textarea -->
        <div class="control-group">
            <label class="control-label" for="txtComments">Comments</label>
            <div class="controls">
                <textarea id="txtComments" name="txtComments"></textarea>

        <!-- Button -->
        <div class="control-group">
            <label class="control-label" for="btnSubmit"></label>
            <div class="controls">
                <button id="btnSubmit" name="btnSubmit" class="btn btn-primary">Submit</button>


@section scripts
    <script src="~/Scripts/jquery.signalR-2.0.3.js"></script>
    <script src="~/signalr/hubs"></script>    
    <script type="text/javascript">
        $(function() {
            var contact = $.connection.contactHub;

            // Callbacks to the client should be defined here.
            contact.client.notifyUsers = function (name) {

            $.connection.hub.start().done(function() {
                // Calls to server should be included within the hub.start() method.
                $('#btnSubmit').click(function() {
                    // Call the ContactFormSubmitted method on the hub.
                    contact.server.contactFormSubmitted($('#txtName').val(), $('#txtComments').val());
                    // Clear text boxes and reset focus for next comment.
                    return false;  // prevent 'form' from submitting.

This creates a simple two field bootstrap form, and also adds our required JS includes to make SignalR work (jquery.signalR-*, and ~/signalr/hubs). It also creates a placeholder for our client callback notifyUsers, and also adds an event handler for our contactFormSubmitted method to push to the server. If you build your solution at this point and open your browser to your projects location for /signalr/hubs/ (i.e. http://localhost:62279/signalr/hubs/) you’ll see some generated JS markup that SignalR created based on your hub. Note how it lower cases your hub name, and methods. This is what the SignalR framework is creating for you automatically based on your Hub classes.

        proxies.contactHub = this.createHubProxy('contactHub'); 
        proxies.contactHub.client = { };
        proxies.contactHub.server = {
            contactFormSubmitted: function (name, message) {
                return proxies.contactHub.invoke.apply(proxies.contactHub, $.merge(["ContactFormSubmitted"], $.makeArray(arguments)));

6. Repeat step #2, but install the Toastr framework.

7. Add the toastr.css file to either the top of Contact.cshtml or to your Layout.cshtml file:

<link href="~/Content/toastr.css" rel="stylesheet" />

8. Modify your scripts section of Contact.cshtml to look as follows. Note how we have added a reference to taostr.js and also placed the call inside our notifyUsers callback method.

 <script src="~/Scripts/toastr.js"></script>
    <script src="~/Scripts/jquery.signalR-2.0.3.js"></script>
    <script src="~/signalr/hubs"></script>    

    <script type="text/javascript">
        $(function() {
            var contact = $.connection.contactHub;

            // Callbacks to the client should be defined here.
            contact.client.notifyUsers = function (name) {
      'New contact form submitted by ' + name);

            $.connection.hub.start().done(function() {
                // Calls to server should be included within the hub.start() method.
                $('#btnSubmit').click(function() {
                    // Call the ContactFormSubmitted method on the hub.
                    contact.server.contactFormSubmitted($('#txtName').val(), $('#txtComments').val());
                    // Clear text boxes and reset focus for next comment.
                    return false;  // prevent 'form' from submitting.

9. You are done at this point, so let’s try it out. Open two different browsers side-by-side, I’ll be using Chrome and Firefox. This is done to show you how the server is making a callback to ‘All’ clients as shown in step #4. You can narrow this down in the future if you want, to only administrative users for example. If all goes well, you should be able to fill the form out in one browser, and see the popup in both.



Create custom NuGet packages and host your own Nuget repository

In this tutorial, we’ll cover some basics on how to create a Nuget package. We’ll also look at a way to host your own private Nuget repository. To complete the tutorial, you’ll need to download the NuGet.exe command line utility.

Note: You should consider putting this utility in your system path. I have a dropbox folder on all my machines C:\Users\Kyle\Dropbox\Utils that I put command line utilities in, and then update the PATH variable for my machine.

1. Start by creating a folder for your NuGet packages. I recommend C:\Users\your_username\.nuget (if you create this folder in explorer, it may complain if you don’t name the folder “.nuget.” with the trailing period. Explorer will strip off the trailing period when it’s created).

2. Download the .zip sample project here, and unzip it into a subfolder with the name of the Nuget package you wish to create (i.e. \.nuget\NugetDemo\)

3. You’ll see folders here for /content/ and /lib/.

/content/ – any files here simply unzip into the root of the project, so anything you put here will dump as is to the project the package is being added to. You just match the structure you want to have it unpack into and Nuget will unzip it into your package accordingly. The example from #2 uses a ‘Controllers’ and ‘Views’ folder from an sample C# MVC project. The root content folder also contains a web.config.transform. The changes in .config.transform files are added to the matching .config file in the project. In this example, I have an appsettings key I am adding.

/lib/ – contains your binary files you want to include in subfolders based on framework version. In the example from #2, I have a .NET 4.5 (net45) subfolder, and a dll called Utils that I am packaging in. This will be added to my project as a referenced dll when I install the Nuget package. Utils just contains some sample extension methods which are used in the Controller and View from /content/.

/tools/ – (not included, but could be here if necessary) is for powershell scripts you wish to have executed automatically at installation time. I haven’t included any in this sample, but there is plenty of documentation out there on Powershell and what can be done with Nuget packages.

readme.txt – this file is in the root folder and is opened automatically (but not added to the project) when the package is installed.

4. From the root folder (the one with readme.txt) run the command ‘nuget spec MyPackageName’. This will create a file named MyPackageName.nuspec. Note: Be sure Nuget.exe is added to your %PATH% variable as noted earlier

5. Open and analyze MyPackageName.nuspec. This file contains information about your package (Author, License URL, Version, Project URL, License, Copyright, and Dependencies). Go ahead and delete the ‘Dependencies’ element and update the rest of the information to match how you would like it to look.

6. After you finish updating the MyPackageName.nuspec, run the command (from the same directory as #4) ‘nuget pack’. This will create your Nuget package. Congratulations, you just wrote your first Nuget package! To make the next step simpler, move the newly created .nupkg file and place it in the ‘C:\Users\your_username\.nuget\ folder.

7. Inside Visual Studio, select “Tools > Nuget Package Manager > Package Manager Settings’. Then select “Package Sources” and use the “+” icon to add a new source. Attached is a screenshot of how I have added my own person Nuget repository.


8. Now, create a basic C# MVC application. Right click your new web project and select “Manage Nuget Packages”. You see your source on the left rail. Go ahead and add your package you created from step #6. Note that ‘Controllers’ now has an ‘Extensions’ subfolder, ‘Views’ now has an ‘Extensions’ subfolder, Web.config has an AppKey named ‘ExtensionsKey’ and your project has a reference named ‘Utils’ that was not there before. Also, a file called “readme.txt” showed up in your solution explorer although it was not added to your project.


9. If you debug/run your application and head to the Url /extensions/strings/ you’ll see that the Extensions controller action ‘Strings’ will execute, leveraging the namespace/dll Utils to present some information. Congrats!


Create custom project templates for Visual Studio

You can use the ‘VSIX Project’ template to create a Visual Studio extension. This project type is installed as part of the Visual Studio SDK and you will need it to complete the exercise in this post.

1. Create a project which you wish to serve as the basis for your new project template. In this example, we will create a Console Application.


2. Make some changes to the application and how you would like it to behave as a project template. For this example, let’s rename Program.cs to Start.cs and also add a new text file called ReadMe.txt.


3. Once everything is to your liking, select “File > Export Template” from the Visual Studio menu. You will want to select “Project Template” as the template type and select the project from your solution (if following the demo, there will be only 1) from the dropdown. Click ‘Next’.


4. Specify the details about your template. Give it a name, a description, and optionally an image if you would like. Be sure to uncheck the ‘Automatically import the template into Visual Studio’. We will be bundling this into a VSIX package so you can deploy it to others as well. Note: This will export the template to “C:\Users\your_name\Documents\Visual Studio your_version\My Exported Templates\” by default.


5. Close your current solution, and create a new project of type “Extensibility > VSIX Project”. (note: If you do not see this template, ensure you installed the Visual Studio SDK as noted at the beginning of this post).


6. Update the VSIX manifest file (which should open by default) and specify details for ‘Product name’, ‘Description’, and ‘Author’.


7. Right click your new VSIX project, and select “Add > Existing Item”. Navigate to the export folder from Step #4 and select the .zip file that was created for you.” (Note: You may need to change the file type filter to “All Files (*.*)”).


8. Update the properties for the item you just added to be “Copy to Output Directory: Copy always”.


9. Back in your VSIX manifest file, select the “Assets” tab on the left rail. Select “New” and specify the Type as ‘Microsoft.VisualStudio.ProjectTemplates’. For ‘Source’ specify “File on the file system” and specify the .zip file you just imported in step #7. It should be in the root of the project folder. Click “Ok” to continue.


10. Navigate to the bin\Debug folder of your VSIX project folder in explorer. You should now see a VSIX file located here. Double click this file, and install the extension. Then close Visual Studio, and re-open it. If you navigate to “Tools > Extensions and Updates” then click “Templates” you will see your new Visual Studio template. Congrats! This is also navigable in the ‘New Project’ window under “Visual C#” (or Visual Basic” if you did this tutorial using Visual Basic).



Optional extras: If you want to change the location that the template installs to another folder, you will need to make some changes. We will, for this example, want our Console Application to appear inside “Visual C# > Windows Desktop”.

11. Navigate to the “bin\debug” folder of your VSIX project in explorer (same as Step #10). Right click your VSIX file and change the extension to .zip. Unzip the contents to a folder of the same name. You should see something like the following.


12. Go into the ‘ProjectTemplates’ folder, and add a new folder called “CSharp”, and below “CSharp” add a folder called “Windows”. Move the original .zip file from “\ProjectTemplates\” to “\ProjectTemplates\CSharp\Windows\”. Go back to the root folder of the zip that you unpacked and re-archive everything into “”. Rename the .zip file to .vsix extension.

Important note: You will want to mirror the folder structure located at ‘\Common7\IDE\ProjectTemplates’. On my machine this was “C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE\ProjectTemplates”.


13. Inside Visual Studio, go to “Tools > Extensions and Updates” and uninstall your template you installed from Step #10. Close Visual Studio. Run the VSIX you modified from Step #12. You will now see your template in the proper location.



SideWaffle Templates for Visual Studio 2012/2013

The SideWaffle extension, ( adds a bunch of useful Snippets, Project- and Item Templates to Visual Studio. The purpose is to make your daily work in Visual Studio a richer and more productive experience.

SideWaffle for Web

  • Project templates

    • Blank App
    • Browser Link Extension
    • Browser Link Extension (simple)
    • Code Snippet Extension
    • Durandal451
    • Google Chrome Extension
    • Google Chrome Theme
    • Google Chrome Web Store App
    • HTML5 Boiler Plate v4.3
    • Nancy demo
    • Nancy empty project with ASP.NET host
    • Nancy empty project with ASP.NET host and Razor
    • Nancy empty self hosted
    • Nancy empty self hosted with razor
    • Nancy with ASP.NET host
    • Nancy with ASP.NET host with Razor
    • Nancy with self host
    • Nancy with self host with Razor
    • Windows Azure WebJobs Console Application
  • Item templates

    • _preprocess.xml
    • A basic NuGet .nuspec file
    • An advanced NuGet .nuspec file
    • AngularJs Controller using $scope
    • AngularJs Controller using ‘Controller as’
    • AngularJs Directive
    • AngularJs Factory
    • AngularJs Module
    • AngularJs TypeScript Controller using $scope
    • AngularJs TypeScript Controller using ‘Controller as’
    • AngularJs TypeScript Directive
    • AngularJs TypeScript Factory
    • AngularJs TypeScript Module
    • ASP.NET Scaffolding T4 files.
    • Basic build script
    • Basic props file
    • Basic SignalR Hub and HTML Client Page
    • Basic targets script
    • Browser Link extension (VS2013 only)
    • Caliburn Micro Bootstrapper
    • CKEditor plugin
    • Code Snippet
    • Customize ASP.NET T4 Files
    • DurandalJs Controller
    • DurandalJs main.js
    • DurandalJs Service
    • DurandalJs ViewModel
    • Editor Drop Handler class
    • Empty PowerShell file
    • Favicon .ico File
    • FirefoxOS manifest
    • GruntJS configuration file
    • HTML Smart Tag (VS2013 only)
    • HTML Validator Class (VS2013 only)
    • HTML Whitespace Removal HttpModule
    • Humans.txt File
    • Jasmine Spec and HTML files
    • Jasmine Spec file
    • JavaScript IIFE
    • JavaScript IIFE Module/Namespace
    • jQuery Plugin
    • JSHint Ignore File (.jshintignore)
    • JSHint Rules File (.jshintrc)
    • Karma Configuration File
    • Knockout Custom Binding
    • Nancy bootstrapper
    • Nancy module
    • Ninect Controller Factory
    • NUnit Fixture
    • Offline Application Cache Manifest
    • Package Definition (.pkgdef)
    • Package.json for NodeJS
    • QUnit Spec and HTML files
    • QUnit Spec file
    • File
    • Markdown File
    • RequireJs File
    • Robots.txt File
    • SideWaffle Definitions Folder
    • SideWaffle Item Template
    • SideWaffle Project Template Files
    • SVG File
    • TinyMCE plugin
    • TSLint Rules File (tslint.json)
    • VS Command Table (.vsct)
    • Web API 2 Empty Controller
    • WebVTT File
    • Windows Azure Blob Upload Helper
    • Windows Azure Cloud Service Plugin
    • Windows Azure Table Storage Entity



Simple REST and HTTP API Client for .NET

If you need to consume REST services on any of your projects, there is a very useful NuGet package I used recently known as RestSharp. It consolidates a lot of boilerplate code to get you up and running and offers a very concise API for doing any REST operations you need.

You can run the following on the package manager console:
PM>Install-Package RestSharp

Code is very easy to understand, and has async support built-in if you need it. More information and documentation is available at: