Name That Script!

From Smashing Conf SF 2018
https://smashingconf.com/

Links from slides
https://twitter.com/csswizardry/status/915886339391918083
https://www.ghostery.com
https://calibreapp.com
https://speedcurve.com
https://www.dareboost.com
https://har.tech
https://www.charlesproxy.com
https://calendar.perfplanet.com/2014/driving-webpagetest-from-a-google-docs-spreadsheet
https://trentwalton.com/tag/Third-Party
https://better.fyi/trackers
https://trentwalton.com/notes/2018/01/23/third-party-script-prevalence-on-alexa-top-50.html
https://wpostats.com/2017/03/03/bbc-load-abandonment.html
https://www.soasta.com/blog/what-if-analysis-predictive-analytics
https://www.webpagetest.org

Transcript

1. Name

   That

   Script!
   

   View Slide

2. Hi!
   paravelinc.com
   

   View Slide

3. Hi!
   

   View Slide

4. Hi!
   

   View Slide

5. Area of Responsibility
   & Expertise
   

   View Slide

6. Image
   Comps
   

   View Slide

7. Image
   Comps
   Frontend
   

   View Slide

8. Image
   Comps
   Frontend
   Performance
   

   View Slide

9. Image
   Comps
   Frontend
   Performance
   A11Y
   

   View Slide

10. Image
    Comps
    Frontend
    Performance
    A11Y
    RWD
    

    View Slide

11. Image
    Comps
    Frontend
    Performance
    A11Y
    RWD
    Design Systems
    

    View Slide

12. Image
    Comps
    Frontend
    Performance
    A11Y
    RWD
    Design Systems
    Command Line
    

    View Slide

13. Image
    Comps
    Frontend
    Performance
    A11Y
    RWD
    Design Systems
    Command Line
    Third-Parties
    

    View Slide

14. Control
    

    View Slide

15. Prototypes!
    

    View Slide

16. Welcome
    1 2 3
    Next
    

    View Slide

17. Welcome
    1 2 3
    
    
    selected="true" aria-controls="first-tab">
    

    View Slide

18. Welcome
    1
    2
    3
    

    View Slide

19. CSS PNG JS JPG WOFF CSS JPG
    Shrink-O-Matic
    W
    CSS
    JPG
    WOFF
    

    View Slide

20. Buttons
    Fonts
    Footer
    Forms
    Grid

    Header
    Navigation
    Tables
    Patterns
    Primary Secondary
    Buttons
    Use only one primary button
    per component.
    

    View Slide

21. View Slide

22. Integration!
    

    View Slide

23. CMS
    

    View Slide

24. Analytics
    CMS
    Ad Network
    

    View Slide

25. Analytics
    CMS
    Ad Network
    AB Testing
    Comments
    E-Comm
    

    View Slide

26. Analytics
    CMS
    Ad Network
    AB Testing
    Comments
    E-Commerce
    Trackers
    Social Sign
    Bus
    

    View Slide

27. CSS
    PNG
    JS
    JPG
    WOFF
    Analytics
    Social
    AB
    Testing
    Ad
    Network
    

    View Slide

28. Analytics
    v2.0.1
    v2.0.2
    Ad
    Network
    v2.0.3
    AB
    Testing
    

    View Slide

29. Delivering a performant,
    accessible, responsive,
    scalable website isn’t enough:
    I also need to consider the
    impact of third-party scripts.
    

    View Slide

30. twitter.com/csswizardry/status/915886339391918083
    

    View Slide

31. View Slide

32. Whose
    fault is
    this?
    

    View Slide

33. I blame
    myself.
    

    View Slide

34. But, I’ve
    been
    learning.
    

    View Slide

35. Third-Party
    Any request made by a webpage coming
    from an external URL
    

    View Slide

36. Third-Party Scripts
    and Services
    http://trentwalton.com
    

    View Slide

37. http://trentwalton.com
    Network Requests Panel
    https://trentwalton.com/style.css
    https://trentwalton.com/mediocrejavascript.js
    Third-Party Scripts
    and Services
    

    View Slide

