3rd Party Footprint @ Webrebels
2 likes1,021 views
This document discusses evaluating the performance of third-party scripts on websites. It begins by defining third-party scripts as anything served to the client from an external organization, not the website itself. Common types are then listed, with Google scripts comprising 71% of the top used scripts. The document goes on to discuss issues third-party scripts can cause including negative performance impacts, creating single points of failure, and privacy concerns. Potential solutions explored are using asynchronous loading, hosted libraries, and tools to monitor and measure third-party scripts.
3rd Party Footprint @ Webrebels
- 1. #webrebels 3rd Party Footprint EVALUATING THE PERFORMANCE OF EXTERNAL SCRIPTS BARBARA BERMES /bbinto
- 2. #webrebels 3rd Party Footprint EVALUATING THE PERFORMANCE OF EXTERNAL SCRIPTS BARBARA BERMES /bbinto
- 3. #webrebels I live in Toronto, Canada
- 6. #webrebels Let’s get this 3rd party started!
- 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. #LDNWebPerf#webrebels Types of 3rd party scripts Advertising Tracking and Analytics Fonts Social Media Libraries and Frameworks
- 9. #webrebels What’s the #1 used 3rd Party script?
- 10. #LDNWebPerf#webrebels Stats from Big Query
- 12. #webrebels Visualize the impact of 3rd party scripts
- 13. #webrebels
- 14. #webrebels
- 15. #webrebels
- 16. #webrebels
- 18. #LDNWebPerf#webrebels Example: Wired • Body Level One • Body Level Two • Body Level Three • Body Level Four • Body Level Five
- 19. #webrebels But what’s the issue?
- 20. #LDNWebPerf#webrebels The Issues and Negative Impacts Performance Front-end Single Point of Failure (SPOF) Privacy
- 21. #LDNWebPerf#webrebels Potential Solutions Safe Snippets Caching and Hosted Libraries Tools and Initiatives
- 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. #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. #webrebels A website without ads?
- 26. #LDNWebPerf#webrebels The performance impact of ads • Body Level One • Body Level Two • Body Level Three • Body Level Four • Body Level Five
- 27. #webrebels 40% Using no (client-side) ad code reduced CBC’s page load time by 40% <script/>
- 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. #webrebels Single point of failure
- 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. #LDNWebPerf#webrebels The Offender It will block rendering anything after this line
- 33. #webrebels Yeah…whatever 3rd providers don’t really go down…
- 34. #webrebels Oh yes, they do!
- 35. #webrebels
- 36. #webrebels
- 37. #webrebels
- 38. #webrebels
- 39. #webrebels
- 40. #webrebels
- 41. #webrebels
- 43. #webrebels
- 44. #webrebels The Great Firewall of China
- 46. #webrebels
- 48. #webrebels
- 49. #webrebels SPOF WIRED Without SPOF With SPOF: Visually complete 40s
- 50. #webrebels Let’s crash this party
- 52. #webrebels
- 56. #webrebels Safest (previous) way: Dynamic script tag (to cover most of the browsers)
- 65. #webrebels 5 seconds 25 seconds #webrebels
- 66. #webrebels After
- 68. #webrebels
- 73. #LDNWebPerf#webrebels Protect yourself with the help of tools Ad-hoc browser tools Continuous integration and deployment tools
- 74. #webrebels Caching? Don’t always rely on it!
- 75. #LDNWebPerf#webrebels 30min 3 min Cache Policies 20 min 30 min 1 hr 20 min
- 76. #webrebels What about hosted libraries?
- 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. #LDNWebPerf#webrebels Anywhere? Don’t just copy and paste
- 81. #webrebels Rather do this: Silent Fail
- 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. #webrebels So, whats the verdict: Hosted Libraries or not?
- 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. #webrebels Open Source Initiatives and Resources
- 88. #webrebels Privacy Hero heise’s Opt-in Solution
- 89. #webrebels
- 90. #webrebels
- 91. #velocityconf
- 92. #LDNWebPerf#webrebels Measuring 3rd party content on your site Navigation Timing API Resource Timing API
- 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)
- 95. #webrebels
- 97. #webrebels Next time before you copy and paste
- 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. #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. #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. #webrebels The Party’s Over Thank you
- 102. #webrebels Questions? bit.ly/webrebels Shameless Plug: I wrote a book “Lean Websites” (SitePoint) Release: end of May 2015