Browser innovation and the 14 rules for faster loading websites: Revisiting Steve’s work (part 1)

• Tweet

(See parts 2 and 3.)

As you may or may not know, there are 14 core optimization rules, set out five years ago by web performance guru Steve Souders in his groundbreaking book High Performance Web Sites. These rules are our industry’s commandments. They’ve been tested and proven and they underpin the work we do every day.

But last week I was in a meeting with a CTO who wondered about the lifespan of these rules. He asked:

“Aren’t many of the performance rules already outdated or made obsolete by browser innovation?”

I have a well-rehearsed answer to this kind of performance heresy, which starts with a clear NO, but after the meeting I started thinking. The High Performance Web Sites research and rules are five years old — back when Internet Explorer 6 was still the dominant browser. Browsers have changed dramatically since then, which raises the question: Is the lens that Steve used five years ago still relevant?

I firmly believe that assumptions should be tested on a regular basis. I took a few hours and started investigating.

Methodology

First, I needed to find some test cases that Steve would have used to test his theories. I was going to ping him directly, but I stumbled across these test cases, which are still available. Using the Wayback Machine, I timestamped them to October 2007.

Next, I tested IE6 versus Chrome 19 on WebPagetest to get a sense of what Steve would have seen for the first five performance rules. (I would have done all 14, but ran out of time. Stay tuned for the rest another day.)

Findings

Using the above approach, I was able to see and compare the before-and-after results for each rule for both browsers, and then calculate the benefit. You can see the detailed test results, along with links to the tests, in this spreadsheet.

Important: The goal was not to look at how fast Chrome is versus Internet Explorer. We have looked at this in the past. This time I want to look at the relative benefit of each performance rule.

Here’s a high-level look at the results:

Rule 1: Make fewer HTTP requests

What this rule means: 80% of the end-user response time is spent on the front end. (Related: We re-tested this assumption last year, and it still holds.) Much of this time is spent downloading page objects like images, stylesheets, etc. By reducing the number of these objects, you reduce the number of HTTP requests needed in order to render the page in the browser.

Testing the rule: Steve identified a handful of techniques to help you reduce requests. Using the methodology above, I was able to see the performance benefit (defined by the improvement in document complete time) of applying two of these techniques to IE6 and Chrome 19:

Rule 2: Use a content delivery network

What this rule means: Latency is a major performance challenge. (Read more about latency here.) Content delivery networks (CDNs) mitigate latency by caching page content in distributed servers across a region or worldwide, thereby bringing content closer to users and reducing the round trip time.

Testing the rule: Here we can see the performance benefit — and deficit — of using a CDN for both browsers:

Rule 3: Add an Expires header

What this rule means: When a visitor comes to your page for the first time, their browser caches all the objects on that page. After the objects are cached, the browser uses them when required on subsequent pages, saving the browser from having to make HTTP requests for the same objects over and over. This makes those subsequent pages load faster.

Adding Expires headers lets you control how long your page objects are stored in the visitor’s browser cache, so that a visitor can return to your site days, weeks, even months in the future and still experience faster page loads. Expires headers are most often used with images, but they can be used on all objects, from scripts to Flash components.

Testing the rule: Below are the performance gains (defined as the improvement in document complete time in the repeat view) for both browsers:

Rule 4: Gzip page components

What this rule means: Compression is a core treatment that reduces response times by reducing the size of the HTTP response. Compressing as many file types as possible is an easy way to reduce page weight and make pages faster. At the time Steve developed his rules, Gzip was the most popular and effective compression method available. There are a couple of ways to go with this technique: Gzip just the HTML or Gzip everything.

Testing the rule: Here are the performance gains, again defined as the improvement in document complete time:

Rule 5: Put stylesheets at the top

What this rule means: Moving stylesheets to the document HEAD makes pages load faster because it allows the page to render progressively — that is, it allows the browser to display whatever content it has as soon as possible. At the time Steve wrote the rules, putting stylesheets at the bottom of a page prohibited progressive rendering in many browsers, particularly Internet Explorer.

Testing the rule: Below are the performance gains, this time defined as the improvement in start render time:

Interpretation

Here’s my take on these findings:

Reducing roundtrips still matters.

As the results for rules 1 and 3 demonstrate, it doesn’t matter how much better modern browsers are at rendering page objects; fewer calls to the server still make a huge difference. When I see that adding an Expires header leads to a 59% improvement in Chrome 19, that tells me this technique is still incredibly relevant.

A CDN helps in some situations, but not all.

I’ve written about this before, but it bears repeating. Your benefits will vary depending on which CDN you choose, as well as things like how your CDN stores content and how far their PoPs are from users. A CDN is a must for many sites, but it’s not a standalone performance solution.

Compression still helps. A lot.

Not only did Gzipping offer benefits in Chrome, it offered even greater benefits than in IE6. This, to me, is a really compelling finding, because it shows that despite the advances made in modern browsers, modern pages have also changed a lot — meaning that more than ever they can benefit from compression.

The location of stylesheets is important, but it depends on the page composition.

Start render really matters and the location of the stylesheets is critical.

Conclusion

It’s reassuring to know that the performance rules — or, at least, these five rules — have stood the test of time. They still apply and are as relevant today as they were five years ago.

(See parts 2 and 3.)

Related posts:

• Trendwatching on the HTTP Archive: Interesting findings about payload, social content, and core best practices
• New report: What we’ve learned from two years of watching the top 2,000 e-commerce websites
• Use of content delivery networks doesn’t correlate to faster websites for the Alexa Retail 1000