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

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

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

Sept 2007

June 2009

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

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

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

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

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

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?

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

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

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

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

Script in Iframe <iframe src='A.html' width=0 height=0 frameborder=0 id=frame1> iframe must have same domain as main page must refactor script: // access iframe from main page window.frames[0].createNewDiv(); // access main page from iframe parent.document.createElement('div');

Script DOM Element var se = document.createElement('script'); se.src = ' document.getElementsByTagName('head') [0].appendChild(se); script and main page domains can differ no need to refactor JavaScript

only supported in IE (just landed in FF 3.1) script and main page domains can differ no need to refactor JavaScript Script Defer

document.write(" "); parallelization only works in IE parallel downloads for scripts, nothing else all document.write s must be in same script block document.write Script Tag

browser busy indicators

status bar progress bar logocursor block render block onload normal Script Src FFIE,FF FFIE,FF XHR Eval no XHR Injection no Script in Iframe IE,FFFFIE,FFFFnoIE,FF Script DOM Element FF noFF Script Defer FF IE,FF document.write Script Tag FFIE,FF FFIE,FF good to show busy indicators when the user needs feedback bad when downloading in the background browser busy indicators

Ensure scripts execute in order: necessary when scripts have dependencies IE: FF: Avoid scripts executing in order: faster – first script back is executed immediately ensure/avoid ordered execution

|| down- loads domains can differ existing scripts browser busy ensures order size (bytes) normal Script Src noyes IE,FF ~50 XHR Eval IE,FFno ~500 XHR Injection IE,FFnoyesno ~500 Script in Iframe IE,FFno IE,FFno~50 Script DOM Element IE,FFyes FF ~200 Script Defer IEyes IE,FFIE~50 document.write Script Tag IE * yes IE,FFIE~100 * Only other document.write scripts are downloaded in parallel (in the same script block). Load Scripts Without Blocking

XHR Eval XHR Injection Script in iframe Script DOM Element Script Defer Script DOM Element Script Defer Script DOM Element Script DOM Element (FF) Script Defer (IE) XHR Eval XHR Injection Script in iframe Script DOM Element (IE) XHR Injection XHR Eval Script DOM Element (IE) Managed XHR Injection Managed XHR Eval Script DOM Element Managed XHR Injection Managed XHR Eval Script DOM Element (FF) Script Defer (IE) Managed XHR Eval Managed XHR Injection Script DOM Element (FF) Script Defer (IE) Managed XHR Eval Managed XHR Injection different domains same domains no order preserve orderno order no busy show busy no busy preserve order and the winner is...

Loading Scripts Without Blocking don't let scripts block other downloads you can still control execution order, busy indicators, and onload event What about inline scripts?

browsers download stylesheets in parallel with other resources that follow......unless the stylesheet is followed by an inline script best to move inline scripts above stylesheets or below other resources use Link, bad: stylesheet followed by inline script

eBay MSN MySpace Wikipedia mispositioned inline scripts

Positioning Inline Scripts remember inline scripts carry a cost avoid long-executing inline scripts don't put inline scripts between stylesheets and other resources

going beyond gzipping Tony Gentilcore, Chapter 9, Even Faster Web Sites Rule 4: Gzip Components from HPWS HTTP/1.1 request: Accept-Encoding: gzip,deflate response: Content-Encoding: gzip Apache 2.x: AddOutputFilterByType DEFLATE text/html text/css application/x- javascript

benefits of gzipping 70% reduction in transfer size not just for HTML!! all text: JavaScript, CSS, XML, JSON not binary: images, PDF, Flash

so what's the issue? 15% of users get uncompressed responses surprize! why? old browsers? no Netscape Navigator 3 – 0.0% Netscape Communicator 4 – 0.1% Opera 3.5 – 0.0% IE <3 – 0.01% clue: most prevalent in the Middle East

