third party-performance (airbnb nerds, nov 2013)
DESCRIPTION
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.TRANSCRIPT
©2013 AkamaiFaster ForwardTM
THIRD PARTY PERFORMANCE
Guy Podjarny (@guypod)
CTO, Web Experience, Akamai
©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)
©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)
©2013 AkamaiFaster ForwardTM
# Domains Per Page
Sep 2013 Percentiles:- 25th : 4 domains- 50th : 10 domains- 75th : 21 domains- 90th : 36 domains
©2013 AkamaiFaster ForwardTM
Ghostery Data - Media
©2013 AkamaiFaster ForwardTM
Ghostery Data - Retail
©2013 AkamaiFaster ForwardTM
3rd Party Extravaganza!
©2013 AkamaiFaster ForwardTM
Airbnb Home Page
©2013 AkamaiFaster ForwardTM
Airbnb Location Page
©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)
©2013 AkamaiFaster ForwardTM
SPOF
Home Page, Optimizely & Truste Down 22 Secs 45 Secs
Business Week, Truste Down 22 Secs
©2013 AkamaiFaster ForwardTM
SPOF – Not Only Your Homepage
Category Page, BazaarVoice down 23 Secs
©2013 AkamaiFaster ForwardTM
Airbnb.ca homepage: SPOF delays late actions
©2013 AkamaiFaster ForwardTM
New York Page
©2013 AkamaiFaster ForwardTM
New York Page SPOF
©2013 AkamaiFaster ForwardTM
The 1st Party Arsenal
- Async- Delay onload (async att) vs don’t delay onload (IFrame)
- Defer Execution- Defer Download- Remove Tag
©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
©2013 AkamaiFaster ForwardTM
Beacons that don’t delay onload
©2013 AkamaiFaster ForwardTM
Beacons that don’t delay onload
©2013 AkamaiFaster ForwardTM
Q: Do Script-Inserted Beacon Images Delay Onload?
http://stevesouders.com/cuzillion/?c0=bi1dfff2_0_f
©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
©2013 AkamaiFaster ForwardTM
Works for Images Too!
©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
©2013 AkamaiFaster ForwardTM
Cringe… External Script
Dependent Inline Script
Further Dependent External Script
Further down dependent inline script
©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)
©2013 AkamaiFaster ForwardTM
FYI: Omniture Workarounds
©2013 AkamaiFaster ForwardTM
Beacon API – Draft W3C Spec
©2013 AkamaiFaster ForwardTM
Non-Critical Page Components
- Goal: Defer Download- If they’re not critical, they shouldn’t content with the rest
©2013 AkamaiFaster ForwardTM
Defer Download Example
©2013 AkamaiFaster ForwardTM
Defer Download Example
©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
©2013 AkamaiFaster ForwardTM
Nullify document.write()
- Built into browsers (at least IE 9+, Safari, Chrome & Firefox)- Firefox even gives a nice console error…
©2013 AkamaiFaster ForwardTM
Resource Priorities
©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
©2013 AkamaiFaster ForwardTM
Async with blocking onload
©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
©2013 AkamaiFaster ForwardTM
Async scripts with Execution Order
©2013 AkamaiFaster ForwardTM
Interim Summary
- Analytics/Beacons – Async without delaying onload- Non-Critical Widgets – Defer Download (and Execution)- Critical Widgets – Async with delaying onload
©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.
©2013 AkamaiFaster ForwardTM
3rd Party Checklist – Work in Progress…
@triblondon
@bbinto
Kyle Kinnaman
@bentlegen
@igrigorik
@guypod
©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
©2013 AkamaiFaster ForwardTM
THIRD PARTY PERFORMANCE
Guy Podjarny (@guypod)
CTO, Web Experience, Akamai
Questions?