38. http://trentwalton.com
    Network Requests Panel
    https://trentwalton.com/style.css
    https://trentwalton.com/mediocrejavascript.js
    https://p.typekit.net/p.css
    Third-Party Scripts
    and Services
    

    View Slide

39. http://trentwalton.com
    Third-Party Scripts
    and Services
    

    View Slide

40. Third-Party
    Any request made by a webpage coming
    from an external URL
    Any resource included with a webpage that
    the site owner doesn’t explicitly control
    

    View Slide

41. http://trentwalton.com
    Network Requests Panel
    https://trentwalton.com/style.css
    https://trentwalton.com/mediocrejavascript.js
    Third-Party Scripts
    and Services
    

    View Slide

42. http://trentwalton.com
    Network Requests Panel
    https://trentwalton.com/style.css
    https://trentwalton.com/mediocrejavascript.js
    https://evilcorp.com/ssssshhhhh.js
    Third-Party Scripts
    and Services
    

    View Slide

43. http://trentwalton.com
    Network Requests Panel
    https://trentwalton.com/style.css
    https://trentwalton.com/mediocrejavascript.js
    https://evilcorp.com/ssssshhhhh.js
    

    View Slide

44. Time to
    Research.
    

    View Slide

45. Analytics
    Categories
    Comments Social Media
    Advertising
    

    View Slide

46. Categories
    ghostery.com
    

    View Slide

47. Categories
    ghostery.com
    

    View Slide

48. Categories
    Advertising
    Ad networks, Ad content
    Comments
    Disqus, etc.
    Essential
    Tag managers, fonts, etc.
    Customer Interaction
    Live chat, feedback
    Analytics
    Google, Chartbeat, etc.
    AB Testing
    Maxymiser, Optimizely, etc.
    Social Media
    Embeds, sign up, share
    CDN
    Cloudflare, AWS, etc.
    

    View Slide

49. Itemizing Third-Parties
    

    View Slide

50. View Source
    view-source:http://trentwalton.com
    
    
    
    
    
    
    

    View Slide

51. View Source
    view-source:http://trentwalton.com
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    View Slide

52. Ghostery
    

    View Slide

53. Performance Monitors
    

    View Slide

54. Portable,
    Please
    

    View Slide

55. Save as HAR
    http://trentwalton.com
    Network Requests Panel
    https://trentwalton.com/style.css
    https://trentwalton.com/mediocrejavascript.js
    Copy
    Save All As Har
    Open in New Tab
    Start Performance Analysis
    

    View Slide

56. HTTP Archive Format
    HAR
    (JSON)
    

    View Slide

57. Now What?
    HAR
    website.har
    

    View Slide

58. har.tech
    

    View Slide

59. charlesproxy.com
    

    View Slide

60. View Slide

61. View Slide

62. Automate this!
    calendar.perfplanet.com
    

    View Slide

63. XLS! CSV!
    They’re
    for me!
    

    View Slide

64. Analyze Popular Sites
    

    View Slide

65. Alexa Top
    50 US Sites
    

    View Slide

66. Alexa Top
    50 US Sites
    49
    

    View Slide

67. Alexa Top
    50 US Sites
    49
    46
    

    View Slide

68. View Slide

69. Third-Party Requests
    across top 46 US sites
    

    View Slide

70. 213 Third Party Domain URLs
    * domains, not requests
    

    View Slide

71. 22 Average Per Site
    

    View Slide

72. Third-party domain # of top 46 sites % of top 46 sites
    doubleclick.net 38 82.6%
    facebook.com 32 69.6%
    google-analytics.com 27 58.7%
    googlesyndication.com 25 54.3%
    googleadservices.com 24 52.2%
    cloudfront.net 20 43.5%
    googleapis.com 20 43.5%
    scorecardresearch.com 18 39.1%
    2mdn.net 17 37.0%
    adnxs.com 17 37.0%
    fastly.net 17 37.0%
    akamaihd.net 16 34.8%
    Third-Party Prevalence
    https://trentwalton.com/tag/Third-Party/
    

    View Slide

