Third Party Performance
Download as PPTX, PDF4 likes3,235 views
The document discusses the implications of third-party scripts in web performance, highlighting their presence as tags, analytics, and non-critical components. It outlines strategies to optimize performance, including asynchronous loading for analytics, deferring non-critical downloads, and managing critical components without blocking first-party content. The author emphasizes the importance of communicating with third-party vendors about their performance and availability to enhance page loading efficiency.
Third Party Performance
- 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. 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
- 9. SPOF Home Page, Optimizely & Truste Down Business Week, Truste Down Faster ForwardTM 22 Secs 45 Secs 22 Secs ©2013 Akamai
- 10. SPOF – Not Only Your Homepage Category Page, BazaarVoice down Faster ForwardTM 23 Secs ©2013 Akamai
- 11. 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
- 12. 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
- 13. Beacons that don’t delay onload Faster ForwardTM ©2013 Akamai
- 14. Beacons that don’t delay onload Faster ForwardTM ©2013 Akamai
- 15. Works for Images Too! Faster ForwardTM ©2013 Akamai
- 16. 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
- 17. External Script Cringe… Dependent Inline Script Further Dependent External Script Further down dependent inline script Faster ForwardTM ©2013 Akamai
- 18. 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
- 19. FYI: Omniture Workarounds Faster ForwardTM ©2013 Akamai
- 20. Beacon API – Draft W3C Spec Faster ForwardTM ©2013 Akamai
- 21. Non-Critical Page Components - Goal: Defer Download - If they’re not critical, they shouldn’t content with the rest Faster ForwardTM ©2013 Akamai
- 22. Defer Download Example Faster ForwardTM ©2013 Akamai
- 23. Defer Download Example Faster ForwardTM ©2013 Akamai
- 24. 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
- 26. Resource Priorities Faster ForwardTM ©2013 Akamai
- 27. 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
- 28. Async with blocking onload Faster ForwardTM ©2013 Akamai
- 29. 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
- 30. Async scripts with Execution Order Faster ForwardTM ©2013 Akamai
- 31. 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
- 32. 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
- 33. 3rd Party Checklist – Work in Progress… @bentlegen @igrigorik @bbinto @guypod Faster ForwardTM @triblondon Kyle Kinnaman ©2013 Akamai
- 34. 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
Editor's Notes
- #10: http://www.webpagetest.org/video/compare.php?tests=131014_TS_61a4bc3ecbd8a4d1b84e6d3cbf397a3b%2C131014_YR_d9dc75ab1c43d635a8b5d072d92c5830&thumbSize=200&ival=1000&end=visual
- #11: http://www.webpagetest.org/video/compare.php?tests=131014_DB_563f7c9daf8cbac69641778c7e433764%2C131014_6N_d2f5c727727583b8c4404c8777e60a2a&thumbSize=200&ival=1000&end=visual&font=9
- #14: <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>
- #15: <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>