Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
#WDC14
3RD PARTY FOOTPRINT
BARBARA BERMES | @BBINTO
A PUBLISHER'S TAKE ON CONTROLLING 3RD PARTY SCRIPTS
#WDC14
I LIVE IN TORONTO, CANADA
#WDC14
I LOVE BURRITOS
#WDC14
I’M PASSIONATE ABOUT WEB PERF
#WDC14
LET’S GET THIS PARTY STARTED
#WDC14
–Ben Vinegar, Author of “Third-Party Script”
“In the strictest sense, anything served to the
client that’s provided...
#WDC14
TYPES OF 3RD PARTY SCRIPTS
Ads
Tracking and Analytics
Fonts
Social Media
Libraries and Frameworks
#WDC14
WHAT’S THE #1 USED 3RD SCRIPT?
#WDC14
STATS FROM BIG QUERY
#WDC14
#WDC14
31%
34.5%
38%
2011 2013 2014
32%
36%
38%
3rd party content
DISTRIBUTION OF 3RD PARTY SCRIPTS VS. 1ST PARTY
#WDC14
#WDC14
Advertising
Analytics
Personalization
Marketing
Tag Management
Search
Social Media
0 25 50 75 100
23
45
53
53
62
92...
#WDC14
VISUALIZE THE IMPACT OF
3RD PARTY SCRIPTS
#WDC14
#WDC14
#WDC14
#WDC14
FOREIGN CONTENT OVERLOAD
#WDC14
EXAMPLE: WIRED
#WDC14
#WDC14
BUT WHAT’S THE ISSUE?
#WDC14
THINGS TO TALK ABOUT TODAY
#WDC14
THE ISSUES AND NEGATIVE IMPACTS
Performance

Front-end Single Point of Failure (SPOF) 

Privacy

#WDC14
POTENTIAL SOLUTIONS
Safe snippets

Caching and Hosted Libraries

Tools and Initiatives
#WDC14
PERFORMANCE
#WDC14
The value you get out of the widget needs to be
greater than the performance hit you are taking
- John Hjelmstad

G...
#WDC14
A user who has to endure an 8-second download delay
spends only 1% of their total viewing time looking at the
featu...
#WDC14
WHAT WOULD A LIFE WITHOUT ADS FEEL LIKE?
#WDC14
THE PERFORMANCE IMPACT OF ADS
#WDC14
#WDC14
Using no (client-side) ad
code reduced CBC’s
page load time by 40%
40%
<script/>
#WDC14
MONITOR FOREIGN CONTENT,
CONSTANTLY!
#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
A...
#WDC14
SINGLE POINT OF FAILURE
#WDC14
A single point of failure (SPOF) is a part of a system that, if
it fails, will stop the entire system from working
...
#WDC14
THE OFFENDER
It will block rendering anything after this line
#WDC14
YEAH….BUT DO THIRD PARTY PROVIDERS
EVER GO DOWN??
#WDC14
OH YES. THEY DO!
#WDC14#WDC14
#WDC14#WDC14
#WDC14#WDC14
#WDC14
THE GREAT FIREWALL OF CHINA
#WDC14
SIMULATING SPOF ON TECHCRUNCH
#WDC14
#WDC14
SPOF-O-Matic
#WDC14
#WDC14#WDC14
#WDC14
SPOF WIRED
Without SPOF
With SPOF: Visually complete 40s
#WDC14
LET’S CRASH THE PARTY
#WDC14#WDC14
#WDC14
#WDC14#WDC14
#WDC14#WDC14
#WDC14
INITIALIZING CLIENT-SIDE SCRIPTS
#WDC14
ASYNC OR DEFER JS
#WDC14
ASYNC OR DEFER JS
#WDC14
SAFEST WAY: DYNAMIC SCRIPT TAG

