List of Figures

Chapter 1. High-speed websites

Figure 1.1. The performance cycle

Figure 1.2. A basic page request

Figure 1.3. Average bytes per page by content type (source: httparchive.org). The 250,000 URLs that produce this chart are made up by a large percentage of www.alexa.com’s top websites, as well as additional user-submitted websites.

Chapter 2. First steps toward a faster website

Figure 2.1. An HTTP GET request

Figure 2.2. An HTTP GET response

Figure 2.3. Multiple requests to www.mozilla.org

Figure 2.4. The difference between an empty cache and a primed cache. Notice the differences in the total weight and the number of HTTP requests.

Figure 2.5. Waterfall chart for www.deanhume.com

Figure 2.6. Waterfall chart for Asos.com

Figure 2.7. Accessing Chrome developer tools

Figure 2.8. Waterfall chart for www.deanhume.com using Chrome developer tools. The figure also shows the latency that can sometimes be associated with the download time of a component.

Figure 2.9. Waterfall chart for www.deanhume.com using IE developer tools

Figure 2.10. Waterfall chart for www.deanhume.com using www.webpagetest.org

Figure 2.11. Yahoo! YSlow tool run against www.deanhume.com

Figure 2.12. Google PageSpeed tool run against www.deanhume.com

Chapter 3. Compression

Figure 3.1. A typical HTTP request and response for www.bing.com. Notice the Accept-Encoding and Content-Encoding headers.

Figure 3.2. The difference in file sizes before and after using Gzip

Figure 3.3. An HTTP Response for msdn.microsoft.com. The image is cropped because of its size, but note the encoded text in the response body.

Figure 3.4. The Surf Store application

Figure 3.5. The Surf Store’s download folder structure

Figure 3.6. Step 1 in enabling compression in IIS 7

Figure 3.7. Step 2 in enabling compression in IIS 7

Figure 3.8. The file size savings after adding Gzip to the Surf Store application

Figure 3.9. The Web.config settings that enable IIS compression

Figure 3.10. The performance score of the Surf Store application before adding compression. The Google PageSpeed tool was used to determine the score.

Figure 3.11. The Surf Store application’s performance score, after compression, as calculated by the Google PageSpeed tool

Figure 3.12. The Surf Store application’s performance score as calculated by the Yahoo! YSlow tool

Figure 3.13. The average total page weight (source: HttpArchive.org)

Chapter 4. Caching: The sell-by date

Figure 4.1. The difference between an empty cache and a primed cache. Notice the difference in their total weights.

Figure 4.2. An HTTP request for a CSS file

Figure 4.3. An HTTP response for a CSS file

Figure 4.4. A repeat request for a CSS file which returns a 304 HTTP status

Figure 4.5. Add an Expires header to the Surf Store application by first choosing the website in IIS Manager.

Figure 4.6. Set the HTTP Response Headers in IIS Manager.

Figure 4.7. IIS–Adding custom HTTP Response Headers

Figure 4.8. HTTP Response Expires for the CSS files in the Surf Store application

Figure 4.9. The Empty and Primed caches for the sample application after adding Expires headers

Figure 4.10. Adding HTTP cache settings in the Web.config

Figure 4.11. The Web.config file is inside the Scripts folder. This will cause the caching to occur at the folder level instead of throughout entire application.

Figure 4.12. Applying output cache to a web page

Figure 4.13. Applying OutputCache to an ASP.NET Web Forms page

Figure 4.14. Applying output cache to the Product page with the VaryByParam and Location properties

Figure 4.15. The Google PageSpeed score after applying HTTP caching

Figure 4.16. The Yahoo! YSlow score after applying HTTP caching

Chapter 5. Minifying and bundling static files

Figure 5.1. The remaining improvements that need to be implemented, according to the Google PageSpeed tool

Figure 5.2. The default BundleConfig.cs is added to an ASP.NET 4.5 application

Figure 5.3. A bundled and minified file after applying the new features in the System.Web.Optimization namespace

Figure 5.4. Creating a new MVC 4 project in Visual Studio 2012

Figure 5.5. The Layout view in an MVC project

Figure 5.6. The new HTML helpers automatically produce the HTML required for your bundles.

