1. Third Party Footprint
Barbara Bermes

2. #velocityconf
3RD PARTY FOOTPRINT
EVALUATING THE PERFORMANCE OF EXTERNAL SCRIPTS
BARBARA BERMES | @BBINTO

3. #velocityconf
I LIVE IN TORONTO, CANADA

4. #velocityconf
I LOVE BURRITOS
#VELOCITYBURRITO

5. #velocityconf
I’M PASSIONATE ABOUT WEB PERF

6. #velocityconf
LET’S GET THIS PARTY STARTED

7. “In the strictest sense, anything served to the
client that’s provided by an organization that’s
not the website provider is considered to be
#velocityconf
third-party”
–Ben Vinegar, Author of “Third-Party Script”

8. #velocityconf
TYPES OF 3RD PARTY SCRIPTS
Advertising
Tracking and Analytics
Fonts
Social Media
Libraries and Frameworks

9. #velocityconf
WHAT’S THE #1 USED 3RD PARTY SCRIPT?

10. #velocityconf
STATS FROM BIG QUERY

11. #velocityconf
STATS FROM BIG QUERY
Google Facebook Twitter
16%
22%
62%

12. DISTRIBUTION OF 3RD PARTY SCRIPTS VS. 1ST PARTY
#velocityconf
31% 34.5% 38%
32%
36%
38%
2011 2013 2014
Source: http://bigqueri.es/t/what-is-the-distribution-of-1st-party-vs-3rd-party-resources/100
Percentage

13. #velocityconf
VISUALIZE THE IMPACT OF
3RD PARTY SCRIPTS

14. #velocityconf

15. #velocityconf

16. #velocityconf

17. #velocityconf
FOREIGN CONTENT OVERLOAD!

18. #velocityconf
EXAMPLE: WIRED

19. #velocityconf
BUT WHAT’S THE ISSUE?

20. #velocityconf
THE ISSUES AND NEGATIVE IMPACTS
Performance
Front-end Single Point of Failure (SPOF)
Privacy

21. #velocityconf
POTENTIAL SOLUTIONS
Safe Snippets
Caching and Hosted Libraries
Tools and Initiatives

22. #velocityconf
PERFORMANCE

23. #velocityconf
RULE OF THUMB
The value you get out of the widget needs to be
greater than the performance hit you are taking
value(widget) > perf_hit(widget)
- John Hjelmstad
Google I/O 2012 (How we Make JavaScript Widgets Scream)

24. #velocityconf
PERCEPTION OF PROMOTIONAL SPACE
A user who has to endure an 8-second download delay
spends only 1% of their total viewing time looking at the
featured promotional space on a landing page.
In contrast, a user who receives instantaneous page rendering
spends 20% of viewing time within the promotional area
(source: Jakob Nielsen)

25. #velocityconf
A WEBSITE WITHOUT ADS???

26. #velocityconf
THE PERFORMANCE IMPACT OF ADS

27. 40%
#velocityconf
Using no (client-side) ad code reduced
CBC’s page load time by 40%
<script/>

28. #velocityconf
MONITOR FOREIGN CONTENT.
CONSTANTLY!

29. 10
7.5
BAD 3RD PARTIES (CBC TOUCH SITE)
Client-side Ads
We noticed a spike
s
in Mean Arithmetic 5
Smooth sailing
Ads turned off Server-side Ads
2.5
Source: Keynote Daily Reports
0
10/4/12 10/31/12
#velocityconf

30. #velocityconf
SINGLE POINT OF FAILURE

31. A single point of failure (SPOF) is a part of a system that, if
#velocityconf
it fails, will stop the entire system from working
–Wikipedia

32. #velocityconf
THE OFFENDER
It will block rendering anything after this line

33. #velocityconf
YEAH….WHATEVER
3RD PROVIDERS
DON’T REALLY GO DOWN…

34. #velocityconf
OH YES. THEY DO!

35. #velocityconf

36. #velocityconf

37. #velocityconf

38. #velocityconf

39. #velocityconf

40. #velocityconf

41. #velocityconf

42. #velocityconf

43. #velocityconf
THE GREAT FIREWALL OF CHINA

44. #velocityconf
SIMULATING SPOF ON TECHCRUNCH

45. #velocityconf

46. #velocityconf
SPOF-O-Matic

47. #velocityconf

48. #velocityconf
SPOF WIRED
Without SPOF With SPOF: Visually complete 40s

49. #velocityconf
LET’S CRASH THE PARTY

50. #velocityconf

51. #velocityconf

52. #velocityconf

53. #velocityconf

54. #velocityconf
INITIALIZING CLIENT-SIDE SCRIPTS

55. #velocityconf
SAFEST (PREVIOUS) WAY:
DYNAMIC SCRIPT TAG
(to cover most of the browsers)