who's stripping? proxy, A-V softwareAccept-Encoding header Ad Muncherstripped CA Internet Security Suite Accept-EncodXng: gzip, deflate CEQURUXstripped Citrix Application Firewallstripped ISA 2006stripped McAfee Internet Security 6.0 XXXXXXXXXXXXXXX: Norton Internet Security : Novell iChain 2.3stripped Novell Client Firewallstripped WebWasherstripped ZoneAlarm Pro 5.5 XXXXXXXXXXXXXXX: XXXXXXXXXXXXX proxies and anti-virus software disable compression for easier response filtering

what to do don't assume compression go the extra mile to reduce response size event delegation (-5%)* relative URLs (-3%) minify HTML, JavaScript, and CSS (-4%) use CSS rules over inline styles (-1%) alias long JavaScript symbol names (??) Thanks, Tony! see Tony's chapter in Even Faster Web Sites * Results of applying each technique to the Alexa top ten

JS after CSS (p 77) HTTP/1.0 (p 78) sprite on home page (hpws p 130) Expires header (p 131) FIXED on en.wiki gzip stylesheets – FIXED png optimization – FIXED querystring in static resources main.css?233xz vs. main.css?233yz ??? combine 6 scripts, 9 stylesheets sprite – 8 bg images no Expires on upload.wikimedia.org move 6 scripts lower minify JS – 36K out of 100K (36%) 50% CSS unused (40K out of 80K) flushing! http/1.0! PNGs optimized! put script block above stylesheets load scripts in parallel 81% of JS unused by onload c ombine 6 scripts, 9 stylesheets sprite – 7 bg images no Expires on upload.wikimedia.org move 6 scripts lower minify JS – 36K out of 100K (36%) 50% CSS unused (40K out of 80K) flushing! http/1.0! optimize some images (8%, 48K/624K), put script block above stylesheets load scripts in parallel 81% of JS unused by onload addButton – loads images after onload ?!?! asldjf

JS after CSS (p 77) HTTP/1.0 (p 78) sprite on home page (hpws p 130) Expires header (p 131) FIXED on en.wiki gzip stylesheets – FIXED png optimization – FIXED querystring in static resources main.css?233xz vs. main.css?233yz ??? addButton – loads images after onload ?!?! combine 9 scripts, 9 stylesheets no Expires on upload.wikimedia.org move 9 scripts lower minify JS – 44K out of 126K (35%) 50% CSS unused (40K out of 80K) flushing! http/1.0! PNGs optimized! put script block above stylesheets load scripts in parallel 76% of JS unused by onload asldjf

White Dwarf

White Dwarf add Expires to upload.w.o don't use querystring: ?233yz add Expires to upload.w.o don't use querystring: ?233yz move inline script combine scripts minify (36K, 36%) move lower load async 81% deferrable combine scripts minify (36K, 36%) move lower load async 81% deferrable combine stylesheets remove unused CSS (50%) sprite 8 bg images combine stylesheets remove unused CSS (50%) sprite 8 bg images

add Expires to upload.w.o don't use querystring: ?233yz don't change URL: 233yz v 233zz add Expires to upload.w.o don't use querystring: ?233yz don't change URL: 233yz v 233zz move inline script combine scripts minify (44K, 35%) move lower load async 76% deferrable combine scripts minify (44K, 35%) move lower load async 76% deferrable combine stylesheets remove unused CSS (50%) combine stylesheets remove unused CSS (50%)

focus on the frontend run YSlow ( and Page Speed! ( ) speed matters takeaways

Bing: Yahoo: Google: AOL: Shopzilla: ms -4.3% revenue/user ms -5-9% full-page traffic ms -0.59% searches/user 1 fastest users +50% page views ms +7-12% revenue 4 impact on revenue

hardware – reduced load Shopzilla – 50% fewer servers bandwidth – reduced response size cost savings

if you want better user experience more revenue reduced operating expenses the strategy is clear Even Faster Web Sites

Steve Souders