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.
#webrebels 3rd Party Footprint EVALUATING THE PERFORMANCE OF EXTERNAL SCRIPTS BARBARA BERMES /bbinto
#webrebels 3rd Party Footprint EVALUATING THE PERFORMANCE OF EXTERNAL SCRIPTS BARBARA BERMES /bbinto
#webrebels I live in Toronto, Canada
#webrebels I love burritos
#webrebels I’m passionate about web perf
#webrebels Let’s get this 3rd party started!
#LDNWebPerf#webrebels In the strictest sense, anything served to the client that’s provided by an organization that’s not ...
#LDNWebPerf#webrebels Types of 3rd party scripts Advertising Tracking and Analytics Fonts Social Media Libraries and Frame...
#webrebels What’s the #1 used 3rd Party script?
#LDNWebPerf#webrebels Stats from Big Query
#webrebels AKAMAI (FB) 14% TWITTER 5% FACEBOOK 10% GOOGLE 71% Top 10
#webrebels Visualize the impact of 3rd party scripts
#webrebels
#webrebels
#webrebels
#webrebels
#webrebels Foreign content overload
#LDNWebPerf#webrebels Example: Wired • Body Level One • Body Level Two • Body Level Three • Body Level Four • Body Level F...
#webrebels But what’s the issue?
#LDNWebPerf#webrebels The Issues and Negative Impacts Performance
 Front-end Single Point of Failure (SPOF) 
 Privacy

#LDNWebPerf#webrebels Potential Solutions Safe Snippets
 Caching and Hosted Libraries
 Tools and Initiatives
#webrebels Performance
#webrebels - John Hjelmstad
 Google I/O 2012 (How we Make JavaScript Widgets Scream) The value you get out of the widget n...
#webrebels A user who has to endure an 8-second download delay spends only 1% of their total viewing time looking at the f...
#webrebels A website without ads?
#LDNWebPerf#webrebels The performance impact of ads • Body Level One • Body Level Two • Body Level Three • Body Level Four...
#webrebels 40% Using no (client-side) ad code reduced CBC’s page load time by 40% <script/>
#webrebels Monitor foreign content, constantly!
#LDNWebPerf#webrebels ArithmeticMeanins 0 2.5 5 7.5 10 10/4/12 10/31/12 Bad 3rd parties (CBC mobile Site) Smooth sailing C...
#webrebels Single point of failure
#LDNWebPerf#webrebels A single point of failure (SPOF) is a part of a system that, if it fails, will stop the entire syste...
#LDNWebPerf#webrebels The Offender It will block rendering anything after this line
#webrebels Yeah…whatever
 3rd providers don’t really go down…
#webrebels Oh yes, they do!
#webrebels
#webrebels
#webrebels
#webrebels
#webrebels
#webrebels
#webrebels
#webrebels Title Text Title Text
#webrebels
#webrebels The Great Firewall of China
#webrebels Simulating SPOF on TechCrunch
#webrebels
#velocityconf SPOF-O-Matic
#webrebels
#webrebels SPOF WIRED Without SPOF With SPOF: Visually complete 40s
#webrebels Let’s crash this party
#webrebels Title Text Title Text #webrebels
#webrebels
#velocityconf#webrebels
#velocityconf#webrebels
#webrebels Initializing 
 client-side scripts
#webrebels Safest (previous) way: 
 Dynamic script tag
(to cover most of the browsers)
#webrebels http://www.phpied.com/social-button-bffs/ Asynchronous Loading
#webrebels Title Text Asynchronous Loading
#webrebels Title Text Asynchronous Loading
#webrebels Title Text Asynchronous Loading
#webrebels Title Text Asynchronous Loading
#webrebels Title Text Asynchronous Loading
#webrebels Title Text Asynchronous Loading
#webrebels Before
#webrebels 5 seconds 25 seconds #webrebels
#webrebels After
#webrebels AFTER 5 seconds #webrebels
#webrebels
#webrebels The Future
#LDNWebPerf#webrebels Async or Defer JS
#LDNWebPerf#webrebels Async or Defer JS
#LDNWebPerf#webrebels Async and Defer JS
#LDNWebPerf#webrebels Protect yourself with the help of tools Ad-hoc browser tools
 Continuous integration and deployment ...
