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.
Third Party Footprint 
Barbara Bermes
#velocityconf 
3RD PARTY FOOTPRINT 
EVALUATING THE PERFORMANCE OF EXTERNAL SCRIPTS 
BARBARA BERMES | @BBINTO
#velocityconf 
I LIVE IN TORONTO, CANADA
#velocityconf 
I LOVE BURRITOS 
#VELOCITYBURRITO
#velocityconf 
I’M PASSIONATE ABOUT WEB PERF
#velocityconf 
LET’S GET THIS PARTY STARTED
“In the strictest sense, anything served to the 
client that’s provided by an organization that’s 
not the website provide...
#velocityconf 
TYPES OF 3RD PARTY SCRIPTS 
Advertising 
Tracking and Analytics 
Fonts 
Social Media 
Libraries and Framewo...
#velocityconf 
WHAT’S THE #1 USED 3RD PARTY SCRIPT?
#velocityconf 
STATS FROM BIG QUERY
#velocityconf 
STATS FROM BIG QUERY 
Google Facebook Twitter 
16% 
22% 
62%
DISTRIBUTION OF 3RD PARTY SCRIPTS VS. 1ST PARTY 
#velocityconf 
31% 34.5% 38% 
32% 
36% 
38% 
2011 2013 2014 
Source: http...
#velocityconf 
VISUALIZE THE IMPACT OF 
3RD PARTY SCRIPTS
#velocityconf
#velocityconf
#velocityconf
#velocityconf 
FOREIGN CONTENT OVERLOAD!
#velocityconf 
EXAMPLE: WIRED
#velocityconf 
BUT WHAT’S THE ISSUE?
#velocityconf 
THE ISSUES AND NEGATIVE IMPACTS 
Performance 
Front-end Single Point of Failure (SPOF) 
Privacy
#velocityconf 
POTENTIAL SOLUTIONS 
Safe Snippets 
Caching and Hosted Libraries 
Tools and Initiatives
#velocityconf 
PERFORMANCE
#velocityconf 
RULE OF THUMB 
The value you get out of the widget needs to be 
greater than the performance hit you are ta...
#velocityconf 
PERCEPTION OF PROMOTIONAL SPACE 
A user who has to endure an 8-second download delay 
spends only 1% of the...
#velocityconf 
A WEBSITE WITHOUT ADS???
#velocityconf 
THE PERFORMANCE IMPACT OF ADS
40% 
#velocityconf 
Using no (client-side) ad code reduced 
CBC’s page load time by 40% 
<script/>
#velocityconf 
MONITOR FOREIGN CONTENT. 
CONSTANTLY!
10 
7.5 
BAD 3RD PARTIES (CBC TOUCH SITE) 
Client-side Ads 
We noticed a spike 
s 
in Mean Arithmetic 5 
Smooth sailing 
A...
#velocityconf 
SINGLE POINT OF FAILURE
A single point of failure (SPOF) is a part of a system that, if 
#velocityconf 
it fails, will stop the entire system from...
#velocityconf 
THE OFFENDER 
It will block rendering anything after this line
#velocityconf 
YEAH….WHATEVER 
3RD PROVIDERS 
DON’T REALLY GO DOWN…
#velocityconf 
OH YES. THEY DO!
#velocityconf
#velocityconf
#velocityconf
#velocityconf
#velocityconf
#velocityconf
#velocityconf
#velocityconf
#velocityconf 
THE GREAT FIREWALL OF CHINA
#velocityconf 
SIMULATING SPOF ON TECHCRUNCH
#velocityconf
#velocityconf 
SPOF-O-Matic
#velocityconf
#velocityconf 
SPOF WIRED 
Without SPOF With SPOF: Visually complete 40s
#velocityconf 
LET’S CRASH THE PARTY
#velocityconf
#velocityconf
#velocityconf
#velocityconf
#velocityconf 
INITIALIZING CLIENT-SIDE SCRIPTS
#velocityconf 
SAFEST (PREVIOUS) WAY: 
DYNAMIC SCRIPT TAG 
(to cover most of the browsers)
#velocityconf 
ASYNCHRONOUS LOADING 
http://www.phpied.com/social-button-bffs/
#velocityconf 
ASYNCHRONOUS LOADING
#velocityconf 
ASYNCHRONOUS LOADING
#velocityconf 
ASYNCHRONOUS LOADING
#velocityconf 
ASYNCHRONOUS LOADING
#velocityconf 
ASYNCHRONOUS LOADING
#velocityconf 
ASYNCHRONOUS LOADING
#velocityconf 
BEFORE
#velocityconf 
5 seconds 25 seconds
#velocityconf 
AFTER
#velocityconf 
AFTER 
5 seconds
#velocityconf
#velocityconf 
THE FUTURE
#velocityconf 
ASYNC OR DEFER JS
#velocityconf 
ASYNC OR DEFER JS
#velocityconf 
ASYNC AND DEFER JS 
//suggested by W3C
PROTECT YOURSELF WITH THE HELP OF TOOLS 
#velocityconf 
Ad-hoc browser tools 
Continuous integration & deployment tools
#velocityconf 
CACHING? 
Don’t always rely on it!
#velocityconf 
CACHE POLICIES 
30min. 
20 min 
3 min 
1 hr 
12 hrs 
no cache 
30 min 
1 hr 
336 hrs
#velocityconf 
WHAT ABOUT HOSTED LIBRARIES?
#velocityconf 
GOOGLE HOSTED LIBRARIES 
Pages using Google CDN 
(Top Alexa Websites) 
0.4% 
0.2% 
0% 
11% 
17% 
26% 
37% 
...
#velocityconf 
DON’T JUST COPY AND PASTE 
Anywhere?
#velocityconf 
SPOF ALERT
#velocityconf 
DON’T DO THIS….
#velocityconf 
RATHER DO THIS: SILENTLY FAIL
GOOGLE’S HOSTED JQUERY FRAGMENTATION 
Source: Aug 2014, Big Query result on jQuery from Google CDNs 
#velocityconf
#velocityconf 
SO, WHATS THE VERDICT: 
HOSTED LIBRARIES OR NOT?
#velocityconf 
PRIVACY
https://developers.facebook.com/docs/plugins/like-button/ 
#velocityconf
#velocityconf 
What they don’t really tell you that they maybe…. 
track the visited website, your IP, and more….???? 
Did ...
#velocityconf 
OPEN SOURCE INITIATIVES 
AND RESOURCES
#velocityconf 
PRIVACY HERO 
HEISE’S OPT-IN SOLUTION
#velocityconf
#velocityconf 
3RD PARTY PERF HEROES 
PHILIP TELLIS & STOYAN STEFANOV
#velocityconf
#velocityconf 
MEASURING 
3RD PARTY CONTENT ON YOUR SITE 
Navigation timing API 
Resource timing API
ADOPTION OF TIMING-ALLOW-ORIGIN HEADER 
#velocityconf 
170 
85 
0 
(TOP ALEX WEBSITES) 
Facebook Google 
Akamai Disqus Typ...
#velocityconf 
JSMANNERS
#velocityconf
#velocityconf 
CONTRIBUTE ON GITHUB! 
https://github.com/triblondon/thirdpartysla
#velocityconf 
NEXT TIME BEFORE YOU COPY AND PASTE
WHAT TO DO AS A PUBLISHER & DEVELOPER 
#velocityconf 
• Refuse 3rd party content that doesn’t provide async options or is ...
WHAT TO DO AS A PUBLISHER & DEVELOPER 
#velocityconf 
• Ask for server-side options 
• Evaluate tag managers 
• Investigat...
#velocityconf 
WHAT TO DO AS A SCRIPT PROVIDER 
• Provide non-blocking code samples and snippets 
• Educate developers and...
#velocityconf 
THE PARTY’S OVER 
THANK YOU
QUESTIONS? 
SHAMELESS PLUG I’m writing a book: Lean Websites (SitePoint) 
VELOCITY OFFICE HOUR 2pm Table 1 (Sponsor Pavili...
#velocityconf 
BUT WHEN TO USE WHAT NOW?
Upcoming SlideShare
Loading in …5
×

Third Party Footprint: Evaluating the Performance of External Scripts

1,857 views

Published on

Copy, paste, but don’t block the rendering!

It’s almost impossible to find a website that doesn’t utilize any kind of embedded widgets such as ads, social plugins, or analytics: All of these add-ons are considered 3rd party scripts and promise to increase and benefit publisher’s revenue. Publishers don’t have much control over the provider’s code and inevitably just have to trust their integrity, content security policy, code quality, and performance.

Imagine a high-traffic website hosting a twitter widget: Are publishers aware that a sudden twitter server outage could potentially bring down their site if the widget is not properly included?

The performance and availability of 3rd party scripts don’t have to become a threat or a nightmare for publishers. Barbara’s talk will not only outline best practices, tools, and tricks on how to sandbox 3rd party scripts, but also help the audience understand bottlenecks, determine potential risks, and elaborate on how to measure their performance.

Following this session, managers and developers will be equipped to ask the right questions when choosing 3rd party providers, while developers will be armed with guidelines on how to integrate 3rd party snippets efficiently into their deployment process without slowing down or even bringing down their site.

Published in: Technology

Third Party Footprint: Evaluating the Performance of External Scripts

  1. 1. Third Party Footprint Barbara Bermes
  2. 2. #velocityconf 3RD PARTY FOOTPRINT EVALUATING THE PERFORMANCE OF EXTERNAL SCRIPTS BARBARA BERMES | @BBINTO
  3. 3. #velocityconf I LIVE IN TORONTO, CANADA
  4. 4. #velocityconf I LOVE BURRITOS #VELOCITYBURRITO
  5. 5. #velocityconf I’M PASSIONATE ABOUT WEB PERF
  6. 6. #velocityconf LET’S GET THIS PARTY STARTED
  7. 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. 8. #velocityconf TYPES OF 3RD PARTY SCRIPTS Advertising Tracking and Analytics Fonts Social Media Libraries and Frameworks
  9. 9. #velocityconf WHAT’S THE #1 USED 3RD PARTY SCRIPT?
  10. 10. #velocityconf STATS FROM BIG QUERY
  11. 11. #velocityconf STATS FROM BIG QUERY Google Facebook Twitter 16% 22% 62%
  12. 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. 13. #velocityconf VISUALIZE THE IMPACT OF 3RD PARTY SCRIPTS
  14. 14. #velocityconf
  15. 15. #velocityconf
  16. 16. #velocityconf
  17. 17. #velocityconf FOREIGN CONTENT OVERLOAD!
  18. 18. #velocityconf EXAMPLE: WIRED
  19. 19. #velocityconf BUT WHAT’S THE ISSUE?
  20. 20. #velocityconf THE ISSUES AND NEGATIVE IMPACTS Performance Front-end Single Point of Failure (SPOF) Privacy
  21. 21. #velocityconf POTENTIAL SOLUTIONS Safe Snippets Caching and Hosted Libraries Tools and Initiatives
  22. 22. #velocityconf PERFORMANCE
  23. 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. 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. 25. #velocityconf A WEBSITE WITHOUT ADS???
  26. 26. #velocityconf THE PERFORMANCE IMPACT OF ADS
  27. 27. 40% #velocityconf Using no (client-side) ad code reduced CBC’s page load time by 40% <script/>
  28. 28. #velocityconf MONITOR FOREIGN CONTENT. CONSTANTLY!
  29. 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. 30. #velocityconf SINGLE POINT OF FAILURE
  31. 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. 32. #velocityconf THE OFFENDER It will block rendering anything after this line
  33. 33. #velocityconf YEAH….WHATEVER 3RD PROVIDERS DON’T REALLY GO DOWN…
  34. 34. #velocityconf OH YES. THEY DO!
  35. 35. #velocityconf
  36. 36. #velocityconf
  37. 37. #velocityconf
  38. 38. #velocityconf
  39. 39. #velocityconf
  40. 40. #velocityconf
  41. 41. #velocityconf
  42. 42. #velocityconf
  43. 43. #velocityconf THE GREAT FIREWALL OF CHINA
  44. 44. #velocityconf SIMULATING SPOF ON TECHCRUNCH
  45. 45. #velocityconf
  46. 46. #velocityconf SPOF-O-Matic
  47. 47. #velocityconf
  48. 48. #velocityconf SPOF WIRED Without SPOF With SPOF: Visually complete 40s
  49. 49. #velocityconf LET’S CRASH THE PARTY
  50. 50. #velocityconf
  51. 51. #velocityconf
  52. 52. #velocityconf
  53. 53. #velocityconf
  54. 54. #velocityconf INITIALIZING CLIENT-SIDE SCRIPTS
  55. 55. #velocityconf SAFEST (PREVIOUS) WAY: DYNAMIC SCRIPT TAG (to cover most of the browsers)
  56. 56. #velocityconf ASYNCHRONOUS LOADING http://www.phpied.com/social-button-bffs/
  57. 57. #velocityconf ASYNCHRONOUS LOADING
  58. 58. #velocityconf ASYNCHRONOUS LOADING
  59. 59. #velocityconf ASYNCHRONOUS LOADING
  60. 60. #velocityconf ASYNCHRONOUS LOADING
  61. 61. #velocityconf ASYNCHRONOUS LOADING
  62. 62. #velocityconf ASYNCHRONOUS LOADING
  63. 63. #velocityconf BEFORE
  64. 64. #velocityconf 5 seconds 25 seconds
  65. 65. #velocityconf AFTER
  66. 66. #velocityconf AFTER 5 seconds
  67. 67. #velocityconf
  68. 68. #velocityconf THE FUTURE
  69. 69. #velocityconf ASYNC OR DEFER JS
  70. 70. #velocityconf ASYNC OR DEFER JS
  71. 71. #velocityconf ASYNC AND DEFER JS //suggested by W3C
  72. 72. PROTECT YOURSELF WITH THE HELP OF TOOLS #velocityconf Ad-hoc browser tools Continuous integration & deployment tools
  73. 73. #velocityconf CACHING? Don’t always rely on it!
  74. 74. #velocityconf CACHE POLICIES 30min. 20 min 3 min 1 hr 12 hrs no cache 30 min 1 hr 336 hrs
  75. 75. #velocityconf WHAT ABOUT HOSTED LIBRARIES?
  76. 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. 77. #velocityconf DON’T JUST COPY AND PASTE Anywhere?
  78. 78. #velocityconf SPOF ALERT
  79. 79. #velocityconf DON’T DO THIS….
  80. 80. #velocityconf RATHER DO THIS: SILENTLY FAIL
  81. 81. GOOGLE’S HOSTED JQUERY FRAGMENTATION Source: Aug 2014, Big Query result on jQuery from Google CDNs #velocityconf
  82. 82. #velocityconf SO, WHATS THE VERDICT: HOSTED LIBRARIES OR NOT?
  83. 83. #velocityconf PRIVACY
  84. 84. https://developers.facebook.com/docs/plugins/like-button/ #velocityconf
  85. 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. 86. #velocityconf OPEN SOURCE INITIATIVES AND RESOURCES
  87. 87. #velocityconf PRIVACY HERO HEISE’S OPT-IN SOLUTION
  88. 88. #velocityconf
  89. 89. #velocityconf 3RD PARTY PERF HEROES PHILIP TELLIS & STOYAN STEFANOV
  90. 90. #velocityconf
  91. 91. #velocityconf MEASURING 3RD PARTY CONTENT ON YOUR SITE Navigation timing API Resource timing API
  92. 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. 93. #velocityconf JSMANNERS
  94. 94. #velocityconf
  95. 95. #velocityconf CONTRIBUTE ON GITHUB! https://github.com/triblondon/thirdpartysla
  96. 96. #velocityconf NEXT TIME BEFORE YOU COPY AND PASTE
  97. 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. 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. 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. 100. #velocityconf THE PARTY’S OVER THANK YOU
  101. 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. 102. #velocityconf BUT WHEN TO USE WHAT NOW?

×