(to cover most of the browsers)
#WDC14
ASYNCHRONOUS LOADING
http://www.phpied.com/social-button-bffs/
#WDC14
ASYNCHRONOUS LOADING
#WDC14
ASYNCHRONOUS LOADING
#WDC14
ASYNCHRONOUS LOADING
#WDC14
ASYNCHRONOUS LOADING
#WDC14
ASYNCHRONOUS LOADING
#WDC14
ASYNCHRONOUS LOADING
#WDC14
BEFORE
#WDC14
5 seconds 25 seconds
#WDC14
AFTER
#WDC14
AFTER
5 seconds
#WDC14
PREVENTION!
PROTECT YOURSELF WITH THE HELP OF TOOLS
#WDC14
CACHING?
Don’t always rely on it!
#WDC14
CACHE POLICIES
30min.
30 min
12 hrs
20 min
1 hr
336 hrs
no cache
1 hr
3 min
#WDC14
#WDC14
HOSTED LIBRARIES?
#WDC14
DON’T JUST COPY AND PASTE
#WDC14
#WDC14
SPOF ALERT
#WDC14
DON’T DO THIS….
#WDC14
RATHER DO THIS: SILENTLY FAIL
#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...
#WDC14
SO, WHATS THE VERDICT:
HOSTED LIBRARIES OR NOT?
#WDC14
PRIVACY
#WDC14
“The Like button is the quickest way
for people to share content with their
friends.
A single click on the Like but...
#WDC14
What they don’t tell you….
Track the visited website, your
IP, and more….????
Did you agree to that?
!
#WDC14
OPEN SOURCE INITIATIVES 

AND RESOURCES
#WDC14
PRIVACY HERO
HEISE’S OPT-IN SOLUTION
#WDC14#WDC14
#WDC14
3RD PARTY PERF HEROES
PHILIP TELLIS & STOYAN STEFANOV
#WDC14#WDC14
#WDC14
JSMANNERS
#WDC14#WDC14
#WDC14
CONTRIBUTE ON GITHUB!
https://github.com/triblondon/thirdpartysla
#WDC14
#WDC14
NEXT TIME BEFORE YOU COPY AND PASTE
#WDC14
WHAT TO DO AS A PUBLISHER & DEVELOPER
• Refuse 3rd party content that doesn’t provide async options
• Put the risk ...
#WDC14
• Ask for server-side options
• Evaluate tag managers
• Investigate hosted libraries (if no own CDN is available)
•...
#WDC14
WHAT TO DO AS A SCRIPT PROVIDER
• Provide non-blocking code samples and snippets
• Educate developers and verify th...
#WDC14
THE PARTY’S OVER
!
THANK YOU
#WDC14
QUESTIONS?
http://bit.ly/wdc14-3rdparty
Upcoming SlideShare
Loading in …5
×

3rd party footprint - A PUBLISHER'S TAKE ON CONTROLLING 3RD PARTY SCRIPTS

3,387 views

Published on

Slides from my Melbourne talk: webdirections.org/code14.
Follow-up blog post: http://bit.ly/wdc14-3rdparty

Published in: Engineering, Technology

