SlideShare a Scribd company logo
1 of 69
Steve Souders [email_address] http://stevesouders.com/docs/sxsw-20090314.ppt Even Faster Web Sites Disclaimer:  This content does not necessarily reflect the opinions of my employer.
the importance of frontend performance 17% 83% iGoogle, primed cache 9% 91% iGoogle, empty cache
time spent on the frontend April 2008 Empty Cache Primed Cache www.aol.com 97% 97% www.ebay.com 95% 81% www.facebook.com 95% 81% www.google.com/search 47% 0% search.live.com/results 67% 0% www.msn.com 98% 94% www.myspace.com 98% 98% en.wikipedia.org/wiki 94% 91% www.yahoo.com 97% 96% www.youtube.com 98% 97%
14 RULES ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
 
 
 
25% discount code: "ssouders25"
Sept 2007
June 2009
Even Faster Websites Split the initial payload Load scripts without blocking Couple asynchronous scripts Don't scatter inline scripts Split the dominant domain Flush the document early Use iframes sparingly Simplify CSS Selectors Ajax performance (Doug Crockford) Writing efficient JavaScript (Nicholas Zakas) Creating responsive web apps (Ben Galbraith, Dion Almaer) Comet (Dylan Schiemann) Beyond Gzipping (Tony Gentilcore) Optimize Images (Stoyan Stefanov, Nicole Sullivan)
why focus on JavaScript? AOL eBay Facebook MySpace Wikipedia Yahoo! YouTube
scripts block <script src=&quot;A.js&quot;>  blocks parallel downloads and rendering http://stevesouders.com/cuzillion/?ex=10008
MSN.com: parallel scripts Scripts and other resources downloaded in parallel! How? Secret sauce?! var p= g.getElementsByTagName(&quot;HEAD&quot;)[0]; var c=g.createElement(&quot;script&quot;); c.type=&quot;text/javascript&quot;; c.onreadystatechange=n; c.onerror=c.onload=k; c.src=e; p.appendChild(c) MSN
asynchronous script loading 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(''); http://stevesouders.com/cuzillion/?ex=10009
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
Script in Iframe <iframe  src='A.html'  width=0 height=0  frameborder=0 id=frame1></iframe>  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],http://stevesouders.com/cuzillion/?ex=10012
Script DOM Element var se = document.createElement('script'); se.src = 'http://anydomain.com/A.js'; document.getElementsByTagName('head')[0] .appendChild(se);  script and main page domains can differ no need to refactor JavaScript http://stevesouders.com/cuzillion/?ex=10010
Script Defer <script  defer  src='A.js'></script> only supported in IE (just landed in FF 3.1) script and main page domains can differ no need to refactor JavaScript http://stevesouders.com/cuzillion/?ex=10013
document.write  Script Tag document.write (&quot;<scr&quot; +  &quot;ipt type='text/javascript' src='A.js'>&quot; + &quot;</scr&quot; + &quot;ipt>&quot;); parallelization only works in IE parallel downloads for scripts, nothing else all  document.write s must be in same script block http://stevesouders.com/cuzillion/?ex=10014
browser busy indicators
browser busy indicators good  to show busy indicators when the user needs feedback bad  when downloading in the background
ensure/avoid ordered execution ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
load scripts without blocking * Only other document.write scripts are downloaded in parallel (in the same script block).
and the winner is... 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 order no order no busy show busy show busy no busy preserve order
load scripts without blocking ,[object Object],[object Object],[object Object]
 
