Presentation is loading. Please wait.

Presentation is loading. Please wait.

Disclaimer: This content does not necessarily reflect the opinions of my employer.

Similar presentations


Presentation on theme: "Disclaimer: This content does not necessarily reflect the opinions of my employer."— Presentation transcript:

1 Disclaimer: This content does not necessarily reflect the opinions of my employer.

2

3

4

5 GMail Mobile: reducing.html SproutCore: Google, Bing biz metrics: Yahoo! biz metrics: Shopzilla biz metrics: Netflix outbound traffic: Google, Bing charts: up-websites-improves-online-business Aptimize WAX: speeding-up-sharepoint-microsoft-com.aspx Strangeloop Networks: speeding-up-websites-improves-online-business SproutCore: app-run-faster HTTP Archive Format: performance/

6

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

8 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

9 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

10

11 Google Mail

12 Google Docs

13 AOL

14 Twitter

15 ESPN

16 Best Buy

17 IKEA

18 CNN

19

20 Search

21 WebPagetest.org VA, UK, NZ IE7, IE8 Dial, DSL, FIOS empty, empty & primed quad core Pat Meenan (AOL)

22 News

23 Shopping

24 Sports

25 Progressive Enhancement deliver HTML defer JS avoid DOM decorate later

26 Progressive Enhancement  Progressive Rendering

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

28 scripts block blocks parallel downloads and rendering 7 secs: IE 8, FF 3.5, Chr 3, Saf 4 9 secs: IE 6-7, FF 3.0, Chr 1, Op 9-10, Saf 3

29 JavaScript Functions Executed before onload 9% search.live.com/results17K24% en.wikipedia.org/wiki114K32% 26% avg 252K avg initial payload and execution

30 splitting the initial payload split your JavaScript between what's needed to render the page and everything else defer "everything else" split manually (Page Speed), automatically (Microsoft Doloto) load scripts without blocking – how?

31 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

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

33 XHR Eval script & page must be same domain massage script? var xhrObj = getXHRObject(); xhrObj.onreadystatechange = function() { if ( xhrObj.readyState != 4 ) return; eval(xhrObj.responseText); }; xhrObj.open('GET', 'A.js', true); xhrObj.send('');

34 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

35 Script in Iframe

';
Ads by Google