SXSW 2009: Even Faster Web Sites

Saturday, March 14th, 2009
Steve Soudersm, Google and YSlow

Waterfall Charts: These types of charts show the browser’s request times for any types of HTTP requests, when they occur, and how long they take to download by your browser.

“Performance Golden Rule:” 14 Rules:

  • Make Fewer HTTP Requests
  • Use a CDN
  • Add an Expires Header
  • Gzup Components
  • Put stylesheets at the top
  • Put scripts at the bottom
  • Avoid CSS Expressions
  • Make JS and CSS External
  • Reduce DNS Lookups
  • Minify JS
  • Avoid Redirects
  • Remove Duplicate Scripts
  • Configure Etags
  • Make Ajax Cacheable

Souders did a performance video tutorial for Sanford. O’Reilly is doing a speed optimized help. Souders wrote a couple books for O’Reilly. His new upcoming books are “Even Faster Websites.” This new book has the following 8 chapters:

  • Split the initial payload
  • Load scripts without blocking
  • Couple asynchronous scripts
  • Don’t scatter inline scripts
  • Split the dominate domain
  • Flush the document cleaqrly
  • Use iframes sparingly
  • Simplyfy CSS Selectors

Some other books:

  • Ajax performance (Doug Crockford)
  • Writing efficient JavaScript (Nicholas Zakas)
  • Creating responsive web apps (Ben Galbraity, Dion Almaer)
  • Comet (Dylan Schiemann)
  • Beyond Gzipping (Tony Gentilcore)
  • Optimize Images (Stoyan Stefanov, Nicole Sulivan)

Why focus on JavaScript?
Javascript is 10x more painful to put into your website than any other asset. JavaScript, even though it is not a large number of resources, the number of JavaScript requests is small the actual load time is very big. When the browser starts downloading a script block it will stop parsing everything below it assuming the the JavaScript will impact something below.

Cuzillion: http://stevesouders.com/cuzillion/?ex-10008

Since Internet Explorer only allows two downloads per domain at any one time. MSN gets around this by doing “domain charting” which plots multiple JavaScript files on different servers.

Asynchronous Script Loading

  • XHR Eval: JavaScript call, and then eval it when you get it in. This has to be the same domain.
  • XHR Injection: Same thing as above, but create a script element and set its text. More optimized than above. This has to be the same domain.
  • Script in Iframe: Name the .js file as a .html file, and put it in an iframe. This will cause it to be loaded asynchronous.
  • Script DOM Element: Create a script element, and set it to the head. Souders thinks this is the best one.
  • Script Defer: Works in IE as far as 3 months ago, and in FireFox 3.1+.
  • Document.write Script Tag

Coupling Techniques

  • Hardcoded callback
  • window onload
  • timer: load the external script, and check if the external variables are available.
  • degrading script tags: very elegant, but Souders isn’t going to go into it.
  • script onload

Script onload:
Although there are ways to load things asynchronously you still need to be concerned about code dependincies. If one script comes in faster than another, then that other script cannot use the first one’s data yet.
Google Analytics does a document.write, which kills any JavaScript below its call. There is a 400ms gap that if someone can quickly click through your page then it’ll never track it. If you couple this, then you can remove this 400ms timer.

When creating source code, you should have your Stylesheet followed by your JavaScript script tag. This will cause both the CSS and Javascript to run at the same time. However, if you put an inline script tag right after this stylesheet then it will execute the inline script before loading in the CSS. This will not work in Firefox 2, but should work in every other browser.

In an iframe, if you don’t set the src attribute in the actual tag, but instead have javascript do it within an inline style, your javascript will cause the iframe to execute prior to the whole page bebing loaded. Stylesheets will sometimems cause iframes to load strange. This is a browser to browser dependencies. Even though IE limits two connections, having your code in an iframe will not prevent this because IE limits this over all windows/scripts.

Flush the document early. This will cause PHP to flush and push the HTML early which may contain the stylesheets and script tags. This will cause the browser to start downloading this information early than if it waited for the entire page to return. Some gotchas:

  • PHP out_buffering – ob_flush()
  • Transaction encoding: chunked
  • gzip – Cache’s DeflateBufferSize before 2.2.8
  • proxi or anti-virus software can cause flushing not to work
  • browsers limits: Safari (1K), Chrome (2K)

Takeaways:

  • Focusing on the frontend is what he feels is his best input.
  • run YSlow
  • speed impacts revinue.

Speed Impacts Revinue:

  • Google 500ms resulted in -20% in people leaving the site
  • Yahoo 400ms resulted in 4-9% in people leaving the site
  • Amazon 100ms resulted in -1% of sales.

email – souders(at)google.com
personal website – http://stevesouders.com
presentation – http://stevesouders.com/docs/sxsw-20090314.ppt

Posted in Geeky, SXSW 2009.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>