73. What’s a Demdex?
    better.fyi/trackers
    

    View Slide

74. What’s a Demdex?
    better.fyi/trackers
    

    View Slide

75. Which types were most popular?
    Ad (Serving)
    doubleclick.net
    2mdn.net (doubleclick)
    googleadservices.com
    adnxs.com
    adsrvr.org
    Ad (Analytics)
    demdex.net
    scorecardresearch.com
    quantserve.com
    bluekai.com
    rubiconproject.com
    

    View Slide

76. Remarketing!
    Spatula
    Buy Now
    

    View Slide

77. Remarketing!
    Thank you
    for your
    purchase
    

    View Slide

78. Weather
    App
    advertisement
    Spatula!
    Shop Now
    

    View Slide

79. Alexa Site Third-Party Domains
    nytimes.com 64
    washingtonpost.com 63
    Metropcs.mobi 59
    cnn.com 57
    ebay.com 49
    msn.com 45
    microsoft.com 43
    wikia.com 42
    salesforce.com 40
    bestbuy.com 38
    imdb.com 37
    twitch.tv 37
    espn.com 36
    wordpress.com 32
    Volume Per Site
    

    View Slide

80. Which sites had the most?
    News
    nytimes.com
    washingtonpost.com
    cnn.com
    msn.com
    espn.com
    Shopping
    ebay.com
    bestbuy.com
    target.com
    amazon.com
    walmart.com
    

    View Slide

81. News & Shopping
    Ads Analytics CDN Ratings
    Comments Social Feedback
    

    View Slide

82. Further Reading
    trentwalton.com/notes/2018/01/23/third-party-script-prevalence-on-alexa-top-50.html
    

    View Slide

83. What!
    Me,
    biased?
    

    View Slide

84. View Slide

85. View Slide

86. $ $
    

    View Slide

87. Time to
    listen and
    learn.
    

    View Slide

88. Vector Media Group
    Matt Weinberg Lee Goldberg
    

    View Slide

89. Analytics
    Ad
    Network
    What’s a Tag Manager?
    AB
    Testing
    

    View Slide

90. Dashboard
    

    View Slide

91. Get Snippets
    

    View Slide

92. Add Snippets
    view-source:http://trentwalton.com
    
    
    
    
    
    Tag Manager Script
    

    View Slide

93. Add Tags & Scripts
    

    View Slide

94. Pandora’s Box?
    view-source:http://trentwalton.com
    
    
    
    
    
    Tag Manager Script
    

    View Slide

95. Get Organized
    view-source:http://trentwalton.com
    
    
    
    
    
    Tag Manager Script
    

    View Slide

96. “An analytics strategy should be
    part of the initial development
    and design process […]”
    —Lee Goldberg
    

    View Slide

97. CSS
    PNG
    JS
    JPG
    WOFF
    Analytics
    Social
    AB
    Testing
    Ad
    Network
    

    View Slide

98. CSS PNG JS
    JPG WOFF
    Analytics Social
    AB
    Testing
    Ad
    Network
    

    View Slide

99. It’s too easy to add scripts.
    view-source:http://trentwalton.com
    
    
    
    
    
    Tag Manager Script
    

    View Slide

100. View Slide

101. “We work towards a global maximum
     versus a local maximum. Small,
     hyper-focused changes may seem
     good at the time…
     

     View Slide

102. but we have to be mindful of the
     overall quality of the user-experience
     and integrity of the brand.”
     —Matt Weinberg
     

     View Slide

103. Ads and analytics work
     together to help our clients.
     view-source:http://trentwalton.com
     
     
     
     
     
     Tag Manager Script
     

     View Slide

104. Don’t blame the tool.
     

     View Slide

105. Take
     Action!
     

     View Slide

106. Establish a
     Center of
     Excellence!
     

     View Slide

