Third party-performance (Airbnb Nerds, Nov 2013)
-
Upload
guypod -
Category
Technology
-
view
1.906 -
download
1
description
Transcript of Third party-performance (Airbnb Nerds, Nov 2013)
![Page 1: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/1.jpg)
©2013 AkamaiFaster ForwardTM
THIRD PARTY PERFORMANCE
Guy Podjarny (@guypod)
CTO, Web Experience, Akamai
![Page 2: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/2.jpg)
©2013 AkamaiFaster ForwardTM
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)
![Page 3: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/3.jpg)
©2013 AkamaiFaster ForwardTM
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)
![Page 4: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/4.jpg)
©2013 AkamaiFaster ForwardTM
# Domains Per Page
Sep 2013 Percentiles:- 25th : 4 domains- 50th : 10 domains- 75th : 21 domains- 90th : 36 domains
![Page 5: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/5.jpg)
©2013 AkamaiFaster ForwardTM
Ghostery Data - Media
![Page 6: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/6.jpg)
©2013 AkamaiFaster ForwardTM
Ghostery Data - Retail
![Page 7: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/7.jpg)
©2013 AkamaiFaster ForwardTM
3rd Party Extravaganza!
![Page 8: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/8.jpg)
©2013 AkamaiFaster ForwardTM
Airbnb Home Page
![Page 9: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/9.jpg)
©2013 AkamaiFaster ForwardTM
Airbnb Location Page
![Page 10: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/10.jpg)
©2013 AkamaiFaster ForwardTM
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)
![Page 11: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/11.jpg)
©2013 AkamaiFaster ForwardTM
SPOF
Home Page, Optimizely & Truste Down 22 Secs 45 Secs
Business Week, Truste Down 22 Secs
![Page 12: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/12.jpg)
©2013 AkamaiFaster ForwardTM
SPOF – Not Only Your Homepage
Category Page, BazaarVoice down 23 Secs
![Page 13: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/13.jpg)
©2013 AkamaiFaster ForwardTM
Airbnb.ca homepage: SPOF delays late actions
![Page 14: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/14.jpg)
©2013 AkamaiFaster ForwardTM
New York Page
![Page 15: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/15.jpg)
©2013 AkamaiFaster ForwardTM
New York Page SPOF
![Page 16: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/16.jpg)
©2013 AkamaiFaster ForwardTM
The 1st Party Arsenal
- Async- Delay onload (async att) vs don’t delay onload (IFrame)
- Defer Execution- Defer Download- Remove Tag
![Page 17: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/17.jpg)
©2013 AkamaiFaster ForwardTM
Analytics & Beacons
- Goal: Async without delaying onload- Shouldn’t delay visible content- Defer not great since it’s likely to miss users
![Page 18: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/18.jpg)
©2013 AkamaiFaster ForwardTM
Beacons that don’t delay onload
![Page 19: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/19.jpg)
©2013 AkamaiFaster ForwardTM
Beacons that don’t delay onload
![Page 20: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/20.jpg)
©2013 AkamaiFaster ForwardTM
Q: Do Script-Inserted Beacon Images Delay Onload?
http://stevesouders.com/cuzillion/?c0=bi1dfff2_0_f
![Page 21: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/21.jpg)
©2013 AkamaiFaster ForwardTM
Yes – Beacons delay onload (on most browsers)
http://www.browserstack.com/screenshots/3c4be740eee4ad95af43ef0fc6a800d7a7aa7758
Beacons didn’t block onload on:- IE 7- IE 8
![Page 22: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/22.jpg)
©2013 AkamaiFaster ForwardTM
Works for Images Too!
![Page 23: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/23.jpg)
©2013 AkamaiFaster ForwardTM
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
![Page 24: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/24.jpg)
©2013 AkamaiFaster ForwardTM
Cringe… External Script
Dependent Inline Script
Further Dependent External Script
Further down dependent inline script
![Page 25: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/25.jpg)
©2013 AkamaiFaster ForwardTM
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)
![Page 26: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/26.jpg)
©2013 AkamaiFaster ForwardTM
FYI: Omniture Workarounds
![Page 27: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/27.jpg)
©2013 AkamaiFaster ForwardTM
Beacon API – Draft W3C Spec
![Page 28: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/28.jpg)
©2013 AkamaiFaster ForwardTM
Non-Critical Page Components
- Goal: Defer Download- If they’re not critical, they shouldn’t content with the rest
![Page 29: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/29.jpg)
©2013 AkamaiFaster ForwardTM
Defer Download Example
![Page 30: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/30.jpg)
©2013 AkamaiFaster ForwardTM
Defer Download Example
![Page 31: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/31.jpg)
©2013 AkamaiFaster ForwardTM
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
![Page 32: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/32.jpg)
©2013 AkamaiFaster ForwardTM
Nullify document.write()
- Built into browsers (at least IE 9+, Safari, Chrome & Firefox)- Firefox even gives a nice console error…
![Page 33: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/33.jpg)
©2013 AkamaiFaster ForwardTM
Resource Priorities
![Page 34: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/34.jpg)
©2013 AkamaiFaster ForwardTM
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
![Page 35: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/35.jpg)
©2013 AkamaiFaster ForwardTM
Async with blocking onload
![Page 36: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/36.jpg)
©2013 AkamaiFaster ForwardTM
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
![Page 37: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/37.jpg)
©2013 AkamaiFaster ForwardTM
Async scripts with Execution Order
![Page 38: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/38.jpg)
©2013 AkamaiFaster ForwardTM
Interim Summary
- Analytics/Beacons – Async without delaying onload- Non-Critical Widgets – Defer Download (and Execution)- Critical Widgets – Async with delaying onload
![Page 39: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/39.jpg)
©2013 AkamaiFaster ForwardTM
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.
![Page 40: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/40.jpg)
©2013 AkamaiFaster ForwardTM
3rd Party Checklist – Work in Progress…
@triblondon
@bbinto
Kyle Kinnaman
@bentlegen
@igrigorik
@guypod
![Page 41: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/41.jpg)
©2013 AkamaiFaster ForwardTM
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
![Page 42: Third party-performance (Airbnb Nerds, Nov 2013)](https://reader034.fdocuments.us/reader034/viewer/2022052522/554a1e74b4c905825d8b5605/html5/thumbnails/42.jpg)
©2013 AkamaiFaster ForwardTM
THIRD PARTY PERFORMANCE
Guy Podjarny (@guypod)
CTO, Web Experience, Akamai
Questions?