#webrebels Caching? Don’t always rely on it!
#LDNWebPerf#webrebels 30min 3 min Cache Policies 20 min 30 min 1 hr 20 min
#webrebels What about hosted libraries?
#LDNWebPerf#webrebels Pages using Google CDN
 (Top Alexa Websites) 0% 0.25% 0.5% Jan '11 Jan '13 Jan '13 Jan '14 Jan '15 1...
#LDNWebPerf#webrebels Anywhere? Don’t just copy and paste
#webrebels SPOF Alert!
#webrebels Don’t do this….
#webrebels Rather do this: Silent Fail
#webrebels Source: May 2015, Big Query result on jQuery from Google CDNs Google’s hostest jQuery fragmentation OTHER 30% 1...
#webrebels So, whats the verdict: Hosted Libraries or not?
#webrebels Privacy
#webrebels Title Texthttps://developers.facebook.com/docs/plugins/like-button/
#webrebels Title Text What they don’t really tell you that they maybe….
 track the visited website, your IP, and more….???...
#webrebels Open Source Initiatives and Resources
#webrebels Privacy Hero heise’s Opt-in Solution
#webrebels
#webrebels
#velocityconf
#LDNWebPerf#webrebels Measuring 3rd party content on your site Navigation Timing API
 Resource Timing API
#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 Op...
#webrebels Title Text jsmanners
#webrebels
#webrebels Title Text https://github.com/triblondon/ Contribute on Github!
#webrebels Next time before you copy and paste
#LDNWebPerf#webrebels • Refuse 3rd party content that doesn’t provide async options or is not minified • Put the risk in th...
#LDNWebPerf#webrebels • Ask for server-side options • Evaluate tag managers • Investigate hosted libraries (if no own CDN ...
#LDNWebPerf#webrebels What to do as a Script Provider • Provide non-blocking code samples and snippets • Educate developer...
#webrebels The Party’s Over Thank you
#webrebels Questions? bit.ly/webrebels Shameless Plug: I wrote a book 
 “Lean Websites” (SitePoint) Release: end of May 20...
Upcoming SlideShare
Loading in …5
×

3rd Party Footprint @ Webrebels

651 views

Published on

bit.ly/webrebels

no profile picture user

  • Be the first to comment

3rd Party Footprint @ Webrebels

  1. 1. #webrebels 3rd Party Footprint EVALUATING THE PERFORMANCE OF EXTERNAL SCRIPTS BARBARA BERMES /bbinto
  2. 2. #webrebels 3rd Party Footprint EVALUATING THE PERFORMANCE OF EXTERNAL SCRIPTS BARBARA BERMES /bbinto
  3. 3. #webrebels I live in Toronto, Canada
  4. 4. #webrebels I love burritos
  5. 5. #webrebels I’m passionate about web perf
  6. 6. #webrebels Let’s get this 3rd party started!
  7. 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. 8. #LDNWebPerf#webrebels Types of 3rd party scripts Advertising Tracking and Analytics Fonts Social Media Libraries and Frameworks
  9. 9. #webrebels What’s the #1 used 3rd Party script?
  10. 10. #LDNWebPerf#webrebels Stats from Big Query
  11. 11. #webrebels AKAMAI (FB) 14% TWITTER 5% FACEBOOK 10% GOOGLE 71% Top 10
  12. 12. #webrebels Visualize the impact of 3rd party scripts
  13. 13. #webrebels
  14. 14. #webrebels
  15. 15. #webrebels
  16. 16. #webrebels
  17. 17. #webrebels Foreign content overload
  18. 18. #LDNWebPerf#webrebels Example: Wired • Body Level One • Body Level Two • Body Level Three • Body Level Four • Body Level Five
  19. 19. #webrebels But what’s the issue?
  20. 20. #LDNWebPerf#webrebels The Issues and Negative Impacts Performance
 Front-end Single Point of Failure (SPOF) 
 Privacy

  21. 21. #LDNWebPerf#webrebels Potential Solutions Safe Snippets
 Caching and Hosted Libraries
 Tools and Initiatives
  22. 22. #webrebels Performance
  23. 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. 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. 25. #webrebels A website without ads?
  26. 26. #LDNWebPerf#webrebels The performance impact of ads • Body Level One • Body Level Two • Body Level Three • Body Level Four • Body Level Five
  27. 27. #webrebels 40% Using no (client-side) ad code reduced CBC’s page load time by 40% <script/>
  28. 28. #webrebels Monitor foreign content, constantly!
  29. 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. 30. #webrebels Single point of failure
  31. 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. 32. #LDNWebPerf#webrebels The Offender It will block rendering anything after this line
  33. 33. #webrebels Yeah…whatever
 3rd providers don’t really go down…
  34. 34. #webrebels Oh yes, they do!
  35. 35. #webrebels
  36. 36. #webrebels
  37. 37. #webrebels
  38. 38. #webrebels
  39. 39. #webrebels
  40. 40. #webrebels
  41. 41. #webrebels
  42. 42. #webrebels Title Text Title Text
  43. 43. #webrebels
  44. 44. #webrebels The Great Firewall of China
  45. 45. #webrebels Simulating SPOF on TechCrunch
  46. 46. #webrebels
  47. 47. #velocityconf SPOF-O-Matic
  48. 48. #webrebels
  49. 49. #webrebels SPOF WIRED Without SPOF With SPOF: Visually complete 40s
  50. 50. #webrebels Let’s crash this party
  51. 51. #webrebels Title Text Title Text #webrebels
  52. 52. #webrebels
  53. 53. #velocityconf#webrebels
  54. 54. #velocityconf#webrebels
  55. 55. #webrebels Initializing 
 client-side scripts
  56. 56. #webrebels Safest (previous) way: 
 Dynamic script tag
