Presentation is loading. Please wait.

Presentation is loading. Please wait.

Steve Souders Even Faster Web Sites Disclaimer: This content does not necessarily reflect.

There are copies: 2
Steve Souders Even Faster Web Sites Disclaimer: This content does not necessarily reflect.

Steve Souders Even Faster Web Sites Disclaimer: This content does not necessarily.

Similar presentations


Presentation on theme: "Steve Souders Even Faster Web Sites Disclaimer: This content does not necessarily reflect."— Presentation transcript:

1 Steve Souders souders@google.com http://stevesouders.com/docs/ebay-20090416.ppt Even Faster Web Sites Disclaimer: This content does not necessarily reflect the opinions of my employer.

2 17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache

3 time spent on the frontend Empty CachePrimed Cache www.aol.com97% www.ebay.com95%81% www.facebook.com95%81% www.google.com/search47%0% search.live.com/results67%0% www.msn.com98%94% www.myspace.com98% en.wikipedia.org/wiki94%91% www.yahoo.com97%96% www.youtube.com98%97% April 2008

4 The Performance Golden Rule 80-90% of the end-user response time is spent on the frontend. Start there. greater potential for improvement simpler proven to work

5 14 R ULES 1.M AKE FEWER HTTP REQUESTS 2.U SE A CDN 3.A DD AN E XPIRES HEADER 4.G ZIP COMPONENTS 5.P UT STYLESHEETS AT THE TOP 6.P UT SCRIPTS AT THE BOTTOM 7.A VOID CSS EXPRESSIONS 8.M AKE JS AND CSS EXTERNAL 9.R EDUCE DNS LOOKUPS 10.M INIFY JS 11.A VOID REDIRECTS 12.R EMOVE DUPLICATE SCRIPTS 13.C ONFIGURE ET AGS 14.M AKE AJAX CACHEABLE

6

7

8

9

10 Sept 2007

11 June 2009

12 Even Faster Web Sites Splitting the initial payload Loading scripts without blocking Coupling asynchronous scripts Positioning inline scripts Sharding dominant domains Flushing the document early Using iframes sparingly Simplifying CSS Selectors Understanding Ajax performance...Doug Crockford Creating responsive web apps......Ben Galbraith, Dion Almaer Writing efficient JavaScript...........Nicholas Zakas Scaling with Comet......................Dylan Schiemann Going beyond gzipping...............Tony Gentilcore Optimizing images.....................Stoyan Stefanov, Nicole Sullivan

13 AOL eBay Facebook MySpace Wikipedia Yahoo! Why focus on JavaScript? YouTube

14 scripts block blocks parallel downloads and rendering What's "Cuzillion"? http://stevesouders.com/cuzillion/?ex=10008

15 a tool for quickly constructing web pages to see how components interact Open Source http://stevesouders.com/cuzillion/ Cuzillion 'cuz there are a zillion pages to check

16 JavaScript Functions Executed before onload www.aol.com115K30% www.ebay.com183K44% www.facebook.com1088K 9% www.google.com/search15K45% search.live.com/results17K24% www.msn.com131K31% www.myspace.com297K18% en.wikipedia.org/wiki114K32% www.yahoo.com321K13% www.youtube.com240K18% 26% avg 252K avg initial payload and execution

17 Splitting the initial payload split your JavaScript between what's needed to render the page and everything else load "everything else" after the page is rendered separate manually (Firebug); tools needed to automate this (Doloto from Microsoft) load scripts without blocking – how?

18 MSN Scripts and other resources downloaded in parallel! How? Secret sauce?! var p= g.getElementsByTagName("HEAD")[0]; var c=g.createElement("script"); c.type="text/javascript"; c.onreadystatechange=n; c.onerror=c.onload=k; c.src=e; p.appendChild(c) MSN.com: parallel scripts

19 Loading Scripts Without Blocking XHR Eval XHR Injection Script in Iframe Script DOM Element Script Defer document.write Script Tag

20 XHR Eval script must have same domain as main page must refactor script var xhrObj = getXHRObject(); xhrObj.onreadystatechange = function() { if ( xhrObj.readyState != 4 ) return; eval(xhrObj.responseText); }; xhrObj.open('GET', 'A.js', true); xhrObj.send(''); http://stevesouders.com/cuzillion/?ex=10009

21 XHR Injection var xhrObj = getXHRObject(); xhrObj.onreadystatechange = function() { if ( xhrObj.readyState != 4 ) return; var se=document.createElement('script'); document.getElementsByTagName('head') [0].appendChild(se); se.text = xhrObj.responseText; }; xhrObj.open('GET', 'A.js', true); xhrObj.send(''); script must have same domain as main page http://stevesouders.com/cuzillion/?ex=10015

22 Script in Iframe

';
Ads by Google