Third party components are a part of any modern site: JS libs, analytics, trackers, share buttons, ads. Many components, each adding its performance cost, cause render delays or can effectively take your site down. This isn’t your code nor your servers, so what can you do about it? This presentation will answer this question with strategies and tactics for keeping 3rd parties from taking you down. This talk was given at Velocity Santa Clara, 2014: The presentation from Velocity Santa Clara, 2014 (http://velocityconf.com/velocity2014/public/schedule/detail/35448).

1. ©2014 AkamaiFaster ForwardTM
THIRD PARTY PERFORMANCE
Guy Podjarny (@guypod)
CTO, Web Experience, Akamai

2. ©2014 AkamaiFaster ForwardTM
What’s a third 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)
- IaaS Cloud Provider (e.g. EC2)
- CDN (e.g. Akamai)
Not a 1st Party?

3. ©2014 AkamaiFaster ForwardTM
(Web) Third Party Types
Tracker Beacons
Ex: ad networks image beacons
Analytics
Ex: Google Analytics, Comscore
Non-Critical Page Components
Ex: Social sharing buttons
Critical Page Components
Ex: Privacy prompts, p13n, ads(?)
Inline Cloud Proxies
Ex: Mobile Transcoders,
MotionPoint, SiteSpect

4. ©2014 AkamaiFaster ForwardTM
# Domains Per Page
May 2014 Percentiles:
- 25th : 5 domains
- 50th : 11 domains
- 75th : 21 domains
- 90th : 35 domains

5. ©2014 AkamaiFaster ForwardTM
Ghostery Data - Media

6. ©2014 AkamaiFaster ForwardTM
Ghostery Data - Retail

7. ©2014 AkamaiFaster ForwardTM
3rd Party Extravaganza!

8. ©2014 AkamaiFaster ForwardTM
3rd Parties Have Outages Too

9. ©2014 AkamaiFaster ForwardTM
Solution: Remove 3rd Party Tag

10. ©2014 AkamaiFaster ForwardTM
No Silver Bullet…
We need to do this the hard way:
- Understand each 3rd Party type
- Understand their problems
- Choose a solution
- Understand the gotcha’s

11. ©2014 AkamaiFaster ForwardTM
CRITICAL PAGE COMPONENTS

12. ©2014 AkamaiFaster ForwardTM
Example: UK Weather Privacy Policy

13. ©2014 AkamaiFaster ForwardTM
SPOF – Single Point Of Failure
Home Page, Truste Down
22 SecsBusiness Week, Truste Down 22 Secs

14. ©2014 AkamaiFaster ForwardTM
SPOF-O-Matic, by Pat Meenan

15. ©2014 AkamaiFaster ForwardTM
Recommendation
Critical 3rd Party Components Strategy:
Async
- Reduces risk/delays to visual & functional content

16. ©2014 AkamaiFaster ForwardTM
Catch: document.write()
• Script-generated content fed directly into parser
• Processed like static HTML
• Popular with Ads
• Doesn’t work with “Async”
• Parser has already moved on
• May WIPE your page!
• When used in async script

17. ©2014 AkamaiFaster ForwardTM
Enhancement: Nullify document.write()
- Built into browsers (at least IE 9+, Safari, Chrome & Firefox)
- Firefox even gives a nice console error…

18. ©2014 AkamaiFaster ForwardTM
TRACKERS & ANALYTICS

19. ©2014 AkamaiFaster ForwardTM
Example: Quantcast Image Beacon
<!-- Quantcast Tag -->
<div style="display:none;">
<img src="//pixel.quantserve.com/pixel/p-DRvpy588ab-zz.gif"
border="0" height="1" width="1" alt="Quantcast"/>
</div>
<!-- End Quantcast tag -->
Simple 1px Image Beacon:
- 35 bytes – minimal bandwidth impact
- Doesn’t block other resource downloads
- Doesn’t block rendering

20. ©2014 AkamaiFaster ForwardTM
Image Beacon Resource Contention

21. ©2014 AkamaiFaster ForwardTM
Onload SPOF (Single Point Of Failure)
Quantcast
Down
Quantcast
Up

22. ©2014 AkamaiFaster ForwardTM
Q: Do Script-Inserted Beacon Images Delay Onload?
http://stevesouders.com/cuzillion/?c0=bi1dfff2_0_f

23. ©2014 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

24. ©2014 AkamaiFaster ForwardTM
Example: Quantcast Full HTML Snippet
Async Event Logging
Async Event Logging
Async Script
Image Beacon Fallback

25. ©2014 AkamaiFaster ForwardTM
Analytics Example: Google Analytics
Async Event Logging
Async Event Logging
Async Script

26. ©2014 AkamaiFaster ForwardTM
Onload SPOF (Single Point Of Failure)
GA Up
GA Down
Onload-triggered
visual changes

27. ©2014 AkamaiFaster ForwardTM
Why Async? Why Not Defer?
If you Defer, some Users may not make it…

28. ©2014 AkamaiFaster ForwardTM
Recommendation
Trackers & Analytics Strategy:
Async without delaying onload
- Invisible beacons shouldn’t delay visible content
- Deferring beacons likely to miss users

29. ©2014 AkamaiFaster ForwardTM
Beacons that don’t delay onload

30. ©2014 AkamaiFaster ForwardTM
Beacons that don’t delay onload

31. ©2014 AkamaiFaster ForwardTM
Works for Images Too!

