Your script just  killed my sitestevesouders.com/docs/paypal-spof-20121115.pptxDisclaimer: This content does not necessari...
SPOF
synchronous scripts blockall following elementsfrom renderingin all browsers
#fail
async#failasync           sync   async
Frontend SPOF
http://www.webpagetest.org/result/120529_41_HWV/
entire BODY blocked   from rendering
http://www.webpagetest.org/result/120529_41_HWV/
mysql>
mysql> select p.url, wptid
mysql> select p.url, wptidfrom pages as p, requests as r
mysql> select p.url, wptidfrom pages as p, requests as rwhere p.pageid >= 844954 andp.pageid <= 1564447 andp.pageid = r.pa...
mysql> select p.url, wptidfrom pages as p, requests as rwhere p.pageid >= 844954 andp.pageid <= 1564447 andp.pageid = r.pa...
mysql> select p.url, wptidfrom pages as p, requests as rwhere p.pageid >= 844954 andp.pageid <= 1564447 andp.pageid = r.pa...
mysql> select p.url, wptidfrom pages as p, requests as rwhere p.pageid >= 844954 andp.pageid <= 1564447 andp.pageid = r.pa...
mysql> select p.url, wptidfrom pages as p, requests as rwhere p.pageid >= 844954 andp.pageid <= 1564447 andp.pageid = r.pa...
mysql> select p.url, wptidfrom pages as p, requests as rwhere p.pageid >= 844954 andp.pageid <= 1564447 andp.pageid = r.pa...
blog.catchpoint.com/2012/06/01/facebook-outage-wake-up-call-for-websites/
async!
async!#fail    sync
While placing JavaScript files at the bottom of thepage is a best practice for website performance,when including the anyw...
three facts: 1. failures happen 2. 304 & 200 both produce    frontend SPOF 3. anywhere.js expires after    15 minutes
snippet cache timeshttp://platform.twitter.com/widgets.js - 30 minshttp://connect.facebook.net/en_US/all.js - 15 minshttp:...
“bootstrap scripts” often have short cache timesmore frequent Conditional GET requests means frontend SPOF is more likelyb...
self-updating bootstrap scripts                                                          with   Stoyan Stefanovstevesouder...
client                  serverbootstrap.js:               current version  var v=“1.7”;                   is 1.7  scriptel...
client                   servernext day… bootstrap.js:                     bootstrap.js  read from cache                 u...
client                     server update.php                           200bootstrap.js is still    <script src=“bootstrap....
voilàbootstrap scripts can have long cache timesANDget updated when necessary
caveatthe update is used on the next page view (like app cache)
lognormal.com/blog/2012/06/05/updating-cached-boomerang/
lognormal.com/blog/2012/06/05/updating-cached-boomerang/
dynamic symbol loading: C void *handle; double (*cosine)(double); handle = dlopen("/lib/libm.so.6", RTLD_LAZY); if ( !hand...
dynamic symbol loading: JavaScript <script src=mycombo.js></script> <script> $(.content a, .huffpo-wide-container   a).mou...
ejohn.org/blog/degrading-script-tags/
dynamic symbol loading: JavaScript <script src=mycombo.js></script> <script src=mycombo.js> <script> $(.content a, .huffpo...
we’re JavaScript& we mean business
takeawaysload 3rd party scripts asynctest with WebPagetest SPOFhave RUM timeoutself-update bootstrap scripts & increase ca...
what’s your website’sweakest link?
Steve Souders                                    @soudersstevesouders.com/docs/paypal-spof-20121115.pptx
Patrick MeenanNicholas ZakasGuy PodjarnyStoyan StefanovTim KadlecBrian PaneJosh FraserSteve SoudersBetty TsoIsrael NirMarc...
"Your script just killed my site" by Steve Souders
"Your script just killed my site" by Steve Souders
"Your script just killed my site" by Steve Souders
"Your script just killed my site" by Steve Souders
"Your script just killed my site" by Steve Souders
"Your script just killed my site" by Steve Souders
"Your script just killed my site" by Steve Souders
"Your script just killed my site" by Steve Souders
"Your script just killed my site" by Steve Souders
"Your script just killed my site" by Steve Souders
"Your script just killed my site" by Steve Souders
"Your script just killed my site" by Steve Souders
"Your script just killed my site" by Steve Souders
"Your script just killed my site" by Steve Souders
"Your script just killed my site" by Steve Souders
"Your script just killed my site" by Steve Souders
"Your script just killed my site" by Steve Souders
"Your script just killed my site" by Steve Souders
"Your script just killed my site" by Steve Souders
Upcoming SlideShare
Loading in...5
×

"Your script just killed my site" by Steve Souders

1,865
-1

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,865
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • http://www.flickr.com/photos/jocelynaubert/3100384270/
  • http://www.flickr.com/photos/darwinbell/465459020/
  • http://en.wikipedia.org/wiki/Single_point_of_failure
  • WidgetsAdsAnalytics
  • ----- Meeting Notes (11/15/12 16:02) -----If the backend server took 20-120 seconds to finish pagers would be going off.
  • Later in the docs they talk about how the LATER resources are loaded async, but not this bootstrap script.All it takes is one.
  • http://httparchive.webpagetest.org/result/120401_40_WFQG/
  • http://httparchive.webpagetest.org/result/120515_5_4S4C/plusone.js and all.js are synchronous
  • http://httparchive.webpagetest.org/result/120515_0_DNT/glamadapt_jsrv.act is inserted by wChannelModule.act using document.writelikecool is ranked 11KGlam Media is “the leader in curated social media content”
  • http://httparchive.webpagetest.org/result/120301_AP_P4W3/rank #19Kall.js, widgets.js, eluminate.js all loaded sync
  • http://httparchive.webpagetest.org/result/120401_8H_VTA3/
  • http://httparchive.webpagetest.org/result/120315_VQ_QCZP/fonts
  • http://httparchive.webpagetest.org/result/120515_0_35V/Their own CSS file
  • http://www.flickr.com/photos/rusty-projector/225212919/Thanks for listening to my cautionary tale of woe and foreboding. But it’s not all doom and gloom.
  • There is a brighter future where snippets aren’t a frontend SPOF.
  • http://www.webpagetest.org/result/121115_B2_XM6/
  • flickr.com/photos/wwarby/3296379139/
  • flickr.com/photos/juditk/5024772809/whether it’s 1 or 5 requests, frontend SPOF will still happen
  • http://tldp.org/HOWTO/Program-Library-HOWTO/dl-libraries.html
  • http://tldp.org/HOWTO/Program-Library-HOWTO/dl-libraries.html
  • http://tldp.org/HOWTO/Program-Library-HOWTO/dl-libraries.html
  • http://www.flickr.com/photos/jpellgen/3345383578/
  • flickr.com/photos/myklroventine/4062102754/
  • http://www.flickr.com/photos/darwinbell/465459020/
  • "Your script just killed my site" by Steve Souders

    1. 1. Your script just killed my sitestevesouders.com/docs/paypal-spof-20121115.pptxDisclaimer: This content does not necessarily reflect the opinions of my employer.
    2. 2. SPOF
    3. 3. synchronous scripts blockall following elementsfrom renderingin all browsers
    4. 4. #fail
    5. 5. async#failasync sync async
    6. 6. Frontend SPOF
    7. 7. http://www.webpagetest.org/result/120529_41_HWV/
    8. 8. entire BODY blocked from rendering
    9. 9. http://www.webpagetest.org/result/120529_41_HWV/
    10. 10. mysql>
    11. 11. mysql> select p.url, wptid
    12. 12. mysql> select p.url, wptidfrom pages as p, requests as r
    13. 13. mysql> select p.url, wptidfrom pages as p, requests as rwhere p.pageid >= 844954 andp.pageid <= 1564447 andp.pageid = r.pageid and
    14. 14. mysql> select p.url, wptidfrom pages as p, requests as rwhere p.pageid >= 844954 andp.pageid <= 1564447 andp.pageid = r.pageid andrank < 20000 and
    15. 15. mysql> select p.url, wptidfrom pages as p, requests as rwhere p.pageid >= 844954 andp.pageid <= 1564447 andp.pageid = r.pageid andrank < 20000 andresp_content_type like “%script%” and
    16. 16. mysql> select p.url, wptidfrom pages as p, requests as rwhere p.pageid >= 844954 andp.pageid <= 1564447 andp.pageid = r.pageid andrank < 20000 andresp_content_type like “%script%” andtime > 10000 and
    17. 17. mysql> select p.url, wptidfrom pages as p, requests as rwhere p.pageid >= 844954 andp.pageid <= 1564447 andp.pageid = r.pageid andrank < 20000 andresp_content_type like “%script%” andtime > 10000 andrenderStart > 10000
    18. 18. mysql> select p.url, wptidfrom pages as p, requests as rwhere p.pageid >= 844954 andp.pageid <= 1564447 andp.pageid = r.pageid andrank < 20000 andresp_content_type like “%script%” andtime > 10000 andrenderStart > 10000group by p.pageid;
    19. 19. blog.catchpoint.com/2012/06/01/facebook-outage-wake-up-call-for-websites/
    20. 20. async!
    21. 21. async!#fail sync
    22. 22. While placing JavaScript files at the bottom of thepage is a best practice for website performance,when including the anywhere.js file, always placethe file as close to the top of the page as possible.The anywhere.js file is small (<3KB) and is deliveredto the page GZIPd.Further, all dependancies for @Anywhere featuresare loaded asynchronously, on-demand so as to notimpact performance of the host page.
    23. 23. three facts: 1. failures happen 2. 304 & 200 both produce frontend SPOF 3. anywhere.js expires after 15 minutes
    24. 24. snippet cache timeshttp://platform.twitter.com/widgets.js - 30 minshttp://connect.facebook.net/en_US/all.js - 15 minshttp://www.google-analytics.com/ga.js - 120 mins
    25. 25. “bootstrap scripts” often have short cache timesmore frequent Conditional GET requests means frontend SPOF is more likelybut short cache times is the only way snippet owners can push updatesor is it?
    26. 26. self-updating bootstrap scripts with Stoyan Stefanovstevesouders.com/blog/2012/05/22/self-updating-scripts/
    27. 27. client serverbootstrap.js: current version var v=“1.7”; is 1.7 scriptelem.src = 200 “beacon.js?v=”+v; maxage=604800beacon.js: ?v=1.7&log... 204
    28. 28. client servernext day… bootstrap.js: bootstrap.js read from cache updated to 1.8 beacon.js: ?v=1.7&log... 200 var iframe1 = document.createElement("iframe"); iframe1.style.display = "none”; iframe1.src = ”update.php"; document.body.appendChild(iframe1);
    29. 29. client server update.php 200bootstrap.js is still <script src=“bootstrap.js">read from cache </script> <script> if (location.hash === ) { location.hash = "check”; location.reload(true); } </script>on reload bootstrap.jsis re-requested andoverwrites cache 200
    30. 30. voilàbootstrap scripts can have long cache timesANDget updated when necessary
    31. 31. caveatthe update is used on the next page view (like app cache)
    32. 32. lognormal.com/blog/2012/06/05/updating-cached-boomerang/
    33. 33. lognormal.com/blog/2012/06/05/updating-cached-boomerang/
    34. 34. dynamic symbol loading: C void *handle; double (*cosine)(double); handle = dlopen("/lib/libm.so.6", RTLD_LAZY); if ( !handle ) { exit(1); } cosine = dlsym(handle, "cos"); if ( dlerror() != NULL ) { exit(1); }
    35. 35. dynamic symbol loading: JavaScript <script src=mycombo.js></script> <script> $(.content a, .huffpo-wide-container a).mousedown(function() {... </script> Wha?!
    36. 36. ejohn.org/blog/degrading-script-tags/
    37. 37. dynamic symbol loading: JavaScript <script src=mycombo.js></script> <script src=mycombo.js> <script> $(.content a, .huffpo-wide-container $(.content a, .huffpo-wide-container a).mousedown(function() {... a).mousedown(function() {... </script> </script> at the end of mycombo.js: var scripts = document.getElementsByTagName("script"); for ( var cntr = scripts.length; cntr > 0; cntr-- ) { var curScript = scripts[cntr-1]; if (curScript.src.indexOf(mycombo.js) != -1) { eval( curScript.innerHTML ); break; } }
    38. 38. we’re JavaScript& we mean business
    39. 39. takeawaysload 3rd party scripts asynctest with WebPagetest SPOFhave RUM timeoutself-update bootstrap scripts & increase cache timesharden JS loading
    40. 40. what’s your website’sweakest link?
    41. 41. Steve Souders @soudersstevesouders.com/docs/paypal-spof-20121115.pptx
    42. 42. Patrick MeenanNicholas ZakasGuy PodjarnyStoyan StefanovTim KadlecBrian PaneJosh FraserSteve SoudersBetty TsoIsrael NirMarcel DuranÉric DaspetAlois ReitbauerMatthew PrinceBuddy BrewerAlexander PodelkoEstelle WeylAaron PetersTony GentilcoreMatthew SteeleBryan McQuadeTobie LangelBilly HoffmanJoshua BixbySergey ChernyshevJP CastroPavel PaulauDavid CalhounNicole SullivanJames PearceTom Hughes-Croucher
    1. A particular slide catching your eye?

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

    ×