Programming ASP.NET MVC 4

Chapter 13. Client-Side Optimization Techniques

The ultimate performance goal of any developer is to have a web page that loads as quickly as possible. The faster your page loads, the more responsive your site appears, and the happier your users are. Client-side optimization collectively refers to the set of techniques that can help you speed up the page load time.

This chapter focuses on the few basic techniques that give you the most bang for your buck. While no single technique is a silver bullet, following these rules should help any fairly well designed page achieve a boost in its load time.

Most of the techniques presented here will not require you to rewrite a significant amount of your code; rather, they can be applied to any well-designed application outside of code.

Why optimize? A page that loads quickly also appears more responsive in limited-bandwidth scenarios. If your target audience is on a slow network, it helps even more to have a leaner page that the user can see quickly.

Anatomy of a Page

In order to understand what affects the page load times, let’s look at how the browser renders a page.

A web page primarily consists of HTML, JavaScript files, and stylesheets, but also contains images and possibly other media, such as Flash or Silverlight objects.

Browsers follow a top-down approach to rendering a web page: they start at the top of the HTML and start downloading resources as they appear in the markup (Figure 13-1). The page is not rendered or displayed completely ...