3rd party footprint - A PUBLISHER'S TAKE ON CONTROLLING 3RD PARTY SCRIPTS

  1. 1. #WDC14 3RD PARTY FOOTPRINT BARBARA BERMES | @BBINTO A PUBLISHER'S TAKE ON CONTROLLING 3RD PARTY SCRIPTS
  2. 2. #WDC14 I LIVE IN TORONTO, CANADA
  3. 3. #WDC14 I LOVE BURRITOS
  4. 4. #WDC14 I’M PASSIONATE ABOUT WEB PERF
  5. 5. #WDC14 LET’S GET THIS PARTY STARTED
  6. 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. 7. #WDC14 TYPES OF 3RD PARTY SCRIPTS Ads Tracking and Analytics Fonts Social Media Libraries and Frameworks
  8. 8. #WDC14 WHAT’S THE #1 USED 3RD SCRIPT?
  9. 9. #WDC14 STATS FROM BIG QUERY #WDC14
  10. 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. 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. 12. #WDC14 VISUALIZE THE IMPACT OF 3RD PARTY SCRIPTS
  13. 13. #WDC14
  14. 14. #WDC14
  15. 15. #WDC14
  16. 16. #WDC14 FOREIGN CONTENT OVERLOAD
  17. 17. #WDC14 EXAMPLE: WIRED #WDC14
  18. 18. #WDC14 BUT WHAT’S THE ISSUE?
  19. 19. #WDC14 THINGS TO TALK ABOUT TODAY
  20. 20. #WDC14 THE ISSUES AND NEGATIVE IMPACTS Performance
 Front-end Single Point of Failure (SPOF) 
 Privacy

  21. 21. #WDC14 POTENTIAL SOLUTIONS Safe snippets
 Caching and Hosted Libraries
 Tools and Initiatives
  22. 22. #WDC14 PERFORMANCE
  23. 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. 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. 25. #WDC14 WHAT WOULD A LIFE WITHOUT ADS FEEL LIKE?
  26. 26. #WDC14 THE PERFORMANCE IMPACT OF ADS #WDC14
  27. 27. #WDC14 Using no (client-side) ad code reduced CBC’s page load time by 40% 40% <script/>
  28. 28. #WDC14 MONITOR FOREIGN CONTENT, CONSTANTLY!
  29. 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. 30. #WDC14 SINGLE POINT OF FAILURE
  31. 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. 32. #WDC14 THE OFFENDER It will block rendering anything after this line
  33. 33. #WDC14 YEAH….BUT DO THIRD PARTY PROVIDERS EVER GO DOWN??
  34. 34. #WDC14 OH YES. THEY DO!
  35. 35. #WDC14#WDC14
  36. 36. #WDC14#WDC14
  37. 37. #WDC14#WDC14
  38. 38. #WDC14 THE GREAT FIREWALL OF CHINA
  39. 39. #WDC14 SIMULATING SPOF ON TECHCRUNCH
  40. 40. #WDC14
  41. 41. #WDC14 SPOF-O-Matic #WDC14
  42. 42. #WDC14#WDC14
  43. 43. #WDC14 SPOF WIRED Without SPOF With SPOF: Visually complete 40s
  44. 44. #WDC14 LET’S CRASH THE PARTY
  45. 45. #WDC14#WDC14
  46. 46. #WDC14
  47. 47. #WDC14#WDC14
  48. 48. #WDC14#WDC14
  49. 49. #WDC14 INITIALIZING CLIENT-SIDE SCRIPTS
  50. 50. #WDC14 ASYNC OR DEFER JS
  51. 51. #WDC14 ASYNC OR DEFER JS
  52. 52. #WDC14 SAFEST WAY: DYNAMIC SCRIPT TAG
 (to cover most of the browsers)
  53. 53. #WDC14 ASYNCHRONOUS LOADING http://www.phpied.com/social-button-bffs/
  54. 54. #WDC14 ASYNCHRONOUS LOADING
  55. 55. #WDC14 ASYNCHRONOUS LOADING
  56. 56. #WDC14 ASYNCHRONOUS LOADING
  57. 57. #WDC14 ASYNCHRONOUS LOADING
  58. 58. #WDC14 ASYNCHRONOUS LOADING
  59. 59. #WDC14 ASYNCHRONOUS LOADING
  60. 60. #WDC14 BEFORE
  61. 61. #WDC14 5 seconds 25 seconds
  62. 62. #WDC14 AFTER
  63. 63. #WDC14 AFTER 5 seconds
  64. 64. #WDC14 PREVENTION! PROTECT YOURSELF WITH THE HELP OF TOOLS
  65. 65. #WDC14 CACHING? Don’t always rely on it!
  66. 66. #WDC14 CACHE POLICIES 30min. 30 min 12 hrs 20 min 1 hr 336 hrs no cache 1 hr 3 min #WDC14
  67. 67. #WDC14 HOSTED LIBRARIES?
  68. 68. #WDC14 DON’T JUST COPY AND PASTE #WDC14
  69. 69. #WDC14 SPOF ALERT
  70. 70. #WDC14 DON’T DO THIS….
  71. 71. #WDC14 RATHER DO THIS: SILENTLY FAIL
  72. 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. 73. #WDC14 SO, WHATS THE VERDICT: HOSTED LIBRARIES OR NOT?
  74. 74. #WDC14 PRIVACY
  75. 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. 76. #WDC14 What they don’t tell you…. Track the visited website, your IP, and more….???? Did you agree to that? !
  77. 77. #WDC14 OPEN SOURCE INITIATIVES 
 AND RESOURCES
  78. 78. #WDC14 PRIVACY HERO HEISE’S OPT-IN SOLUTION
  79. 79. #WDC14#WDC14
  80. 80. #WDC14 3RD PARTY PERF HEROES PHILIP TELLIS & STOYAN STEFANOV
  81. 81. #WDC14#WDC14
  82. 82. #WDC14 JSMANNERS
  83. 83. #WDC14#WDC14
  84. 84. #WDC14 CONTRIBUTE ON GITHUB! https://github.com/triblondon/thirdpartysla #WDC14
  85. 85. #WDC14 NEXT TIME BEFORE YOU COPY AND PASTE
  86. 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. 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. 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. 89. #WDC14 THE PARTY’S OVER ! THANK YOU
  90. 90. #WDC14 QUESTIONS? http://bit.ly/wdc14-3rdparty

×