High Performance Web Sites, by Steve Souders

by Peter on December 30, 2010

This thin little Steve Sounders - High Performance Web Sitesbook, whose full title is High Performance Web Sites: Essential  Knowledge for Front-End Engineers, has probably been one of the most influential books on web development and the strange art of “front-end engineering” written during the past decade. In order to precisely identify and measure the impact of various factors that affect the speed of a website, Souders has conducted a series of tests. His conclusions, along with the test results, are presented in the book in a clear and precise manner. Some of his findings were quite surprising. And most of the techniques he discusses are techniques that can fairly easily be implemented by most people managing web sites.

So if you want your web site to display more quickly, this really is the book for you! If your site is very slow, you will be able to reap huge benefits using the advice in this book and spending some very few hours of your time. High Performance Web Sites summarizes Souders’ findings in 14 specific rules that will cut 25% to 50% off response time when users request a page.

Steve Souders, the author of this book, previously worked at Yahoo! as the Chief Performance Yahoo!, where he blogged about web performance on Yahoo! Developer Network. He was named a Yahoo! Superstar. Steve worked on many of the platforms and products within the company, including running the development team for My Yahoo!. Prior to Yahoo! Steve worked at several small to mid-sized startups including two companies he co-founded, Helix Systems and CoolSync. He also worked at General Magic, WhoWhere?, and Lycos.

Steve SoudersThe rules in High Performance Web Sites explain how you can make changes to achieve increase the speed of your web site. Some of the rules deal with elements that go into the htaccess file of your site, some deal with how elements are loaded (sequence as well as form) on the site. Souders simply has paid a lot of attention to how browsers and servers behave and how they can be tuned to reduce the display time.  High Performance Web Sites covers every aspect of the tuning process.

Each performance rule is supported by specific examples, and code snippets are available on the book’s companion web site. The rules include how to:

  • Make Fewer HTTP Requests
  • Use a Content Delivery Network
  • Add an Expires Header
  • Gzip Components
  • Put Stylesheets at the Top
  • Put Scripts at the Bottom
  • Avoid CSS Expressions
  • Make JavaScript and CSS External
  • Reduce DNS Lookups
  • Minify JavaScript
  • Avoid Redirects
  • Remove Duplicates Scripts
  • Configure ETags
  • Make Ajax Cacheable

If you’re building pages for high traffic and want to optimize the experience of users visiting your site, this book is indispensable.

However, be aware that even though most of the rules are easy to implement, following the advice will also in some cases require some difficult choices. Are you willing to use fewer and smaller images in order to achieve more speed? Are you willing to throw out ads that slow your site down? The choices are many, and affect many aspects of the look and feel of any web site.

Steve Souders also provides a special addition to his tips: his example pages offer direct comparisons and means to make your own tests. And the book ends with a very interesting 30-page chapter where he deconstructs 10 of the top Web sites in the U.S. using the rules and tools described in the book. Also quite interesting to note is that most of these sites have later implemented his advice after the book was published! So if the top 10 web sites can learn from Souders, perhaps you and I can too?

Praise for this book:

“If everyone would implement just 20% of Steve’s guidelines, the Web would be a dramatically better place. Between this book and Steve’s YSlow extension, there’s really no excuse for having a sluggish web site anymore.”

-Joe Hewitt, Developer of Firebug debugger and Mozilla’s DOM Inspector

“Steve Souders has done a fantastic job of distilling a massive, semi-arcane art down to a set of concise, actionable, pragmatic engineering steps that will change the world of web performance.”

-Eric Lawrence, Developer of the Fiddler Web Debugger, Microsoft Corporation<

{ 0 comments }

Google search engine ranking an Associate punishment?

So now Google has declared that it takes site speed into consideration in determining the ranking of web sites and web pages. On face value, it’s a move that seems and sounds reasonable.

However, as I indicated in a previous post, it is a little more complicated. What if your site is fast but you have ads on it that are slow? Will you be punished? And how much?

You see, I am guilty of this! I have advertising on this site and on other sites I am running as well. I am an associate both with Goggle and Amazon. So, being concerned, I have tested a little to see how it works in practice – how web advertising affect the speed of my sites.

Test setup

I have used several testing tools to measure the effect of the ads I am running on the speed of a web page. I could have tested a number of different pages, but as I use the tests only to illustrate, I think this one test is sufficient for now.

I took a page from my site ScandinavianBooks.com, a page about Swedish author Mari Jungstedt.

I tested it first as it is – a 30.46 KB HTML file with 10 small images, linking one CSS file and one JS file (both minified), but which in addition contains scripts and images in ads as well as iFrames from Amazon which call external CSS and JS files.

Then I took out all the Amazon ad-related stuff – ads and links . This reduces the page from 30.4 KB to 25.58 KB, and created a second version of the page.

Finally, in the third version, I also took out the two Google ads on the page. This reduced the page size further to 24.97 KB. Then I uploaded the three pages on my server and tested their speed on various site speed testing services online and inspected them with YSlow and PageSpeed.

Table: The impact of Google and Amazon ads on Web page speed and loading

Original No Amazon Diff No
Google
Diff
File size (KB) 30.48 25.58 4.90 24.97 0.61
YSlow total page load 308K 145K 163K 77K 68K
PageSpeed (score) 81 85 +4 90 +5
Pingdom* 28.3s 2.0s 26.3s 2.0s 0
WebsiteOptimization** 9.29s 5.19s 4.10s 4.96s 0.23s
WebPageTest 5.07s 3.02s 2.05s 3.22(??) n.a.
WebCentric (UK) 8.84s 4.91s 3.93s 4.63s 0.28s

