Third-Parties and the fate of the web

Hi! para velin c.co m

Hi!

Hi!

What are 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

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 Maxymiser, Optimizely, etc. Live chat, feedback widgets Analytics Comments Site traffic, trackers, etc. Disqus, etc. Social Media Essential Embeds, sign up, share buttons Tag managers, fonts, etc.

Third-Party Benefits Data Functionality Analytics + AB Testing Comments, Chat, Tag Managers, Iframes Income Targeting / Marketing Ads, Analytics, Trackers Tracking, targeted marketing pages, etc. Content CDNs for Fonts, Images, Videos, etc.

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

Third-Parties & Me

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 Navigation Tables Buttons Use only one primary button per component.

Integration!

CMS

Analytics CMS Ad Network

Analytics CMS Ad Network AB Testing E-Com Comments

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

JPG CSS PNG WOF F JS Ad Netw ork Analy AB Testi ng tics 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?

Understanding Third-Parties

Categories & Types Know Industry Averages Analyze & Itemize

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 Site traffic, trackers, etc. Disqus, etc. Social Media Essential Embeds, sign up, share buttons Tag managers, fonts, etc.

Ghostery ghostery.com

Categories

Categories

Categories

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

Know Industry Averages

Alexa Top 50 US Sites

Alexa Top 50 US Sites 9 4

Alexa Top 50 US Sites 9 446

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 Social CDN Ratings Feedback

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

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?

Visualized Results requestmap.webperf.tools 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

Built In Measuring Chrome Lighthouse https://twitter.com/addyosmani/status/1156451928349372417?lang=en

Summarized Results BuiltWith.com

More Work, More Options HTTP Archive format HAR website.har (JSON)

Save as HAR http://trentwalton.com Copy Network Requests Panel 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 (JSON)

har.tech

charlesproxy.com

Third-Parties & Users

User-Experience Impact Privacy Impact What Browsers Do

User-Experience

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

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

It’s up to us! Don’t wait to be told!

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

What Browsers Do

Chrome

Chrome

Chrome

Chrome

Safari

Safari Safari 12.1—You can stop third-party content providers from tracking you across websites to advertise products and services. y b d e k c Che lt u a f de

Safari

Safari

Safari

Safari

Edge

with balanced activated by default…

Firefox

Firefox

Firefox

Firefox

Opera

Opera

Opera

Ghostery

The Conundrum

Are all thirdparties bad?

What about sites I control?

http://trentwalton.com Network Requests Panel https://trentwalton.com/style.css https://trentwalton.com/mediocrejavascript.js https://p.typekit.net/p.css

What about sites I don’t control?

“I’ll try anything once!”

“I’ll try anything once!”

Taking Responsibility for Third-Parties

Have standards! Stuff you can do right now

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 Templates Prototypes Accessibility Third-Parties Our goal is to document and regularly evaluate the value of third-party inclusions, optimizing benefits while minimizing the UX/Performance impact. 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! Do your homework

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

Gather Compelling Results wpostats.com/2017/03/03/bbc-load-abandonment.html

Get Specific Evilcorp® Script Our Site 14 39 2.4 Third-Parties Requests Megabytes 3 Requests added 1.5 Megabytes

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

“Who is Paravel and what do they bring to the table?”

“Who is Paravel and what do they bring to the table?”

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

Links From Slides https://twitter.com/csswizardry/status/915886339391918083 https://www.ghostery.com/ 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 http://requestmap.webperf.tools/ https://www.webpagetest.org/ https://twitter.com/addyosmani/status/1156451928349372417?lang=en https://builtwith.com/ https://web.archive.org/web/20190514221642/https://har.tech/ https://www.charlesproxy.com/ 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-percentmobile-216324 https://twitter.com/jasonfried/status/1003979608042164230 https://wpostats.com/2017/03/03/bbc-load-abandonment.html https://community.akamai.com/customers/s/article/ WebPerformancemPulseWhatIfdashboardHowdoesitworkAndwhydoesyourbusinessneedit20180621151913? language=en_US

Tools I Use Ghostery Calibre SpeedCurve DareBoost HAR.tech Charles App Request Map Generator BuiltWith

Thanks! @TrentWalton