Website Performance Tweaks, Part Two

Nate Koechley presented the research results of the Yahoo! Exceptional Performance Team two weeks ago in London (podcast). Like Yahoo! shares I would like to share that knowledge with you for those who couldn’t attend.

The traditional focus of performance optimization has been on the backend, i.e. system efficiency. But comparing a number of high profile websites, the Yahoo! team found that frontend performance is responsible for 80-98% of the perceived response time. Therefore doubling the frontend performance gains more than doubling the backend performance. In case studies Yahoo! Search became 40-50% faster, the Yahoo! Mail web application gained 70-100%. Of course there are ways to increase backend performance without throwing in more hardware, but better frontend performance reduces traffic and saves resources.

Saving resources on the client side, particularly CPU usage, also pays off in speed. Event delegation is faster than a large number of event handlers. Likewise we know that reducing the number of HTTP requests through techniques like CSS sprites, sliding doors, or file aggregation increases speed. The reason is the limit of two parallel requests per host imposed by HTTP 1.1. That results in a download queue of two requests at a time, increasing the perceived response time of a page. By configuring additional host aliases for your server you can increase the number of parallel requests — but more than 2-4 also increase DNS lookups resulting in higher CPU usage and slower response times.

I wonder when Yahoo! will present us another impressive calculation how many gigawatts have been preserved by reducing CPU usage in client PCs and in their datacenters, as one participant asked in the Q&A part. Energy efficient servers are the next big thing, but are there any concrete suggestions for greener programming? Is AJAX destroying the ozone layer?

Make fewer HTTP requests: This also affects cookies. Eliminate unnecessary cookies, keep them small, set them at granular domain levels (e.g. finance.yahoo.com instead of .yahoo.com), and set an appropriate Expires date.

Use a content distribution network (CDN) like Akamai where your (static) content is served from distributed data centers located nearer to your client. Even if your website is not as big as Google you can profit from faster response times by using the YUI library’s own CDN.

Add an Expires header not just for images, but also for JavaScript and stylesheet files.

Enable gzip: 90%+ of browsers support compression, and gzip is better supported and compresses more than deflate. Gzip HTML files, CSS, scripts, XML, JSON — no images or PDFs.

Put CSS at the top, avoid @import as it loads last, even after the images!

Move scripts to the bottom as they block parallel downloads even across hostnames and block rendering of any code below them.

Avoid CSS expressions as they execute many times and cost CPU.

Use external JavaScript and CSS files.Inline CSS is apparently faster for a user’s start page, but not on subsequent pages. After the page has finished loading, use the time to preload scripts to speed up secondary pages.

window.onload = downloadComponents;

function downloadComponents() {

var elem = document.createElement("script");

elem.src = "http://.../file1.js";

document.body.appendChild(elem);

}

Reduce DNS lookups for the reasons stated above. Use 1-4 hosts and the keep alive setting.

Avoid redirects as they are the worst form of blocking. Set Expires headers for redirects to enable caching.

Remove duplicate files: this is self-explanatory, but it can happen in large teams with many scripts and stylesheets.

Mind the ETag: Now this was something I never paid attention to. ETags are unique identifiers to distinguish files that share a URI. They are transmitted in the HTTP header. The default server setting uses the INode, the bytesize and the modification date of a file to calculate a unique ID. Unless servers in a cluster are identical, ETags differ, therefore the files are not cached. Fortunately ETags can be configured in Apache, so it should be possible to match them across different servers.

FileETag MTime Size

Note that the ETag is also relevant for RSS feeds. For example, currently the W3C talks feed is more or less unusable: some feed readers and services apparently regard the ETag, the feed is mirrored on many servers, so the same news entry from a different server is shown as new and unread multiple times every day…

Make AJAX cacheable and small. Some data like a user’s address book or buddy list change infrequently and should be requested via GET, cached, and set with a Last-modified timestamp and gzipped.

These are a lot of rules, and they will be published in a O’Reilly book by Steve Souders and Tenni Theurer in September 2007. Anyway, don’t be overwhelmed by their mass, instead you can start with the easy things: “harvest the low hanging fruit.” Enable caching with the Expire date setting and reduce the number of HTTP requests. You can deal with the rest later.

