Downloaded 15 times
Uploaded byGuy Podjarny
Third party-performance (Airbnb Nerds, Nov 2013)
The document discusses the impact of third-party performance on web page loading times, emphasizing the distinction between first-party and third-party resources. It outlines strategies to optimize performance, such as asynchronous loading for analytics and critical components, deferring downloads for non-critical widgets, and addressing single points of failure that could delay user experience. The importance of communication with third-party vendors regarding performance standards and strategies is also highlighted.
More Related Content
Similar to Third party-performance (Airbnb Nerds, Nov 2013)
Third party-performance (Airbnb Nerds, Nov 2013)
- 1. THIRD PARTY PERFORMANCE GuyPodjarny (@guypod) CTO, Web Experience, Akamai Faster ForwardTM ©2013 Akamai
- 2. What’s a thirdparty? - 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 thethird 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 PerPage 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! FasterForwardTM ©2013 Akamai
- 8. Airbnb Home Page FasterForwardTM ©2013 Akamai
- 9. Airbnb Location Page FasterForwardTM ©2013 Akamai
- 10. Why Should youCare? (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 – NotOnly Your Homepage Category Page, BazaarVoice down Faster ForwardTM 23 Secs ©2013 Akamai
- 13. Airbnb.ca homepage: SPOFdelays late actions Faster ForwardTM ©2013 Akamai
- 14. New York Page FasterForwardTM ©2013 Akamai
- 15. New York PageSPOF Faster ForwardTM ©2013 Akamai
- 16. The 1st PartyArsenal - 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’tdelay onload Faster ForwardTM ©2013 Akamai
- 19. Beacons that don’tdelay onload Faster ForwardTM ©2013 Akamai
- 20. Q: Do Script-InsertedBeacon Images Delay Onload? http://stevesouders.com/cuzillion/?c0=bi1dfff2_0_f Faster ForwardTM ©2013 Akamai
- 21. Yes – Beaconsdelay 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 ImagesToo! 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 InlineScript Further Dependent External Script Further down dependent inline script Faster ForwardTM ©2013 Akamai
- 25. Run “inline” scriptat 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 FasterForwardTM ©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 FasterForwardTM ©2013 Akamai
- 30. Defer Download Example FasterForwardTM ©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() - Builtinto browsers (at least IE 9+, Safari, Chrome & Firefox) - Firefox even gives a nice console error… Faster ForwardTM ©2013 Akamai
- 33.
- 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 blockingonload 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 withExecution 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 AskRequire 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 Partytags 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 GuyPodjarny (@guypod) CTO, Web Experience, Akamai Faster ForwardTM ©2013 Akamai
Editor's Notes
- #12 http://www.webpagetest.org/video/compare.php?tests=131014_TS_61a4bc3ecbd8a4d1b84e6d3cbf397a3b%2C131014_YR_d9dc75ab1c43d635a8b5d072d92c5830&thumbSize=200&ival=1000&end=visual
- #13 http://www.webpagetest.org/video/compare.php?tests=131014_DB_563f7c9daf8cbac69641778c7e433764%2C131014_6N_d2f5c727727583b8c4404c8777e60a2a&thumbSize=200&ival=1000&end=visual&font=9
- #14 http://www.webpagetest.org/video/compare.php?tests=131031_WP_2be372a6f51d099542f5d32317f124eb%2C131031_RT_2cc38c9687c1c0e87bab8dcb36364117&thumbSize=200&ival=1000&end=visual
- #15 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
- #16 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
- #19 <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>
- #20 <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>