Name That Script!
A presentation at An Event Apart Boston in June 2018 in Boston, MA, USA by Trent Walton
Name That Script!
Hi! paravelinc.com
Hi!
Hi!
Third- Parties?
Third-Party Any request made by a webpage coming from an external URL
Third-Party Scripts and Services http://trentwalton.com
http://trentwalton.com Network Requests Panel https://trentwalton.com/style.css https://trentwalton.com/mediocrejavascript.js Third-Party Scripts and Services
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
http://trentwalton.com Third-Party Scripts and Services
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
http://trentwalton.com Network Requests Panel https://trentwalton.com/style.css https://trentwalton.com/mediocrejavascript.js Third-Party Scripts and Services
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
http://trentwalton.com Network Requests Panel https://trentwalton.com/style.css https://trentwalton.com/mediocrejavascript.js https://evilcorp.com/ssssshhhhh.js
Advertising Ad networks, Ad content Comments Disqus, etc. Essential Tag managers, fonts, etc. Customer Interaction Live chat, feedback widgets Analytics Site tra ffi c, trackers, etc. AB Testing Maxymiser, Optimizely, etc. Social Media Embeds, sign up, share buttons CDN Cloudflare, AWS, etc. Third-Party Uses
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
User Experience Poor Performance (Load Time + Processor Lag), Inconsistent UI Privacy Customer/User Trust, Organizational Reputation, Data protection Third-Party Concerns
Why do I care about third-parties?
Image Comps
Image Comps Frontend
Image Comps Frontend Performance
Image Comps Frontend Performance A11Y
Image Comps Frontend Performance A11Y RWD
Image Comps Frontend Performance A11Y RWD Design Systems
Image Comps Frontend Performance A11Y RWD Design Systems Command Line
Image Comps Frontend Performance A11Y RWD Design Systems Command Line Third-Parties
Impact
Prototypes!
Welcome 1 2 3 Next
Welcome 1 2 3
<ul role="tablist"> <li> <a href="#first-tab" role="tab" aria- selected="true" aria-controls="first-tab">
Welcome 1 2 3
CSS PNG JS JPG WOFF CSS JPG Shrink-O-Matic WOFF CSS JPG WOFF
Buttons Fonts Footer Forms Grid Header Navigation Tables Patterns Primary Secondary Buttons Use only one primary button per component.
Integration!
CMS
Analytics CMS Ad Network
Analytics CMS Ad Network AB Testing Comments E-Commerce
Analytics CMS Ad Network AB Testing Comments E-Commerce Trackers Social Sign Business A
CSS PNG JS JPG WOFF Analytics Social AB Testing Ad Network
Analytics v2.0.1 v2.0.2 Ad Network v2.0.3 AB Testing
Delivering a performant, accessible, responsive, scalable website isn’t enough: I also need to consider the impact of third-party scripts.
twitter.com/csswizardry/status/915886339391918083
Listen and Learn!
Let the work begin!
Analyze & Itemize on the Web Categories & Types Know Industry Averages Impact UX, Perf, Privacy Understand IRL Benefits Take Action
UX, Perf, Privacy Impact
UX + Perf
Please Turn Off Your Ad Blocker
31 requests, 6.7MB
348 requests, 14.7MB
Privacy
This site uses cookies! Got it
https://twitter.com/jasonfried/status/1003979608042164230
Remarketing! Spatula Buy Now
Remarketing! Thank you for your purchase
Weather App advertisement Spatula! Shop Now
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.
Browsing History cheesysandwiches.com facebook.com/political-thing facebook.com/timeline twitter.com/moment amazon.com/panini
Don’t wait to be told!
Image Comps Frontend Performance A11Y RWD Design Systems Command Line Third-Parties Privacy
Privacy & GDPR Resources
GDPR (General Data Protection Regulation) https://www.smashingmagazine.com/2018/02/gdpr-for-web-developers/ Privacy & GDPR Resources
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
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
Analytics Categories Comments Social Media Advertising
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.
Ghostery ghostery.com
Categories ghostery.com
Categories ghostery.com
Categories ghostery.com
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.
Analyze & Itemize
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>
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="" />
Ghostery?
Portable, Please
XLS! CSV! They’re for me!
website.har (JSON) HTTP Archive format HAR
Save as HAR Copy Save All As Har Open in New Tab Start Performance Analysis
http://trentwalton.com
Network Requests Panel
https://trentwalton.com/style.css https://trentwalton.com/mediocrejavascript.js
Now What? HAR website.har
har.tech
charlesproxy.com
By Simon Hearne requestmap.webperf.tools
Request Map for trentwalton.com requestmap.webperf.tools
Request Map for amazon.com requestmap.webperf.tools
Request Map for amazon.com Request Map CSV Export
Know Industry Averages
Alexa Top 50 US Sites
Alexa Top 50 US Sites 49
Alexa Top 50 US Sites 49 46
Third-Party Requests across top 46 US sites
213 Third-Party Domain URLs
22 Average Per Site
Third-party domain
% 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% amazonaws.com 16 34.8% Third-Party Prevalence https://trentwalton.com/tag/Third-Party/
What’s a Demdex? better.fyi/trackers
What’s a Demdex? better.fyi/trackers
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 target.com 29 Volume Per Site
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
News & Shopping Ads Analytics CDN Ratings Comments Social Feedback
Further Reading trentwalton.com/notes/2018/01/23/third-party-script-prevalence-on-alexa-top-50.html
Understand Benefits
$ $
Vector Media Group Matt Weinberg Lee Goldberg
Analytics Ad Network What’s a Tag Manager? AB Testing
Dashboard
Get Snippets
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>
Add Tags & Scripts
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>
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>
“An analytics strategy should be
part of the initial development
and design process […]”
—Lee Goldberg
CSS PNG JS JPG WOFF Analytics Social AB Testing Ad Network
CSS PNG JS JPG WOFF Analytics Social AB Testing Ad Network
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>
“We work towards a global maximum versus a local maximum. Small, hyper-focused changes may seem good at the time…
but we have to be mindful of the overall quality of the user-experience and integrity of the brand.” —Matt Weinberg
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>
Don’t blame the tool.
Take Action!
Establish a Center of Excellence!
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
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
Analytics Ad Network AB Testing Account For Third-Parties During Prototyping
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
Monitor Performance
Make your Case!
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
Gather Compelling Results wpostats.com/2017/03/03/bbc-load-abandonment.html
Comparative Data
Get Results
Block Third-Party
Compare Results
Use Real User Monitoring (RUM) soasta.com/blog/what-if-analysis-predictive-analytics/
Compare Results
Compare Results
Talk it out!
“Everything should
have a value, because
everything has a cost.”
—Tim Kadlec
Slides! Links! https://noti.st/trentwalton https://speakerdeck.com/trentwalton
People to Follow / Who Helped Andy Davies Simon Hearne
Matt Weinberg
Lee Goldberg
Harry Roberts
Aral Balkan
Laura Kalbag
Dave Rupert
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
Tools I Use Ghostery
Calibre
SpeedCurve
DareBoost
HAR.tech
Charles App
Thanks! @TrentWalton
