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

4. #webrebels I love burritos

5. #webrebels I’m passionate about web perf

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

11. #webrebels AKAMAI (FB) 14% TWITTER 5% FACEBOOK 10% GOOGLE 71% Top 10

12. #webrebels Visualize the impact of 3rd party scripts

13. #webrebels

14. #webrebels

15. #webrebels

16. #webrebels

17. #webrebels Foreign content overload

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

22. #webrebels Performance

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/>

28. #webrebels Monitor foreign content, constantly!

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 oﬀ 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 Oﬀender 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

42. #webrebels Title Text Title Text

43. #webrebels

44. #webrebels The Great Firewall of China

45. #webrebels Simulating SPOF on TechCrunch

46. #webrebels

47. #velocityconf SPOF-O-Matic

48. #webrebels

49. #webrebels SPOF WIRED Without SPOF With SPOF: Visually complete 40s

50. #webrebels Let’s crash this party

51. #webrebels Title Text Title Text #webrebels

52. #webrebels

53. #velocityconf#webrebels

54. #velocityconf#webrebels

55. #webrebels Initializing   client-side scripts

56. #webrebels Safest (previous) way:   Dynamic script tag (to cover most of the browsers)

57. #webrebels http://www.phpied.com/social-button-bffs/ Asynchronous Loading

58. #webrebels Title Text Asynchronous Loading

64. #webrebels Before

65. #webrebels 5 seconds 25 seconds #webrebels

66. #webrebels After

67. #webrebels AFTER 5 seconds #webrebels

68. #webrebels

69. #webrebels The Future

70. #LDNWebPerf#webrebels Async or Defer JS

71. #LDNWebPerf#webrebels Async or Defer JS

72. #LDNWebPerf#webrebels Async and Defer JS

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

79. #webrebels SPOF Alert!

80. #webrebels Don’t do this….

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?

84. #webrebels Privacy

85. #webrebels Title Texthttps://developers.facebook.com/docs/plugins/like-button/

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)

94. #webrebels Title Text jsmanners

95. #webrebels

96. #webrebels Title Text https://github.com/triblondon/ Contribute on Github!

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 miniﬁed • 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

3rd Party Footprint @ Webrebels

You are reading a preview.

3rd Party Footprint @ Webrebels

More Related Content

Similar to 3rd Party Footprint @ Webrebels

More from Barbara Bermes

Featured

Related Books

Related Audiobooks