Name: Performance Empathy by Houssein Djirdeh | JSConf EU 2019
Uploaded: 2020-03-28T18:37:51.000Z
Duration: 22 min 20 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

Future continuous

Yeah, as Aga mentioned, my name is Houssein, and I will be talking today about performance

Adverbs of manner

Empathy's a term we commonly use to describe the ability to understand and share the feelings

I like to think of the term "performance empathy" to be the same thing, but for the performance

concerns and issues of a particular site.

To explain why I thought it would be a good topic for a talk, I need first to describe

I work as an advocate for the web team at Google.

Now, developer-advocates in many different companies usually act as a bridge between

a specific engineering community and a specific engineering team and a developer community.

Being an advocate for the web team means that it's my job to make sure the web gets better

So a lot of advocates, we sometimes give advice that can seem a little overwhelming.

But in all seriousness why are so many performance advocates fascinated about what they do with

Why are we so focused whether it will improve performance or not?

Why do we care performance that much to begin with?

To help us answer this question, let's look at this example of a site.

It's an entirely client-side rendered site that ships a megabyte of JavaScript.

This means that the initial request only contains a shell of an HTML document.

Only after the JavaScript bundle finishes executing, the user gets to see any real content.

Now, in case you weren't counting, the amount of time it took for this app to finish loading

So we know that one megabyte of JavaScript can seem like a lot to ship town to browsers.

If we take a look at the HTTP archive, we can see the median amount of JavaScript we

are sending down the wire is about 350 kilobytes, and this for mobile web pages.

The reason this is such a big deal is because a lot of websites currently living in the

web that are either entirely static or they have little to no interactivity at all.

I thought it would be interesting to dive in a little deeper and see how much how much

site they use of a particular framework are shipping in terms of JavaScript.

And I did it with three frameworks to begin with: Angular, React, and Vue.

The reason I chose these three is because they are the most popular client-side frameworks

I found out after querying 250,000 origins, about 50 per cent of them ship over a megabyte

Now, each of these origins either use one or more of these frameworks.

There's a lot of reasons why this might be the case, but it does show that we are shipping

a lot of JavaScript if we are not entirely careful.

Now, what I want to do now is take a step back and talk about how I began the presentation.

You see, every single talk I've ever given before today has always followed the exact

same format: I begin with a word of caution, and talk about how performance is a pretty

I then move on to showing some stats and some numbers to back up my claim, and I do this

to convey how much of a problem this actually is.

And then the rest of my talk usually follows the same sort of pattern where I talk about

different tips, different techniques, that you should be applying to make sure your site

stays as small as possible and as fast as possible.

For this talk, I'm going to go in a slightly different direction.

I want to talk about what we can do as advocates, and what we can do better to reach the community

better, as well as how we can all work together to try and think of different ways to to make

Going back to that example of a site we just talked about, here I mentioned that, at the

end, I mentioned that we are running this on a mobile device and a slow 3G connection.

A lot of people when they trace performance, they talk about specific user conditions that

might not be the same as yours when you build your application.

And we do this because the fending on the user's device or network type, they can experience

We sometimes talk about how your users might experience your site if they're completely

offline, or if they have a flaky network connection, or maybe they have a weaker device, on mobile,

Although it is important to talk about all these scenarios and try to capture different

conditions your user might be in, the thing I want to make sure I mention is that you

You definitely know your users better than any advocate that stands on stage telling

you how well your site performs under a certain condition.

That being said, one thing I want also to mention is the fact that nobody prioritises

If you think about it, when you're trying to build a site, the very first thing you're

thinking about usually isn't performance.

But if you also think about it, why should someone make it the very top thing they think

Let's talk about something to try and complain what I mean here.

Say you wake up one Monday morning and you have an amazing idea.

You've thought about a product you want to sell on the website or maybe you want to provide

So you're excited, and the next thing you naturally do is try to find out how to build

You spend a little time researching the tools, the tips, the tricks that you need, maybe

you're building wire frames, maybe building graphics, so forth and so on, but only after

And at this point, throughout the initial process, nobody really thinks about performance.

The thing that you actually most likely are thinking about is the fact that you want to

build a site that loads and does exactly what you expect it to do, but build it with as

A second possible scenario could be the fact that you join a brand new team as a developer.

Say the newest developer on a brand new team, and, when you get assigned your first ticket,

you're most likely going to try and familiarise yourself with the code base.

You will spend a little time trying to know where your components live, where the utilities

live, how the unit tests work, and so on.

Only after that, while you're doing that, you start building and working on your first

Subtitles ListPlay Video

Performance Empathy by Houssein Djirdeh | JSConf EU 2019

weird

specific

sort

empathy