Articles

“Name That Script!” by Trent Walton—An Event Apart video

January 14, 2020


Hello, so day three. And if you made
a list, I’m sure, of all the things that you
want to talk about and want to hear someone talk
about, third party scripts may not be at the
top of that list. But stick with me. I think I’ve got a lot of
valuable, useful tools, and insight to share. So let’s get into it. As Jeffrey said, I work with two
of my best friends at Paravel. We knew each other
in high school. Dave Rupert wrapped my
house with toilet paper. So we go way back. We’ve been together ever since. Over 11 years now, which
is like 100 in web years. But we’re going to keep going. I am a web designer. I’m a designer. I like fonts. I love fonts. I had to put myself
on a font allowance. A few years ago,
things got intense. And I just kept spending,
spending, spending, and buying, and buying, and buying. I also love to put
those fonts into grids. And if I was speaking,
that’s probably where my wheelhouse would be. Layout, basically, everything
that we’ve heard so far. But something has happened
over the past few years as I’ve been working
with clients, delivering projects,
prototyping. I’ve noticed that the
things that we build, when they are
implemented or shipped, they don’t really
wind up as intended. So instead, today, I’m going to
be speaking about third party scripts– third party services. Because I think they have
a really great impact on the quality of
the work that we do. Just to get this out of the
way, let’s define third parties, or at least what I
consider third parties. Any requests made by a web page
coming from an external URL. A very simple example,
here’s my blog. Let’s pop open a fake
Web Inspector panel. And as you can see,
there’s two requests from my site, my own domain. Style.CSS and an appropriately
titled JavaScript file for myself. Very appropriate. You have no idea. And then another, lets add
a third party request here from Typekit. And just to see what happens
there, no third parties. Third parties. And I like that, though. I’m fine with that
when I want to have web fonts running on my site. So we can maybe narrow the
scope of this a little bit, just for the sake of this talk. If we wanted to refine,
we could say this. Any resource included
with the web page that the site owner doesn’t
explicitly control– there’s a bit of subjectivity to
what explicitly control means. I feel like I’m not the
keeper of the Typekit servers. I can’t control whether
there’s 100% uptime or not. But I get in, and I
have a kit editor. I can configure things. There’s check boxes. And I can remove them. And I know what’s going on. And I have a lot of control over
the kilobytes and files that are being loaded with my site. So let’s take the same two
requests, my JavaScript file, my CSS file. And add maybe some
other JavaScript file. Then I may need
to embed a video, or embed a share button,
or whatever other kind of service or feature that I’m
trying to implement on my site. I don’t really know
what’s in this. This is just me. You guys, I’m sure, know
everything that’s going on. But I’m just like, I just
want this video to squish. Or I just want this
button to load. So let’s just
throw this in here. And what you realize is
that this file could change. I don’t configure it. I don’t own it. I don’t host it. It could be deleted. It could be removed. A large company could add
some trackers in there and make a bunch
of other requests. They almost now have a
portal into my website, where anything can happen. It doesn’t always happen,
but sometimes it does. So now, I don’t have explicit
control over my site. And things can get out of
hand very, very quickly. I am going to be talking
a lot about the concerns that I have around
third parties. But they are useful. And there’s a lot. And so I’ll itemize those
just to get us started. First off, probably pretty
obvious, third partings are used to load ads, networks,
to get data around the ads that we’re serving,
and all of these things to make sure we’re
serving the right ones. AB testing tools. Analytics often tied to
ads, but site traffic trackers, things like that. Social media embeds. Share buttons. All those kinds of things. This is a third party, but
it’s also a best practice, but content delivery networks. Customer interaction, live
chat widgets, feedback widgets, rate this product widgets
that, often, companies outsource to third parties. Comments and essential things,
like, of course, for me, I would consider fonts
to be an essential thing. Tag managers, you can almost
consider those things core to the functionality
of the site, if you know that you’re going
to be needing them to perform the way that you want. So there are some benefits. They can be used to be
data and decision drivers. If your site is a store front
or part of your business, you need to make
educated decisions. And you want to use things
like AB testing analytics to inform those decisions. Obvious enough. Income. You serve ads. You get paid when they’re
viewed or clicked. And you keep the lights on. You can generate some income. To deliver content. If you use jQuery, and you’re
loading that on your site, that can come through a CDN. And lots of times, you
can host images on a CDN. And those are coming
from a third party. And then functionality–
things that may not make sense for
you or the organization that you’re working with
to build from scratch. If I’m trying to
sell clothing online, and I’m a medium
sized business, and I want to add a rating system
or some sort of a feedback mechanism to where
people can rate products, maybe I want to outsource
that to a third party. Because building
that from scratch would be cost
prohibitive and add maybe a lot of technical debt. Then I have some concerns, which
we’ll get into pretty deeply, today. The first one comes in the
way of user experience. And there’s multiple
aspects of that. Poor load time, because
we are loading more stuff. Processor lag. If there’s a lot of
JavaScript being processed, and a lot’s going on,
and you have an older device or whatever, like
John Tam was talking about, this could really
cause the device to scroll jank, and pause,
and have a really hard time navigating the site. And then also, inconsistent UI. If you’re outsourcing
pieces of your UI, like comments or a chat
widget, or something like that, you’re now theming it to match
the site as best you can. So things, especially
the details, can begin to feel really,
really disjointed. And a large piece,
too, is privacy. If we are adding trackers and
getting analytics on our users, there’s an aspect that needs
to be considered about trust. Can a customer trust
organization reputation? If something goes wrong
and there’s a data breach, you have to be
responsible for that and be proactive about that. So that initial
framing out of the way, I want to talk a little
bit more about why I care this much about third
parties and talk about the work that I’ve been doing
over the past years. And frame the realization
that I’ve had. So over the years, the things
that I have felt responsible for have expanded. The very, very beginning, I
knew a little bit of HTML, thanks to Dave Rupert. And I was like, I’m just
going to make image comps. And this is fine. I’ll build these
and pass it down. But very quickly, I realized
that the things that I was interested in tweaking
and improving and building, kind of like Dan
outlined yesterday, I wanted to have access to that. So I was like, well, I
need to learn some HTML, and some CSS, and
some JavaScript. So I began to expand what I
felt responsible for– where I wanted to make an impact. And then one thing
led to another. I started seeing the
impact of the designs that I was building, the
images that I was loading, and the techniques that I was
using to create to execute my vision on the web. Well, sometimes, these
things were heavy. And I was loading too much. So I started to think
about performance. And then I started to
think about maximum reach for the designs
that I was creating. So whether they were
accessible for anyone to access and also whether they
were accessible by device size and screen resolution. So I got into accessibility
and responsive web design. And then a lot of
the projects that I started to work on
involved more people. So I realized that there
needed to be more communication and more organization. So I started to get
into design systems. And then I realized
that I need to be able to contribute from the
very beginning of the process to the very, very end. So I got into command line,
so I can pull up a design, edit it, commit, send. So I’m participating at
every phase of the process. And then recently,
I realized that I’ve been really, really blind. I’ve had a huge blind
spot, because I’ve been focusing on the teams that
I work on and a little bit less on the organizations,
and what happens after I think that my job is done. Because I’m realizing
that it’s clearly not. It’s clearly not. Because all this
boils down to me wanting to have a really
large impact and do the most I can to help the product, the
site, whatever we are building, be the best that
it possibly can. Because mostly, what
I deliver these days are prototypes with the
design team that I have. I love building prototypes. Kind of the same process
that Dan outlined yesterday, where we get in the browser. We start in the browser. And we build all of
these things thinking about all those aspects
that I mentioned earlier. For example, we can simplify
an onboarding process for better UX. If we have that in the browser,
we can come back to it. And we can tweak it
and make it better. We can update code,
making it more accessible. We can optimize
layouts across devices, making our pages
more responsive. Then we spend time minifying
CSS and JavaScript, optimizing images,
sub-setting fonts, taking out extra characters that
we don’t need to squeeze out every last bite of savings. It’s not as easy as this machine
looks, but we’ve got a process. And we can consolidate all
that work into patterns, so that this is reusable. And teams can share
and extend from there. We feel really good
about this work. It adds up to the manifestation
of what the team that I work on believes is the best
solution for the problem– the product that we’re
being tasked with building. And we don’t do this
in an unrealistic way. We are thinking about slow
connection speeds, long words, and old browsers. We have support matrix
and all of these things. But then I realized
that when it’s time to hand the
prototype over, it needs to be integrated, or
implemented, or shipped, or whatever that is. And for me, what that means
is a variety of things. A lot of times, it’s
very, very trivial and something that maybe
we already know about. And we’ve already done half
the work for it, anyway. It’s like a CMS integration. We know what’s coming up. This was a part of the
design and discovery process. We’re well aware that
this is going to hit. And then things can be moderate. A lot of times, we build
sites for news organizations. And we know that there’s
going to be analytics. And we know that there’s
going to be an ad network. So we sort of think
about performance, being prepared for a moderate
hit on where there are going to be more kilobytes
loaded with the page, because we are going to be
loading extra advertisements and analytics. But things can begin
to get complex when you throw in more and more stuff. But it’s common. You throw in third party AB
testing tools, comment systems, and payment systems. And in my experience,
most recently, there’s no limit to how
much can be added to a site. There are heaps of third party
services with sales teams larger than your design
team and development team, ready to sell anyone at an
organization on their solution. And it can be discouraging. I find that oftentimes
all of those optimizations that we
make during a prototyping process are outweighed by
the third party scripts that are added during integration. So you feel like a
hero when you’re like, I saved 3 kilobytes on fonts,
45 kilobytes on this image, and et cetera. And then all of a sudden,
there’s a meg of other stuff that you see loading with the
pages that you’re working on. It’s not fun. Oftentimes, these
aren’t added right when the site or
the product ships. They’re added after the fact. And it’s been amazing
to me to realize that we may spend a week talking
about a carousel, or a banner, a home page, like
top tier placement, or the radius of a button,
or whatever kind of tasks and a little design details
you might get mired in. But a change that would add
a quarter of the page weight to the site can be done just
as a site update or a hot fix. Like well, we need to
add another script tag. I just signed a contract
with such and such company. And we’re going to be doing this
promotion and this membership promotion. And now, we have to add this. I’m not saying that
you should never add anything after the fact. But I’m finding that
there’s less scrutiny over those decisions than there
are maybe some smaller design details. And these have a massive impact. So here’s my
realization, finally. It took me a while
to get to this. Delivering a performant,
accessible, responsive, scalable website is not enough. I also need to consider the
impact of third party scripts. Regardless of how solid
I think my prototype is, it does not absolve me
from paying attention to third parties. And I do not think
that I’m alone. I see this being a common
problem, exemplified brilliantly by Harry
Roberts’ tweet that says, “this is your website.” And then, “this is your
website on tag managers.” And if you zoom in
just a little bit, even though the graphic is
huge, the top little piece– what I take that to mean
is the green box at the top are first party requests on
the site that he’s visiting. And then the rest of the 90%
of the requests in the network request panel were
third parties. If you’re like me, the
first time you saw something like this, you may
have been wondering, how is this even possible? Maybe half and half would
be the most extreme thing that I could imagine. And then hopefully, the next
thing that you think is, well, what can I do about this? How can I prevent this? If this is happening at
the organization I work in or the sites that I work
on, how can I successfully contribute to
changing some of this? And speaking from experience,
a little bit of admission here, complaining
about third parties is nowhere near as effective
as developing an expertise and coming to the table
with ideas and solutions. So when I first started
encountering these things, and we’d have team meetings. We’d be talking about the
sites that we were working on. I would make the case
to whoever, the client, the higher up, a product
manager, and just say, we have too many third parties. Look at how bad this is. Not specific. Not super helpful. It just sort of
sounds like, well, Trent’s design complaining. He doesn’t have any solutions. So no big deal. So it’s easy to dismiss. So if I want to be a
part of the discussion around third parties, I
needed to develop a broader understanding about them. And so I’m going to share
my process for doing that. And I’m going to
give you, hopefully, many, many shortcuts. Because I did this
the long, silly way. So they are going to be
broken into six parts. First, we’re going to
look at the categories and types of third parties. Rather than just saying
there’s a lot of third parties, we’ll narrow those down. It helped me comprehend
them a little bit more and wrap my mind around them. And I think it’ll help you. We’ll analyze and
itemize third parties. In other words, if
you’re at a website and you want to
figure out quickly– what are the third parties
being loaded with this page? What’s the quickest
way to do it? Which one has the most utility? I’ll present a few
ways to do that. I also wanted to look
at industry averages. Are 6 third party scripts
or services a lot? Or are 20 a lot? Like what are the ranges for
what other people are doing? I want to look at, like
I mentioned earlier, the impact from a user
experience perspective, a performance perspective,
and a privacy perspective. Looking at some of
the benefits, why people are using these and
success stories around them. And then finally, just
how to practically take action in your organization. If you get fired up
by this, hopefully, what can you do with your
peers, or your managers, or higher ups within a position
to convince and develop a unified perception
around all of this? So to start with
categories, there are heaps of third
parties out there. And I needed to gain an
introductory in understanding. So I wanted just to sort them. I’ve already shared this list. It’s my list. And I think just looking
at a list is helpful. But I think looking at third
parties in the context of sites that you happen to be
at on a regular basis is much easier than
just sitting down with a spreadsheet or a list
of every third party service that’s ever been
developed, ever, and trying to memorize it. So there’s a lot of
contextual knowledge that can happen if you work
this into your daily routine. This is how I did it, myself. Ghostery.com is the
content blocker that I use. It’s a browser extension. Just a little caveat, to
whitelist sites that you love and you want to support. If you go to a site,
and they have ads, and you value the content,
you can whitelist it and allow those ads to come. But I use this on a daily basis. I have this installed. And in it, there is
an expandable panel that comes out of the menu bar. So if you’re at
a website and you want to know what’s
going on, it will show that we’ll have
blocked 33 trackers. And then there is, on the
right, a detailed view. And it will list categories. So instead of doing some
work away from the web, you can actually just go
to any website you want. It’ll show you a number
of how many you block. And you can dig in. You can expand this panel,
so that it’s not just saying, well, there’s five analytics. We’ll give you the
names of the services. And you can even click
it in even further. And it will describe
the services for you. So it’s almost like web
inspecting for third parties. If you wanted to
know how something was built with CSS and
HTML and JavaScript, you can web inspect. You can also do that. But I find this kind of
graphical user interface to be a really easy
way to quickly do that. And it won’t take long
to develop your own list. It doesn’t have to
be comprehensive. But I think having this working
knowledge of what’s out there and what people are using
can help you spot things like redundancies and when
things aren’t necessary. And so if you are
browsing and you want to know all of
the third parties that are listed on a web page,
what’s the quickest and easiest way to do it? For me, I came up
with a few options. The first one I thought
of, which I don’t do, and I don’t recommend,
is view source. Because oftentimes,
for me, I may have two or three scripts
in the head of a site that I built for myself. But oftentimes, it
looks more like this. And nobody wants to
go through all this, trying to itemize
and figure it out. So don’t do that. That’s not a good idea. My second thought for doing
this was to use Ghostery. But the only
problem with that is that I haven’t
found a way to get the information that
Ghostery gives you out of that Ghostery panel. So you can look at it. And maybe you can pull up
a website during a meeting, and put your monitor on
the screen and show people. But there isn’t really a way
to do more detailed analysis. Like if I wanted to compare
one site to another, you could have the two windows. And you could screenshot
the two windows. But there’s not a
lot of utility there. So I needed this to be easily
sharable, easily produce-able, filterable, sortable,
comparable, and all of these things. Ultimately, what
I’m saying is I just wanted a spreadsheet,
which I think is, these days, my
design tool of choice. It’s just building
spreadsheets that I can learn more and show more. Like I said earlier, saying
we have third parties isn’t anywhere near as
compelling as showing volume and mass in real numbers. Show, don’t tell. So the first option
that you have if you want to itemize
scripts on a site that you’re working on or
a site that you’re browsing is to download a HAR file. This is the most work. But it also gives you
the most information. And it’s the most portable. So if you want to
go really deep– I’d say if it’s a
site that you’re working on and maybe
some competitor sites, it might be worth it
to do it this way. A HAR file– HTTP Archive Format–
is a JSON formatted file that logs your web browser’s
interaction with the site. So save and share it with care. If you’re logged in, there
may be some data that’s transferred with that, as well. But the way you do this is that
you would go to any website. And this is just a generic
representation of it. But you can create a HAR file
by going to the Network Request Panel, and right clicking,
and saving as a HAR. And if you’re like me,
if you get this HAR file, we’ll save it to your desktop
or wherever you want to put it. You have a .HAR. What do you do with this? Now, what? And if my network request
panel process confused you, don’t worry. You can go to HAR.tech. It will show you how
to download the files. It will explain what they are. And if you’re like me,
it’s JSON formatted. So you can do a lot with it. But I want a graphical,
visual way to explore. So I’ve found there’s apps
for opening and manipulating HAR files. I found CharlesProxy
at HAR.tech. It’s a Mac app. And here’s Slack.com,
which is pretty moderate. It’s good. Opened up a HAR file from me
visiting Slack on my computer. And you can drill. And you can find out if
it’s an HTTP1 or 2 request. There’s all sorts
of information. Time to first bite. You can go crazy. But the best part about this
is that you can export all of this information as a CSV. So now, for me, this
is my happy place. I can filter by domain. So if I want to know how
many things are being loaded from Google or
DoubleClick, or if I wanted to know how many things are
being loaded from Facebook with the site, I can do that. I can sort. And I can share. I can put it in a slide deck. I have all of this
information at my disposal. So I can begin to build my case. And if a visual way
would be more helpful– oftentimes, if
you’re in a meeting and you don’t want the entire
10 person meeting or whatever to read an entire spreadsheet–
doesn’t sound too exciting– you can go to
requestmap.webperftools.com, built by Simon Hearne. It’s now also included
in webpagetest.org. There’s a tab on
the right hand side. And it’ll kick out one
of these in addition to the regular web page test. But this is great,
because it just shows some bubbles for the first
party and third party requests. So you now begin to
gain a sense of scale, and what kind of impact, and
how massive things can get. This is my site. I probably don’t
even need the jQuery. So I might even just be
able to get away with one. But for example, here, this
is Amazon.com’s third party request map or just request map. And while it’s possible to spend
a lot of time analyzing this in a meeting, the
initial reaction, I find, can go a really long way. I’ve done this with
clients a lot, recently. Just last week, we did some
initial performance analysis on a site that we were
going to be redesigning. And I ran their site
through this tool. And in the meeting,
just got the most– it was really awesome. They were shocked and horrified. Because it was significantly
larger than this. And most of them, even the
engineers, had no idea. Where are all these things? How are we going to
track these things down? We don’t need half
of this stuff. And if you start reading
off the requests, a lot of the responses
are I didn’t even know this was on the site. Nobody knew this
was on the site. Maybe somebody who
worked here previously put this on the site. And we don’t even
know where it lives. So things can grow
and get out of hand. And if a spreadsheet doesn’t do
the job, I find that this will. And also from the
request map, you can export a CSV, as well,
if you want that, too. And then a final
option, BuiltWith.com. It’s less work, but you
get some really nice, summarized results. It’s extremely useful. It doesn’t give you web
performance insights as much as just show you a summary
of what your site has. So for example, it’ll show
you things like analytics and tracking, widgets,
frameworks, content delivery networks, media, JavaScript
libraries, advertising, CMS implementation, et cetera. So it’s even useful beyond
third party scripts. Once I dealt with how
to do some itemization, I wanted to expand that work
and do a little bit more, and look into industry averages. So if a site that I work on
loads 20 third party scripts and services, is that a lot? Is that a little? What’s normal? So first, I thought let’s look
at the Alexa Top 50 US Sites. So I got a list of
all of the sites. And I did this
analysis for each. I did the US, just because
I was more familiar with the scripts and services. It was just a little
bit easier for me to have a comprehensive
understanding of what they were. And a couple of caveats– T.co is one in there. So that doesn’t do anything. And then a few of them
are not suitable for work. So I didn’t really feel
like digging into the– I don’t even know what
kind of third party– let’s not talk about that. So I did the 46 sites. I got the HAR files. I got a spreadsheet. And I made this
gigantic spreadsheet. And on one axis, I had all of
the requests that I could find. And on the top, I had
all of the 46 sites. And I just put a
bunch of checkboxes. And I’m not recommending and
saying that you should do this. But I wanted to just do this
as just an experience for me to feel the weight of how
much stuff is going on. And so this was a
9,936 cell spreadsheet that cross-referenced the third
parties with the top 46 sites. So that’s a couple
summary points. There were 213
third party domain URLs among the top 46 sites. You have 46 sites. And you have stuff
coming to those 46 sites from 213 different places. And I’m not saying
that’s requests. That’s just unique places. So there could be multiple
requests from the same URL. And there were 22
average per site, which may seem like a lot. Or it may seem like a little. To me, it definitely
sounded like a lot and more than we probably need. Prevalence of the
third parties, which third parties appeared the
most, were kind of unsurprising. Usual suspects
like Google, which is DoubleClick, and Analytics,
and Syndication, and Ad Services. Amazon, Facebook, and
Adobe, they’re everywhere. But there were also sites
that I knew nothing about. Like Demdex– I had
no idea what that was. And it was easy to say,
well, these sites are loading DoubleClick
and Google Ad Services. So they’re loading ads. I know what that means. And I get a sense
of what that is. But I have no idea
what Demdex is. So then what do you do? So I started to Google these. And then that is a lot of work. If I Google Demdex,
then you’re trying to check the reliability of
the source and know more. I found a really
great site that has an index of all third parties– all those 213 that
I had and more– at Better.fyi/trackers. And there’s just an
alphabetical index. You can click into them. And they’ll give you more
information on each service. Better as a privacy
tool for Safari. But I think it’s awesome that
they have built this index and share it with everyone. It’s a lot of work. And it represents,
probably, a lot of effort. So I appreciate them
for making this public. And what I found with
this case of Demdex is it’s that it’s
owned by Adobe. So then it started
to make sense. I started to make
associations for what the services do, what they
provide, why they’re there. And I was surprised
at how important this was for the process. Because at the organizations
we’re working with, I was like, who put this on the site? Do we know what it is? And a lot of people were
like, I have no idea. So if we need to
decide whether or not we’re going to keep
it or remove it, you’re going to have to maybe do
some of this legwork yourself. Now, let’s look at
individual sites. How many third parties
are loaded with each? Again, these aren’t requests. These are just unique domains. So it excludes multiple
requests from the same domain. You can see the New
York Times has 64. This was done earlier this year. So maybe that number’s
changed for all of these. Washington Post has 63. Then you can see
news sites are kind of similar all the way
down, and then also a lot of e-commerce sites. And then you notice there’s
some that have very few. Bank of America has 9. Chase has 12. LinkedIn, 11. Surprising. Which sites had the most? News sites and shopping
sites, I think, have the most from
the Alexa Top 50. And there were other
sites that I’ve found since that have more. But it’s not surprising to me. Because it makes sense
for both sectors. They need things for engagement. They need to use third
parties to drive traffic. They need third parties to
track which types of articles, for example, might
get the most clicks. They need to track which kind
of products are getting sold. And how can we market those? So it makes sense that
they’re using these. But I do think
that, in many cases, there’s a way to optimize
and maybe reduce. If you want to read
all about this process and get access to some of
the spreadsheet and all the resources I’ve shared,
you can also dig into my blog. There’s a third parties tag. And then the next piece, let’s
talk about user experience and performance impact
of third parties. I think that we feel this
every day when we browse. If you use a content
blocker, you probably know. And you have that
content blocker because the web is
hard to navigate. It’s hard to use. It’s slow to load for you. And you recognize that. So you install a
content blocker. We feel this any
time we use the web. But I’m going to share
one example, one story. I was at the Food Network. And this isn’t to single
out the Food Network. Because I think sites
that I’ve worked on have done the exact same thing. But I went to the Food
Network to get a recipe. And I saw an article popped
up, because I had Ghostery, my content blocker, on. And it said, “we hate pop-ups. That’s why we don’t allow them. We promise. The only pop-ups you’ll see
around here are cake pops. Help us to create
great content for you by turning off your ad
blocker for our site. It’s easy. We’ll show you how.” I thought that was a
completely reasonable request. I was like, sure. Fine. You got me. I’m here at the site. I’m here to consume
your content. You need to load ads. I don’t need to get
this stuff for free. It’s fine. Let’s do it. And real quick, before
I disable my ad blocker, let’s see what happens. I have my ad blocker on. And there were 31 requests
made, 6.7 megabytes, just anecdotally, as I was
scrolling around and using the site. It was fine. There was no scroll jank
or anything like that. It was a completely usable,
totally acceptable experience. 6.7 megabytes, you
could argue, is a lot. But let’s not get
into that, right now. Turned that content blocker off. Reload the page. And I got 348 requests. I’m gainfully employed. I have a 27 inch
iMac all souped up. And it was choking
on the scroll. It was like, are you serious? What are we doing here? 14.7 megabytes, which is a lot– I’ve seen more. But it was amazing to
see the difference. And here’s the
request map for it. Lots and lots of dots. Lots going on. Lots of trackers. Lots of things that I
really don’t understand have anything to do
with the ad that you want to serve me to
support your business, and the article that I want
to read about cake pops or whatever I was
looking up at the time. And that’s what bums me
out about all of this is that there’s two extremes. There is no just serve me
a little bit of this stuff. There’s no slider, here. You either use an ad
blocker or you don’t. And you get a broken,
unusable experience. And it’s difficult. You can
whitelist individual URLs. Like I’ve whitelisted
things like Typekit. And sometimes with
sites that I go to, I’ll say, well, if I’m
at this publication, I’ll whitelist the entire site. Or I’ll whitelist the ads–
these third parties that I know are ads. But I’ve done a
ridiculous amount of work figuring out what
all these third parties are. I don’t think we
can expect users to whitelist our DoubleClick and
know what all these things are, and granularly do that. It’s not going to happen. And to top it off, I
still got a pop-up. And that’s why I was enraged
enough to put it in the talk. And also, to be fair,
I’ve done the same thing. I’ve worked on a site. It shipped. I was really excited. I was like, hey, everybody. We’ve built this. It’s so awesome. I’m so proud of the
work that we did. And everybody starts
DMing me and emailing me. There is this feedback
pop-up every third time I refresh the page. It’s a total bummer. So it happens. And I understand that it does. But we can do some more
work to prevent it. So another question
that I have about this, too, is does your site depend
on third parties to function. I recently noticed this. If I have my content blocker
up– and I know for a fact, the content blockers– the companies and
organizations that work on these–
they’re not trying to just blacklist everything
and make the site broken. We don’t care. They’re trying to
do it and maintain a level of functionality. But if I go to a shopping
site and I have third parties blocked, and I can’t add
something to my cart, or I can’t search for an
item because the third party script that you use for
recommended search results isn’t loading, what
does that mean? Is that my fault? Or is the user’s fault? Or is that the
site owner’s fault? I can’t answer that for you. But I think, for me, it’s made
me start to think a little bit more about the arguments we’ll
make during meetings talking about browser support matrix. A common example would be,
should we support IE 9? That’s 0.06% of
our traffic, which represents a certain
percentage of our income. Is there a business value
for us spending the time to develop, and fix,
or add the kilobytes to add a polyfill to the
site to fix this problem? But if a significantly
larger number of users are getting a broken
experience because they’re blocking some of your
content, maybe you should add content
blocked browsers to your support matrix. What happens if I go to the
site and I can’t add anything to my cart because I have a
third party content blocker? Do we expect users to
make that connection? Oh, yeah. A month ago I installed
a content blocker. The site doesn’t work. I’ll turn the
content blocker off. And now, I don’t know if
that’s going to happen. So you might see a lot
of drop off, there. I tried to find a
really solid number for how many users’
browsers have a content blocker installed. So I just took one of the
lowest and the higher one. But what I got was that 25%
to 40% of US internet users block ads. But I don’t think that
that’s going to go away. And I think the number
is going to rise. I noticed a tweet the
other day from Firefox. There is a privacy tool
built into the browser, but you have to
enable it in Settings. They’re going to be
switching that on by default. And I like that. Not in the sense that I want
all third parties to be blocked, and I’m taking the position
that no one should use them. But I like that it
forces this discussion that I hope we will be having
about the two extremes. Are we going to force our users
to block our third parties so that they can use our site? Or are we going to
just bombard them with whatever we want
if they have the content blocker disabled. What’s a sensible average, here? How can we optimize and
design for third parties in a way that makes the
things that a business and an organization
needs to do to function and can give the
users what they want? How can we do this in
a more sustainable way? Next, privacy. I’m not a lawyer. Just a little preface, I
think this could probably be its own conference or
its own talk, certainly. But I’m going to
summarize a few things and point you in a few places. Because I do think that this
is really, really important. We’ve all seen this. We see this more and more
now that GDPR is in place. It’s something that I
brush aside all the time. I don’t give it
a second thought. I’m like, I’m here for my cake
pop recipe or whatever it is. Let’s just click it and go. We’re using cookies. It becomes second nature. It’s just a part of
browsing the web. Jason Fried has a really
good tweet about this. Maybe we should rename
cookies to trackers, and you’d see some progress. Who wouldn’t want
to accept cookies? But has anyone ever turned
down a delicious cookie? But would you want
to accept a tracker? And it’s easy for me
to completely disregard the implication of this. When I’m browsing a site,
and I’m just after content, it’s just this
little bitty thing. And sometimes, I don’t
even close them out. Because they’re
oftentimes pretty small, at the bottom of a window. But then creepy stuff happens. Remarketing! Remarketing, if you
don’t know what it is, I recently learned what it is. Even though I know
I’ve experienced it, it’s that thing when you
go to shop for a spatula. And you probably
even buy the spatula. You check out. The spatula is on its
way to your house. You have given the
organization money. And then you go to
the weather app, and it tries to sell you
the same darn spatula. Everywhere you
go, more spatulas. I got three spatulas. I got an egg fork. I’ve got all sorts
of cooking utensils. I don’t need any
more of this stuff. Maybe a pan, but
it doesn’t happen. Remarketing is everywhere. And I think that it’s
kind of harmless. It’s kind of cute. Like oh, computer. Good job. You’ve figured it out. You tracked me on my phone from
Amazon to the Weather Channel. That’s cool. It does work, as a caveat. I talk to a lot of people
who say, yeah, it’s annoying and kind of silly. But we sell a lot
of stuff with this. So it’s maybe here to stay. But what I’m figuring
out, and what I’ve realized in some
of this research, is that whether or not I get
recommended a third panini press by the Weather Channel,
that’s maybe one problem. But there’s other things
that we can encounter when we’re browsing that
could be a little more intense and a little more significant. I find now that
whether or not I get a panini press is a lot
less trivial compared to some of the more intense,
serious issues that we have in terms of privacy. And I think that this is true. Web builders, we are
often on the front lines. It’s up to us to be
proactive and advocate for the best practices with
privacy and data protection. Just as we did with web
standards or accessibility, oftentimes– I get this a lot– there’s no business
incentive to be the first to market with a
performant advertising network or an advertising strategy. There’s no business
decision for us to take privacy into
this much of an account unless we’re going to get sued. So let’s just do the minimum. If you’re designing an
interface or building something, and you think that
something is questionable, I encourage you to raise
your voice about it. Because we are on
the front lines, I think that this is
what makes me proud to be a part of the industry. Anyways, continue to do that. And if you do see something,
I encourage you to speak up. Don’t wait to be told
to remove something. See if you can raise
a case, yourself. And I think this is so important
that I could probably now add another radius to my areas
of responsibility or the things that I think are important. So a few specific tips. GDPR, General Data
Protection Regulation. Heather Byrnes writes and
speaks about privacy a lot. She’s given a great
introduction to GDPR with an article on
Smashing Magazine. And note that these
privacy impact standards have a global impact. So if you are a site or a
business based in the United States, and you have
users in Europe, and you are not adhering
to these standards, then you are subject to
being sued or targeted. Next, there’s an article that
she wrote on Privacy by Design. Privacy by Design
is a framework that can help you prevent privacy
issues before they occur, encouraging transparency,
proactiveness, and end to end coverage. A few examples there. They’re kind of general. But they’re common sense
things that you can use to discuss it in meetings. Like what do we do if
somebody creates an account? And what happens when
they delete their account? Where does their data go? All those kinds of things. So it gives you the default
approach when you’re building. Don’t ask for
things, like what’s your address, if you’re
not going to use it, and if you don’t absolutely
need it for your app or business or site to function. Don’t ask for your birthday
if you don’t need that. Just get the minimum that
you need, as opposed to let’s get all the data that we can. And then we’ll figure out
where we’re going to store it and how we’re going to be
responsible for it later. Not the way to build. And then finally, you can run
a privacy impact assessment, which is oftentimes the first
thing that we do with clients when third parties come up. There’s an example linked here. But it’s like 30
questions or so that helps you to gain
an understanding within your organization for
what you’re doing with data. Some examples, where
is data stored? Is it stored locally? Is it backed up? Where does it live? How many places does it live? What do you do,
like I said earlier, when somebody deletes
their account? All of these questions
help you gain an understanding
for what you are doing in terms of user’s data. And it will help you get
your privacy ducks in a row. So I obviously have
a bit of an axe to grind– a performance
axe, a user experience axe in terms of third parties. But I wanted to understand
some of the benefits. Practically, I get it. But I wanted to talk to some
friends of mine that use these, and implement these, and work
with clients on a daily basis, and to hear how are
these effective. Because two people
can look at the site and see very different things. I may see a user experience hit. Another person may see a
key moneymaker or a decision driver. It’s something they
absolutely need to do their job within
the organization. So we need to come together. And thankfully,
Matt Weinberg, who works at Vector Media
Group, volunteered his time and Lee Goldberg’s
time to walk me through how they
use Tag Managers for the businesses, the
clients, that they work with. And for me, when he was
like, Trent, so what do you think about when
you hear Tag Manager? And I was like, well,
I imagine a funnel that you put in the
top of your website. That allows you to cram
even more third parties into that site. But fair or unfair,
this is actually what a Tag Manager looks like. This is Google Tag Manager. And it’s just like a dashboard. And you go to the dashboard. Sign up for an account. And it will give you
some code snippets. You copy the scripts from
here to the head and the body tags of your layout file or
your HTML document, like this. And then all of a sudden, you
can go back to this dashboard. And you can add any number of
scripts or services you want. One tag injected will just
basically open the door. And you can add
more, more, more, without touching
any kind of code, without deploying anything,
all from the convenience of a dashboard. The first concern that I
have about Tag Managers is it’s sort of
like Pandora’s Box. I think I sometimes
forget how nice it is to be able to build and
contribute to the web, myself. I can ship updates. I can make design changes. I can use GitHub. I can deploy. I blah, blah, blah. I can do all this stuff. And it’s fun. There’s a lot of people that
work with companies that I work with. And they have no
access to the web. They have to ask somebody else. They have to go
through a process. They have to get a change order. There’s probably going to
be a meeting and a debate. So why don’t I just
go to Tag Manager and add the script that
I need, and get what I want really, really quickly? Going back to Harry Roberts’
tweet, this is what you’d get. But Vector’s experience
was different. And I began to realize that
the way that they approach third parties is the way
that I need to be approaching third parties. What I saw as a problem,
they saw as an opportunity. We can now declare
that any third parties that we add, let’s put
them in the Tag Manager. That way, we have an
automatic inventory of all the third parties
that are being loaded, whether it’s a font,
an ad, analytics, AB Testing, whatever. They’re all here. Because if you don’t do that,
and you’re not super organized with your layout
files, you may be looking through a
code base trying to find a script that
you’re trying to remove. What happens if that script
blocks content of the page, and something goes down,
and nobody can find it? The site’s not loading. We’re losing time and
money and all these things. We’re on red alert. And we don’t know
what’s going on. So it helps to just
get things organized. And it also unifies control. If I can see where everything
is, we can have a meeting. And we can go through and look
and decide what’s redundant. What can we get rid of? What do we need? Or what do we not need? And they actually said
that, anecdotally, they saw the load times go down. Because as they’re putting
everything together, people point out things. Like this is redundant. We don’t need this, anymore. I have no idea why this
is here, et cetera. Lee pointed something out. An analytic strategy should be
part of the initial development and design process, which
really got me thinking. It made me realize
that those prototypes that I was describing earlier,
if I care about third parties, and if I think this
is the thing, that needs to be a part of
the prototyping process. I need to get into it
from the beginning. And the way that
they work is they’ll reach out during the discovery,
from the very beginning, and ask the client, what
third parties are you using? What are they needed for? What are your business goals? And that’s a part of
the site design process from the very beginning. Designers are involved. How are these things
going to load? What kind of performance
impact is there going to be? How can we design to make
sure that these things look as good as they possibly can, if
there’s a UI component to them? And if done properly,
they made the case– and I think I believe them– that the disproportionate
weight and degradation that I talked about earlier
can begin to be balanced out. And that’s very,
very encouraging. The next thing that I talked
about and I hinted to earlier was that it’s so
easy to add scripts. Look at this. There’s a lot of appeal, here. I’m looking. I’m going to start
searching for some scripts. It’s like shopping. It’s like a kid
in a candy store. Oh, let’s add some analytics. Drop it in. Add tags. Save. Done. And I’m updating the site. And I’m changing the site. And it’s important. And I think the way
that they steer clients during meetings and reviews,
Matt Weinberg said this. “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
the integrity of the brand.” And so a lot of
the things that I notice third parties need
to be added, a lot of times, they’re very, very small. Just last week, I was on a
call with a remote client. And there were a
few other people. And somebody that I never
heard on this kind of stand up call before just– hey, everybody. How are you doing? I have a script I need to
add for– we just signed a contract with such and such. And we need this functionality
for a promotion we’re going to do over Halloween. Drop the script in. And somebody was like, OK. Fine. And then the call was over. And I was like, oh, man. We have to fix this. This is going to be a problem. And the least I could do is
write it down and say, well, in November, we’re going to
go through and remove this. But if didn’t happen
to be on the call, there’s just another
one to the pile. And so there was no
discussion about, well, what can we remove? Do we have anything
else from the past? Any other holiday promotions
that we can remove, so we’re not piling
these things up? So you all have to have a
comprehensive, broad view of everything. During the call, and
this is the thing that I started to
really get convinced by, they walked me through
one client’s success story after another. And it was compelling. They were citing things like
increased sales and conversions for a business. And results like these
are hard to argue with. And I think that
there are two hats that I’m speaking from, here. Because as a web user and a web
designer, I think about the way I want the web to be and
what I hope for it to be. But then I also
think about clients with very specific goals. And they need to succeed online. They need to make money. And I am here to
help them succeed. So it’s one of those deals
where I don’t want any of you to use a third party. You all should just use none. And I’ll maybe use 5 or 10. And then the web will be fine. Because you make up
for my penalty, there. But these are hard
to argue with. But I what I realized,
ultimately, in the call is that you shouldn’t
blame the tool. It’s the way that
you’re using it. So I think that Harry Roberts
raises a really good point with the Tag Manager tweet. But I think that you can
also use it to your advantage by being open and communicative
about how they are included. Wrapping this up, here. What can we do to make Tag
Manager usage and third party script inclusion
successful and sensible? First, I think, is to put
standards and people in place to maintain quality while
implementing third parties. You can write those
standards out. Here’s just some
examples that I made up. Determine the value to the
business and the website. So if I have a new
script that I want to add for a holiday
promotion, I have to say, well, this is going to
help us have more sales. Or this is going to impact
the business in this way. Or we need this
functionality for whatever. But you need to make a business
case or an organizational case for why you, or your
department, or your team wants to add a
third party script. Avoid redundant
scripts and services. So if you’re adding
something, make sure that there’s
not something there that’s already doing that job. I’ve seen a lot of sites with
multiple, multiple trackers and analytics scripts on them. Fit within established
performance budget, if you have a
performance budget. If you don’t, I
encourage you to do that. You can check in to some of
Tim Kadlec’s writing about it. But if it violates a
certain kilobyte limit that you’re trying
to target for a page, that facilitates a discussion. What are we going to remove
to make room for this? Or are we going to knowingly
raise the kilobyte limit to the page that we’re building? And then make sure it complies
with your organizational privacy policy. Document those standards. We put things in style
guides and design systems. They talk about
styles, components. Sometimes, I see
things that I love like voice, and content,
tone, performance notes. Why not have a
third party section, where you, within
your organization, can upload via the HAR
file or a spreadsheet, or however you want to do it? But maybe you
create a table that itemizes all of
the third parties that you’re loading
on your site. So maybe you have a quarterly
review, where you can say, these are what we’re loading. Do we need all of these? What has gone away? Basically, just making
sure that everybody can see the same information
and share your perception. And then include scripts
during your prototyping process so performance
tests and UX feel is accurate during
the build process. And if you can’t do that early
on– maybe you don’t have access to the scripts, or you
don’t want to mix up the data– at least document a
plan for how that’s going to fit within
your performance budget. Audit third parties. You can begin to do this. I think every three
months would make sense. Sometimes, an itemized
list can help. But you could go through and
generate a report for meetings, and have action items. And be on the far left. Oh, well, this one is
larger than we budgeted for. So we have a poor
performance budget issue. And then, oh, we have
maximizer and optimize. We do not need two
AB Testing tools. So this one, now, is redundant. So you can go through and
just have a quick meeting. And cleanup as necessary. What I also like is signing
up for a performance monitor. So that if somebody is
using a Tag Manager, and they sneak in late at night,
and they add a script that’s super, super heavy, and all of a
sudden, your file size doubles, you can track that
and limit that. And then make a business case. And what do you do when
you’re ready to talk to your leadership or
to management, there? A lot of the examples
that I showed earlier are more about
convincing your coworkers and your collaborators. How do you make a
case to leadership? My favorite thing to do here
is a competitive analysis. So you can say, well, our
site loads 12 third parties. We have 39 HTTP requests
on our home page. It’s 1.2 megabytes. Let’s say I work at Adidas. Well, Nike does this. And Reebok does that. Well, they have fewer. So what can we do? And oftentimes, just that
sheer competitive drive within most people– it’s like,
what can we do to get down? How can we be the
best in class at this? Also, I like to
make slide decks. So I put that in
slide decks, share it in meetings with executives. Gather compelling results. I love going to web
performance optimization stats, WPOstats.com. Here’s one that I
use quite a bit. The BBC has seen that they
lose an additional 10% of users for every additional second
it takes for a site to load. So you can begin to
get some sort of sense for what this script
in question is doing, and how it’s penalizing
users, and maybe how it’s penalizing the business
in terms of income or revenue. And then also, you can get some
very specific comparative data by using WebPageTest.org. If you have a
script that you want to make a case for
it being removed, you can go to WebPageTest. Enter in your URL. Hit Submit. And it’ll generate a
result, showing you what the page load
experience looks like, how quick things are. You would get those results. And you would go back
to Web Page Tests. And there is a tab, here. That’s a Block Tab. And heaven forbid
if I block fonts. But if I’m using my site, and
I want to block everything from Typekit so that I
know, now, what my site looks like loading with
Typekit and without. So now that we have
very specific numbers, I’m not just saying we have
a lot of third parties. If we remove this, we can
save x number of kilobytes. We can save x number of
milliseconds in a page load. And then maybe we know that will
equate to x dollars in impact to the business. If you use Real User
Monitoring tools, these numbers can get very,
very exact and very specific. Real User Monitoring
tools are analytics tools that help correlate performance
to user experience and business metrics, like
conversions or revenue. So you could get those results,
plug them into RUM tools. And instead of trying to make
the last little leap yourself, you can see a dollar value
impact to the business. And there you have it. And then it has very specific
numbers, very specific amounts tied to the discussion
about whether or not we really need the
third party in question. And finally, with a new-found
perspective around third parties, I think working to
maintain an ongoing discussion that includes the entire team
so that pros and cons can be weighed– after all, as Tim
Kadlec says, “everything should have a value, because
everything has a cost.” Whether it’s CDN hosting
bills, reduced traffic because of slow pages, or high bounce
rate because of processor lag, everything we add to
the page has a cost. So we need scrutiny
and debate to make the best collective decision
around third parties. So let’s do that. Thank you very much. Slides, links, people to follow. Oh, sorry. These people helped me. Back to what Jason
was saying earlier. Andy Davies, Simon Hearne,
Matt Weinberg, Lee Goldberg, Harry Roberts, Aral Bakan,
Laura Kalbag, and Dave Rupert– reached out to them
with specific questions. Got specific answers. I love the web community. Because about a year ago,
I knew nothing about this. I know quite a
bit about it, now. And it wouldn’t have
happened if people weren’t so generous with
their information and time. So I love that. Links, tools that I mentioned
are all in the slide deck. There we go. Thanks. Appreciate it.

No Comments

Leave a Reply