Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "17% 83% iGoogle, primed cache the importance of frontend performance 9%91% iGoogle, empty cache."— Presentation transcript:

1

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

3 Empty CachePrimed Cache search.live.com/results67%0% en.wikipedia.org/wiki94%91% April 2008 time spent on the frontend

4 80-90% of the end-user response time is spent on the frontend. Start there. greater potential for improvement simpler proven to work the performance golden rule

5

6

7

8 Sept 2007

9 June 2009

10 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

11 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

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

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

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

15 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 (Page Speed); tools needed to automate this (Doloto) load scripts without blocking – how?

16 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

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

18 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('');

19 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

20 Script in Iframe

';
Ads by Google