synchronous JS example: menu.js ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
asynchronous JS example: menu.js ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],script DOM element approach
before after
load scripts without blocking * Only other document.write scripts are downloaded in parallel (in the same script block). !IE
asynchronous scripts wrap-up ,[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object]
baseline coupling results (not good) *  Scripts download in parallel regardless of the Defer attribute. need a way to load scripts asynchronously AND preserve order
coupling techniques ,[object Object],[object Object],[object Object],[object Object],[object Object]
technique 1: hardcoded callback ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
technique 2: window onload ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
technique 3: timer ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
John Resig's degrading script tags ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],at the end of menu-degrading.js: var scripts = document.getElementsByTagName(&quot;script&quot;); var cntr = scripts.length; while ( cntr ) { var curScript = scripts[cntr-1]; if (curScript.src.indexOf(&quot;menu-degrading.js&quot;) != -1) { eval( curScript.innerHTML ); break; } cntr--; } http://ejohn.org/blog/degrading-script-tags/ cleaner clearer safer – inlined code not called if script fails no browser supports it
technique 4: degrading script tags ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
technique 5: script onload ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
multiple script example: menutier.js ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
technique 1: managed XHR ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],before after
EFWS.loadScriptXhrInjection ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],process queue (next slide) or... eval now, call callback save response to queue add to queue (if bOrder)
EFWS.injectScripts ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],preserves external script order non-blocking works in all browsers couples with inlined code works with scripts across domains ready for this script, eval and call callback bail – need to wait to preserve order if not yet injected
technique 2: DOM Element and Doc Write Firefox & Opera – use Script DOM Element IE – use  document.write  Script Tag Safari, Chrome – no benefit; rely on Safari 4 and Chrome 2
EFWS.loadScripts ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
multiple scripts with dependencies ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
asynchronous scripts wrap-up
case study: Google Analytics ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],1 http://www.google.com/support/analytics/bin/answer.py?hl=en&answer=55488
case study: dojox.analytics.Urchin 1 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],1 http://docs.dojocampus.org/dojox/analytics/Urchin
asynchronous loading & coupling ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
bad: stylesheet followed by inline script ,[object Object],[object Object],[object Object],[object Object],[object Object]
don't scatter inline scripts eBay MSN MySpace Wikipedia
iframes:    most expensive DOM element ,[object Object],[object Object],1 IE 6, 7, 8; FF 2, 3.0, 3.1b2; Safari 3.2, 4; Opera 9.63, 10; Chrome 1.0, 2.0
iframes block onload ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
scripts block iframe ,[object Object],IE Firefox Safari Chrome Opera script script script
stylesheets block iframe (IE, FF) ,[object Object],IE Firefox Safari Chrome Opera stylesheet stylesheet stylesheet
stylesheets after iframe still block (FF) ,[object Object],IE Firefox Safari Chrome Opera stylesheet stylesheet stylesheet
iframes: no free connections ,[object Object],iframe parent
flush the document early ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],call PHP's  flush() html image image script html image image script
flushing and domain blocking ,[object Object],case study: Google search blocked by HTML document different domains html image image script html image image script google image image script image 204
takeaways ,[object Object],[object Object],[object Object],[object Object]
impact on revenue ,[object Object],[object Object],[object Object],1  http://home.blarg.net/~glinden/StanfordDataMining.2006-11-29.ppt 2  http://www.slideshare.net/stoyan/yslow-20-presentation +500 ms    -20% traffic 1 +400 ms    -5-9% full-page traffic 2 +100 ms    -1% sales 1
cost savings ,[object Object],[object Object],http://billwscott.com/share/presentations/2008/stanford/HPWP-RealWorld.pdf
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Steve Souders [email_address] http://stevesouders.com/docs/sxsw-20090314.ppt

More Related Content

What's hot

An introduction to PhantomJS: A headless browser for automation test.
An introduction to PhantomJS: A headless browser for automation test.An introduction to PhantomJS: A headless browser for automation test.
An introduction to PhantomJS: A headless browser for automation test.BugRaptors
 
Owasp Wasc App Sec2007 San Jose Finding Vulnsin Flash Apps
Owasp Wasc App Sec2007 San Jose Finding Vulnsin Flash AppsOwasp Wasc App Sec2007 San Jose Finding Vulnsin Flash Apps
Owasp Wasc App Sec2007 San Jose Finding Vulnsin Flash Appsguestb0af15
 
Detecting headless browsers
Detecting headless browsersDetecting headless browsers
Detecting headless browsersSergey Shekyan
 
Building Realtime Apps with Ember.js and WebSockets
Building Realtime Apps with Ember.js and WebSocketsBuilding Realtime Apps with Ember.js and WebSockets
Building Realtime Apps with Ember.js and WebSocketsBen Limmer
 
A few good JavaScript development tools
A few good JavaScript development toolsA few good JavaScript development tools
A few good JavaScript development toolsSimon Kim
 
Client-side JavaScript Vulnerabilities
Client-side JavaScript VulnerabilitiesClient-side JavaScript Vulnerabilities
Client-side JavaScript VulnerabilitiesOry Segal
 
Like a Genie from a Lamp: Headless JavaScript Unit Testing with Jasmine and P...
Like a Genie from a Lamp: Headless JavaScript Unit Testing with Jasmine and P...Like a Genie from a Lamp: Headless JavaScript Unit Testing with Jasmine and P...
Like a Genie from a Lamp: Headless JavaScript Unit Testing with Jasmine and P...Rob Friesel
 
What's new in Rails 2?
What's new in Rails 2?What's new in Rails 2?
What's new in Rails 2?brynary
 
"今" 使えるJavaScriptのトレンド
"今" 使えるJavaScriptのトレンド"今" 使えるJavaScriptのトレンド
"今" 使えるJavaScriptのトレンドHayato Mizuno
 
