Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Velocity EU 2012 - Third party scripts and you

3,062 views

Published on

Presentation on 3rd-party scripts as Single Points of Failure from Velocity Europe 2012

Published in: Technology

Velocity EU 2012 - Third party scripts and you

  1. 1. Third-Party Scripts and You Patrick Meenan pmeenan@webpagetest.org @patmeenan
  2. 2. The Performance Golden Rule 80-90% of the end-user response time is spent on the frontend* www.flickr.com/photos/oreillyconf/6326167731/ * http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
  3. 3. Torbit Insight Real-User Data …1,000 sites representing 6.7 billion pageviews… …average 7% of load time is spent on the backend compared to a whopping 93% on the frontend. http://torbit.com/blog/2012/09/19/some-interesting-performance-statistics/
  4. 4. Base Page Time to First Byte 4 Actual back-end Time!
  5. 5. We can fix that!http://www.flickr.com/photos/elsie/4742380987/
  6. 6. Social Widgets back-end API Call directly from your back-end Returns HTML to be injected directly into your page - echo file_get_contents(“http://social.patrickmeenan.com/gplus/?cookies=...”); Implementation details: - Synchronous and blocking - Do not cache the results - If you need to set a timeout, make sure it is at least 20 seconds, 45 preferred - Include all cookies sent from the client - May return javascript and set cookies
  7. 7. This Google guy is a complete nutter #velocityconfWow, to think I used torespect @patmeenan#velocityconf
  8. 8. But, that’s EXACTLY what this does… <scr i pt sr c=‘ … ’ ></ scr i pt > …
  9. 9. The Victim
  10. 10. http://youtu.be/HSbHNIvhOFU
  11. 11. When the widget is unavailable…
  12. 12. http://youtu.be/3-zaos02CxI
  13. 13. Because of This: <scr i pt sr c=‘ ht t ps: / / api s. googl e. com j s/ pl usone. j s’ / ></ scr i p t>Instead of: <scr i pt > ( f unct i on( ) { var po = docum ent . cr eat eEl ement ( ‘ scr i pt ’ ); po. sr c = ‘ ht t ps: / / api s. googl e. com j s/ pl / usone. j s’ ; var s = docum ent . get El em ent sByTagNam ‘ e( scr i pt ’ ) [ 0] ; s. par ent Node. i nser t Bef or e( po, s) ; })(); </ scr i pt > Or Even: <scr i pt sr c=‘ ht t ps: / / api s. googl e. com j s/ pl usone. j s’ async / def er ></ scr i pt > http://www.stevesouders.com/blog/2009/12/01/google-analytics-goes-async/
  14. 14. And Monitoring Says…• Server Monitoring Base page responded in 0.160 seconds• Full-Browser Monitoring Page loaded in 25 seconds• Analytics Page Views Loaded and executed asynchronously• Real User Monitoring Performance Reporting No data if user bailed before onLoad
  15. 15. Loaded Asynchronously http://youtu.be/krin-F65Fd8
  16. 16. Loaded Asynchronously http://youtu.be/krin-F65Fd8
  17. 17. There’s More!On that one page, all before the main content:<scr i pt sr c=‘ ht t p: / / code. j quer y. com j quer y- /1. 7. 1. mi n. j s’ ></ scr i pt ><scr i ptsr c=‘ ht t p: / / scr i pt s. ver t i cal acui t y. com vat / m / on/ vt . j s’ ></ scr i pt><scr i pt sr c=‘ ht t p: / / ak. sai l - hor i zon. com scout / v1. j s’ ></ scr i pt > /<scr i pt sr c=‘ / / cdn. opt i m zel y. com j s/ xxxxx. j s’ ></ scr i pt > i /<scr i ptsr c=‘ ht t ps: / / pl at f or m t wi t t er . com anywher e. j s’ ></ scr i pt > . /<scr i ptsr c=‘ ht t p: / / www. r eddi t . com st at i c/ but t on/ but t on1. j s’ ></ scr i pt > /<scr i pt sr c=‘ ht t p: / / wi dget s. di gg. com but t ons. j s’ ></ scr i pt > /
  18. 18. Watch out for Fonts!<l i nk r el =“ st yl esheet ” t ype=“ t ext / css”hr ef =‘ ht t p: / / f ont s. googl eapi s. com css? /f am l y=… > i ’
  19. 19. And Tag Management http://memegenerator.net/instance/27291297
  20. 20. HTTP Archive http://httparchive.org/trends.php
  21. 21. But I’d Notice… Globally? - Social sites tend to be targets for blocking - platform.twitter.com - connect.facebook.net - apis.google.com - HTTPS as well In an Enterprise? - Corporate policies
  22. 22. High Availability Server Architectures DNS Read-Only Database Load Balancers App Servers Site 1 Database Master Site 2
  23. 23. All for… Base Page (Back-end)
  24. 24. There are a LOT of requests! http://httparchive.org/trends.php
  25. 25. http://memegenerator.net/instance/27291692To the Front End!
  26. 26. Async SnippetGood for code with no dependencies (widgets) <scr i pt > ( f unct i on( ) { var po = docum ent . cr eat eEl ement ( ‘ scr i pt ’ ) ; po. sr c = ‘ ht t ps: / / api s. googl e. com j s/ pl usone. j s’ ; / var s = docum ent . get El ement sByTagNam ‘ scr i pt ’ ) e( [ 0] ; s. par ent Node. i nser t Bef or e( po, s) ; })(); </ scr i pt >
  27. 27. Simple Async Snippet  Easy to implement and describe  Slightly slower on IE than insertBefore()<scr i pt sr c=‘ ht t ps: / / api s. googl e. com j s/ pl usone. j s’ / as yncdef er></ scr i pt >
  28. 28. Put Scripts at the Bottom• Easy to implement and describe• Delays script loading and execution later than Async at the top … <scr i pt sr c=‘ / / asset s. pi nt er est . com j s/ pi ni t . j s’ ></ scr i pt > / </ body>
  29. 29. Protocol-relative URLs• Look strange• Safe across all browsers (for Javascript) / / aj ax. googl eapi s. com aj ax/ l i bs/ j quer y/ 1. 6. 2/ j quer y. m n / i .js I nst ead of : ht t ps : / / aj ax. googl eapi s. com aj ax/ l i bs/ j quer y/ 1. 6. 2/ j que / r y. m n. j s i
  30. 30. Async LoadersHelp for dependency chaining• Modernizr• LABjs• RequireJS• ControlJS Modernizr.load([{ load: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js, }, { load: needs-jQuery.js }]);
  31. 31. Modernizr.load([ { load: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js, complete: function () { if ( !window.jQuery ) { Modernizr.load(js/libs/jquery-1.7.1.min.js); } } }, { load: needs-jQuery.js} ]);
  32. 32. WebFont Loader https://developers.google.com/webfonts/docs/webfont_loader Graceful fallback on failure Potential for unstyled content while loading
  33. 33. Well, Almost…Desktop Browser OnLoad Blocked Mobile Browser OnLoad BlockedChrome Yes Android 2.x NoFirefox Yes Android 4.x+ YesInternet Explorer 9- No Chrome Mobile YesInternet Explorer 10 Yes iOS 4 NoSafari 5+ Yes iOS 5+ YesOpera Yes IE Mobile 9 No http://www.browserscope.org/user/tests/table/agt1YS1wcm9maWxlcnINCxIEVGVzdBjrq90MDA
  34. 34. http://www.flickr.com/photos/phobia/2308371224/How are we doing?
  35. 35. Widgets Async Blocking Google Analytics Google +1 Badge Google +1 Button Twitter Anywhere Twitter Tweet Button Facebook Channel File Example Facebook Like Button Pinterest (end of body) Digg Reditt AddThis ShareThis
  36. 36. Code Libraries (examples) • Closure Library: Blocking in the head • Dojo: Blocking in the head • Google jsapi: Blocking (default, Async available) • Jquery: Blocking in the head • Moo Tools: Blocking in the head • YUI: Blocking
  37. 37. Ad Providers• Doubleclick: Fully Async available (October 2011)• Adsense: Blocking script, ad itself is async• Others: Ask – iFrame solutions are async
  38. 38. Fonts • Fontdeck: Blocking in the head • Fonts.com: Blocking in the head • Google: Blocking in the head • Typekit: Blocking in the head • Webtype: Blocking in the head • Loader works across all providers
  39. 39. Bonus Points<script src=‘http://html5shim.googlecode.com/svn/trunk/html5.js’>Minimal/No CachingNo gzipNo CDNAnd wow, the trust!
  40. 40. http://memegenerator.net/instance/27291866
  41. 41. Routing to localhost• Fails FAST! (connections rejected)• Not good for real failure scenarios
  42. 42. You Need a Black Holeblackhole.webpagetest.org – 72.66.115.13hosts file72.66.115.13 ajax.googleapis.com72.66.115.13 apis.google.com72.66.115.13 www.google-analytics.com72.66.115.13 connect.facebook.net72.66.115.13 platform.twitter.com... Courtesy NASA/JPL-Caltech.
  43. 43. On WebPagetest.org ajax.googleapis.com apis.google.com www.google-analytics.com connect.facebook.net platform.twitter.com http://www.webpagetest.org/
  44. 44. SPOF-O-Matic https://chrome.google.com/webstore/detail/plikhggfbplemddobondkeogomgoodeg https://github.com/pmeenan/spof-o-matic
  45. 45. http://memegenerator.net/instance/27293101

×