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.

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. Airbnb Home Page
Faster ForwardTM
©2013 Akamai

9. Airbnb Location Page
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

11. SPOF
Home Page, Optimizely & Truste Down
Business Week, Truste Down
Faster ForwardTM
22 Secs
45 Secs
22 Secs
©2013 Akamai

12. SPOF – Not Only Your Homepage
Category Page, BazaarVoice down
Faster ForwardTM
23 Secs
©2013 Akamai

13. Airbnb.ca homepage: SPOF delays late actions
Faster ForwardTM
©2013 Akamai

14. New York Page
Faster ForwardTM
©2013 Akamai

15. New York Page SPOF
Faster ForwardTM
©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

18. Beacons that don’t delay onload
Faster ForwardTM
©2013 Akamai

19. Beacons that don’t delay onload
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

22. Works for Images Too!
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

24. External Script
Cringe…
Dependent Inline Script
Further Dependent
External Script
Further down
dependent
inline script
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

26. FYI: Omniture Workarounds
Faster ForwardTM
©2013 Akamai

27. Beacon API – Draft W3C Spec
Faster ForwardTM
©2013 Akamai

28. Non-Critical Page Components
- Goal: Defer Download
- If they’re not critical, they shouldn’t content with the rest
Faster ForwardTM
©2013 Akamai

29. Defer Download Example
Faster ForwardTM
©2013 Akamai

30. Defer Download Example
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

33. Resource Priorities
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

35. Async with blocking onload
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

37. Async scripts with 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

42. Questions?
THIRD PARTY PERFORMANCE
Guy Podjarny (@guypod)
CTO, Web Experience, Akamai
Faster ForwardTM
©2013 Akamai