Flash Security, OWASP Chennai
Flash Security, OWASP ChennaiFlash Security, OWASP Chennai
Flash Security, OWASP Chennailavakumark
 
Rails Presentation (Anton Dmitriyev)
Rails Presentation (Anton Dmitriyev)Rails Presentation (Anton Dmitriyev)
Rails Presentation (Anton Dmitriyev)True-Vision
 
Uazaa uma-farsa-parte 2
Uazaa uma-farsa-parte 2Uazaa uma-farsa-parte 2
Uazaa uma-farsa-parte 2devninjabr
 

What's hot (18)

An introduction to PhantomJS: A headless browser for automation test.
An introduction to PhantomJS: A headless browser for automation test.An introduction to PhantomJS: A headless browser for automation test.
An introduction to PhantomJS: A headless browser for automation test.
 
PhpSpec extension points
PhpSpec extension pointsPhpSpec extension points
PhpSpec extension points
 
Palestra VCR
Palestra VCRPalestra VCR
Palestra VCR
 
Owasp Wasc App Sec2007 San Jose Finding Vulnsin Flash Apps
Owasp Wasc App Sec2007 San Jose Finding Vulnsin Flash AppsOwasp Wasc App Sec2007 San Jose Finding Vulnsin Flash Apps
Owasp Wasc App Sec2007 San Jose Finding Vulnsin Flash Apps
 
Thomas Fuchs Presentation
Thomas Fuchs PresentationThomas Fuchs Presentation
Thomas Fuchs Presentation
 
Detecting headless browsers
Detecting headless browsersDetecting headless browsers
Detecting headless browsers
 
Building Realtime Apps with Ember.js and WebSockets
Building Realtime Apps with Ember.js and WebSocketsBuilding Realtime Apps with Ember.js and WebSockets
Building Realtime Apps with Ember.js and WebSockets
 
A few good JavaScript development tools
A few good JavaScript development toolsA few good JavaScript development tools
A few good JavaScript development tools
 
Client-side JavaScript Vulnerabilities
Client-side JavaScript VulnerabilitiesClient-side JavaScript Vulnerabilities
Client-side JavaScript Vulnerabilities
 
Like a Genie from a Lamp: Headless JavaScript Unit Testing with Jasmine and P...
Like a Genie from a Lamp: Headless JavaScript Unit Testing with Jasmine and P...Like a Genie from a Lamp: Headless JavaScript Unit Testing with Jasmine and P...
Like a Genie from a Lamp: Headless JavaScript Unit Testing with Jasmine and P...
 
Zombiejs
ZombiejsZombiejs
Zombiejs
 
What's new in Rails 2?
What's new in Rails 2?What's new in Rails 2?
What's new in Rails 2?
 
"今" 使えるJavaScriptのトレンド
"今" 使えるJavaScriptのトレンド"今" 使えるJavaScriptのトレンド
"今" 使えるJavaScriptのトレンド
 
GAEO
GAEOGAEO
GAEO
 
Flash Security, OWASP Chennai
Flash Security, OWASP ChennaiFlash Security, OWASP Chennai
Flash Security, OWASP Chennai
 
Rails Presentation (Anton Dmitriyev)
Rails Presentation (Anton Dmitriyev)Rails Presentation (Anton Dmitriyev)
Rails Presentation (Anton Dmitriyev)
 
Uazaa uma-farsa-parte 2
Uazaa uma-farsa-parte 2Uazaa uma-farsa-parte 2
Uazaa uma-farsa-parte 2
 
Cache is King
Cache is KingCache is King
Cache is King
 

Viewers also liked

High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)Steve Souders
 
Delightful UX
Delightful UXDelightful UX
Delightful UXFDConf
 
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentationsUX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentationsUX Alive Conference
 
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly...
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly...WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly...
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly...nois3
 
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)Steve Souders
 
Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Jason Grigsby
 
Nordic infrastructure Conference 2017 - SQL Server on Linux Overview
Nordic infrastructure Conference 2017 - SQL Server on Linux OverviewNordic infrastructure Conference 2017 - SQL Server on Linux Overview
Nordic infrastructure Conference 2017 - SQL Server on Linux OverviewTravis Wright
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesVitaly Friedman
 

Viewers also liked (12)

High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)High Performance Mobile (SF/SV Web Perf)
High Performance Mobile (SF/SV Web Perf)
 
Delightful UX
Delightful UXDelightful UX
Delightful UX
 
Responsive design
Responsive designResponsive design
Responsive design
 
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentationsUX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations
UX Alive Conference speaker is Vitaly Friedman (Smashing Magazine) presentations
 
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly...
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly...WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly...
WUD Rome 2014 - Delightful UX – Real-Life Responsive Web Design (EN) - Vitaly...
 
