A presentation at An Event Apart Denver in in Denver, CO, USA by Trent Walton
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
<ul role=”tablist”> <li> <a href=”#first-tab” role=”tab” ariaselected=”true” aria-controls=”first-tab”>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 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
Third-party scripts and services can help generate income, provide data to inform decisions, and supplement a website’s functionality, but at what cost? Users experience slow load times, device processor lag, and anxiety about privacy and trackers. The use of third-parties is rapidly increasing, and not by coincidence, the use of ad and content-blockers is doing the same.
What can we do as web builders to help create a more sustainable and balanced web? How can we effectively contribute to a cross-discipline discussion about third-parties? Trent will share tools, research, and techniques for leading efforts within your organization to have realistic-yet-effective discussions about third-party usage.
The following resources were mentioned during the presentation or are useful additional information.
Here’s what was said about this presentation on social media.
for free. You
can too.