Your SlideShare is downloading. ×
0
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Third party-performance (Airbnb Nerds, Nov 2013)

1,933

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,933
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
14
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

    ×