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.

Third Party Performance (Velocity, 2014)

1,721 views

Published on

Third party components are a part of any modern site: JS libs, analytics, trackers, share buttons, ads. Many components, each adding its performance cost, cause render delays or can effectively take your site down. This isn’t your code nor your servers, so what can you do about it?

This presentation will answer this question with strategies and tactics for keeping 3rd parties from taking you down.

This talk was given at Velocity Santa Clara, 2014: The presentation from Velocity Santa Clara, 2014 (http://velocityconf.com/velocity2014/public/schedule/detail/35448).

Published in: Software, Technology, Art & Photos
  • Be the first to comment

Third Party Performance (Velocity, 2014)

  1. 1. ©2014 AkamaiFaster ForwardTM THIRD PARTY PERFORMANCE Guy Podjarny (@guypod) CTO, Web Experience, Akamai
  2. 2. ©2014 AkamaiFaster ForwardTM What’s a third party? - Infrastructure & code managed by someone else - What’s not a 3rd party: - Reused Software (e.g. jQuery, Apache) – premium or free - Commercial Hardware (e.g. ADC, WAF) - IaaS Cloud Provider (e.g. EC2) - CDN (e.g. Akamai) Not a 1st Party?
  3. 3. ©2014 AkamaiFaster ForwardTM (Web) Third Party Types Tracker Beacons Ex: ad networks image beacons Analytics Ex: Google Analytics, Comscore Non-Critical Page Components Ex: Social sharing buttons Critical Page Components Ex: Privacy prompts, p13n, ads(?) Inline Cloud Proxies Ex: Mobile Transcoders, MotionPoint, SiteSpect
  4. 4. ©2014 AkamaiFaster ForwardTM # Domains Per Page May 2014 Percentiles: - 25th : 5 domains - 50th : 11 domains - 75th : 21 domains - 90th : 35 domains
  5. 5. ©2014 AkamaiFaster ForwardTM Ghostery Data - Media
  6. 6. ©2014 AkamaiFaster ForwardTM Ghostery Data - Retail
  7. 7. ©2014 AkamaiFaster ForwardTM 3rd Party Extravaganza!
  8. 8. ©2014 AkamaiFaster ForwardTM 3rd Parties Have Outages Too
  9. 9. ©2014 AkamaiFaster ForwardTM Solution: Remove 3rd Party Tag
  10. 10. ©2014 AkamaiFaster ForwardTM No Silver Bullet… We need to do this the hard way: - Understand each 3rd Party type - Understand their problems - Choose a solution - Understand the gotcha’s
  11. 11. ©2014 AkamaiFaster ForwardTM CRITICAL PAGE COMPONENTS
  12. 12. ©2014 AkamaiFaster ForwardTM Example: UK Weather Privacy Policy
  13. 13. ©2014 AkamaiFaster ForwardTM SPOF – Single Point Of Failure Home Page, Truste Down 22 SecsBusiness Week, Truste Down 22 Secs
  14. 14. ©2014 AkamaiFaster ForwardTM SPOF-O-Matic, by Pat Meenan
  15. 15. ©2014 AkamaiFaster ForwardTM Recommendation Critical 3rd Party Components Strategy: Async - Reduces risk/delays to visual & functional content
  16. 16. ©2014 AkamaiFaster ForwardTM Catch: document.write() • Script-generated content fed directly into parser • Processed like static HTML • Popular with Ads • Doesn’t work with “Async” • Parser has already moved on • May WIPE your page! • When used in async script
  17. 17. ©2014 AkamaiFaster ForwardTM Enhancement: Nullify document.write() - Built into browsers (at least IE 9+, Safari, Chrome & Firefox) - Firefox even gives a nice console error…
  18. 18. ©2014 AkamaiFaster ForwardTM TRACKERS & ANALYTICS
  19. 19. ©2014 AkamaiFaster ForwardTM Example: Quantcast Image Beacon <!-- Quantcast Tag --> <div style="display:none;"> <img src="//pixel.quantserve.com/pixel/p-DRvpy588ab-zz.gif" border="0" height="1" width="1" alt="Quantcast"/> </div> <!-- End Quantcast tag --> Simple 1px Image Beacon: - 35 bytes – minimal bandwidth impact - Doesn’t block other resource downloads - Doesn’t block rendering
  20. 20. ©2014 AkamaiFaster ForwardTM Image Beacon Resource Contention
  21. 21. ©2014 AkamaiFaster ForwardTM Onload SPOF (Single Point Of Failure) Quantcast Down Quantcast Up
  22. 22. ©2014 AkamaiFaster ForwardTM Q: Do Script-Inserted Beacon Images Delay Onload? http://stevesouders.com/cuzillion/?c0=bi1dfff2_0_f
  23. 23. ©2014 AkamaiFaster ForwardTM Yes – Beacons delay onload (on most browsers) http://www.browserstack.com/screenshots/3c4be740eee4ad95af43ef0fc6a800d7a7aa7758 Beacons didn’t block onload on: - IE 7 - IE 8
  24. 24. ©2014 AkamaiFaster ForwardTM Example: Quantcast Full HTML Snippet Async Event Logging Async Event Logging Async Script Image Beacon Fallback
  25. 25. ©2014 AkamaiFaster ForwardTM Analytics Example: Google Analytics Async Event Logging Async Event Logging Async Script
  26. 26. ©2014 AkamaiFaster ForwardTM Onload SPOF (Single Point Of Failure) GA Up GA Down Onload-triggered visual changes
  27. 27. ©2014 AkamaiFaster ForwardTM Why Async? Why Not Defer? If you Defer, some Users may not make it…
  28. 28. ©2014 AkamaiFaster ForwardTM Recommendation Trackers & Analytics Strategy: Async without delaying onload - Invisible beacons shouldn’t delay visible content - Deferring beacons likely to miss users
  29. 29. ©2014 AkamaiFaster ForwardTM Beacons that don’t delay onload
  30. 30. ©2014 AkamaiFaster ForwardTM Beacons that don’t delay onload
  31. 31. ©2014 AkamaiFaster ForwardTM Works for Images Too!
  32. 32. ©2014 AkamaiFaster ForwardTM Catch: No Access to Parent Page <html><head> <title>Purchase Complete</title> </head><body> <script> var iframeDoc = createIFrame(); iframeDoc.open().write( '<body onload="'+ 'var js = document.createElement('script');'+ 'js.src = '//3p.com/tracker.js';'+ 'document.body.appendChild(js);">'); iframeDoc.close(); </script> </body></html> (new Image()).src = "//3p.com/beacon.gif?title=" + document.title; Tracker.js http://3p.com/beacon.gif?title=P urchase%20Complete http://3p.com/beacon.gif?title=
  33. 33. ©2014 AkamaiFaster ForwardTM Beacon API – Draft W3C Web Perf Spec
  34. 34. ©2014 AkamaiFaster ForwardTM Resource Priorities – Draft W3C Web Perf Spec - Marks low priority resources - A hint to the browser that this resource is less urgent - Doesn’t delay onload - Supports <link> tags - Lazyload-ed CSS do not block rendering - Works for even more tags - img, audio, video, script, link, embed, iframe, object, svg feImage, svg image, svg use, svg script, and svg tref.
  35. 35. ©2014 AkamaiFaster ForwardTM NON CRITICAL PAGE COMPONENTS
  36. 36. ©2014 AkamaiFaster ForwardTM Sync Example: AddThis Sync Script…
  37. 37. ©2014 AkamaiFaster ForwardTM Async Example: Share & Follow Buttons AsyncAsync Marker Marker
  38. 38. ©2014 AkamaiFaster ForwardTM Better – But Not Quite There… - Onload SPOF Risk - Resource Contention - Bad user communication - Page not considered “complete” until widget is loaded
  39. 39. ©2014 AkamaiFaster ForwardTM Recommendation Non Critical Page Components Strategy: Defer Download to onload - They shouldn’t delay/risk real content - Don’t wait for them before telling users the page is complete
  40. 40. ©2014 AkamaiFaster ForwardTM Defer Download Example <div id="fb-root"></div> <script> window.deferred_fb = function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/ sdk.js#xfbml=1&version=v2.0"; fjs.parentNode.insertBefore(js, fjs); }; window.addEventListener("load", function() { window.deferred_fb(document, 'script', 'facebook-jssdk')} ); </script> <div class="fb-share-button" data-href= "https://developers.facebook.com/docs/plugins/" data-type="button_count"></div> Generic
  41. 41. ©2014 AkamaiFaster ForwardTM Cringe… External Script Dependent Inline Script Further Dependent External Script Further down dependent inline script
  42. 42. ©2014 AkamaiFaster ForwardTM Run “inline” script at script’s onload Slight Snag… But you catch my drift… Don’t forget this one! (combine all dependents to avoid race condition bugs)
  43. 43. ©2014 AkamaiFaster ForwardTM Async scripts with Execution Order
  44. 44. ©2014 AkamaiFaster ForwardTM Protip: Merge 3rd party SDKs with 1st Party Content Facebook SDK (http://connect.facebook.net/en_US/sdk.js) Cache-Control: public, max-age=1200 Google Analytics (https://www.google-analytics.com/analytics.js) Cache-Control: public, max-age=43200 Twitter SDK (http://platform.twitter.com/widgets.js) Cache-Control: public, max-age=1800 Public Cache = Not Personalized ~= Can Serve From Your Domain But you need to constantly track changes…
  45. 45. ©2014 AkamaiFaster ForwardTM THIRD PARTY RESPONSIBILITY
  46. 46. ©2014 AkamaiFaster ForwardTM JSManners.com - Work in Progress… @triblondon @bbinto Kyle Kinnaman @bentlegen @igrigorik @guypod
  47. 47. ©2014 AkamaiFaster ForwardTM ThirdPartyContent.org (by Zoompf)
  48. 48. ©2014 AkamaiFaster ForwardTM Resource Timing Opt-In Ask Require All your 3rd Party Vendors to add this header! • Unless they give you a REALLY good privacy reason not to. Resource Timing Lets you track 3rd party performance! • At least send/receive timing…
  49. 49. ©2014 AkamaiFaster ForwardTM SUMMARY
  50. 50. ©2014 AkamaiFaster ForwardTM Tag Managers • “Master” Tag loads other 3rd Parties • “Child” tags often loaded async/deferred • Intended to easily add/remove/manage tags • Track beacon data once, send via APIs • Keep in mind: • An indirection before 3rd party is loaded • Makes it easy to add too many tags • It’s a tool – the strategy & decisions are still yours
  51. 51. ©2014 AkamaiFaster ForwardTM Summary - 3rd Party tags impact performance - SPOF, Onload SPOF, Resource Contention, Battery Consumption… - Pick your strategies: - Critical Widgets – Async with delaying onload - Analytics/Trackers – Async without delaying onload - Non-Critical Widgets – Defer Download (and Execution) - Consider Removing the Tag! - Track the Beacon & Resource Priorities Specs - Challenge your 3rd party vendors on their perf & availability
  52. 52. ©2014 AkamaiFaster ForwardTM Grow revenue opportunities with fast, personalized web experiences and manage complexity from peak demand, mobile devices and data collection. Visit Akamai at booth #608 Get a FREE copy of the new O’Reilly book Book signing by author Guy Podjarny: Wednesday & Thursday 3:00pm to 4:00pm
  53. 53. ©2014 AkamaiFaster ForwardTM THIRD PARTY PERFORMANCE Guy Podjarny (@guypod) CTO, Web Experience, Akamai Questions?

×