Upload
guypod
View
2.129
Download
2
Embed Size (px)
DESCRIPTION
Third parties are a part of our reality, and offer great business value - but also present some very real performance concerns. This deck attempts to define and offer strategies, along with some practical tips, on how to deal with this problem.
Citation preview
©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
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
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
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()
©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