Make Script Performance Automatic with Custom Templates in Visual Studio 2010

Background

If you’ve ever used a tool like Yahoo!’s Yslow to analyze the performance of your web application, you’ve probably run into the recommendation that you should put your scripts at the bottom of the page, unless those scripts insert page content (a good example of this, which we’ll see later in this post, is modernizr.js, which dynamically adds support for semantic HTML5 elements to older browsers that do not natively support them).

Unfortunately, if you use the default MVC 3 templates in Visual Studio 2010, things like the script reference for jQuery are added in at the top of the page, in the section of the document. This works fine, but may potentially delay the loading of the page while the external script is downloaded and loaded. You could, of course, manually move the script references each time you create a new project, but this would result in unnecessary duplication of effort.

In part 1 of this series, I’m going to walk you through how you can easily take an existing project with your preferred tweaks, and turn it into a custom project template.In part 2, I’ll show you how you can also tweak the behavior of the New Item templates, so that scripts for things like validation also end up in the desired spot. Finalliy, in part 3, I’ll show you how to customize the default template for your preferred project type. For all of these tutorials, we’re going to start with the ASP.NET MVC 3 Web Application template, as shown in the image below:

Since I have the MVC 3 Tools Update installed, I’m also going to take advantage of the built-in support for HTML5 in the project template, to use the new semantic HTML elements in my custom template.

Tutorial – Exporting Templates

Our first step will be to create a project from our desired starting template, so starting from the screen above, select the ASP.NET MVC 3 Web Application template, and name the project “MVC3ScriptsAtBottom” (the name isn’t really important, but this will help us remember what the project was for later on).
In the New ASP.NET MVC 3 Project Dialog that appears next, select the Internet Application template, and check the Use HTML5 semantic markup checkbox (this adds
,
,
, and
tags to the page in place of
tags, and also inserts a script reference to the modernizr javascript library which, among other things, can shim older browsers to support these elements), leave the View engine set to Razor, and then click OK.
Once the project has been created, open Views\Shared_Layout.cshtml. In the section, you’ll see the following:
```
   1: <head>
```

   2:    <meta charset="utf-8" />

   3:    <title>@ViewBag.Title</title>

   4:    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

   5:    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>

   6:    <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>

   7: </head>