Figure 5.7. CSS and JavaScript before bundling and minification in ASP.NET MVC. Notice that there are four HTTP requests: two for the CSS and two for the JavaScript.

Figure 5.8. CSS and JavaScript after bundling and minification in ASP.NET MVC. There are only two requests for the CSS and the JavaScript.

Figure 5.9. The default BundleConfig.cs that is added to an ASP.NET Web Forms application upon creation in Visual Studio 2012

Figure 5.10. The Site.Master file in an ASP.NET Web Forms application

Figure 5.11. The new HTML helpers automatically produce the HTML required for your bundles

Figure 5.12. CSS and JavaScript before bundling and minification in ASP.NET Web Forms. Notice that there are four HTTP requests: two for the CSS and two for the JavaScript.

Figure 5.13. CSS and JavaScript after bundling and minification in ASP.NET Web Forms. There are only two requests for the CSS and the JavaScript.

Figure 5.14. The techniques that you’ve learned so far are all stacking up to build a high-speed, efficient website.

Figure 5.15. The Google PageSpeed score after applying minification and bundling

Figure 5.16. The Yahoo! YSlow score after applying bundling and minification

Figure 5.17. The overall page weight and number of HTTP requests before and after minification and bundling

Chapter 6. HTML optimization tips

Figure 6.1. A simulated waterfall chart showing the CSS at the bottom of the HTML document

Figure 6.2. A waterfall chart showing the CSS at the top of the HTML document

Figure 6.3. An image showing the differences in the way a page loads depending on where the JavaScript has been placed in the HTML. Note that the best place is at the bottom of the page.

Figure 6.4. A waterfall chart showing the effect that placing JavaScript files between CSS files can have. The best place for CSS is in the head of the HTML document.

Figure 6.5. A waterfall chart showing the CSS placed in the document head

Figure 6.6. The performance cycle

Figure 6.7. A waterfall chart for JavaScript that is run using the HTML5 async attribute

Figure 6.8. A JavaScript error that occurred as a result of the async attribute and a code dependency

Figure 6.9. Web Workers are able to run in parallel to the main browser thread.

Figure 6.10. Adding a new JavaScript file to the Scripts folder in an ASP.NET MVC application

Figure 6.11. The Web Worker in the Network tab in an ASP.NET MVC application

Figure 6.12. Adding a new JavaScript file to the Scripts folder in an ASP.NET Web Forms application

Figure 6.13. The Web Worker being downloaded and executed in an ASP.NET Web Forms application

Figure 6.14. The HTML5 application cache workflow

Figure 6.15. The browser creating an application cache and downloading the contents in an ASP.NET MVC application

Figure 6.16. The resources stored in the application cache in an ASP.NET MVC application

Figure 6.17. The browser creating an application cache and downloading the contents in an ASP.NET Web Forms application

Figure 6.18. The events that take place in a browser when an application cache is requested in an ASP.NET Web Forms application

Chapter 7. Image optimization

Figure 7.1. Images on a web page make up a significant portion of the total bytes (Source: httparchive.org)

Figure 7.2. Image quality isn’t affected by lossless optimization.

Figure 7.3. The file savings gained by using the Yahoo! Smush.it tool

Figure 7.4. The command line settings for Pngcrush

Figure 7.5. The command line settings for Jpegtran

Figure 7.6. The right-click context menu that Image Optimizer generates. Simply select the image or folder and then choose Optimize images.

Figure 7.7. The updated header bar in the Surf Store application in an ASP.NET MVC application

Figure 7.8. Adding a new class in the Solution Explorer

Figure 7.9. The result of the data URI image tag in the header

Figure 7.10. The updated header bar in the Surf Store application in an ASP.NET Web Forms application

Figure 7.11. Add a new class file called DataUriUtils in the Solution Explorer

Figure 7.12. The result of the data URI image tag in the header in an ASP.NET MVC application

Figure 7.13. Google PageSpeed suggests specifying the dimensions of an image to speed up page load times.

Figure 7.14. The PageSpeed score after applying the updates in this chapter

Figure 7.15. The Yahoo! YSlow score after making the image updates described in this chapter

Figure 7.16. The Yahoo! YSlow score after making the image updates described in this chapter

Chapter 8. ETags

Figure 8.1. The ETag is sent back by the server in an HTTP response.