(to cover most of the browsers)
  57. 57. #webrebels http://www.phpied.com/social-button-bffs/ Asynchronous Loading
  58. 58. #webrebels Title Text Asynchronous Loading
  59. 59. #webrebels Title Text Asynchronous Loading
  60. 60. #webrebels Title Text Asynchronous Loading
  61. 61. #webrebels Title Text Asynchronous Loading
  62. 62. #webrebels Title Text Asynchronous Loading
  63. 63. #webrebels Title Text Asynchronous Loading
  64. 64. #webrebels Before
  65. 65. #webrebels 5 seconds 25 seconds #webrebels
  66. 66. #webrebels After
  67. 67. #webrebels AFTER 5 seconds #webrebels
  68. 68. #webrebels
  69. 69. #webrebels The Future
  70. 70. #LDNWebPerf#webrebels Async or Defer JS
  71. 71. #LDNWebPerf#webrebels Async or Defer JS
  72. 72. #LDNWebPerf#webrebels Async and Defer JS
  73. 73. #LDNWebPerf#webrebels Protect yourself with the help of tools Ad-hoc browser tools
 Continuous integration and deployment tools

  74. 74. #webrebels Caching? Don’t always rely on it!
  75. 75. #LDNWebPerf#webrebels 30min 3 min Cache Policies 20 min 30 min 1 hr 20 min
  76. 76. #webrebels What about hosted libraries?
  77. 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. 78. #LDNWebPerf#webrebels Anywhere? Don’t just copy and paste
  79. 79. #webrebels SPOF Alert!
  80. 80. #webrebels Don’t do this….
  81. 81. #webrebels Rather do this: Silent Fail
  82. 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. 83. #webrebels So, whats the verdict: Hosted Libraries or not?
  84. 84. #webrebels Privacy
  85. 85. #webrebels Title Texthttps://developers.facebook.com/docs/plugins/like-button/
  86. 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. 87. #webrebels Open Source Initiatives and Resources
  88. 88. #webrebels Privacy Hero heise’s Opt-in Solution
  89. 89. #webrebels
  90. 90. #webrebels
  91. 91. #velocityconf
  92. 92. #LDNWebPerf#webrebels Measuring 3rd party content on your site Navigation Timing API
 Resource Timing API
  93. 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. 94. #webrebels Title Text jsmanners
  95. 95. #webrebels
  96. 96. #webrebels Title Text https://github.com/triblondon/ Contribute on Github!
  97. 97. #webrebels Next time before you copy and paste
  98. 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. 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. 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. 101. #webrebels The Party’s Over Thank you
  102. 102. #webrebels Questions? bit.ly/webrebels Shameless Plug: I wrote a book 
 “Lean Websites” (SitePoint) Release: end of May 2015

×