107. 1 Determine value to the business/website
     2 Avoid redundant scripts and services
     3 Fit within established performance budget
     Define Standards
     4 Comply with organizational privacy policy
     

     View Slide

108. Styles
     Components
     Voice
     Perf
     Third-Parties
     Inventory
     AB Testing - Optimizely 300kb WebPage Test
     Analytics - Chartbeat 73kb WebPage Test
     Comments - Disqus 120kb WebPage Test
     Ads - Doubleclick 100kb WebPage Test
     Ads - Adnxs 80kb WebPage Test
     Third-Party Standards
     Our goal is to document and regularly
     evaluate the value of third-party
     inclusions, optimizing benefits while
     minimizing the UX/Performance impact.
     Document Standards
     

     View Slide

109. Analytics
     Ad Network
     AB Testing
     Account For Third-Parties
     During Prototyping
     

     View Slide

110. Audit Third-Parties
     Third-Party Size Budgeted Issue
     Optimizely 365kb 200kb Perf Budget
     Maxymizer 190kb Redundant
     Outbrain 645b 1kb
     Chartbeat 700b 1kb
     Analytics - Google 26kb 50kb
     Ads - Doubleclick 169kb 100kb Perf Budget
     Ads - Adnxs 80kb 100kb
     Ads - Rubicon Project 90kb 100kb
     

     View Slide

111. Monitor Performance
     

     View Slide

112. Make a
     business
     case!
     

     View Slide

113. 4
     Third-Parties
     24
     HTTP Requests
     2
     Megabytes
     Competitor B
     Competitive Analysis
     Our Site
     12
     Third-Parties
     39
     HTTP Requests
     1.2
     Megabytes
     35
     Third-Parties
     78
     HTTP Requests
     3
     Megabytes
     Competitor A
     

     View Slide

114. Case Studies & Quotes
     wpostats.com/2017/03/03/bbc-load-abandonment.html
     

     View Slide

115. Use Real User Monitoring (RUM)
     soasta.com/blog/what-if-analysis-predictive-analytics/
     

     View Slide

116. “What if my digital property
     had better performance? How
     would that affect the bottom
     line of my company?”
     —Edward Isarevich
     

     View Slide

117. webpagetest.org
     

     View Slide

118. Get Results
     

     View Slide

119. Block Third-Party
     

     View Slide

120. View Slide

121. Compare Results
     

     View Slide

122. Plug in Results
     soasta.com/blog/what-if-analysis-predictive-analytics/
     

     View Slide

123. Plug in Results
     soasta.com/blog/what-if-analysis-predictive-analytics/
     

     View Slide

124. Talk
     it out!
     

     View Slide

125. “Everything should
     have a value, because
     everything has a cost.”
     —Tim Kadlec
     

     View Slide

126. Slides! Links!
     https://speakerdeck.com/trentwalton
     

     View Slide

127. Links From Slides
     https://twitter.com/csswizardry/status/915886339391918083
     https://www.ghostery.com
     https://calibreapp.com
     https://speedcurve.com
     https://www.dareboost.com
     https://har.tech
     https://www.charlesproxy.com
     https://calendar.perfplanet.com/2014/driving-webpagetest-from-a-google-docs-spreadsheet
     https://trentwalton.com/tag/Third-Party
     https://better.fyi/trackers
     https://trentwalton.com/notes/2018/01/23/third-party-script-prevalence-on-alexa-top-50.html
     https://wpostats.com/2017/03/03/bbc-load-abandonment.html
     https://www.soasta.com/blog/what-if-analysis-predictive-analytics
     https://www.webpagetest.org
     

     View Slide

128. Tools I Use
     Ghostery
     Calibre
     SpeedCurve
     DareBoost
     HAR.tech
     Charles App
     

     View Slide

129. People to Follow / Who Helped
     Andy Davies

     Simon Hearne
     Matt Weinberg
     Lee Goldberg
     Harry Roberts
     Aral Balkan
     Laura Kalbag
     Dave Rupert
     

     View Slide

130. Thanks!
     @TrentWalton
     

     View Slide