SXSW 2009: Even Faster Web Sites
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)
- Creating responsive web apps (Ben Galbraity, Dion Almaer)
- Comet (Dylan Schiemann)
- Beyond Gzipping (Tony Gentilcore)
- Optimize Images (Stoyan Stefanov, Nicole Sulivan)
Asynchronous Script Loading
- 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
- 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
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.
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)
- 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.