Notes: * Pingdom seems allergic to Amazon ads on tested pages (I’ve seen lots of odd results there). ** At 1.44 Mbps

HTML Size

The results differ a lot (to express it mildly) but are somewhat consistent even so. It seems the ads from Google increase the overhead relatively little, less than 10% in these tests. The ads from Amazon, on the other hand, result in a 20% increase in the size of the HTML file and almost double the time it takes to render the page (far worse, if Pingdom is to be believed – which I don’t).

Diagnostics using YSlow

The total page load, according to YSlow, is 344K (empty cache, 51K with primed cache), including 144K in 19 javascript files and 112K in 41 images. The original file – will all the ads – gets an overall grade of “C” (performance score 79), but “F”-s for lacking compression, large number of DNS-lookups and HTTP requests (74 in all). It gets a “D” for “minfy” JS and CSS. Some of the scripts from Amazon have response times in excess of 1000 ms according to YSlow.
[click to continue…]

{ 0 comments }

In an earlier post, I wrote about the push by Yahoo and Google for faster web sites, and that Google has now started to take web site speed into consideration when determining site search engine ranking. It’s an initiative I sympathize with and support. However, there are several huge problems associated with it, which require well thought-out and extremely well-executed policies by Google.

Site speed and content

It is obvious to anyone using the net that if you want rich content, good looking sites and speedy web sites, you have a problem. Lots of content means lots of bytes. Generally, the more content you load, the more you prettify and make your site interesting to look at, the more slowly it will load. Surely, not even Google would like all sites to look as their own home page does? Its excellent for its purpose, but a web looking like that is not what we want! Rather, you, Google and I would prefer Google searches to send us to content-rich, good-looking, and interesting sites like this one or like this site?

For Google and for those of us who use the net, there is a real danger of a boring and mostly text-based internet in our future if Google pushes the page speed criterion too hard! Also, it seems to me that the rule set pushed by Google represents a Google-centric view of the net.

Big guys and small guys

A second concern is with balancing the contributions from the huge internet actors against those of the small guys – small companies, hobby sites, small blogs and the like. A number of the things you can do to speed-up your site are quite demanding, in terms of the required skills, time spent on perfecting the pages and optimizing code, as well as with regard to hosting.

The small guys host on GoDaddy, HostGator and similar places. Those are web hosting sites where the load is high and the pages are served slowly, especially when the servers are strained, for some or other reason, as they often seem to be (most of the low price hosting services seem to load their servers much too close to the max). The big guys, on the other hand, have IT departments, content delivery networks, and dedicated servers in the cloud. It is easy for them to be fast. So, if the speed criterion is pushed really hard, we may end up seeing the big corporations topping all the search result pages from Google.

According to TechCrunch, the internet is already dead and boring. But how boring would Google and Yahoo searches be with the big corporations topping all the search pages? I mean, you don’t really search to find eBay, Yahoo or Amazon, do you? You just go there! So search result pages with the top 10 internet sites on top all the time would make searching boring and un-interesting, and would to some extent defeat the purpose of the search!

The danger of punishing affiliates

If you look at this page, you will see that I have ads from Google and Amazon. Now, if you have PageSpeed or YSlow installed, take a look at the page (YSpeed is the best for what I discuss). You will see that there are all sorts of problems on this page – with “page expires headers”, with javascripts that aren’t minimized, with images where dimensions aren’t given, and so forth. And you will see that the page has a huge overhead in javascripts, loads from several different hosts, requiring a number of HTTP calls. Well, guess what? Those are not problems created by me: Those are mostly Google and Amazon (mostly Amazon) problems!

I have looked at a number of sites with ads, and it is quite clear that if Google pushed the speed criterion hard, it would actually punish its own associates and the associates of a number of other big corporations, such as Amazon. Many of them serve ads using images without dimension, javascripts that aren’t minified, inefficient CSS, served from several different servers, and so on and so forth. But would that be a smart move by Google? Is that what Google really wants? And how will the other big guys, like Amazon, react if Google really pushes hard?

What now?

It will be interesting to see how this plays out. The problems associated with the Google/Yahoo push for speed are not trivial, and the consequences may be big if the push is pursued too dogmatically. There are other concerns as well, but the ones I have discussed are the main ones – at least to my mind. What do you think?

{ 0 comments }

Hosting stability, downtime, and search engine ranking

November 10, 2010

Server downtime Few hosting services are perfect. Server downtime is something most people who have sites on the web have experienced. It is bad. But how bad? How does it affect search engine ranking, which is so important to most of us? Personally I had a really bad experience recently which made me think a [...]

Read the full article →

Improving Web Site Speed – Making Your Site Load Faster

October 25, 2010

I love speed on the Internet, and few things on the net frustrate me more than when a site takes eons of time to load. Often I even leave a site before it has finished loading if it is too slow. Maybe I lose out on something very important when I do that, but I [...]

Read the full article →

SEO-Myths 3: Content first is important for SEO

October 13, 2010

There is a whole lot of writing on a number of sites about the importance of have the content of the site come before other parts – such as sidebars with navigation and ads and the like – for reasons having to do with Search Engine Optimization (SEO). The argument is that the bots indexing [...]

Read the full article →

The Complete Idiot’s Guide to Search Engine Optimization, by Michael Miller

August 3, 2010

Sometimes titles are misleading – and this one surely is, even though I am sure it is intentional. While this book starts from the basics of search engine optimization (SEO), it really is a very advanced and excellent overview of this large and complicated topic. Search engine optimization is fundamental to anyone trying to do [...]

Read the full article →