1.
#WDC14
3RD PARTY FOOTPRINT
BARBARA BERMES | @BBINTO
A PUBLISHER'S TAKE ON CONTROLLING 3RD PARTY SCRIPTS

2.
#WDC14
I LIVE IN TORONTO, CANADA

3.
#WDC14
I LOVE BURRITOS

4.
#WDC14
I’M PASSIONATE ABOUT WEB PERF

5.
#WDC14
LET’S GET THIS PARTY STARTED

6.
#WDC14
–Ben Vinegar, Author of “Third-Party Script”
“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”

7.
#WDC14
TYPES OF 3RD PARTY SCRIPTS
Ads
Tracking and Analytics
Fonts
Social Media
Libraries and Frameworks

8.
#WDC14
WHAT’S THE #1 USED 3RD SCRIPT?

9.
#WDC14
STATS FROM BIG QUERY
#WDC14

10.
#WDC14
31%
34.5%
38%
2011 2013 2014
32%
36%
38%
3rd party content
DISTRIBUTION OF 3RD PARTY SCRIPTS VS. 1ST PARTY
#WDC14

11.
#WDC14
Advertising
Analytics
Personalization
Marketing
Tag Management
Search
Social Media
0 25 50 75 100
23
45
53
53
62
92
92
Percentage of sites with each third party function present
Source: Intechnica - The impact of third party content on retail web performance

12.
#WDC14
VISUALIZE THE IMPACT OF
3RD PARTY SCRIPTS

13.
#WDC14

14.
#WDC14

15.
#WDC14

16.
#WDC14
FOREIGN CONTENT OVERLOAD

17.
#WDC14
EXAMPLE: WIRED
#WDC14

18.
#WDC14
BUT WHAT’S THE ISSUE?

19.
#WDC14
THINGS TO TALK ABOUT TODAY

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

21.
#WDC14
POTENTIAL SOLUTIONS
Safe snippets
Caching and Hosted Libraries
Tools and Initiatives

22.
#WDC14
PERFORMANCE

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

24.
#WDC14
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.
#WDC14
WHAT WOULD A LIFE WITHOUT ADS FEEL LIKE?

26.
#WDC14
THE PERFORMANCE IMPACT OF ADS
#WDC14

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

28.
#WDC14
MONITOR FOREIGN CONTENT,
CONSTANTLY!

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

30.
#WDC14
SINGLE POINT OF FAILURE

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

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

33.
#WDC14
YEAH….BUT DO THIRD PARTY PROVIDERS
EVER GO DOWN??

34.
#WDC14
OH YES. THEY DO!

35.
#WDC14#WDC14

36.
#WDC14#WDC14

37.
#WDC14#WDC14

38.
#WDC14
THE GREAT FIREWALL OF CHINA

39.
#WDC14
SIMULATING SPOF ON TECHCRUNCH

40.
#WDC14

41.
#WDC14
SPOF-O-Matic
#WDC14

42.
#WDC14#WDC14

43.
#WDC14
SPOF WIRED
Without SPOF
With SPOF: Visually complete 40s

44.
#WDC14
LET’S CRASH THE PARTY

45.
#WDC14#WDC14

46.
#WDC14

47.
#WDC14#WDC14

48.
#WDC14#WDC14

49.
#WDC14
INITIALIZING CLIENT-SIDE SCRIPTS

50.
#WDC14
ASYNC OR DEFER JS

51.
#WDC14
ASYNC OR DEFER JS

52.
#WDC14
SAFEST WAY: DYNAMIC SCRIPT TAG
(to cover most of the browsers)

53.
#WDC14
ASYNCHRONOUS LOADING
http://www.phpied.com/social-button-bffs/

54.
#WDC14
ASYNCHRONOUS LOADING

55.
#WDC14
ASYNCHRONOUS LOADING

56.
#WDC14
ASYNCHRONOUS LOADING

57.
#WDC14
ASYNCHRONOUS LOADING

58.
#WDC14
ASYNCHRONOUS LOADING

59.
#WDC14
ASYNCHRONOUS LOADING

60.
#WDC14
BEFORE

61.
#WDC14
5 seconds 25 seconds

62.
#WDC14
AFTER

63.
#WDC14
AFTER
5 seconds

64.
#WDC14
PREVENTION!
PROTECT YOURSELF WITH THE HELP OF TOOLS

65.
#WDC14
CACHING?
Don’t always rely on it!

66.
#WDC14
CACHE POLICIES
30min.
30 min
12 hrs
20 min
1 hr
336 hrs
no cache
1 hr
3 min
#WDC14

67.
#WDC14
HOSTED LIBRARIES?

68.
#WDC14
DON’T JUST COPY AND PASTE
#WDC14

69.
#WDC14
SPOF ALERT

70.
#WDC14
DON’T DO THIS….

71.
#WDC14
RATHER DO THIS: SILENTLY FAIL

72.
#WDC14
Other
55%
1.7.2
14%
1.7.1
13%
1.10.2
9%
1.8.3
9%
GOOGLE’S HOSTED JQUERY FRAGMENTATION
Source: March 2014, Big Query result on jQuery from Google CDNs

73.
#WDC14
SO, WHATS THE VERDICT:
HOSTED LIBRARIES OR NOT?

74.
#WDC14
PRIVACY

75.
#WDC14
“The Like button is the quickest way
for people to share content with their
friends.
A single click on the Like button will
'like' pieces of content on the web
and share them on Facebook.”

76.
#WDC14
What they don’t tell you….
Track the visited website, your
IP, and more….????
Did you agree to that?
!

77.
#WDC14
OPEN SOURCE INITIATIVES
AND RESOURCES

78.
#WDC14
PRIVACY HERO
HEISE’S OPT-IN SOLUTION

79.
#WDC14#WDC14

80.
#WDC14
3RD PARTY PERF HEROES
PHILIP TELLIS & STOYAN STEFANOV

81.
#WDC14#WDC14

82.
#WDC14
JSMANNERS

83.
#WDC14#WDC14

84.
#WDC14
CONTRIBUTE ON GITHUB!
https://github.com/triblondon/thirdpartysla
#WDC14

85.
#WDC14
NEXT TIME BEFORE YOU COPY AND PASTE

86.
#WDC14
WHAT TO DO AS A PUBLISHER & DEVELOPER
• Refuse 3rd party content that doesn’t provide async options
• Put the risk in the SLA (uptime etc.)
• Review jsmanners
• Educate other (junior) developers

87.
#WDC14
• Ask for server-side options
• Evaluate tag managers
• Investigate hosted libraries (if no own CDN is available)
• Monitor, monitor, ….and monitor
WHAT TO DO AS A PUBLISHER & DEVELOPER

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

89.
#WDC14
THE PARTY’S OVER
!
THANK YOU

90.
#WDC14
QUESTIONS?
http://bit.ly/wdc14-3rdparty