Figure 8.2. An HTTP Request header containing the ETag that’s stored against that component. It’s sent up in the If-None-Match field.

Figure 8.3. The network tab shows 304 HTTP statuses. The server returns this status code if the component is still valid and matches the ETag and last-modified date.

Figure 8.4. In a web farm environment, you’ll get different ETags depending on which server you land on.

Figure 8.5. The Yahoo! YSlow rule recommends configuring ETags.

Figure 8.6. The custom module in the Surf Store application.

Figure 8.7. Add the custom HTTP module that removes the ETags to the Web.config.

Figure 8.8. The HTTP Response headers show that there are no more ETags.

Figure 8.9. The Yahoo! YSlow performance score before removing ETags.

Figure 8.10. The Yahoo! YSlow performance score after removing ETags

Chapter 9. Content Delivery Networks

Figure 9.1. A typical collection of CDN nodes scattered in different locations around the world

Figure 9.2. A web page performance test for www.deanhume.com against a test location in Geneva, Switzerland

Figure 9.3. The request details for deanhume.com against a test location in Geneva, Switzerland

Figure 9.4. Most browsers are only able to download from a limited number of connections per domain.

Figure 9.5. A snapshot of the network components that are downloaded when you visit www.amazon.com.

Figure 9.6. The Yahoo! YSlow score for the Surf Store application still needs some improvement.

Figure 9.7. A new class file is added to the SurfStoreApp MVC project.

Figure 9.8. A new class file is added to the SurfStoreApp project.

Figure 9.9. The latest YSlow performance result. The YSlow tool gives you the ability to add your own CDNs to a list of approved CDNs.

Figure 9.10. The YSlow performance score after moving the content onto a CDN

Figure 9.11. The Google PageSpeed score after moving the static content to a CDN.

Chapter 10. Tweaking ASP.NET MVC performance

Figure 10.1. When you create a new ASP.NET MVC project, you have a choice of view engines.

Figure 10.2. By default, an ASP.NET MVC application must search across multiple view engine locations to find a view.

Figure 10.3. Visual Studio allows you to publish your code in two different modes: Debug and Release.

Figure 10.4. The active tab shows the favicon for the Surf Store application. The inactive tab shows the favicon for the Wikipedia website.

Figure 10.5. A waterfall chart shows that of all the components, the HTML takes the longest to return. This is a good indication that you need to look at the back-end code to improve page load times.

Figure 10.6. The folder structure of each chapter. Each folder will also contain both an ASP.NET MVC version of the application and an ASP.NET Web Forms version.

Figure 10.7. Right-click References in the Solution Explorer to add a NuGet package to your application.

Figure 10.8. The NuGet package manager UI

Figure 10.9. MiniProfiler results capture the full page cycle as well as internal code.

Figure 10.10. MiniProfiler’s results after the code update.show improved performance.

Figure 10.11. MiniProfiler results that show duplicate SQL queries being executed.

Chapter 11. Tweaking ASP.NET Web Forms performance

Figure 11.1. Generating different IDs with ClientIDMode on an ASP.NET control

Figure 11.2. Visual Studio allows you to publish your code in two different modes: Debug and Release.

Figure 11.3. A waterfall chart shows that of all the components, the HTML takes the longest to return. This is an indication that you need to look at the back-end code to improve page load times.

Figure 11.4. To add a NuGet package to your application, right-click References in the Solution Explorer.

Figure 11.5. The NuGet package manager UI

Figure 11.6. MiniProfiler results. They capture the full page cycle as well as internal code.

Figure 11.7. MiniProfiler results after the code update

Chapter 12. Data caching

Figure 12.1. Caching can be applied to different layers of your application.

Figure 12.2. A reference to System.Runtime.Caching added to your application

Figure 12.3. Distributed caching across multiple web servers versus caching on individual web servers

Figure 12.4. A comparison of the optimized sample application versus the unoptimized one. Note that after 1 second, the unoptimized result (top) hasn’t even started showing content to the user.

Figure 12.5. The optimized version finished loading within 3.5 seconds, but the unoptimized version (top) is still loading content.

Appendix Appendix

Figure A.1. Internet Information Services (IIS) Manager

Figure A.2. Set up the site name and physical location of your website.