High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)High Performance HTML5 (SF HTML5 UG)
High Performance HTML5 (SF HTML5 UG)
 
Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013
 
Web Design Trends 2011
Web Design Trends 2011Web Design Trends 2011
Web Design Trends 2011
 
Nordic infrastructure Conference 2017 - SQL Server on Linux Overview
Nordic infrastructure Conference 2017 - SQL Server on Linux OverviewNordic infrastructure Conference 2017 - SQL Server on Linux Overview
Nordic infrastructure Conference 2017 - SQL Server on Linux Overview
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
AINL 2016: Eyecioglu
AINL 2016: EyeciogluAINL 2016: Eyecioglu
AINL 2016: Eyecioglu
 
AINL 2016: Khudobakhshov
AINL 2016: KhudobakhshovAINL 2016: Khudobakhshov
AINL 2016: Khudobakhshov
 

Similar to SXSW: Even Faster Web Sites

Even Faster Web Sites at The Ajax Experience
Even Faster Web Sites at The Ajax ExperienceEven Faster Web Sites at The Ajax Experience
Even Faster Web Sites at The Ajax ExperienceSteve Souders
 
Web 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web SitesWeb 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web SitesSteve Souders
 
Teflon - Anti Stick for the browser attack surface
Teflon - Anti Stick for the browser attack surfaceTeflon - Anti Stick for the browser attack surface
Teflon - Anti Stick for the browser attack surfaceSaumil Shah
 
Javascript
JavascriptJavascript
JavascriptSushma M
 
HTML5: huh, what is it good for?
HTML5: huh, what is it good for?HTML5: huh, what is it good for?
HTML5: huh, what is it good for?Remy Sharp
 
Rey Bango - HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shimsRey Bango -  HTML5: polyfills and shims
Rey Bango - HTML5: polyfills and shimsStarTech Conference
 
Aspnet2 Overview
Aspnet2 OverviewAspnet2 Overview
Aspnet2 Overviewajitbergi
 
Compatibility Detector Tool of Chrome extensions
Compatibility Detector Tool of Chrome extensionsCompatibility Detector Tool of Chrome extensions
Compatibility Detector Tool of Chrome extensionsKai Cui
 
Ajax to the Moon
Ajax to the MoonAjax to the Moon
Ajax to the Moondavejohnson
 
10 Things You're Not Doing [IBM Lotus Notes Domino Application Development]
10 Things You're Not Doing [IBM Lotus Notes Domino Application Development]10 Things You're Not Doing [IBM Lotus Notes Domino Application Development]
10 Things You're Not Doing [IBM Lotus Notes Domino Application Development]Chris Toohey
 
Implementing Comet using PHP
Implementing Comet using PHPImplementing Comet using PHP
Implementing Comet using PHPKing Foo
 
High Performance JavaScript 2011
High Performance JavaScript 2011High Performance JavaScript 2011
High Performance JavaScript 2011Nicholas Zakas
 
Lecture 5 - Comm Lab: Web @ ITP
Lecture 5 - Comm Lab: Web @ ITPLecture 5 - Comm Lab: Web @ ITP
Lecture 5 - Comm Lab: Web @ ITPyucefmerhi
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)Nicholas Zakas
 

Similar to SXSW: Even Faster Web Sites (20)

Even Faster Web Sites at The Ajax Experience
Even Faster Web Sites at The Ajax ExperienceEven Faster Web Sites at The Ajax Experience
Even Faster Web Sites at The Ajax Experience
 
Web 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web SitesWeb 2.0 Expo: Even Faster Web Sites
Web 2.0 Expo: Even Faster Web Sites
 
Oscon 20080724
Oscon 20080724Oscon 20080724
Oscon 20080724
 
Teflon - Anti Stick for the browser attack surface
Teflon - Anti Stick for the browser attack surfaceTeflon - Anti Stick for the browser attack surface
Teflon - Anti Stick for the browser attack surface
 
Sanjeev ghai 12
Sanjeev ghai 12Sanjeev ghai 12
Sanjeev ghai 12
 
Javascript
JavascriptJavascript
Javascript
 
HTML5: huh, what is it good for?
HTML5: huh, what is it good for?HTML5: huh, what is it good for?
HTML5: huh, what is it good for?
 
Rey Bango - HTML5: polyfills and shims
Rey Bango -  HTML5: polyfills and shimsRey Bango -  HTML5: polyfills and shims
Rey Bango - HTML5: polyfills and shims
 
Integration Testing in Python
Integration Testing in PythonIntegration Testing in Python
Integration Testing in Python
 
Aspnet2 Overview
Aspnet2 OverviewAspnet2 Overview
Aspnet2 Overview
 
