Weitere ähnliche Inhalte Ähnlich wie Third party-performance (Airbnb Nerds, Nov 2013) (20) Mehr von Guy Podjarny (16) Kürzlich hochgeladen (20) Third party-performance (Airbnb Nerds, Nov 2013)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
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
12. SPOF – Not Only Your Homepage
Category Page, BazaarVoice down
Faster ForwardTM
23 Secs
©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
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
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
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
27. Beacon API – Draft W3C Spec
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
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
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
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
Hinweis der Redaktion 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>