Successfully reported this slideshow.

Third Party Footprint: Evaluating the Performance of External Scripts

7

Share

Loading in …3
×
1 of 102
1 of 102

Third Party Footprint: Evaluating the Performance of External Scripts

7

Share

Download to read offline

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.

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.

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

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?

×