Third party-performance (Airbnb Nerds, Nov 2013)

  • 1,813 views
Uploaded on

Almost every site on the internet today serves 3rd-party assets and code - jQuery, analytics, trackers, share buttons, ads - from both their own servers and others - cloud providers, dedicated …

Almost every site on the internet today serves 3rd-party assets and code - jQuery, analytics, trackers, share buttons, ads - from both their own servers and others - cloud providers, dedicated hardware, CDNs, google hosting. These third parties can have a significant effect on performance, delaying the load event, deferring actions, and being a single point of failure beyond your control. This deck discusses techniques and strategies for working with 3rd parties within these limitations, and shares some relevant community work.

More in: Technology
  • 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
1,813
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
13
Comments
0
Likes
3

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
  • http://www.webpagetest.org/video/compare.php?tests=131014_DB_563f7c9daf8cbac69641778c7e433764%2C131014_6N_d2f5c727727583b8c4404c8777e60a2a&thumbSize=200&ival=1000&end=visual&font=9
  • http://www.webpagetest.org/video/compare.php?tests=131031_WP_2be372a6f51d099542f5d32317f124eb%2C131031_RT_2cc38c9687c1c0e87bab8dcb36364117&thumbSize=200&ival=1000&end=visual
  • http://www.webpagetest.org/video/compare.php?tests=131101_AR_55144c3188a1273c298b66fb36f134ff-l:MixPanel+Down%2C131031_T0_edd6da0f89972c3fa9321efc60ca58ec-l:Google+Maps+Down%2C131031_06_841a45f9090a02e44ce8510f23703b8a&thumbSize=200&ival=500&end=visual
  • http://www.webpagetest.org/video/compare.php?tests=131101_AR_55144c3188a1273c298b66fb36f134ff-l:MixPanel+Down%2C131031_T0_edd6da0f89972c3fa9321efc60ca58ec-l:Google+Maps+Down%2C131031_06_841a45f9090a02e44ce8510f23703b8a&thumbSize=200&ival=500&end=visual
  • <script>(function(url,tag){variframe = document.createElement('iframe'); (iframe.frameElement || iframe).style.cssText = "width: 0; height: 0; border: 0";var where = document.getElementsByTagName('script'); where = where[where.length - 1];where.parentNode.insertBefore(iframe, where);var doc = iframe.contentWindow.document;doc.open().write('<body onload="'+ 'varjs = document.createElement(\''+tag+'\');'+ 'js.src = \''+ url +'\';'+ 'document.body.appendChild(js);">');doc.close();})('http://3party.com/widget.js','img');</script>
  • <script>(function(url,tag){variframe = document.createElement('iframe'); (iframe.frameElement || iframe).style.cssText = "width: 0; height: 0; border: 0";var where = document.getElementsByTagName('script'); where = where[where.length - 1];where.parentNode.insertBefore(iframe, where);var doc = iframe.contentWindow.document;doc.open().write('<body onload="'+ 'varjs = document.createElement(\''+tag+'\');'+ 'js.src = \''+ url +'\';'+ 'document.body.appendChild(js);">');doc.close();})('http://3party.com/widget.js','img');</script>

