Name That Script!

How many third-party scripts are loading on our web pages these days? How can we objectively measure the value of these (advertising, a/b testing, analytics, etc.) scripts—considering their impact on web performance, user experience, and business goals? We’ve learned to scrutinize content hierarchy, browser support, and page speed as part of the design and development process. Similarly, Trent will share recent experiences and explore ways to evaluate and discuss the inclusion of 3rd-party scripts.

Presented at An Event Apart, Boston 2018
https://aneventapart.com/event/boston-2018

Links from slides
https://twitter.com/csswizardry/status/915886339391918083
https://twitter.com/jasonfried/status/1003979608042164230
https://en.wikipedia.org/wiki/General_Data_Protection_Regulation
https://en.wikipedia.org/wiki/Privacy_by_design
https://www.smashingmagazine.com/2018/02/gdpr-for-web-developers/
https://www.smashingmagazine.com/2017/07/privacy-by-design-framework/
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
http://requestmap.webperf.tools/
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.webpagetest.org

Transcript

1. Name
 That
 Script!
2. Hi! paravelinc.com
3. Hi!
4. Hi!
5. Third- Parties?
6. Third-Party Any request made by a webpage coming from an external URL
7. Third-Party Scripts and Services http://trentwalton.com
8. http://trentwalton.com Network Requests Panel https://trentwalton.com/style.css https://trentwalton.com/mediocrejavascript.js Third-Party Scripts and Services
9. 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
10. http://trentwalton.com Third-Party Scripts and Services
11. 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
12. http://trentwalton.com Network Requests Panel https://trentwalton.com/style.css https://trentwalton.com/mediocrejavascript.js Third-Party Scripts and Services
13. 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
14. http://trentwalton.com Network Requests Panel https://trentwalton.com/style.css https://trentwalton.com/mediocrejavascript.js https://evilcorp.com/ssssshhhhh.js
15. Advertising Ad networks, Ad content Comments Disqus, etc. Essential Tag managers, fonts, etc. Customer Interaction Live chat, feedback widgets Analytics Site traffic, trackers, etc. AB Testing Maxymiser, Optimizely, etc. Social Media Embeds, sign up, share buttons CDN Cloudflare, AWS, etc. Third-Party Uses
16. Data / Decision Drivers Analytics + AB Testing Content CDNs for Fonts, Images, Videos, etc. Income Ads, Analytics, Trackers Functionality Comments, Chat, Tag Managers, IFrame embeds Third-Party Benefits
17. User Experience Poor Performance (Load Time + Processor Lag), Inconsistent UI Privacy Customer/User Trust, Organizational Reputation, Data protection Third-Party Concerns
18. Why do I care about third-parties?
20. Image Comps
21. Image Comps Frontend
22. Image Comps Frontend Performance
23. Image Comps Frontend Performance A11Y
24. Image Comps Frontend Performance A11Y RWD
25. Image Comps Frontend Performance A11Y RWD Design Systems
26. Image Comps Frontend Performance A11Y RWD Design Systems Command Line
27. Image Comps Frontend Performance A11Y RWD Design Systems Command Line Third-Parties
28. Impact
29. Prototypes!
30. Welcome 1 2 3 Next
31. Welcome 1 2 3 <ul role="tablist"> <li> <a href="#first-tab" role="tab" aria- selected="true" aria-controls="first-tab">
32. Welcome 1 2 3
33. CSS PNG JS JPG WOFF CSS JPG Shrink-O-Matic W CSS JPG WOFF
34. Buttons Fonts Footer Forms Grid
 Header Navigation Tables Patterns Primary Secondary Buttons Use only one primary button per component.
