Name That Script!

Hi! para velin c.co m

Hi!

Hi!

ThirdParties?

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

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

Third-Party Scripts and Services 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 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

Third-Party Scripts and Services 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

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

Third-Party Uses Advertising CDN Ad networks, Ad content Cloudflare, AWS, etc. AB Testing Customer Interaction Analytics Comments Social Media Essential Maxymiser, Optimizely, etc. Site traffic, trackers, etc. Embeds, sign up, share buttons Live chat, feedback widgets Disqus, etc. Tag managers, fonts, etc.

Third-Party Benefits Data / Decision Drivers Analytics + AB Testing Income Ads, Analytics, Trackers Content CDNs for Fonts, Images, Videos, etc. Functionality Comments, Chat, Tag Managers, IFrame embeds

Third-Party Concerns User Experience Poor Performance (Load Time + Processor Lag), Inconsistent UI Privacy Customer/User Trust, Organizational Reputation, Data protection

Why do I care about third-parties?

Image Comps

Frontend Image Comps

Performance Frontend Image Comps

A11Y Performance Frontend Image Comps

RWD A11Y Performance Frontend Image Comps

Design Systems RWD A11Y Performance Frontend Image Comps

Command Line Design Systems RWD A11Y Performance Frontend Image Comps

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

Why?

Impact

Prototypes!

Welcome 1 2 Next 3

Welcome 1 2 3

Welcome 1 2 3

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

Buttons Fonts Patterns Footer Forms Primary Secondary Grid Header Buttons Navigation Use only one primary button per component. Tables

Integration!

CMS

Analytics CMS Ad Network

Analytics CMS Ad Network AB Testing E-Comm Comments

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

JPG CSS PNG WOF F JS A Netwd ork AB Testi ng Anal ytics Socia l

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

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

Why? How?

What can I do?

Don’t speak. (yet)

Research is fun!

6 Parts…

Categories & Types Analyze & Itemize Third-Parties Know Industry Averages Impact UX, Perf, Privacy Understand IRL Benefits Take Action

Categories Advertising Analytics Comments Social Media

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

Ghostery ghostery.com

Categories ghostery.com

Categories ghostery.com

Categories ghostery.com

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

Analyze & Itemize

Pop quiz, hotshot… You want an itemized list of all third-parties on a web page. How do you get it!?

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!

HTTP Archive format (more work, more portable data) HAR website.har (JSON)

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

Now What? HAR website.har

har.tech

charlesproxy.com

requestmap.webperf.tools (less work, visual results) By Simon Hearne

requestmap.webperf.tools Request Map for trentwalton.com

requestmap.webperf.tools Request Map for amazon.com

Request Map CSV Export Request Map for amazon.com

BuiltWith.com (less work, summarized results)

Know Industry Averages

Alexa Top 50 US Sites

Alexa Top 50 US Sites 9 4

Alexa Top 50 US Sites 9 4 6 4

Third-Party Requests across top 46 US sites

213 Third-Party Domain URLs * domains, not requests

22 Average Per Site

Third-Party Prevalence https://trentwalton.com/tag/Third-Party/ 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%

What’s a Demdex? better.fyi/trackers

What’s a Demdex? better.fyi/trackers

Volume Per Site 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

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

News & Shopping Ads Analytics Comments CDN Social Ratings Feedback

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

UX, Perf, Privacy Impact

UX + Perf

We feel third-party impact anytime we browse the web.

But I have one story…

31 requests, 6.7MB

348 requests, 14.7MB

Food Network Request Map

Two Extremes…

Does your site depend on third-parties to function?

If your site breaks when I visit it with a content blocker, whose problem is it?

25–40% US Internet users block ads https://www.businessinsider.com/30-of-all-internet-users-will-ad-block-by-2018-2017-3 https://marketingland.com/survey-shows-us-ad-blocking-usage-40-percent-laptops-15-percent-mobile-216324

https://twitter.com/firefox/status/1035202844188712960

Supporting contentblocked browsers?

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

Browsing History amazon.com/panini cheesysandwiches.com facebook.com/political-thing facebook.com/timeline twitter.com/moment

Don’t wait to be told!

Privacy Third-Parties Command Line Design Systems RWD A11Y Performance Frontend Image

Privacy & GDPR Resources

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 by Design (PbD) https://www.smashingmagazine.com/2017/07/privacy-by-design-framework/ Privacy Impact Assessment https://www.gsa.gov/reference/gsa-privacy-program/privacy-impactassessments-pia

Understand Benefits

$ $

Vector Media Group Matt Weinberg Lee Goldberg

What’s a Tag Manager? AB ng i t s e T A Netwd ork A l a n s c i yt

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

JPG CSS PNG WOF F JS A Netwd ork AB Testi ng Anal ytics Socia l

JPG CSS WOFF PNG JS Ad Network AB Testing Analytics Social

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!

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

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

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

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

Monitor Performance

Make your Case!

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

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 Request Map Generator BuiltWith

Thanks! @TrentWalton