Downloaded 26 times
Uploaded byBarbara Bermes
Third Party Footprint: Evaluating the Performance of External Scripts
The presentation by Barbara Bermes at the Velocity Conference focuses on the impact of third-party scripts on web performance, detailing issues such as performance hits, single points of failure, and privacy concerns. It emphasizes strategies for mitigating negative effects, such as using async loading and monitoring third-party content, as well as best practices for publishers and developers. Bermes also highlights the importance of evaluating the necessity and performance of third-party scripts in collaboration with marketing and sales teams.
More Related Content
Similar to Third Party Footprint: Evaluating the Performance of External Scripts
Third Party Footprint: Evaluating the Performance of External Scripts
- 1. Third Party Footprint Barbara Bermes
- 2. #velocityconf 3RD PARTYFOOTPRINT EVALUATING THE PERFORMANCE OF EXTERNAL SCRIPTS BARBARA BERMES | @BBINTO
- 3. #velocityconf I LIVEIN TORONTO, CANADA
- 4. #velocityconf I LOVEBURRITOS #VELOCITYBURRITO
- 5. #velocityconf I’M PASSIONATEABOUT WEB PERF
- 6. #velocityconf LET’S GETTHIS PARTY STARTED
- 7. “In the strictestsense, 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. #velocityconf TYPES OF3RD PARTY SCRIPTS Advertising Tracking and Analytics Fonts Social Media Libraries and Frameworks
- 9. #velocityconf WHAT’S THE#1 USED 3RD PARTY SCRIPT?
- 10. #velocityconf STATS FROMBIG QUERY
- 11. #velocityconf STATS FROMBIG QUERY Google Facebook Twitter 16% 22% 62%
- 12. DISTRIBUTION OF 3RDPARTY 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. #velocityconf VISUALIZE THEIMPACT OF 3RD PARTY SCRIPTS
- 14.
- 15.
- 16.
- 17. #velocityconf FOREIGN CONTENTOVERLOAD!
- 18.
- 19. #velocityconf BUT WHAT’STHE ISSUE?
- 20. #velocityconf THE ISSUESAND NEGATIVE IMPACTS Performance Front-end Single Point of Failure (SPOF) Privacy
- 21. #velocityconf POTENTIAL SOLUTIONS Safe Snippets Caching and Hosted Libraries Tools and Initiatives
- 22.
- 23. #velocityconf RULE OFTHUMB 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. #velocityconf PERCEPTION OFPROMOTIONAL 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. #velocityconf A WEBSITEWITHOUT ADS???
- 26. #velocityconf THE PERFORMANCEIMPACT OF ADS
- 27. 40% #velocityconf Usingno (client-side) ad code reduced CBC’s page load time by 40% <script/>
- 28. #velocityconf MONITOR FOREIGNCONTENT. CONSTANTLY!
- 29. 10 7.5 BAD3RD 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. #velocityconf SINGLE POINTOF FAILURE
- 31. A single pointof failure (SPOF) is a part of a system that, if #velocityconf it fails, will stop the entire system from working –Wikipedia
- 32. #velocityconf THE OFFENDER It will block rendering anything after this line
- 33. #velocityconf YEAH….WHATEVER 3RDPROVIDERS DON’T REALLY GO DOWN…
- 34. #velocityconf OH YES.THEY DO!
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43. #velocityconf THE GREATFIREWALL OF CHINA
- 44. #velocityconf SIMULATING SPOFON TECHCRUNCH
- 45.
- 46.
- 47.
- 48. #velocityconf SPOF WIRED Without SPOF With SPOF: Visually complete 40s
- 49. #velocityconf LET’S CRASHTHE PARTY
- 50.
- 51.
- 52.
- 53.
- 54.
- 55. #velocityconf SAFEST (PREVIOUS)WAY: DYNAMIC SCRIPT TAG (to cover most of the browsers)
- 56. #velocityconf ASYNCHRONOUS LOADING http://www.phpied.com/social-button-bffs/
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64. #velocityconf 5 seconds25 seconds
- 65.
- 66. #velocityconf AFTER 5seconds
- 67.
- 68.
- 69. #velocityconf ASYNC ORDEFER JS
- 70. #velocityconf ASYNC ORDEFER JS
- 71. #velocityconf ASYNC ANDDEFER JS //suggested by W3C
- 72. PROTECT YOURSELF WITHTHE HELP OF TOOLS #velocityconf Ad-hoc browser tools Continuous integration & deployment tools
- 73. #velocityconf CACHING? Don’talways rely on it!
- 74. #velocityconf CACHE POLICIES 30min. 20 min 3 min 1 hr 12 hrs no cache 30 min 1 hr 336 hrs
- 75. #velocityconf WHAT ABOUTHOSTED LIBRARIES?
- 76. #velocityconf GOOGLE HOSTEDLIBRARIES 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. #velocityconf DON’T JUSTCOPY AND PASTE Anywhere?
- 78.
- 79. #velocityconf DON’T DOTHIS….
- 80. #velocityconf RATHER DOTHIS: SILENTLY FAIL
- 81. GOOGLE’S HOSTED JQUERYFRAGMENTATION Source: Aug 2014, Big Query result on jQuery from Google CDNs #velocityconf
- 82. #velocityconf SO, WHATSTHE VERDICT: HOSTED LIBRARIES OR NOT?
- 83.
- 84.
- 85. #velocityconf What theydon’t really tell you that they maybe…. track the visited website, your IP, and more….???? Did you agree to that?
- 86. #velocityconf OPEN SOURCEINITIATIVES AND RESOURCES
- 87. #velocityconf PRIVACY HERO HEISE’S OPT-IN SOLUTION
- 88.
- 89. #velocityconf 3RD PARTYPERF HEROES PHILIP TELLIS & STOYAN STEFANOV
- 90.
- 91. #velocityconf MEASURING 3RDPARTY CONTENT ON YOUR SITE Navigation timing API Resource timing API
- 92. ADOPTION OF TIMING-ALLOW-ORIGINHEADER #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.
- 94.
- 95. #velocityconf CONTRIBUTE ONGITHUB! https://github.com/triblondon/thirdpartysla
- 96. #velocityconf NEXT TIMEBEFORE YOU COPY AND PASTE
- 97. WHAT TO DOAS 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. WHAT TO DOAS 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. #velocityconf WHAT TODO AS A SCRIPT PROVIDER • Provide non-blocking code samples and snippets • Educate developers and verify the integration of your script (proof-check)
- 100. #velocityconf THE PARTY’SOVER THANK YOU
- 101. QUESTIONS? SHAMELESS PLUGI’m writing a book: Lean Websites (SitePoint) VELOCITY OFFICE HOUR 2pm Table 1 (Sponsor Pavilion) #velocityconf bit.ly/velocityconf14-3rdparty
- 102. #velocityconf BUT WHENTO USE WHAT NOW?