Compatibility Detector Tool of Chrome extensions
Compatibility Detector Tool of Chrome extensionsCompatibility Detector Tool of Chrome extensions
Compatibility Detector Tool of Chrome extensions
 
Ajax to the Moon
Ajax to the MoonAjax to the Moon
Ajax to the Moon
 
WordPress and Ajax
WordPress and AjaxWordPress and Ajax
WordPress and Ajax
 
AppengineJS
AppengineJSAppengineJS
AppengineJS
 
10 Things You're Not Doing [IBM Lotus Notes Domino Application Development]
10 Things You're Not Doing [IBM Lotus Notes Domino Application Development]10 Things You're Not Doing [IBM Lotus Notes Domino Application Development]
10 Things You're Not Doing [IBM Lotus Notes Domino Application Development]
 
Implementing Comet using PHP
Implementing Comet using PHPImplementing Comet using PHP
Implementing Comet using PHP
 
High Performance JavaScript 2011
High Performance JavaScript 2011High Performance JavaScript 2011
High Performance JavaScript 2011
 
Lecture 5 - Comm Lab: Web @ ITP
Lecture 5 - Comm Lab: Web @ ITPLecture 5 - Comm Lab: Web @ ITP
Lecture 5 - Comm Lab: Web @ ITP
 
2 Asp Dot Net Ajax Extensions
2 Asp Dot Net Ajax Extensions2 Asp Dot Net Ajax Extensions
2 Asp Dot Net Ajax Extensions
 
High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)High Performance JavaScript (CapitolJS 2011)
High Performance JavaScript (CapitolJS 2011)
 

More from Steve Souders

Make JavaScript Faster
Make JavaScript FasterMake JavaScript Faster
Make JavaScript FasterSteve Souders
 
Design+Performance Velocity 2015
Design+Performance Velocity 2015Design+Performance Velocity 2015
Design+Performance Velocity 2015Steve Souders
 
High Performance Web Components
High Performance Web ComponentsHigh Performance Web Components
High Performance Web ComponentsSteve Souders
 
The Perception of Speed
The Perception of SpeedThe Perception of Speed
The Perception of SpeedSteve Souders
 
High Performance Web Components
High Performance Web ComponentsHigh Performance Web Components
High Performance Web ComponentsSteve Souders
 
Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013Steve Souders
 
How fast are we going now?
How fast are we going now?How fast are we going now?
How fast are we going now?Steve Souders
 
High Performance Snippets
High Performance SnippetsHigh Performance Snippets
High Performance SnippetsSteve Souders
 
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)Steve Souders
 
Web Directions South - Even Faster Web Sites
Web Directions South - Even Faster Web SitesWeb Directions South - Even Faster Web Sites
Web Directions South - Even Faster Web SitesSteve Souders
 
@media - Even Faster Web Sites
@media - Even Faster Web Sites@media - Even Faster Web Sites
@media - Even Faster Web SitesSteve Souders
 
Souders WPO Web 2.0 Expo
Souders WPO Web 2.0 ExpoSouders WPO Web 2.0 Expo
Souders WPO Web 2.0 ExpoSteve Souders
 
Browserscope Launch at TAE
Browserscope Launch at TAEBrowserscope Launch at TAE
Browserscope Launch at TAESteve Souders
 

More from Steve Souders (18)

Make JavaScript Faster
Make JavaScript FasterMake JavaScript Faster
Make JavaScript Faster
 
Metrics of Joy
Metrics of JoyMetrics of Joy
Metrics of Joy
 
Design+Performance
Design+PerformanceDesign+Performance
Design+Performance
 
Design+Performance Velocity 2015
Design+Performance Velocity 2015Design+Performance Velocity 2015
Design+Performance Velocity 2015
 
do u webview?
do u webview?do u webview?
do u webview?
 
High Performance Web Components
High Performance Web ComponentsHigh Performance Web Components
High Performance Web Components
 
The Perception of Speed
The Perception of SpeedThe Perception of Speed
The Perception of Speed
 
High Performance Web Components
High Performance Web ComponentsHigh Performance Web Components
High Performance Web Components
 
Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013Prebrowsing - Velocity NY 2013
Prebrowsing - Velocity NY 2013
 
How fast are we going now?
How fast are we going now?How fast are we going now?
How fast are we going now?
 
High Performance Snippets
High Performance SnippetsHigh Performance Snippets
High Performance Snippets
 
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
 
Web Directions South - Even Faster Web Sites
Web Directions South - Even Faster Web SitesWeb Directions South - Even Faster Web Sites
Web Directions South - Even Faster Web Sites
 
@media - Even Faster Web Sites
@media - Even Faster Web Sites@media - Even Faster Web Sites
@media - Even Faster Web Sites
 
