• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
"Your script just killed my site" by Steve Souders
 

"Your script just killed my site" by Steve Souders

on

  • 1,876 views

 

Statistics

Views

Total Views
1,876
Views on SlideShare
1,404
Embed Views
472

Actions

Likes
0
Downloads
4
Comments
0

2 Embeds 472

http://g33ktalk.com 471
http://g33ktalk.staging.wpengine.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 "Your script just killed my site" by Steve Souders Presentation Transcript

  • Your script just killed my sitestevesouders.com/docs/paypal-spof-20121115.pptxDisclaimer: This content does not necessarily reflect the opinions of my employer.
  • 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.pageid and
  • mysql> select p.url, wptidfrom pages as p, requests as rwhere p.pageid >= 844954 andp.pageid <= 1564447 andp.pageid = r.pageid andrank < 20000 and
  • 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
  • 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
  • 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
  • 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;
  • 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 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.
  • 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://www.google-analytics.com/ga.js - 120 mins
  • “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?
  • self-updating bootstrap scripts with Stoyan Stefanovstevesouders.com/blog/2012/05/22/self-updating-scripts/
  • 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
  • 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);
  • 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
  • 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 ( !handle ) { exit(1); } cosine = dlsym(handle, "cos"); if ( dlerror() != NULL ) { exit(1); }
  • dynamic symbol loading: JavaScript <script src=mycombo.js></script> <script> $(.content a, .huffpo-wide-container a).mousedown(function() {... </script> Wha?!
  • ejohn.org/blog/degrading-script-tags/
  • 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; } }
  • we’re JavaScript& we mean business
  • takeawaysload 3rd party scripts asynctest with WebPagetest SPOFhave RUM timeoutself-update bootstrap scripts & increase cache timesharden JS loading
  • 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 NirMarcel DuranÉric DaspetAlois ReitbauerMatthew PrinceBuddy BrewerAlexander PodelkoEstelle WeylAaron PetersTony GentilcoreMatthew SteeleBryan McQuadeTobie LangelBilly HoffmanJoshua BixbySergey ChernyshevJP CastroPavel PaulauDavid CalhounNicole SullivanJames PearceTom Hughes-Croucher