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.

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

25. Nullify document.write()
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