Souders WPO Web 2.0 Expo
Souders WPO Web 2.0 ExpoSouders WPO Web 2.0 Expo
Souders WPO Web 2.0 Expo
 
JSConf US 2010
JSConf US 2010JSConf US 2010
JSConf US 2010
 
CouchDB Google
CouchDB GoogleCouchDB Google
CouchDB Google
 
Browserscope Launch at TAE
Browserscope Launch at TAEBrowserscope Launch at TAE
Browserscope Launch at TAE
 

Recently uploaded

Congestive Cardiac Failure..presentation
Congestive Cardiac Failure..presentationCongestive Cardiac Failure..presentation
Congestive Cardiac Failure..presentationdeepaannamalai16
 
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...DhatriParmar
 
Daily Lesson Plan in Mathematics Quarter 4
Daily Lesson Plan in Mathematics Quarter 4Daily Lesson Plan in Mathematics Quarter 4
Daily Lesson Plan in Mathematics Quarter 4JOYLYNSAMANIEGO
 
BIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptx
BIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptxBIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptx
BIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptxSayali Powar
 
Team Lead Succeed – Helping you and your team achieve high-performance teamwo...
Team Lead Succeed – Helping you and your team achieve high-performance teamwo...Team Lead Succeed – Helping you and your team achieve high-performance teamwo...
Team Lead Succeed – Helping you and your team achieve high-performance teamwo...Association for Project Management
 
Decoding the Tweet _ Practical Criticism in the Age of Hashtag.pptx
Decoding the Tweet _ Practical Criticism in the Age of Hashtag.pptxDecoding the Tweet _ Practical Criticism in the Age of Hashtag.pptx
Decoding the Tweet _ Practical Criticism in the Age of Hashtag.pptxDhatriParmar
 
Concurrency Control in Database Management system
Concurrency Control in Database Management systemConcurrency Control in Database Management system
Concurrency Control in Database Management systemChristalin Nelson
 
MS4 level being good citizen -imperative- (1) (1).pdf
MS4 level   being good citizen -imperative- (1) (1).pdfMS4 level   being good citizen -imperative- (1) (1).pdf
MS4 level being good citizen -imperative- (1) (1).pdfMr Bounab Samir
 
How to Manage Buy 3 Get 1 Free in Odoo 17
How to Manage Buy 3 Get 1 Free in Odoo 17How to Manage Buy 3 Get 1 Free in Odoo 17
How to Manage Buy 3 Get 1 Free in Odoo 17Celine George
 
Narcotic and Non Narcotic Analgesic..pdf
Narcotic and Non Narcotic Analgesic..pdfNarcotic and Non Narcotic Analgesic..pdf
Narcotic and Non Narcotic Analgesic..pdfPrerana Jadhav
 
ARTERIAL BLOOD GAS ANALYSIS........pptx
ARTERIAL BLOOD  GAS ANALYSIS........pptxARTERIAL BLOOD  GAS ANALYSIS........pptx
ARTERIAL BLOOD GAS ANALYSIS........pptxAneriPatwari
 
Scientific Writing :Research Discourse
Scientific  Writing :Research  DiscourseScientific  Writing :Research  Discourse
Scientific Writing :Research DiscourseAnita GoswamiGiri
 
4.16.24 Poverty and Precarity--Desmond.pptx
4.16.24 Poverty and Precarity--Desmond.pptx4.16.24 Poverty and Precarity--Desmond.pptx
4.16.24 Poverty and Precarity--Desmond.pptxmary850239
 
Indexing Structures in Database Management system.pdf
Indexing Structures in Database Management system.pdfIndexing Structures in Database Management system.pdf
Indexing Structures in Database Management system.pdfChristalin Nelson
 
4.16.24 21st Century Movements for Black Lives.pptx
4.16.24 21st Century Movements for Black Lives.pptx4.16.24 21st Century Movements for Black Lives.pptx
4.16.24 21st Century Movements for Black Lives.pptxmary850239
 
Q-Factor General Quiz-7th April 2024, Quiz Club NITW
Q-Factor General Quiz-7th April 2024, Quiz Club NITWQ-Factor General Quiz-7th April 2024, Quiz Club NITW
Q-Factor General Quiz-7th April 2024, Quiz Club NITWQuiz Club NITW
 
Mythology Quiz-4th April 2024, Quiz Club NITW
Mythology Quiz-4th April 2024, Quiz Club NITWMythology Quiz-4th April 2024, Quiz Club NITW
Mythology Quiz-4th April 2024, Quiz Club NITWQuiz Club NITW
 
