Steve works at Google on web performance and open source initiatives. To begin his talk, Steve is running YSlow in "autorun" mode. This runs YSlow Performance tests on the top 100 sites according to Alexa. Before Google, Steve was at Yahoo for 7 years. You can download Steve's slides from his site (don't ask me where).
iGoogle with an empty cache: 9% of the time is spent getting the HTML document. The % of time of what a webserver does is a pretty small percentage of the overall picture. If the cache is primed, the time goes up to 17% of the time.
80-90% of the end-user response time is spent on the frontend. Start there.
There's a greater potential of improvement on the frontend. If you improve the backend performance by 50%, chances are the end-user only sees a 5% improvement.
The 14 Rules are encapsulated in the YSlow plugin. At OSCON last year, Yahoo released YSlow. 500,000 downloads since it was released. Following the release of YSlow, Steve wrote High Performance Web Sites.
High Performance Web Sites, Vol 2. The 3 most important rules are:
- Split the initial payload
- Load scripts without blocking
- Don't scatter inline scripts
Any content below a <script> is blocked from rendering - even if it's already cached in the browser. Cuzillion is an open source project that Steve is releasing that allows you to add components to a page and test their performance.
MSN.com solves the script blocking problem by using JS DOM to allow for parallel downloading. There's 6 techniques for doing this:
- XHR Eval (must have same domain as page)
- XHR Injection (same domain)
- Script in iFrame (same domain)
- Script DOM Element (domains can differ)
- Script Defer (only supported in IE, domains can differ)
- document.write (not recommended, parallelization only works in IE)
Long executing inline scripts block rendering and downloads. If you know you're going to have scripts like this, you can solve it with a couple workarounds:
- Initiate execution with setTimeout(>250 for Firefox)
- Use defer attribute for IE
In Firefox 2, stylesheets block parallel downloads just like scripts. IE doesn't. However, IE will block when you have a stylesheet followed by an inline script. To solve, it's best to move line scripts above stylesheets or below other resources. use <link>, not @import.
- HTTPWatch for Firefox (not public yet, not free).
- Firebug Light 1.2 (can be used with IE or Opera).
- Mozilla is Firebuggin' (Mozilla is dedicating 3 people to work on Firebug).