Tweaking Add Item Templates for Better Script Performance

[This is the second in a 3-part series. Part 1, “Make Script Performance Automatic with Custom Templates in Visual Studio 2010”, can be found here.]

In part 1 of this series, I showed you how you can improve the script performance of your websites by using Visual Studio’s built-in support for exporting templates to create a new MVC3 web site template that relocates <script> references and blocks to the end of the page, where they will not interfere with the loading of the main visual elements of your site.

In this second part, I will show you how you can customize the T4 templates used to create new items in an MVC3 project, so that when you add new views to your project, they also have the scripts located at the end of the page. That way both the Master page / Layout for your original project AND any views you add have the scripts in the best location for performance. As a reminder, if your scripts dynamically add content to the DOM, you may want to leave those scripts in the <head> section of the page, since locating them at the bottom of the page may impact the page visibly during rendering. Continue reading Tweaking Add Item Templates for Better Script Performance

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 <head> 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. Continue reading Make Script Performance Automatic with Custom Templates in Visual Studio 2010