36. Integration!
37. CMS
38. Analytics CMS Ad Network
39. Analytics CMS Ad Network AB Testing Comments E-Comm
40. Analytics CMS Ad Network AB Testing Comments E-Commerce Trackers Social Sign Bus
41. CSS PNG JS JPG WOFF Analytics Social AB Testing Ad Network
42. Analytics v2.0.1 v2.0.2 Ad Network v2.0.3 AB Testing
43. Delivering a performant, accessible, responsive, scalable website isn’t enough: I also need to consider the impact of third-party scripts.
44. twitter.com/csswizardry/status/915886339391918083
46. Listen and Learn!
47. Let the work begin!
48. Analyze & Itemize on the Web Categories & Types Know Industry Averages Impact UX, Perf, Privacy Understand IRL Benefits Take Action
49. UX, Perf, Privacy Impact
50. UX + Perf
51. Please Turn Off Your Ad Blocker
52. 31 requests, 6.7MB
53. 348 requests, 14.7MB
55. Privacy
56. This site uses cookies! Got it
57. https://twitter.com/jasonfried/status/1003979608042164230
58. Remarketing! Spatula Buy Now
59. Remarketing! Thank you for your purchase
60. Weather App advertisement Spatula! Shop Now
61. I’m not evil. But Trent. While I’m here… I was looking at your browser history and wondered if you still wanted that panini press.
62. Browsing History cheesysandwiches.com facebook.com/political-thing facebook.com/timeline twitter.com/moment amazon.com/panini
63. Don’t wait to be told!
64. Image Frontend Performance A11Y RWD Design Systems Command Line Third-Parties Privacy
65. Privacy & GDPR Resources
66. GDPR (General Data Protection Regulation) https://www.smashingmagazine.com/2018/02/gdpr-for-web-developers/ Privacy & GDPR Resources
67. GDPR (General Data Protection Regulation) https://www.smashingmagazine.com/2018/02/gdpr-for-web-developers/ Privacy by Design (PbD) https://www.smashingmagazine.com/2017/07/privacy-by-design-framework/ Privacy & GDPR Resources
68. GDPR (General Data Protection Regulation) https://www.smashingmagazine.com/2018/02/gdpr-for-web-developers/ Privacy Impact Assessment https://www.gsa.gov/reference/gsa-privacy-program/privacy-impact- assessments-pia Privacy by Design (PbD) https://www.smashingmagazine.com/2017/07/privacy-by-design-framework/ Privacy & GDPR Resources
69. Analytics Categories Comments Social Media Advertising
70. Categories Advertising Ad networks, Ad content Comments Disqus, etc. Essential Tag managers, fonts, etc. Customer Interaction Live chat, feedback widgets Analytics Google, Chartbeat, etc. AB Testing Maxymiser, Optimizely, etc. Social Media Embeds, sign up, share buttons CDN Cloudflare, AWS, etc.
71. Ghostery ghostery.com
72. Categories ghostery.com
73. Categories ghostery.com
74. Categories ghostery.com
75. 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.
76. Analyze & Itemize
77. View Source? view-source:http://trentwalton.com <html lang=“en-us”> <head> <link href="https://use.typekit.net/iwu3yfx.css" rel="stylesheet"> <script src="//cdnjs.cloudflare.com/jquery.min.js"></script> </head> <body>
78. View Source? view-source:http://trentwalton.com <html lang=“en-us”> <head> <link rel="shortcut icon" href="https://static.nytimes.com/favicon.ico" /> <link rel="apple-touch-icon-precomposed" sizes="144×144" href="https://static.nytimes.com/images/icons/ios-ipad-144x144.png" /> <link rel="apple-touch-icon-precomposed" sizes="114×114" href="https://static.nytimes.com/images/icons/ios-iphone-114x144.png" /> <link rel="apple-touch-icon-precomposed" href="https://static.nytimes.com/images/icons/ios-default-homescreen-57x57.png" /> <meta name="sourceApp" content="nyt-v5" /> <meta id="applicationName" name="applicationName" content="homepage" /> <meta id="foundation-build-id" name="foundation-build-id" content="" /> <link rel="canonical" href="https://www.nytimes.com" /> <link rel="alternate" type="application/rss+xml" title="RSS" href="http://www.nytimes.com/services/xml/rss/nyt/HomePage.xml" /> <link rel="alternate" media="only screen and (max-width: 640px)" href="http://mobile.nytimes.com" /> <link rel="alternate" media="handheld" href="http://mobile.nytimes.com" /> <meta name="robots" content="noarchive,noodp,noydir" /> <meta name="description" content="The New York Times: Find breaking news, multimedia, reviews & opinion on Washington, business, sports, movies, travel, books, jobs, education, real estate, cars & more at nytimes.com." /> <meta name="CG" content="Homepage" /> <meta name="SCG" content="" />
79. Ghostery?
80. Portable, Please
81. XLS! CSV! They’re for me!
82. website.har (JSON) HTTP Archive format HAR
83. 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
84. Now What? HAR website.har
85. har.tech
86. charlesproxy.com
89. By Simon Hearne requestmap.webperf.tools
90. Request Map for trentwalton.com requestmap.webperf.tools
91. Request Map for amazon.com requestmap.webperf.tools
92. Request Map for amazon.com Request Map CSV Export
93. Know Industry Averages
94. Alexa Top 50 US Sites
95. Alexa Top 50 US Sites 49
96. Alexa Top 50 US Sites 49 46
98. Third-Party Requests across top 46 US sites
99. 213 Third-Party Domain URLs * domains, not requests
100. 22 Average Per Site
101. 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/
102. What’s a Demdex? better.fyi/trackers
103. What’s a Demdex? better.fyi/trackers
104. 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
105. 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
106. News & Shopping Ads Analytics CDN Ratings Comments Social Feedback
107. Further Reading trentwalton.com/notes/2018/01/23/third-party-script-prevalence-on-alexa-top-50.html
108. Understand Benefits
111. $ $
113. Vector Media Group Matt Weinberg Lee Goldberg
114. Analytics Ad Network What’s a Tag Manager? AB Testing
115. Dashboard
116. Get Snippets
117. Add Snippets view-source:http://trentwalton.com <html lang=“en-us”> <head> <script src=“Tag Manager Script Here”></script> </head> <body> <noscript><iframe>Tag Manager Script</iframe></noscript>
118. Add Tags & Scripts
119. Pandora’s Box? view-source:http://trentwalton.com <html lang=“en-us”> <head> <script src=“Tag Manager Script Here”></script> </head> <body> <noscript><iframe>Tag Manager Script</iframe></noscript>
121. Get Organized view-source:http://trentwalton.com <html lang=“en-us”> <head> <script src=“Tag Manager Script Here”></script> </head> <body> <noscript><iframe>Tag Manager Script</iframe></noscript>
122. “An analytics strategy should be part of the initial development and design process […]” —Lee Goldberg
123. CSS PNG JS JPG WOFF Analytics Social AB Testing Ad Network
124. CSS PNG JS JPG WOFF Analytics Social AB Testing Ad Network
125. It’s too easy to add scripts. view-source:http://trentwalton.com <html lang=“en-us”> <head> <script src=“Tag Manager Script Here”></script> </head> <body> <noscript><iframe>Tag Manager Script</iframe></noscript>
127. “We work towards a global maximum versus a local maximum. Small, hyper-focused changes may seem good at the time…
128. but we have to be mindful of the overall quality of the user-experience and integrity of the brand.” —Matt Weinberg
129. Ads and analytics work together to help our clients. view-source:http://trentwalton.com <html lang=“en-us”> <head> <script src=“Tag Manager Script Here”></script> </head> <body> <noscript><iframe>Tag Manager Script</iframe></noscript>
130. Don’t blame the tool.
131. Take Action!
132. Establish a Center of Excellence!
133. 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
134. 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
135. Analytics Ad Network AB Testing Account For Third-Parties During Prototyping
136. 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
137. Monitor Performance
138. Make your Case!
139. 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
140. Gather Compelling Results wpostats.com/2017/03/03/bbc-load-abandonment.html
141. Comparative Data
142. Get Results
143. Block Third-Party
145. Compare Results
146. Use Real User Monitoring (RUM) soasta.com/blog/what-if-analysis-predictive-analytics/
147. Compare Results
148. Compare Results
149. Talk it out!
150. “Everything should have a value, because everything has a cost.” —Tim Kadlec
151. Slides! Links! https://noti.st/trentwalton https://speakerdeck.com/trentwalton
152. People to Follow / Who Helped Andy Davies
 Simon Hearne Matt Weinberg Lee Goldberg Harry Roberts Aral Balkan Laura Kalbag Dave Rupert
153. Links From Slides https://twitter.com/csswizardry/status/915886339391918083 https://twitter.com/jasonfried/status/1003979608042164230 https://en.wikipedia.org/wiki/General_Data_Protection_Regulation https://en.wikipedia.org/wiki/Privacy_by_design https://www.smashingmagazine.com/2018/02/gdpr-for-web-developers/ https://www.ghostery.com https://calibreapp.com https://speedcurve.com https://www.dareboost.com https://har.tech https://www.charlesproxy.com http://requestmap.webperf.tools/ 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.webpagetest.org
154. Tools I Use Ghostery Calibre SpeedCurve DareBoost HAR.tech Charles App
155. Thanks! @TrentWalton