32. ©2014 AkamaiFaster ForwardTM
Catch: No Access to Parent Page
<html><head>
<title>Purchase Complete</title>
</head><body>
<script>
var iframeDoc = createIFrame();
iframeDoc.open().write(
'<body onload="'+
'var js = document.createElement('script');'+
'js.src = '//3p.com/tracker.js';'+
'document.body.appendChild(js);">');
iframeDoc.close();
</script>
</body></html>
(new Image()).src = "//3p.com/beacon.gif?title=" + document.title;
Tracker.js
http://3p.com/beacon.gif?title=P
urchase%20Complete
http://3p.com/beacon.gif?title=

33. ©2014 AkamaiFaster ForwardTM
Beacon API – Draft W3C Web Perf Spec

34. ©2014 AkamaiFaster ForwardTM
Resource Priorities – Draft W3C Web Perf Spec
- Marks low priority resources
- A hint to the browser that this
resource is less urgent
- Doesn’t delay onload
- Supports <link> tags
- Lazyload-ed CSS do not block rendering
- Works for even more tags
- img, audio, video, script, link, embed, iframe, object, svg feImage, svg image, svg
use, svg script, and svg tref.

35. ©2014 AkamaiFaster ForwardTM
NON CRITICAL PAGE COMPONENTS

36. ©2014 AkamaiFaster ForwardTM
Sync Example: AddThis
Sync Script…

37. ©2014 AkamaiFaster ForwardTM
Async Example: Share & Follow Buttons
AsyncAsync
Marker
Marker

38. ©2014 AkamaiFaster ForwardTM
Better – But Not Quite There…
- Onload SPOF Risk
- Resource Contention
- Bad user communication
- Page not considered “complete”
until widget is loaded

39. ©2014 AkamaiFaster ForwardTM
Recommendation
Non Critical Page Components Strategy:
Defer Download to onload
- They shouldn’t delay/risk real content
- Don’t wait for them before telling users the page is complete

40. ©2014 AkamaiFaster ForwardTM
Defer Download Example
<div id="fb-root"></div>
<script>
window.deferred_fb = function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/
sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
};
window.addEventListener("load",
function() { window.deferred_fb(document,
'script', 'facebook-jssdk')}
);
</script>
<div class="fb-share-button" data-href=
"https://developers.facebook.com/docs/plugins/"
data-type="button_count"></div>
Generic

41. ©2014 AkamaiFaster ForwardTM
Cringe… External Script
Dependent Inline Script
Further Dependent
External Script
Further down
dependent
inline script

42. ©2014 AkamaiFaster ForwardTM
Run “inline” script at script’s onload
Slight Snag…
But you catch my drift…
Don’t forget this one!
(combine all dependents to
avoid race condition bugs)

43. ©2014 AkamaiFaster ForwardTM
Async scripts with Execution Order

44. ©2014 AkamaiFaster ForwardTM
Protip: Merge 3rd party SDKs with 1st Party Content
Facebook SDK (http://connect.facebook.net/en_US/sdk.js)
Cache-Control: public, max-age=1200
Google Analytics (https://www.google-analytics.com/analytics.js)
Cache-Control: public, max-age=43200
Twitter SDK (http://platform.twitter.com/widgets.js)
Cache-Control: public, max-age=1800
Public Cache = Not Personalized ~= Can Serve From Your Domain
But you need to constantly track changes…

45. ©2014 AkamaiFaster ForwardTM
THIRD PARTY RESPONSIBILITY

46. ©2014 AkamaiFaster ForwardTM
JSManners.com - Work in Progress…
@triblondon
@bbinto
Kyle Kinnaman
@bentlegen
@igrigorik
@guypod

47. ©2014 AkamaiFaster ForwardTM
ThirdPartyContent.org (by Zoompf)

48. ©2014 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.
Resource Timing Lets you track 3rd party performance!
• At least send/receive timing…

49. ©2014 AkamaiFaster ForwardTM
SUMMARY

50. ©2014 AkamaiFaster ForwardTM
Tag Managers
• “Master” Tag loads other 3rd Parties
• “Child” tags often loaded async/deferred
• Intended to easily add/remove/manage tags
• Track beacon data once, send via APIs
• Keep in mind:
• An indirection before 3rd party is loaded
• Makes it easy to add too many tags
• It’s a tool – the strategy & decisions are still yours

51. ©2014 AkamaiFaster ForwardTM
Summary
- 3rd Party tags impact performance
- SPOF, Onload SPOF, Resource Contention, Battery Consumption…
- Pick your strategies:
- Critical Widgets – Async with delaying onload
- Analytics/Trackers – Async without delaying onload
- Non-Critical Widgets – Defer Download (and Execution)
- Consider Removing the Tag!
- Track the Beacon & Resource Priorities Specs
- Challenge your 3rd party vendors on their perf & availability

52. ©2014 AkamaiFaster ForwardTM
Grow revenue opportunities with fast, personalized
web experiences and manage complexity from peak
demand, mobile devices and data collection.
Visit Akamai at booth #608
Get a FREE copy of
the new O’Reilly book
Book signing by author Guy Podjarny:
Wednesday & Thursday
3:00pm to 4:00pm

53. ©2014 AkamaiFaster ForwardTM
THIRD PARTY PERFORMANCE
Guy Podjarny (@guypod)
CTO, Web Experience, Akamai
Questions?