JavaScriptPerformance                        stevesouders.com/docs/sfjs-20120112.pptx      Disclaimer: This content does n...
YSlow   Cuzillion SpriteMe Hammerhead
WebWPO       Performance          Optimizationdrives trafficimproves UXincreases revenuereduces costs
What’s the #1cause of slowweb pages?
JAVASCRIPT!
all requests containing “.js” are skipped
http://httparchive.org/trends.php?s=intersection
1995: scripts in HEAD  <head>  <script src=‘a.js’></script>  </head>blocks other downloads (IE 6-7, images  in IE, iframes...
2007: move scripts to bottom   ...   <script src=‘a.js’></script>   </body> doesn’t block other downloads downloaded seque...
2009: load scripts async  var se =   document.createElement(‘script’)   ;  se.src = ‘a.js’;  document.getElementsByTagName...
2010: async + on-demand exec   var se = new Image(); // Object   se.onload = registerScript;   se.src = ‘a.js’; separate d...
20??: markup
script async & deferparsing doesn’t wait for script:  • async – executed when available  • defer – executed when parsing f...
20??: markup  <script src=‘a.js’   [async|defer|noexecute]   [deferdownload]>doesn’t block downloadsdownloaded in parallel...
ControlJS  a JavaScript module for making scripts load fasterjust change HTMLinline & external scripts  <script type=‘text...
ControlJS  a JavaScript module for making scripts load fasterdownload without executing  <script type=‘text/cjs’          ...
GMail Mobile<script type=‘text/javascript’>/*var ...*/</script>get script DOM elements textremove commentseval() when invo...
localStorage
yuiblog.com/blog/2007/01/04/performance-research-part-2/
blaze.io/mobile/understanding-mobile-cache-sizes/
Home screen apps on iPhone are slowerbecause resources are re-requestedeven though they should be read fromcache.
localStoragewindow.localStorage:   setItem()   getItem()   removeItem()   clear()also sessionStorageall popular browsers, ...
localStorage as cache1st doc: write JS & CSS blocks to localStorage   mres.-0yDUQJ03U8Hjija: <script>(function(){...set co...
Google Analytics Async Snippetvar ga = document.createElement(‘script’);ga.type = ‘text/javascript’;ga.async = true;ga.src...
var ga = document.createElement(‘script’);ga.type = ‘text/javascript’;ga.async = true;ga.src = (‘https:’ ==  document.loca...
var ga = document.createElement(‘script’);ga.type = ‘text/javascript’;ga.async = true;ga.src = (‘https:’ ==  document.loca...
var ga = document.createElement(‘script’);ga.type = ‘text/javascript’;ga.async = true;ga.src = (‘https:’ ==  document.loca...
stevesouders.com/tests/jsorder.php
var ga = document.createElement(‘script’);ga.type = ‘text/javascript’;ga.async = true;ga.src = (‘https:’ ==  document.loca...
<html>  <head>            A     <link rel=stylesheet ...>     <style>...</style>     <script [...]></script>            B ...
A    script loads sooner    beacon fires sooner    blocks other async (Opera)    may block rendering
B    script loads later    beacon fires later    blocks fewer async (Opera)    may block rendering
script loads last    beacon fires late    doesn’t block asyncC   doesn’t block rendering
script loads after page    beacon fires very late    doesn’t block async    doesn’t block rendering    onload fires soonerD
more
stevesouders.com/blog/2011/12/01/silk-ipad-galaxy-comparison/
stevesouders.com/mobileperf/mobileperfbkm.php
Top 100Top 1000
takeawaysWPO                GA snippet is goodWebPagetest.org    Loadtimer.orgCuzillion.com      MobilePerf.orgBrowserscop...
@soudershttp://stevesouders.com/docs/sfjs-20120112.pptx
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
JavaScript Performance (at SFJS)
Upcoming SlideShare
Loading in...5
×

JavaScript Performance (at SFJS)

16,432

Published on

A deep dive into async script loading.

Published in: Technology
5 Comments
54 Likes
Statistics
Notes
  • Good stuff, nice to know what the browsers are actually doing. We were just talking yesterday about how, although Chrome’s 4 years old now, there’s still no good ol’ ctrl-shift-R shortcut like Firefox has. Would make a great extension!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Good stuff, nice to know what the browsers are actually doing. We were just talking yesterday about how, although Chrome’s 4 years old now, there’s still no good ol’ ctrl-shift-R shortcut like Firefox has. Would make a great extension!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Great info!

    ..1000x thanks ... need some time to digest
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • The #1 cause of slow web pages is...guess what...JavaScript. Great slides on JavaScript Performance by Steve Souders.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Fantastic stuff and great information!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
16,432
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
194
Comments
5
Likes
54
Embeds 0
No embeds

No notes for slide
  • Permission to use photo given by Amnemona: http://www.flickr.com/photos/marinacvinhal/379111290/
  • flickr.com/photos/bekahstargazing/318930460/
  • flickr.com/photos/pedromourapinheiro/3123885534/
  • http://www.flickr.com/photos/peterblapps/838125790/
  • http://www.flickr.com/photos/salty_soul/5799650534/
  • 3.777 seconds - http://www.webpagetest.org/result/120111_0P_2TW4Q/ - block “.js” (it’s not downloaded)5.471 seconds - http://www.webpagetest.org/result/120111_GR_2TW90/Alexa top 100wwide
  • median: 3.650vs 2.4873.777 seconds - http://www.webpagetest.org/result/120111_0P_2TW4Q/ - block “.js” (it’s not downloaded)5.471 seconds - http://www.webpagetest.org/result/120111_GR_2TW90/Alexa top 100wwide
  • flickr.com/photos/gevertulley/4771808965/Generallyasync &amp; defer scripts start downloading immediately. I wish they’d wait, esp. defer scripts, so they don’t hog connections from the limited pool.subatomic particle traces
  • GMail Mobile: http://googlecode.blogspot.com/2009/09/gmail-for-mobile-html5-series-reducing.htmlSproutCore: http://blog.sproutcore.com/post/225219087/faster-loading-through-eval
  • flickr.com/photos/bryanpearson/564703455/
  • flickr.com/photos/bryanpearson/564703455/
  • flickr.com/photos/nelsoncruz/431244400/
  • block other async scripts in Operaexecute ASAPsend beacon before leaving pageblock UI thread
  • block other async scripts in Operaexecute ASAPsend beacon before leaving pageblock UI thread
  • block other async scripts in Operaexecute ASAPsend beacon before leaving pageblock UI thread
  • block other async scripts in Operaexecute ASAPsend beacon before leaving pageblock UI thread
  • flickr.com/photos/dualphoto/2609096047/
  • flickr.com/photos/myklroventine/4062102754/
  • JavaScript Performance (at SFJS)

    1. 1. JavaScriptPerformance stevesouders.com/docs/sfjs-20120112.pptx Disclaimer: This content does not necessarily reflect the opinions of my employer.
    2. 2. YSlow Cuzillion SpriteMe Hammerhead
    3. 3. WebWPO Performance Optimizationdrives trafficimproves UXincreases revenuereduces costs
    4. 4. What’s the #1cause of slowweb pages?
    5. 5. JAVASCRIPT!
    6. 6. all requests containing “.js” are skipped
    7. 7. http://httparchive.org/trends.php?s=intersection
    8. 8. 1995: scripts in HEAD <head> <script src=‘a.js’></script> </head>blocks other downloads (IE 6-7, images in IE, iframes)downloaded sequentially (IE 6-7)blocks rendering during download & parse-execute
    9. 9. 2007: move scripts to bottom ... <script src=‘a.js’></script> </body> doesn’t block other downloads downloaded sequentially in IE 6-7 blocks rendering during download & parse-execute
    10. 10. 2009: load scripts async var se = document.createElement(‘script’) ; se.src = ‘a.js’; document.getElementsByTagName(‘he ad’)[0].appendChild(se);doesn’t block other downloadsdownloaded in parallel (all browsers)blocks rendering during parse-execute
    11. 11. 2010: async + on-demand exec var se = new Image(); // Object se.onload = registerScript; se.src = ‘a.js’; separate download from parse-execute doesn’t block other downloads downloaded in parallel (all browsers) doesn’t block rendering until demanded
    12. 12. 20??: markup
    13. 13. script async & deferparsing doesn’t wait for script: • async – executed when available • defer – executed when parsing finishedwhen is it downloaded?missing: • defer download AND execution • async/defer download, execute on demand
    14. 14. 20??: markup <script src=‘a.js’ [async|defer|noexecute] [deferdownload]>doesn’t block downloadsdownloaded in paralleldoesn’t block rendering until demandeddoesn’t contend for a connectioneasier
    15. 15. ControlJS a JavaScript module for making scripts load fasterjust change HTMLinline & external scripts <script type=‘text/cjs’ data-cjssrc=‘main.js’> </script> <script type=‘text/cjs’> var name = getName(); </script> http://controljs.org/
    16. 16. ControlJS a JavaScript module for making scripts load fasterdownload without executing <script type=‘text/cjs’ data-cjssrc=‘main.js’ data-cjsexec=false> <script>Later if/when needed: CJS.execScript(src);
    17. 17. GMail Mobile<script type=‘text/javascript’>/*var ...*/</script>get script DOM elements textremove commentseval() when invokedawesome for prefetching JS that might (not) be neededhttp://goo.gl/l5ZLQ
    18. 18. localStorage
    19. 19. yuiblog.com/blog/2007/01/04/performance-research-part-2/
    20. 20. blaze.io/mobile/understanding-mobile-cache-sizes/
    21. 21. Home screen apps on iPhone are slowerbecause resources are re-requestedeven though they should be read fromcache.
    22. 22. localStoragewindow.localStorage: setItem() getItem() removeItem() clear()also sessionStorageall popular browsers, 5MB maxhttp://dev.w3.org/html5/webstorage/http://diveintohtml5.org/storage.html
    23. 23. localStorage as cache1st doc: write JS & CSS blocks to localStorage mres.-0yDUQJ03U8Hjija: <script>(function(){...set cookie with entries & version MRES=-0yDUQJ03U8Hjija:-4EaJoFuDoX0iloI:...later docs: read JS & CSS from localStorage document.write( localStorage.getItem(mres.- 0yDUQJ03U8Hjija) );http://stevesouders.com/blog/2011/03/28/storager-case- study-bing-google/
    24. 24. Google Analytics Async Snippetvar ga = document.createElement(‘script’);ga.type = ‘text/javascript’;ga.async = true;ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’)+‘.google-analytics.com/ga.js’;var s = document.getElementsByTagName(‘script’)[ 0];s.parentNode.insertBefore(ga, s);code.google.com/apis/analytics/docs/tracking/asyncTracking.html
    25. 25. var ga = document.createElement(‘script’);ga.type = ‘text/javascript’;ga.async = true;ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’)+‘.google-analytics.com/ga.js’;var s = document.getElementsByTagName(‘script’)[ 0];s.parentNode.insertBefore(ga, s);avoid mixed content warningprotocol relative URLs have problemsset src laststevesouders.com/blog/2010/02/10/5a-missing-schema-double-download/
    26. 26. var ga = document.createElement(‘script’);ga.type = ‘text/javascript’;ga.async = true;ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’)+‘.google-analytics.com/ga.js’;var s = document.getElementsByTagName(‘script’)[ 0];s.parentNode.insertBefore(ga, s);previously: getElementsByTagName(‘head’)[0]. appendChild(ga)HEAD might not existstevesouders.com/blog/2010/05/11/appendchild-vs-insertbefore/ Android 1.5, iPhone 3.0, Opera 8.50, Safari 3.2stevesouders.com/blog/2010/05/12/autohead-my-first-browserscope-user-test/
    27. 27. var ga = document.createElement(‘script’);ga.type = ‘text/javascript’;ga.async = true;ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’)+‘.google-analytics.com/ga.js’;var s = document.getElementsByTagName(‘script’)[ 0];s.parentNode.insertBefore(ga, s);some browsers preserve execution order Firefox 3.6, Opera, OmniWebstevesouders.com/tests/jsorder.php
    28. 28. stevesouders.com/tests/jsorder.php
    29. 29. var ga = document.createElement(‘script’);ga.type = ‘text/javascript’;ga.async = true;ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’)+‘.google-analytics.com/ga.js’;var s = document.getElementsByTagName(‘script’)[ 0];s.parentNode.insertBefore(ga, s);some browsers preserve execution order Firefox 3.6, Opera, OmniWebasync=true fixes this (except Opera)stevesouders.com/tests/jsorder.php
    30. 30. <html> <head> A <link rel=stylesheet ...> <style>...</style> <script [...]></script> B </head> <body> <div> <p> <ul> C </body></html>onload: D
    31. 31. A script loads sooner beacon fires sooner blocks other async (Opera) may block rendering
    32. 32. B script loads later beacon fires later blocks fewer async (Opera) may block rendering
    33. 33. script loads last beacon fires late doesn’t block asyncC doesn’t block rendering
    34. 34. script loads after page beacon fires very late doesn’t block async doesn’t block rendering onload fires soonerD
    35. 35. more
    36. 36. stevesouders.com/blog/2011/12/01/silk-ipad-galaxy-comparison/
    37. 37. stevesouders.com/mobileperf/mobileperfbkm.php
    38. 38. Top 100Top 1000
    39. 39. takeawaysWPO GA snippet is goodWebPagetest.org Loadtimer.orgCuzillion.com MobilePerf.orgBrowserscope.org HTTPArchive.orgControlJS.org VelocitylocalStorage stevesouders.com
    40. 40. @soudershttp://stevesouders.com/docs/sfjs-20120112.pptx
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×