Unraveling Hypertext_ Analyzing Postmodern Elements in Literature.pptx
Unraveling Hypertext_ Analyzing  Postmodern Elements in  Literature.pptxUnraveling Hypertext_ Analyzing  Postmodern Elements in  Literature.pptx
Unraveling Hypertext_ Analyzing Postmodern Elements in Literature.pptxDhatriParmar
 

Recently uploaded (20)

Congestive Cardiac Failure..presentation
Congestive Cardiac Failure..presentationCongestive Cardiac Failure..presentation
Congestive Cardiac Failure..presentation
 
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
Blowin' in the Wind of Caste_ Bob Dylan's Song as a Catalyst for Social Justi...
 
Daily Lesson Plan in Mathematics Quarter 4
Daily Lesson Plan in Mathematics Quarter 4Daily Lesson Plan in Mathematics Quarter 4
Daily Lesson Plan in Mathematics Quarter 4
 
BIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptx
BIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptxBIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptx
BIOCHEMISTRY-CARBOHYDRATE METABOLISM CHAPTER 2.pptx
 
Team Lead Succeed – Helping you and your team achieve high-performance teamwo...
Team Lead Succeed – Helping you and your team achieve high-performance teamwo...Team Lead Succeed – Helping you and your team achieve high-performance teamwo...
Team Lead Succeed – Helping you and your team achieve high-performance teamwo...
 
Decoding the Tweet _ Practical Criticism in the Age of Hashtag.pptx
Decoding the Tweet _ Practical Criticism in the Age of Hashtag.pptxDecoding the Tweet _ Practical Criticism in the Age of Hashtag.pptx
Decoding the Tweet _ Practical Criticism in the Age of Hashtag.pptx
 
Concurrency Control in Database Management system
Concurrency Control in Database Management systemConcurrency Control in Database Management system
Concurrency Control in Database Management system
 
MS4 level being good citizen -imperative- (1) (1).pdf
MS4 level   being good citizen -imperative- (1) (1).pdfMS4 level   being good citizen -imperative- (1) (1).pdf
MS4 level being good citizen -imperative- (1) (1).pdf
 
How to Manage Buy 3 Get 1 Free in Odoo 17
How to Manage Buy 3 Get 1 Free in Odoo 17How to Manage Buy 3 Get 1 Free in Odoo 17
How to Manage Buy 3 Get 1 Free in Odoo 17
 
Narcotic and Non Narcotic Analgesic..pdf
Narcotic and Non Narcotic Analgesic..pdfNarcotic and Non Narcotic Analgesic..pdf
Narcotic and Non Narcotic Analgesic..pdf
 
ARTERIAL BLOOD GAS ANALYSIS........pptx
ARTERIAL BLOOD  GAS ANALYSIS........pptxARTERIAL BLOOD  GAS ANALYSIS........pptx
ARTERIAL BLOOD GAS ANALYSIS........pptx
 
Scientific Writing :Research Discourse
Scientific  Writing :Research  DiscourseScientific  Writing :Research  Discourse
Scientific Writing :Research Discourse
 
4.16.24 Poverty and Precarity--Desmond.pptx
4.16.24 Poverty and Precarity--Desmond.pptx4.16.24 Poverty and Precarity--Desmond.pptx
4.16.24 Poverty and Precarity--Desmond.pptx
 
Indexing Structures in Database Management system.pdf
Indexing Structures in Database Management system.pdfIndexing Structures in Database Management system.pdf
Indexing Structures in Database Management system.pdf
 
4.16.24 21st Century Movements for Black Lives.pptx
4.16.24 21st Century Movements for Black Lives.pptx4.16.24 21st Century Movements for Black Lives.pptx
4.16.24 21st Century Movements for Black Lives.pptx
 
Q-Factor General Quiz-7th April 2024, Quiz Club NITW
Q-Factor General Quiz-7th April 2024, Quiz Club NITWQ-Factor General Quiz-7th April 2024, Quiz Club NITW
Q-Factor General Quiz-7th April 2024, Quiz Club NITW
 
Mythology Quiz-4th April 2024, Quiz Club NITW
Mythology Quiz-4th April 2024, Quiz Club NITWMythology Quiz-4th April 2024, Quiz Club NITW
Mythology Quiz-4th April 2024, Quiz Club NITW
 
prashanth updated resume 2024 for Teaching Profession
prashanth updated resume 2024 for Teaching Professionprashanth updated resume 2024 for Teaching Profession
prashanth updated resume 2024 for Teaching Profession
 
Mattingly "AI & Prompt Design: Large Language Models"
Mattingly "AI & Prompt Design: Large Language Models"Mattingly "AI & Prompt Design: Large Language Models"
Mattingly "AI & Prompt Design: Large Language Models"
 