56. #velocityconf
ASYNCHRONOUS LOADING
http://www.phpied.com/social-button-bffs/

57. #velocityconf
ASYNCHRONOUS LOADING

58. #velocityconf
ASYNCHRONOUS LOADING

59. #velocityconf
ASYNCHRONOUS LOADING

60. #velocityconf
ASYNCHRONOUS LOADING

61. #velocityconf
ASYNCHRONOUS LOADING

62. #velocityconf
ASYNCHRONOUS LOADING

63. #velocityconf
BEFORE

64. #velocityconf
5 seconds 25 seconds

65. #velocityconf
AFTER

66. #velocityconf
AFTER
5 seconds

67. #velocityconf

68. #velocityconf
THE FUTURE

69. #velocityconf
ASYNC OR DEFER JS

70. #velocityconf
ASYNC OR DEFER JS

71. #velocityconf
ASYNC AND DEFER JS
//suggested by W3C

72. PROTECT YOURSELF WITH THE HELP OF TOOLS
#velocityconf
Ad-hoc browser tools
Continuous integration & deployment tools

73. #velocityconf
CACHING?
Don’t always rely on it!

74. #velocityconf
CACHE POLICIES
30min.
20 min
3 min
1 hr
12 hrs
no cache
30 min
1 hr
336 hrs

75. #velocityconf
WHAT ABOUT HOSTED LIBRARIES?

76. #velocityconf
GOOGLE HOSTED LIBRARIES
Pages using Google CDN
(Top Alexa Websites)
0.4%
0.2%
0%
11%
17%
26%
37%
Jan '11 Jan '13 Jan '13 Jan '14
Percentage

77. #velocityconf
DON’T JUST COPY AND PASTE
Anywhere?

78. #velocityconf
SPOF ALERT

79. #velocityconf
DON’T DO THIS….

80. #velocityconf
RATHER DO THIS: SILENTLY FAIL

81. GOOGLE’S HOSTED JQUERY FRAGMENTATION
Source: Aug 2014, Big Query result on jQuery from Google CDNs
#velocityconf

82. #velocityconf
SO, WHATS THE VERDICT:
HOSTED LIBRARIES OR NOT?

83. #velocityconf
PRIVACY

84. https://developers.facebook.com/docs/plugins/like-button/
#velocityconf

85. #velocityconf
What they don’t really tell you that they maybe….
track the visited website, your IP, and more….????
Did you agree to that?

86. #velocityconf
OPEN SOURCE INITIATIVES
AND RESOURCES

87. #velocityconf
PRIVACY HERO
HEISE’S OPT-IN SOLUTION

88. #velocityconf

89. #velocityconf
3RD PARTY PERF HEROES
PHILIP TELLIS & STOYAN STEFANOV

90. #velocityconf

91. #velocityconf
MEASURING
3RD PARTY CONTENT ON YOUR SITE
Navigation timing API
Resource timing API

92. ADOPTION OF TIMING-ALLOW-ORIGIN HEADER
#velocityconf
170
85
0
(TOP ALEX WEBSITES)
Facebook Google
Akamai Disqus Typekit
82 86 86
99
130
157
168
Optimizely
Cedexis Twitter
CDNPlanet Walmart
Jan '14 Feb '14 Mar '14 Apr '14 May '14 Jun '14 Jul '14

93. #velocityconf
JSMANNERS

94. #velocityconf

95. #velocityconf
CONTRIBUTE ON GITHUB!
https://github.com/triblondon/thirdpartysla

96. #velocityconf
NEXT TIME BEFORE YOU COPY AND PASTE

97. WHAT TO DO AS A PUBLISHER & DEVELOPER
#velocityconf
• Refuse 3rd party content that doesn’t provide async options or is not minified
• Put the risk in the SLA (uptime etc.)
• Review jsmanners
• Educate other (junior) developers
• Test it via navigation and resource timing where applicable

98. WHAT TO DO AS A PUBLISHER & DEVELOPER
#velocityconf
• Ask for server-side options
• Evaluate tag managers
• Investigate hosted libraries (if no own CDN is available)
• Monitor, monitor, ….and monitor
• Evaluate the need of the script with marketing and sales

99. #velocityconf
WHAT TO DO AS A SCRIPT PROVIDER
• Provide non-blocking code samples and snippets
• Educate developers and verify the integration of your script (proof-check)

100. #velocityconf
THE PARTY’S OVER
THANK YOU

101. QUESTIONS?
SHAMELESS PLUG I’m writing a book: Lean Websites (SitePoint)
VELOCITY OFFICE HOUR 2pm Table 1 (Sponsor Pavilion)
#velocityconf
bit.ly/velocityconf14-3rdparty

102. #velocityconf
BUT WHEN TO USE WHAT NOW?