Finally Nate Koechley announced a Yahoo! performance tool called YSlow as a plugin for the indespensible Firebug extension. He also recommended the commercial IBM Page Detailer, and LiveHTTPHeaders to visualize what’s happening in your browser.

I assume you are referring to the Flash of Unstyled Content (FOUC). It should be noted that FOUC is a browser bug. There is no W3C standard or anything that says browsers need to load @import rules differently. Another thing to note is that FOUC is no longer an issue on IE7 or Safari 3.0 — the two browsers that originally had FOUC issues. (And Safari’s FOUC issues had nothing to do with @import in the first place).

@Bill: You are right, in Nate Koechley’s presentation as well as in Steve Saunder’s example pages the Flash of Unstyled Content is one reason why they ask to put CSS in the head. But the graph on page 71 of the presentation shows that stylesheets loaded with the @import rule load last, after all content. That behavior is unrelated to the FOUC bug.

About this blog

MartinKliehm (@kliehm) is a web developer since 1996. He works as a Senior Frontend Engineer in Frankfurt, Germany.

01bdc344-bfdf-42dd-a61a-f8b8c4473bf40.0542030000000000TrueASIN97805965293070596529309ImagesMediumOffersReviewsAllAWS.InvalidParameterValue9780596529307 is not a valid value for ItemId. Please change this value and retry your request.0596529309http://www.amazon.com/High-Performance-Web-Sites-Essential/dp/0596529309%3FSubscriptionId%3D18V058HXZGNHEQCR4E02%26tag%3Dleartheworl-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D165953%26creativeASIN%3D0596529309Technical Detailshttp://www.amazon.com/High-Performance-Web-Sites-Essential/dp/tech-data/0596529309%3FSubscriptionId%3D18V058HXZGNHEQCR4E02%26tag%3Dleartheworl-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D386001%26creativeASIN%3D0596529309Add To Baby Registryhttp://www.amazon.com/gp/registry/baby/add-item.html%3Fasin.0%3D0596529309%26SubscriptionId%3D18V058HXZGNHEQCR4E02%26tag%3Dleartheworl-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D386001%26creativeASIN%3D0596529309Add To Wedding Registryhttp://www.amazon.com/gp/registry/wedding/add-item.html%3Fasin.0%3D0596529309%26SubscriptionId%3D18V058HXZGNHEQCR4E02%26tag%3Dleartheworl-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D386001%26creativeASIN%3D0596529309Add To Wishlisthttp://www.amazon.com/gp/registry/wishlist/add-item.html%3Fasin.0%3D0596529309%26SubscriptionId%3D18V058HXZGNHEQCR4E02%26tag%3Dleartheworl-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D386001%26creativeASIN%3D0596529309Tell A Friendhttp://www.amazon.com/gp/pdp/taf/0596529309%3FSubscriptionId%3D18V058HXZGNHEQCR4E02%26tag%3Dleartheworl-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D386001%26creativeASIN%3D0596529309All Customer Reviewshttp://www.amazon.com/review/product/0596529309%3FSubscriptionId%3D18V058HXZGNHEQCR4E02%26tag%3Dleartheworl-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D386001%26creativeASIN%3D0596529309All Offershttp://www.amazon.com/gp/offer-listing/0596529309%3FSubscriptionId%3D18V058HXZGNHEQCR4E02%26tag%3Dleartheworl-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D386001%26creativeASIN%3D0596529309124949http://ecx.images-amazon.com/images/I/5169mD4idJL._SL75_.jpg7557http://ecx.images-amazon.com/images/I/5169mD4idJL._SL160_.jpg160122http://ecx.images-amazon.com/images/I/5169mD4idJL.jpg500381http://ecx.images-amazon.com/images/I/5169mD4idJL._SL30_.jpg3023http://ecx.images-amazon.com/images/I/5169mD4idJL._SL75_.jpg7557http://ecx.images-amazon.com/images/I/5169mD4idJL._SL75_.jpg7557http://ecx.images-amazon.com/images/I/5169mD4idJL._SL110_.jpg11084http://ecx.images-amazon.com/images/I/5169mD4idJL._SL160_.jpg160122http://ecx.images-amazon.com/images/I/5169mD4idJL.jpg500381http://ecx.images-amazon.com/images/I/51rrl0ldcjL._SL30_.jpg3023http://ecx.images-amazon.com/images/I/51rrl0ldcjL._SL75_.jpg7557http://ecx.images-amazon.com/images/I/51rrl0ldcjL._SL75_.jpg7557http://ecx.images-amazon.com/images/I/51rrl0ldcjL._SL110_.jpg11084http://ecx.images-amazon.com/images/I/51rrl0ldcjL._SL160_.jpg160122http://ecx.images-amazon.com/images/I/51rrl0ldcjL.jpg500381Steve SoudersPaperbackBrand: O'Reilly Media978059652930797805965293071Used Book in Good Condition005965293099197006243O'Reilly MediaEnglishUnknownEnglishOriginal LanguageEnglishPublished2999USD$29.99O'Reilly Media978-0-596-52930-7117040890556801978-0-596-52930-7BookABIS_BOOK2007-09-21O'Reilly Media2007-09-18O'Reilly MediaHigh Performance Web Sites: Essential Knowledge for Front-End Engineers1514USD$15.1451USD$0.5141430011http://www.amazon.com/gp/offer-listing/0596529309%3FSubscriptionId%3D18V058HXZGNHEQCR4E02%26tag%3Dleartheworl-20%26linkCode%3Dxm2%26camp%3D2025%26creative%3D386001%26creativeASIN%3D0596529309NewwhOQqtbyy82My%2FXm1T0HDGqYDIMJfw%2BSMaZBTJ0sK78eNM1Dsjqyd12nXfOshCPMrmaOKHcsBMxKH00edCMsgvY0M3rsmUlvmBU7aL4yIbo%3D2225USD$22.25774USD$7.7426Usually ships in 24 hoursnow001http://www.amazon.com/reviews/iframe?akid=18V058HXZGNHEQCR4E02&alinkCode=xm2&asin=0596529309&atag=leartheworl-20&exp=2015-03-04T22%3A33%3A30Z&v=2&sig=Bnat050bUdUS%2FaGmpwhFFWY%2B2OpQbXr027F%2BTb5ALlo%3DtrueProduct Description<div><p>Want your web site to display more quickly? This book presents 14 specific rules that will cut 25% to 50% off response time when users request a page. Author Steve Souders, in his job as Chief Performance Yahoo!, collected these best practices while optimizing some of the most-visited pages on the Web. Even sites that had already been highly optimized, such as Yahoo! Search and the Yahoo! Front Page, were able to benefit from these surprisingly simple performance guidelines.</p><p>The rules in <em>High Performance Web Sites</em> explain how you can optimize the performance of the Ajax, CSS, JavaScript, Flash, and images that you've already built into your site -- adjustments that are critical for any rich web application. Other sources of information pay a lot of attention to tuning web servers, databases, and hardware, but the bulk of display time is taken up on the browser side and by the communication between server and browser. <em>High Performance Web Sites</em> covers every aspect of that process.</p><p>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:<br/></p><ul><li>Make Fewer HTTP Requests</li><li>Use a Content Delivery Network</li><li>Add an Expires Header</li><li>Gzip Components</li><li>Put Stylesheets at the Top</li><li>Put Scripts at the Bottom</li><li>Avoid CSS Expressions</li><li>Make JavaScript and CSS External</li><li>Reduce DNS Lookups</li><li>Minify JavaScript</li><li>Avoid Redirects</li><li>Remove Duplicates Scripts</li><li>Configure ETags</li><li>Make Ajax Cacheable</li></ul><p>If you're building pages for high traffic destinations and want to optimize the experience of users visiting your site, this book is indispensable.</p><p>"If everyone would implement just 20% of Steve's guidelines, the Web would be adramatically better place. Between this book and Steve's YSlow extension, there's reallyno excuse for having a sluggish web site anymore."</p><p>-Joe Hewitt, Developer of Firebug debugger and Mozilla's DOM Inspector</p><p>"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."</p><p>-Eric Lawrence, Developer of the Fiddler Web Debugger, Microsoft Corporation</p></div>0