Web 2.0 Expo - Optimizing Websites
Sunday, April 15, 2007 Posted by kordless I'm attending the Web 2.0 Expo in SF this week, and I'll be posting when I find something worthy of discussion.
The first talk is done by Steve Souders and Tenni Theurer from Yahoo. Both Steve and Tenni work at Yahoo's Exceptional Performance team and they have identified several factors that affect the load times on Yahoo's properties.
Testing Your Users
One of the tests they ran was a load of a 1x1 GIF to test whether or not people have the cached copy of Yahoo's content on their computer - or not. It was a shock to them that they saw 40-60% of the visitors were visiting with an empty cache.
I asked whether or not they measured the breakdown of browsers on this test, and they had not. I think it might be beneficial for Zoto to run this test - with browser breakdown enabled. I suspect that Yahoo's results might be flawed due to the lack of a breakdown of browser type. IE6, for example, has many bugs related to its cache design and may be influencing the results heavily based on its share of the browser market (about 35-40% of Zoto's traffic).
Multiple Browser Connections
Regarding using multiple host names (as we do) for speeding up response times for loading images, Yahoo found that using more than 2 hosts (like www1 and www2.zoto.com) caused slowdowns due to thrashing of the user's CPU trying to load more images.
This could cause browsers such as IE6 a considerable amount of issues when loading more than a few images at one time.
We are currently using 4 names (www1, www2, www3, www4) for serving thumbnail images, as well as using 'www' for larger images. The use of 'www' for the image detail modal images allows that image to load before the thumbnails are finished loading if the user clicks on a thumbnail. We may want to try using 2 names (www1, www2) to test if this helps out the IE6 users a bit.
Combining JS, Images, and Style Sheets
One thing we've learned is that combining JS files is important in cutting down the time it takes to connect and load each separate file loaded from the server. Yahoo's suggestion (although they aren't using it themselves much of anywhere) is to include your image files inline in your stylesheets. By Base64 encoding the images for your site, you can stick them in the CSS file, which is a single download.
Since we've pushed the color switcher, this is now a good possibility for us to speed up our page loads. The caveat is that (go figure) IE6 doesn't play nicely with this technique.

