1. #webrebels
3rd Party Footprint
EVALUATING THE PERFORMANCE OF EXTERNAL SCRIPTS
BARBARA BERMES /bbinto

2. #webrebels
3rd Party Footprint
EVALUATING THE PERFORMANCE OF EXTERNAL SCRIPTS
BARBARA BERMES /bbinto

3. #webrebels
I live in Toronto, Canada

4. #webrebels
I love burritos

5. #webrebels
I’m passionate about
web perf

6. #webrebels
Let’s get this 3rd party started!

7. #LDNWebPerf#webrebels
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 third-party
“
”–Ben Vinegar, Author of “Third-Party Script”
What is a 3rd party script?

8. #LDNWebPerf#webrebels
Types of 3rd party scripts
Advertising
Tracking and Analytics
Fonts
Social Media
Libraries and Frameworks

9. #webrebels
What’s the #1 used
3rd Party script?

10. #LDNWebPerf#webrebels
Stats from Big Query

11. #webrebels
AKAMAI (FB)
14%
TWITTER
5%
FACEBOOK
10%
GOOGLE
71%
Top 10

12. #webrebels
Visualize the impact of
3rd party scripts

13. #webrebels

14. #webrebels

15. #webrebels

16. #webrebels

17. #webrebels
Foreign content overload

18. #LDNWebPerf#webrebels
Example: Wired
• Body Level One
• Body Level Two
• Body Level Three
• Body Level Four
• Body Level Five

19. #webrebels
But what’s the issue?

20. #LDNWebPerf#webrebels
The Issues and Negative Impacts
Performance
Front-end Single Point of Failure (SPOF)
Privacy

21. #LDNWebPerf#webrebels
Potential Solutions
Safe Snippets
Caching and Hosted Libraries
Tools and Initiatives

22. #webrebels
Performance

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

24. #webrebels
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)
“
”
Perception of promotional space

25. #webrebels
A website without ads?

26. #LDNWebPerf#webrebels
The performance impact of ads
• Body Level One
• Body Level Two
• Body Level Three
• Body Level Four
• Body Level Five

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

28. #webrebels
Monitor foreign
content, constantly!

29. #LDNWebPerf#webrebels
ArithmeticMeanins
0
2.5
5
7.5
10
10/4/12 10/31/12
Bad 3rd parties (CBC mobile Site)
Smooth sailing
Client-side Ads
Ads turned off
Server-side Ads
Source: Keynote Daily Reports
We noticed a spike

30. #webrebels
Single point of failure

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

32. #LDNWebPerf#webrebels
The Offender
It will block rendering anything after this line

33. #webrebels
Yeah…whatever
3rd providers don’t really go down…

34. #webrebels
Oh yes, they do!

35. #webrebels

36. #webrebels

37. #webrebels

38. #webrebels

39. #webrebels

40. #webrebels

41. #webrebels

42. #webrebels
Title Text
Title Text

43. #webrebels

44. #webrebels
The Great Firewall of China

45. #webrebels
Simulating SPOF
on TechCrunch

46. #webrebels

47. #velocityconf
SPOF-O-Matic

48. #webrebels

49. #webrebels
SPOF WIRED
Without SPOF
With SPOF: Visually complete 40s

50. #webrebels
Let’s crash this party

51. #webrebels
Title Text
Title Text
#webrebels

52. #webrebels

53. #velocityconf#webrebels

54. #velocityconf#webrebels

55. #webrebels
Initializing
client-side scripts

56. #webrebels
Safest (previous) way:
Dynamic script tag (to cover most of the browsers)

57. #webrebels
http://www.phpied.com/social-button-bffs/
Asynchronous Loading

58. #webrebels
Title Text
Asynchronous Loading

59. #webrebels
Title Text
Asynchronous Loading

60. #webrebels
Title Text
Asynchronous Loading

61. #webrebels
Title Text
Asynchronous Loading

62. #webrebels
Title Text
Asynchronous Loading

63. #webrebels
Title Text
Asynchronous Loading

64. #webrebels
Before

65. #webrebels
5 seconds 25 seconds
#webrebels

66. #webrebels
After

67. #webrebels
AFTER
5 seconds
#webrebels

68. #webrebels

69. #webrebels
The Future

70. #LDNWebPerf#webrebels
Async or Defer JS

71. #LDNWebPerf#webrebels
Async or Defer JS

72. #LDNWebPerf#webrebels
Async and Defer JS

73. #LDNWebPerf#webrebels
Protect yourself with the help of tools
Ad-hoc browser tools
Continuous integration and deployment tools

74. #webrebels
Caching?
Don’t always rely on it!

75. #LDNWebPerf#webrebels
30min
3 min
Cache Policies
20 min
30 min
1 hr
20 min

76. #webrebels
What about hosted libraries?

77. #LDNWebPerf#webrebels
Pages using Google CDN
(Top Alexa Websites)
0%
0.25%
0.5%
Jan '11 Jan '13 Jan '13 Jan '14 Jan '15
11%
17%
26%
37%
47%
Percentage
Google Hosted Libraries
PAGES USING GOOGLE
LIBRARIES API
52%
48%

78. #LDNWebPerf#webrebels
Anywhere?
Don’t just copy and paste

79. #webrebels
SPOF Alert!

80. #webrebels
Don’t do this….

81. #webrebels
Rather do this: Silent Fail

82. #webrebels
Source: May 2015, Big Query result on jQuery from Google CDNs
Google’s hostest jQuery fragmentation
OTHER
30%
1.4.2
5%1.11.0
6%1.8.2
6%
1.11.1
7%
1.9.1
8%
1.8.3
8%
1.10.2
8%
1.7.1
10%
1.7.2
12%

83. #webrebels
So, whats the verdict:
Hosted Libraries or not?

84. #webrebels
Privacy

85. #webrebels
Title Texthttps://developers.facebook.com/docs/plugins/like-button/

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

87. #webrebels
Open Source Initiatives
and Resources

88. #webrebels
Privacy Hero heise’s
Opt-in Solution

89. #webrebels

90. #webrebels

91. #velocityconf

92. #LDNWebPerf#webrebels
Measuring 3rd party content on your site
Navigation Timing API
Resource Timing API

93. #webrebels
0
120
240
Jan '14 Feb '14 Mar '14 Apr '14 May '14 Jun '14 Jul '14 May '15
82 86 86
99
130
157
168
232
Fastly Optimizely
Instagram Cedexis Twitter TypeKit
CDNPlanet Walmart Tumblr Disqus
Adoption of Timing-Allow-Origin
Header (Top Alexa Websites)

94. #webrebels
Title Text
jsmanners

95. #webrebels

96. #webrebels
Title Text
https://github.com/triblondon/
Contribute on Github!

97. #webrebels
Next time before
you copy and paste

98. #LDNWebPerf#webrebels
• 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
What to do as a Publisher & Developer

99. #LDNWebPerf#webrebels
• 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
What to do as a Publisher & Developer

100. #LDNWebPerf#webrebels
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)

101. #webrebels
The Party’s Over
Thank you

102. #webrebels
Questions?
bit.ly/webrebels
Shameless Plug: I wrote a book
“Lean Websites” (SitePoint)
Release: end of May 2015