Chapter 1. High-speed websites
- The impact website speed has on business
- The performance cycle
- The Performance Golden Rule
In South Africa, the Zulu have a proverb: “Even a small ant can hurt the mighty elephant.” Many animals are unable to harm the thick skin of the elephant, but just one ant can crawl into its trunk and cause chaos.
Have you ever opened a website and experienced a long wait (think slow, plodding elephant), waiting for all of the elements on the page to load? As you are waiting, imagine what an army of small improvements could do to make your website faster. Within the wider open source community, there are myriad books about web page performance. But in the .NET community, this remains an evolving area with much of the knowledge scattered about the internet. In this book, I hope to give you tools and tricks you can use to improve the speed of your .NET website, one step at a time.
Starting with the early versions of ASP.NET, there has always been a focus on developer productivity. Unfortunately, with this productivity came elements of the .NET framework that you might not have needed in your application. When you used earlier versions of ASP.NET, you got the whole stack, which included drag-and-drop controls, ViewState, server controls, and clunky HTML. Fortunately, the latest versions of ASP.NET put the focus on simplicity and getting your web framework to work just the way you want. In this book, you’ll look at the latest ASP.NET tools (ASP.NET MVC, ASP.NET Web Forms, and IIS) and use them to adjust and tweak your website’s code to provide your users with a responsive, high-performance website that runs smoothly. Internet Information Services (IIS) is an integral part of the Windows Server family of products and is one of the most popular servers for hosting websites. You’ll be using it to fine tune websites and optimize the way the server returns data to a browser. You’ll also look at a sample e-commerce website in both ASP.NET Web Forms and ASP.NET MVC and take it from slow to extremely high speed. You’ll create a sample application called Surf Store, which you’ll build and improve upon in each chapter. This gradual progression will also help you gain the understanding that you need to create fast ASP.NET websites.
In this first chapter, we’ll take a general look at the importance of website speed and the negative impact a slow website can have. In particular, we’ll focus on the Performance Golden Rule and how it can make a compelling case for optimization.
1.1. Why optimize?
Steve Souders, the head performance engineer at Google, coined the term the Performance Golden Rule in his book High Performance Web Sites (O’Reilly Media, 2007). In it he states that developers should “optimize front-end performance first, because that’s where 80% or more of the end-user response time is spent.”
When you first picked up this book and browsed through the table of contents, you may have noticed that a lot of emphasis is placed on front-end techniques (HTML, images, and static files) and not specifically on server-side code optimizations. When I began looking into website performance, I was shocked to discover that the biggest gains I could make were on the front end.
The key to faster websites is to place your focus on improving front-end performance. It has been proven to work and has allowed developers around the world to boost their websites’ performance time and time again. According to the Yahoo! YDN blog, more than 50 teams at Yahoo! have reduced their end-user response times by at least 25%. This is a sizeable increase.
Throughout this book, we’ll refer to the Performance Golden Rule, because it is the basis for improving website performance. In the following chapters, you’ll learn more about the Performance Golden Rule and why it’s important. Beyond improving performance, fine tuning the front end of a website has proven benefits in other areas as well.
1.2. The financial impact
Let’s start with the money aspect of web page optimization. Depending on your website hosting solution, you may be paying for the bandwidth associated with your site. Every file downloaded when a user loads your web pages means more bandwidth used. By reducing the amount of bandwidth and number of requests served from your website, you essentially save yourself or your company money.
1.2.1. The business impact
The financial penalty of slow bandwidth is the tip of the iceberg; the business impact of a slow web page can be drastic. Users are becoming more and more accustomed to speedy web pages. Because connection speeds are faster and hardware is better than ever, users expect a certain level of perceived speed when they access a web page. When they don’t perceive that speed, they look elsewhere, meaning that you might lose their business.
As more and more people all over the world shop online, they associate the speed of a website with the trust they have for it. If your site is extremely slow, it won’t instill confidence. Again, no confidence, lost business.
In a consumer survey conducted by Gomez,[1] nearly one-third (32%) of consumers reported that they abandon slow sites that have between a 1 to 5 second delay.
1 “Why Web Performance Matters: Is Your Site Driving Customers Away?” Gomez, the web performance division of Compuware, whitepaper, copyright 2010, http://mng.bz/tOq5.
As a developer, you may not believe that site speed plays such an important role in the way your organization and website are perceived by your users. But in order to test how users respond to different web page timings, Google purposely injected latency into its web pages and found that slowing down the search results page by 100 to 400 milliseconds had a measurable impact: the number of searches per user declined by 0.2% to 0.6%.
Similarly, when the Google Maps home page was reduced in size from 100 KB to 70-80 KB, traffic went up 10% in the first week and an additional 25% in the following three weeks (Farber 2006).[2] Other major online players found similar results when they optimized their websites.
2 “The Psychology of Web Performance,” WebSiteOptimization.com, May 30, 2008, http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/.
1.2.2. The search engine ranking impact
Google’s search engine team places emphasis on the speed of a website and how it affects search rankings. Google now includes site speed, an attribute that reflects how quickly a website responds to web requests. Google strongly encourages web developers to begin looking at their site speed and ways in which they can improve it. If you have invested heavily in search engine optimization (SEO), you might find it disheartening if all of your hard work is negatively affected by a slow website that slips down the search rankings.
1.2.3. The mobile user impact
Mobile internet usage is increasing dramatically as many mobile users turn to their phones, tablets, and other mobile devices to browse internet sites and get the information they need while on the go. Most mobile providers use 3G technology, which can be prone to wildly varying speeds depending on many factors. 4G is starting to gain traction, yet as developers, we still need to consider slower connections. Even though mobile networks are becoming faster, every millisecond counts! All techniques you’ll learn in this book will ensure that mobile users also benefit. Users who browse your website via a mobile device may be paying for their internet usage, so every download you save them when they open up a web page will also go into their back pockets—it’s a win-win situation.
1.2.4. The environmental impact
Your organization may be considering its green credentials. You’ll be surprised to know that any changes you make that improve the performance of your website will also improve your organization’s carbon footprint. Web servers require electricity and consume power in order to service the many requests that users make to a website. Imagine if you could cut down on the number of web requests made to your servers. That would mean less traffic for the server, which would mean the server wouldn’t have to work as hard to process requests. Some companies may also be running multiple servers to load balance a website. If you cut down on the server load, you might not even need that extra server!
1.3. How to optimize
It may seem like an overwhelming task, but the overall process of improving your website’s load times and performance can be broken down into four key stages. The performance cycle shown in figure 1.1 is a summary of the entire journey of the website-improvement process. Its four stages act as a guide that can be applied to any website, regardless of the specific rules and techniques you apply, helping you realize performance potential and faster load times.
Figure 1.1. The performance cycle
A website rarely stays the same for long—it evolves and grows as business expands. These four stages are useful to refer to if you get stuck or are unsure of the next step in the cycle.
1. Profile your website, analyzing it so you can understand where the performance issues are and why they are there.
2. Identify appropriate techniques, learning what best suits your situation and how you can enhance your website’s speed.
3. Implement changes, having determined which techniques best suit your website.
4. Monitor your site, tracking for any signs of decreased speed.
1.3.1. Profile
In chapter 2, we’ll run through some free tools you can use to effectively profile your website. These tools do the hard work for you by producing charts and results that clearly show where your website can be improved. They pick up obvious and sometimes not-so-obvious areas for improvement. With the results from the profiling tools, learning to read the signs will become a lot easier. Problem solving involves more than simply reproducing behavior—it involves insight.
Before you begin applying the changes, take a snapshot of the website’s performance profile to help you see how the improvements you make affect your website. In chapter 2, we’ll discuss ways in which you can use performance and waterfall charts to create snapshots of your site as it currently stands; the snapshot can also be used as a benchmark along the way. The satisfaction that you gain from comparing the optimized results to the original results can be very rewarding. Not to mention that these results can be used to impress your boss! You may need to justify spending your time on improving website performance, and what better way to do so than by showing proven results?
1.3.2. Identify
With the results from profiling, you can identify areas that need improvement. With more and more practice, you’ll become better at reading the charts and recognizing areas that require attention. You may find that all the techniques that we run through in this book are applicable to your situation, but the results of your analysis might reveal that you need to apply only a few.
1.3.3. Implement
The next step of the improvement process involves implementing the changes to your website. Chapters 3-12 will guide you through this step by step, with each chapter taking a sample website that has a poor performance rating and showing you how to optimize and improve its speed. By the end of the book, you’ll have taken this slow sample site and made it a high-caliber website.
1.3.4. Monitor
The final step in the improvement process is monitoring your website. Once you have made the changes, your site should be stable and remain optimized. But as your site grows, you may find yourself adding new functionality and features. This inevitably leads to more page components, which could cause degradation in page speed. Only by monitoring your site will you be able to maintain this optimized level of performance.
The four-step cycle begins again as a new cycle.
1.4. Where to optimize
To improve your website’s performance, you must understand where your users spend most of their time waiting for resources to be downloaded. A basic page request is shown in figure 1.2.
Figure 1.2. A basic page request
In the figure, notice how the content download and the browser parsing the HTML are the last, but most important, parts of the request. The browser parsing the HTML is important because it needs to download enough resources to render the page. To help you visualize how the content download is split, figure 1.3 summarizes the average bytes per page, based on an evaluation of over 250,000 URLs.
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.
As you can see in figure 1.3, you can see that the HTML document is a very small percentage of the overall download. Surprisingly, users spend most of their time waiting for the other components to download!
As a back-end developer, you probably think the first place to optimize your website is deep in the server-side code. This may include optimizing code or indexing the database. Instead, you need to start thinking about scalability and how quickly a website responds on its first load and even its second, third, and so on. Web page speed has less to do with server-side code and more to do with the components that make up the page. The HTML document is a small percentage of the total response time, and the components are the bulk of the page load. If you look at these components and find ways to improve the download time, these are the areas in which you can make the biggest gains.
1.5. The Performance Golden Rule
Going back to the Performance Golden Rule, as developers, we have to keep in mind what Steve Souders wrote (in High Performance Web Sites): we should “optimize front-end performance first, because that’s where 80% or more of the end-user response time is spent.” Using this rule, you can deduce that if 80% of the download time is spent on the front end, and you cut that in half, you reduce response times by 40%. If you cut the back-end performance in half, you gain only a 10% increase in response times. It almost seems like a no-brainer!
From a business point of view, the resources and skills required to optimize back-end code might require a skilled developer, cost more money, and take longer. Changing back-end code may require rearchitecture of that code, expensive profiling tools, and micro-optimizations. The techniques we cover beginning in chapter 3 are proven to work and can be applied across all web pages on a website with great results.
In figure 1.3, you saw that HTML makes up a very small proportion of the components in a web page. If you refer to the Performance Golden Rule and think again that 80% of user time is spent on page downloads, it becomes obvious where you need to look first! Imagine spending all your time micro-optimizing the server-side code and only making very small gains in speed, whereas you see a huge payoff immediately if you concentrate your efforts on the front end.
That said, although front-end optimization will give you the biggest gains and speed up your website significantly, you might still have room for improvement on the back end of your website. In chapters 10-12 we’ll look into ways to help you squeeze those last precious milliseconds out of your website by optimizing the back-end code.
1.6. Summary
As a web developer, you hold tremendous power and responsibility in your hands. Instead of providing your users with an average website, you have the ability to give them that something extra. In this chapter, you’ve seen that you can make a major difference to your users’ experience with simple and basic changes.
In the open source community, there is a growing buzz and excitement around web page performance. The advantages of serving a fast, responsive web page include reduced data traffic costs, increased business revenue, more website conversions, improved reputation, and more time for your users to spend on your site. In addition, optimizing your site’s performance can be extremely fun!
In the next chapter, you’ll begin learning about the basics of HTTP as well as essential tips and tools for interpreting performance charts. Chapter 2 will give you a solid introduction to web page performance.