Transcript

  • 1. THIRD PARTY PERFORMANCE Guy Podjarny (@guypod) CTO, Web Experience, Akamai Faster ForwardTM ©2013 Akamai
  • 2. What’s a third party? - Not a 1st 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) Cloud Provider (e.g. AWS) CDN (e.g. Akamai) Faster ForwardTM ©2013 Akamai
  • 3. Where are the third parties? - A tag on the page - Analytics/trackers - invisible - Image Tags & Scripts - Non-critical page components (e.g. Share buttons, Get feedback…) - Critical Page Components (A/B Testing, Shopping Cart Personalization, Ads(?)..) - An inline Cloud proxy (e.g. MotionPoint, SiteSpect) Faster ForwardTM ©2013 Akamai
  • 4. # Domains Per Page Sep 2013 Percentiles: - 25th : 4 domains - 50th : 10 domains - 75th : 21 domains - 90th : 36 domains Faster ForwardTM ©2013 Akamai
  • 5. Ghostery Data - Media Faster ForwardTM ©2013 Akamai
  • 6. Ghostery Data - Retail Faster ForwardTM ©2013 Akamai
  • 7. 3rd Party Extravaganza! Faster ForwardTM ©2013 Akamai
  • 8. Airbnb Home Page Faster ForwardTM ©2013 Akamai
  • 9. Airbnb Location Page Faster ForwardTM ©2013 Akamai
  • 10. Why Should you Care? (from a performance perspective) - Single Point of Failure – SPOF - Scripts block rendering of everything below them - Delayed load event - Users see progress indicators for longer - Other deferred actions get delayed - e.g. $.ready(myfunc) - Delayed 1st party scripts - Resource Contention - Battery Consumption (on mobile) Faster ForwardTM ©2013 Akamai
  • 11. SPOF Home Page, Optimizely & Truste Down Business Week, Truste Down Faster ForwardTM 22 Secs 45 Secs 22 Secs ©2013 Akamai
  • 12. SPOF – Not Only Your Homepage Category Page, BazaarVoice down Faster ForwardTM 23 Secs ©2013 Akamai
  • 13. Airbnb.ca homepage: SPOF delays late actions Faster ForwardTM ©2013 Akamai
  • 14. New York Page Faster ForwardTM ©2013 Akamai
  • 15. New York Page SPOF Faster ForwardTM ©2013 Akamai
  • 16. The 1st Party Arsenal - Async - Delay onload (async att) vs don’t delay onload (IFrame) - Defer Execution - Defer Download - Remove Tag Faster ForwardTM ©2013 Akamai
  • 17. Analytics & Beacons - Goal: Async without delaying onload - Shouldn’t delay visible content - Defer not great since it’s likely to miss users Faster ForwardTM ©2013 Akamai
  • 18. Beacons that don’t delay onload Faster ForwardTM ©2013 Akamai
  • 19. Beacons that don’t delay onload Faster ForwardTM ©2013 Akamai
  • 20. Q: Do Script-Inserted Beacon Images Delay Onload? http://stevesouders.com/cuzillion/?c0=bi1dfff2_0_f Faster ForwardTM ©2013 Akamai
  • 21. Yes – Beacons delay onload (on most browsers) http://www.browserstack.com/screenshots/3c4be740eee4ad95af43ef0fc6a800d7a7aa7758 Beacons didn’t block onload on: - IE 7 - IE 8 Faster ForwardTM ©2013 Akamai
  • 22. Works for Images Too! Faster ForwardTM ©2013 Akamai
  • 23. Analytics & Beacons - Goal: Async without delaying onload - Shouldn’t delay visible content - Defer not great since it’s likely to miss users - Technique: Dynamically generated IFrame - Only works if no page manipulation is required - Catches and what can you do about them - Inline & external script relationships - Event registration Faster ForwardTM ©2013 Akamai
  • 24. External Script Cringe… Dependent Inline Script Further Dependent External Script Further down dependent inline script Faster ForwardTM ©2013 Akamai
  • 25. Run “inline” script at onload Slight Snag… But you catch my drift… Don’t forget this one! (combine all dependents to avoid race condition bugs) Faster ForwardTM ©2013 Akamai
  • 26. FYI: Omniture Workarounds Faster ForwardTM ©2013 Akamai
  • 27. Beacon API – Draft W3C Spec Faster ForwardTM ©2013 Akamai
  • 28. Non-Critical Page Components - Goal: Defer Download - If they’re not critical, they shouldn’t content with the rest Faster ForwardTM ©2013 Akamai
  • 29. Defer Download Example Faster ForwardTM ©2013 Akamai
  • 30. Defer Download Example Faster ForwardTM ©2013 Akamai
  • 31. Non-Critical Page Components - Goal: Defer Download - If they’re not critical, they shouldn’t content with the rest - Catches and what can you do about them - Event registration Inline & external script relationships document.write() Execution order Faster ForwardTM ©2013 Akamai
  • 32. Nullify document.write() - Built into browsers (at least IE 9+, Safari, Chrome & Firefox) - Firefox even gives a nice console error… Faster ForwardTM ©2013 Akamai
  • 33. Resource Priorities Faster ForwardTM ©2013 Akamai
  • 34. Critical Page Components - Methodology: Async with blocking onload - Keep 3rd parties from blocking 1st party content - Delay onload as page not complete until component is loaded Faster ForwardTM ©2013 Akamai
  • 35. Async with blocking onload Faster ForwardTM ©2013 Akamai
  • 36. Critical Page Components - Methodology: Async with blocking onload - Keep 3rd parties from blocking 1st party content - Delay onload as page not complete until component is loaded - Catches and what can you do about them - Event registration Inline & external script relationships document.write() Execution order Faster ForwardTM ©2013 Akamai
  • 37. Async scripts with Execution Order Faster ForwardTM ©2013 Akamai
  • 38. Interim Summary - Analytics/Beacons – Async without delaying onload - Non-Critical Widgets – Defer Download (and Execution) - Critical Widgets – Async with delaying onload Faster ForwardTM ©2013 Akamai
  • 39. 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. Faster ForwardTM ©2013 Akamai
  • 40. 3rd Party Checklist – Work in Progress… @bentlegen @igrigorik @bbinto @guypod Faster ForwardTM @triblondon Kyle Kinnaman ©2013 Akamai
  • 41. Summary - 3rd Party tags are a part of our reality… - Pick your strategies: - Analytics/Beacons – Async without delaying onload - Non-Critical Widgets – Defer Download (and Execution) - Critical Widgets – Async with delaying onload - Track the Beacon & Resource Priorities Specs - Challenge your 3rd party vendors on their perf & availability Faster ForwardTM ©2013 Akamai
  • 42. Questions? THIRD PARTY PERFORMANCE Guy Podjarny (@guypod) CTO, Web Experience, Akamai Faster ForwardTM ©2013 Akamai