Third Party Performance (Velocity, 2014)

  • 819 views
Uploaded 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 …

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).

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
819
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
16
Comments
0
Likes
1

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.webpagetest.org/video/compare.php?tests=131014_TS_61a4bc3ecbd8a4d1b84e6d3cbf397a3b%2C131014_YR_d9dc75ab1c43d635a8b5d072d92c5830&thumbSize=200&ival=1000&end=visual

Transcript

  • 1. ©2014 AkamaiFaster ForwardTM THIRD PARTY PERFORMANCE Guy Podjarny (@guypod) CTO, Web Experience, Akamai
  • 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. ©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. ©2014 AkamaiFaster ForwardTM # Domains Per Page May 2014 Percentiles: - 25th : 5 domains - 50th : 11 domains - 75th : 21 domains - 90th : 35 domains
  • 5. ©2014 AkamaiFaster ForwardTM Ghostery Data - Media
  • 6. ©2014 AkamaiFaster ForwardTM Ghostery Data - Retail
  • 7. ©2014 AkamaiFaster ForwardTM 3rd Party Extravaganza!
  • 8. ©2014 AkamaiFaster ForwardTM 3rd Parties Have Outages Too
  • 9. ©2014 AkamaiFaster ForwardTM Solution: Remove 3rd Party Tag
  • 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. ©2014 AkamaiFaster ForwardTM CRITICAL PAGE COMPONENTS
  • 12. ©2014 AkamaiFaster ForwardTM Example: UK Weather Privacy Policy
  • 13. ©2014 AkamaiFaster ForwardTM SPOF – Single Point Of Failure Home Page, Truste Down 22 SecsBusiness Week, Truste Down 22 Secs
  • 14. ©2014 AkamaiFaster ForwardTM SPOF-O-Matic, by Pat Meenan
  • 15. ©2014 AkamaiFaster ForwardTM Recommendation Critical 3rd Party Components Strategy: Async - Reduces risk/delays to visual & functional content
  • 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. ©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. ©2014 AkamaiFaster ForwardTM TRACKERS & ANALYTICS
  • 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. ©2014 AkamaiFaster ForwardTM Image Beacon Resource Contention
  • 21. ©2014 AkamaiFaster ForwardTM Onload SPOF (Single Point Of Failure) Quantcast Down Quantcast Up
  • 22. ©2014 AkamaiFaster ForwardTM Q: Do Script-Inserted Beacon Images Delay Onload? http://stevesouders.com/cuzillion/?c0=bi1dfff2_0_f
  • 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. ©2014 AkamaiFaster ForwardTM Example: Quantcast Full HTML Snippet Async Event Logging Async Event Logging Async Script Image Beacon Fallback
  • 25. ©2014 AkamaiFaster ForwardTM Analytics Example: Google Analytics Async Event Logging Async Event Logging Async Script
  • 26. ©2014 AkamaiFaster ForwardTM Onload SPOF (Single Point Of Failure) GA Up GA Down Onload-triggered visual changes
  • 27. ©2014 AkamaiFaster ForwardTM Why Async? Why Not Defer? If you Defer, some Users may not make it…
  • 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. ©2014 AkamaiFaster ForwardTM Beacons that don’t delay onload
  • 30. ©2014 AkamaiFaster ForwardTM Beacons that don’t delay onload
  • 31. ©2014 AkamaiFaster ForwardTM Works for Images Too!
  • 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. ©2014 AkamaiFaster ForwardTM Beacon API – Draft W3C Web Perf Spec
  • 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. ©2014 AkamaiFaster ForwardTM NON CRITICAL PAGE COMPONENTS
  • 36. ©2014 AkamaiFaster ForwardTM Sync Example: AddThis Sync Script…
  • 37. ©2014 AkamaiFaster ForwardTM Async Example: Share & Follow Buttons AsyncAsync Marker Marker
  • 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. ©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. ©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. ©2014 AkamaiFaster ForwardTM Cringe… External Script Dependent Inline Script Further Dependent External Script Further down dependent inline script
  • 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. ©2014 AkamaiFaster ForwardTM Async scripts with Execution Order
  • 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. ©2014 AkamaiFaster ForwardTM THIRD PARTY RESPONSIBILITY
  • 46. ©2014 AkamaiFaster ForwardTM JSManners.com - Work in Progress… @triblondon @bbinto Kyle Kinnaman @bentlegen @igrigorik @guypod
  • 47. ©2014 AkamaiFaster ForwardTM ThirdPartyContent.org (by Zoompf)
  • 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. ©2014 AkamaiFaster ForwardTM SUMMARY
  • 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. ©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. ©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. ©2014 AkamaiFaster ForwardTM THIRD PARTY PERFORMANCE Guy Podjarny (@guypod) CTO, Web Experience, Akamai Questions?