The document discusses the impact of third-party components on web performance, highlighting types of third parties, their potential issues, and strategies for managing these elements. It emphasizes the importance of asynchronous loading for critical and non-critical components to avoid delays and resource contention. Recommendations include removing unnecessary tags and challenging vendors on performance and availability.

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?