Your SlideShare is downloading. ×
0
"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
"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
"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
"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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

"Your script just killed my site" by Steve Souders

1,784

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,784
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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/
  • Transcript

    • 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. SPOF
    • 3. synchronous scripts blockall following elementsfrom renderingin all browsers
    • 4. #fail
    • 5. async#failasync sync async
    • 6. Frontend SPOF
    • 7. http://www.webpagetest.org/result/120529_41_HWV/
    • 8. entire BODY blocked from rendering
    • 9. http://www.webpagetest.org/result/120529_41_HWV/
    • 10. mysql>
    • 11. mysql> select p.url, wptid
    • 12. mysql> select p.url, wptidfrom pages as p, requests as r
    • 13. mysql> select p.url, wptidfrom pages as p, requests as rwhere p.pageid >= 844954 andp.pageid <= 1564447 andp.pageid = r.pageid and
    • 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. 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. 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. 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. 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. blog.catchpoint.com/2012/06/01/facebook-outage-wake-up-call-for-websites/
    • 20. async!
    • 21. async!#fail sync
    • 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. three facts: 1. failures happen 2. 304 & 200 both produce frontend SPOF 3. anywhere.js expires after 15 minutes
    • 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. “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. self-updating bootstrap scripts with Stoyan Stefanovstevesouders.com/blog/2012/05/22/self-updating-scripts/
    • 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. 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. 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. voilàbootstrap scripts can have long cache timesANDget updated when necessary
    • 31. caveatthe update is used on the next page view (like app cache)
    • 32. lognormal.com/blog/2012/06/05/updating-cached-boomerang/
    • 33. lognormal.com/blog/2012/06/05/updating-cached-boomerang/
    • 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. dynamic symbol loading: JavaScript <script src=mycombo.js></script> <script> $(.content a, .huffpo-wide-container a).mousedown(function() {... </script> Wha?!
    • 36. ejohn.org/blog/degrading-script-tags/
    • 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. we’re JavaScript& we mean business
    • 39. takeawaysload 3rd party scripts asynctest with WebPagetest SPOFhave RUM timeoutself-update bootstrap scripts & increase cache timesharden JS loading
    • 40. what’s your website’sweakest link?
    • 41. Steve Souders @soudersstevesouders.com/docs/paypal-spof-20121115.pptx
    • 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

    ×