Unraveling Hypertext_ Analyzing Postmodern Elements in Literature.pptx
Unraveling Hypertext_ Analyzing  Postmodern Elements in  Literature.pptxUnraveling Hypertext_ Analyzing  Postmodern Elements in  Literature.pptx
Unraveling Hypertext_ Analyzing Postmodern Elements in Literature.pptx
 

SXSW: Even Faster Web Sites

  • 1. Steve Souders [email_address] http://stevesouders.com/docs/sxsw-20090314.ppt Even Faster Web Sites Disclaimer: This content does not necessarily reflect the opinions of my employer.
  • 2. the importance of frontend performance 17% 83% iGoogle, primed cache 9% 91% iGoogle, empty cache
  • 3. time spent on the frontend April 2008 Empty Cache Primed Cache www.aol.com 97% 97% www.ebay.com 95% 81% www.facebook.com 95% 81% www.google.com/search 47% 0% search.live.com/results 67% 0% www.msn.com 98% 94% www.myspace.com 98% 98% en.wikipedia.org/wiki 94% 91% www.yahoo.com 97% 96% www.youtube.com 98% 97%
  • 4.
  • 5.  
  • 6.  
  • 7.  
  • 8. 25% discount code: &quot;ssouders25&quot;
  • 11. Even Faster Websites Split the initial payload Load scripts without blocking Couple asynchronous scripts Don't scatter inline scripts Split the dominant domain Flush the document early Use iframes sparingly Simplify CSS Selectors Ajax performance (Doug Crockford) Writing efficient JavaScript (Nicholas Zakas) Creating responsive web apps (Ben Galbraith, Dion Almaer) Comet (Dylan Schiemann) Beyond Gzipping (Tony Gentilcore) Optimize Images (Stoyan Stefanov, Nicole Sullivan)
  • 12. why focus on JavaScript? AOL eBay Facebook MySpace Wikipedia Yahoo! YouTube
  • 13. scripts block <script src=&quot;A.js&quot;> blocks parallel downloads and rendering http://stevesouders.com/cuzillion/?ex=10008
  • 14. MSN.com: parallel scripts Scripts and other resources downloaded in parallel! How? Secret sauce?! var p= g.getElementsByTagName(&quot;HEAD&quot;)[0]; var c=g.createElement(&quot;script&quot;); c.type=&quot;text/javascript&quot;; c.onreadystatechange=n; c.onerror=c.onload=k; c.src=e; p.appendChild(c) MSN
  • 15. asynchronous script loading XHR Eval XHR Injection Script in Iframe Script DOM Element Script Defer document.write Script Tag
  • 16. 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
  • 17. 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
  • 18.
  • 19. Script DOM Element var se = document.createElement('script'); se.src = 'http://anydomain.com/A.js'; document.getElementsByTagName('head')[0] .appendChild(se); script and main page domains can differ no need to refactor JavaScript http://stevesouders.com/cuzillion/?ex=10010
  • 20. Script Defer <script defer src='A.js'></script> only supported in IE (just landed in FF 3.1) script and main page domains can differ no need to refactor JavaScript http://stevesouders.com/cuzillion/?ex=10013
  • 21. document.write Script Tag document.write (&quot;<scr&quot; + &quot;ipt type='text/javascript' src='A.js'>&quot; + &quot;</scr&quot; + &quot;ipt>&quot;); parallelization only works in IE parallel downloads for scripts, nothing else all document.write s must be in same script block http://stevesouders.com/cuzillion/?ex=10014
  • 23. browser busy indicators good to show busy indicators when the user needs feedback bad when downloading in the background
  • 24.
  • 25. load scripts without blocking * Only other document.write scripts are downloaded in parallel (in the same script block).
  • 26. and the winner is... 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 order no order no busy show busy show busy no busy preserve order
  • 27.
  • 28.  
  • 29.
  • 30.
  • 32. load scripts without blocking * Only other document.write scripts are downloaded in parallel (in the same script block). !IE
  • 33.
  • 34.
  • 35. baseline coupling results (not good) * Scripts download in parallel regardless of the Defer attribute. need a way to load scripts asynchronously AND preserve order
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48. technique 2: DOM Element and Doc Write Firefox & Opera – use Script DOM Element IE – use document.write Script Tag Safari, Chrome – no benefit; rely on Safari 4 and Chrome 2
  • 49.
  • 50.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56. don't scatter inline scripts eBay MSN MySpace Wikipedia
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69. Steve Souders [email_address] http://stevesouders.com/docs/sxsw-20090314.ppt

Editor's Notes

  1. Permission to use photo given by Amnemona: http://www.flickr.com/photos/marinacvinhal/379111290/