The State of Web Performance

Oh.

Keep clapping.

Come on, keep, get, all right.

I just wanted to have some fun there.

Man, let's get this started.

This is a photo of.

What's the name again?

Oh yeah, that's Obama.

During the hour of code in in 2013, I believe.

And I guess this should work.

There we go.

What we like to call the commander-in-chief or today the cam command line in chief.

I thought that was funny, . Anyhow, let me get started.

My journey started with in my agency days hands up if you worked at an agency.

Okay.

I like to call it my agency days because things were a little crazy, but remember at the time when I was there and we were doing like some testing here and there, and we got the the iPhone and at the time, I think it was the first one with the retina screen.

And I was like, what the hell is a retina screen?

And I was reading up about it and I understood there was like the screen densities and whatnot.

I was like, okay, let me whip up a little test to see what the hell they're talking about.

And I realized what was going on at the time it was like, oh, OK-one x two x three x and I was thinking of the page weight.

I'm like, this is absolutely crazy.

So that was like my little aha moment and started to understand what potentially performance was gonna be all about.

And to tell the truth right after that, I considered that moment essentially my performance baptism.

And after that as I really start to dig around I start to attend meetups.

One in particular was a Toronto Web performance Meetup which I ended up taking over and I curate and run right now.

But it was very interesting, but also instrumental in my sort of development into Web performance.

And at that point I would consider my Web performance, journey starting.

And I, jumped in pretty much like all in.

And I started to try to develop my own Web performance culture.

And I know we're gonna talk about Web performance today, but I really want to spend a little bit of time on the culture bit because at the time I was like, ah, man I don't know if I'm kind of like a leader type speaker but I do want to talk about all things about performance and when it comes to performance, culture is definitely part of the conversation.

And so I'm gonna go through very quickly because I don't have a lot of time, but I'm gonna go through some points that come from a blog post of a teammate of mine over at WebPageTest.

Senior engineer, director, pardon me, of engineering Tim Kadlech.

And he had a really, good blog post.

Like out outlining what is necessary when it comes to Web performance and performance, or Web performance culture.

So obviously top-down support if you're not gonna get the support at the from the top it's not gonna happen down at the bottom.

Alright, so this is gonna be something very important.

Being data driven and I'm gonna get in some details at some point, like not a lot, but I'll probably talk about it.

Data drives a lot of the stuff that we do in Web performance.

That's without a doubt.

Who here has heard of the http archive?

Okay, awesome.

Data driven, by the way, http Archive is powered by WebPageTest under the hood.

We'll talk about that.

Clear targets we talk about making sure that you want to you hit these sort of times that you want.

Sebastiano, where is he at?

Oh, he talked about, I think over at Pinterest, who are fans of performance, by the way, hitting some of these times, these page load times is, I think the way you talked about these are very important.

Hitting your targets or having clear targets.

Automation, these are things that we talk about as well.

Something, someone talked about it as well today about making sure that dashboards and whatnot.

We talk about this as well.

Knowledge sharing.

I cannot stress how important that is.

Knowledge sharing is going to be very important when you talk about Web performance because so much is happening very quickly.

Surprise, right?

Things are changing at the browser level.

Updates are being made at framework levels.

You need to understand these things.

So knowledge sharing is going to be extremely important.

The culture of experimentation is yes, that absolutely has to happen because say at WebPageTest or any other tool, really you're only gonna start to really make headway when you experiment, you know, you are going to play around, you're gonna you have to understand things like the network, the resources that you're playing with, how to load them and experimentation is what is going to drive that.

And of course we are user focused, not tool focused.

Right?

So let me give you an example.

I'm a runner.

I wanna make sure that I hit particular times.

How I do that is up to me.

Alright.

I could run in boots, Kodiak boots.

I can run in Timberlands, I could run in high heels.

Am I gonna hit that ten second hundred meter?

Absolutely not.

But the point is that the tooling is not all the, whole story, but staying focused on the user absolutely is.

Welcome to my discussion today, Code Leaders performance in 2022.

I'm gonna go through, some of the things that are happening in performance right now.

Now again, it's gonna be a quick talk.

I'm actually gonna do a very or much more detailed version of this tomorrow if you wanna come out and, see what that's all about.

A lot of fun.

But let's go through some of these slides right now.

So when it comes to performance for anyone who's been following the performance community must be or might be familiar with this name, Steve Souders.

Show of hands-Amazing.

In 2007, he released this book called High Performance Websites.

All right.

14 steps to faster loading websites.

And this was 2007.

Super important book really set a lot of people on their path who were curious about performance.

Picked that book up and they were on their way.

He actually had a second edition the year after as well, who that, which basically updated this one with some additional details.

But like I said it came down to 14 rules.

I remember on the 10th year anniversary, I reached out to Mr.

Souders and I was like, 'dude', I literally said that dude should I do a blog post and talk about if these 14 rules still apply today?' And he was like, 'yeah, go ahead'.

But for the most part, they did.

All right.

And this was 2017, but we are in 2022.

15 years later, which I, which is actually of wild.

A lot of time has gone by and the Web has changed a bunch.

And I, really like this quote right here from Jessica who is a on the Angular core team.

And she said the 'Web has changed a lot over the last several decades.

And it moves really fast, and now people's needs have changed.

I think that's what a lot of people are thinking about.

That's why a lot of people are thinking about performance now'.

It is absolutely correct because a lot has changed in that time.

Now think about it, 2007.

Did you have a ha did you have a mobile phone?

Maybe you didn't.

Maybe you.

All right.

You have one today without a doubt.

And the one thing I'd like to remind people is that mobile is pretty much the way we access the Web today.

Like absolutely, this is not even a question.

It's mobile first, mobile second, mobile third.

And if you're lucky enough, maybe a little desktop here and there.

We also have new browsers.

In 2007, things were not like they are today.

In fact, 2007, Netscape was still in operation.

Very.

And Google Chrome did not exist yet because they came out in, I believe, 2008.

All right.

So the browser has allowed us to do so many things, and I do mean a lot.

You probably bought your ticket online through a browser.

You probably flew here and bought your ticket to fly here, I guess on a browser.

Hotel rooms, whatever it is, you Ubered here, potentially through a browser.

But at the time again, when newer browsers came around we had APIs like the navigation API, which is how a lot of times we, early on we were like calculating how fast things were.

All right.

That was good, but we eventually found out that it just was not enough.

We needed more user-centric metrics.

All right.

Because the age of the stopwatch was like, okay, this is, we get it, but we are not getting that user experience.

And that's where some of the newer metrics start to come around.

So in 2022.

Today, right now, hora, we have a septet of metrics.

All right?

And I'm gonna go through them not in excruciating details, but I'm setting up the conversation.

And the focus with these metrics is the user experience.

There's an engineer by the name of Tim Vereecke who has this metric that it's cute.

The frus, the Frustration Index.

All right, because the Web can be frustrating.

Things don't work when you tap them, when you click, the network sucks.

These things factor into the user experience.

So let's go through these metrics fairly quickly 'cause I don't have a lot of time.

And I'll talk at the bottom as well.

Step for step.

First Contentful Paint again.

These paint metrics, when they came around, it was really about what is showing up on the screen.

All right.

These are things that you have to remember what's going on here?

Oh, okay.

There's some content showing up.

That's what the first contentful metric's all about...paint is all about.

Time to Interactive, okay?

Unfortunately, JavaScript is very important today, and the interactivity of a page is extremely important as well.

All right.

If I'm trying to tap that link on Pinterest, All right.

Things are not working.

I'm not gonna be happy.

The speed index.

One of my favorite metrics the visual completeness of a page.

All right.

I'd love to get into the graphics, but I want you to understand these are metrics that are showing up when anyone familiar with Lighthouse here, which is why I brought that up.

Yes.

These are metrics that come up when you do your little Lighthouse audit.

Total blocking time.

An extremely important metric here as well, because again, you're getting blocking through CSS blocking a lot of the time through JavaScript.

Alright?

And these are important parts of the audit, of your performance, of your app that you need to understand.

Now the last three are super important.

Largest Contentful Paint.

The reason why I brought this one up and I labeled it important, put it in red because it's actually the one metric, the paint metric that the majority of developers have a hard time understanding and executing correctly.

Cumulative Layout Shift is the page jumping around.

Yes, it is.

When this was introduced a couple years ago, it was like, okay, whatever the page is jumping around.

We don't think it's super duper important, but now it's become that much more important that Google weighs it a lot it weighs it heavily into your scoring.

And I'll bring up the scoring just because it's what people are familiar with.

First Input Delay, again, Interactive Metric where we'll talk about why this is a bit of a failed metric right now.

Now I'm gonna come back to the LCP.

The Largest Contentful Paint, through data-driven decisions, we're able to understand that this is the one that developers struggle with the most.

And in terms of getting it right, it's just above 50%.

So just under 50% of developers do not know how to work the Largest Contentful Paint.

Cumulative, Layout Shift, I'm sorry.

It was once called the 'Jank Index', which is so much easier to say it.

Three syllables.

Another metric that is very important here is the page jumping around.

Is it a, bad user experience?

All right.

Because again, if you're familiar with that page that jumps around, you're like, let me wait before I tap this button, because I think it's it's still going on left and right Now the First Input Delay-really important metric here.

Why?

Because it's probably going to get dumped.

All right?

It's an Interactive metric that seems to be doing fairly well.

People are scoring well on it, but through data driven decisions, we were able to find out that it's not capturing the entire experience or the entire Interactive experience.

So although it's not official yet, but they've talked about this being replaced.

And it's gonna be replaced by this right here, the Interactive Interaction to Next Paint.

Again, a bit of I don't call it a paint metric, but this is going to capture the interactivity a lot better than the the one previously that, FID, First Input Delay.

And I put in that little beaker, right?

Not beaker, the what is that called?

Test tube.

Because it's an experimental metric it's not officially part of the Core Web Vitals right now.

Now why have I talked about this?

Everything that we are researching, seeing right now when it comes to Web performance is data driven.

As things move along, we're making discoveries.

Some things are working out well, like the LCP, some things aren't like the FID, the First Input Delay.

That's why they did a little bit more research.

Collected the data and understood that the Interaction to Next Paint was probably going to be the the future interactive metric in the Core Web Vitals.

Now again, why are we doing all this work?

Again, if you're familiar with the Lighthouse score familiar, if you're familiar with that?

Yes.

More or less.

Okay.

Awesome.

What if I asked you or thought about what the Lighthouse score is on the Web today?

Right now.

Alright.

It's a failing grade, 15 million sites, and the Lighthouse score is 32.

What does that mean?

Things need to improve.

We're still working along in performance.

Now, obviously that's bad news and this a quote from Fred Schott who's maintainer over at Astro.

For those familiar.

I wouldn't say that we didn't care about performance.

I just think we didn't realize how bad it was getting.

And why is it getting bad?

There's a bunch of reasons.

We are sending resources down the wire in record amounts.

That's why Pinterest got a performance team, Sebastiano.

And they do.

I met some of the teammates in, the past.

What do we have to do right now?

We have to do more we have to get more granular in our work, and I'm gonna talk about this tomorrow.

Like we are looking at metrics now, not just like the A to B, we're going like A, prime, A double prime, A triple prime.

Like we're trying to figure out where we can make these intra-resource improvements.

Alright, we're really getting granular.

But the most important thing, and this is where I feel like it's a bit of my job and something that we're doing at my company as well, but we are talking about performance literacy.

Super duper important.

All right.

If you do not understand literacy, performance literacy, or if you don't understand performance that well, chances are you're not gonna be able to make the improvements that are required to bring that score from 32 up to at least a passing grade.

Who wants to do summer school?

You know what I'm saying?

And that's where mentors and managers come in.

You may not need to know about all this data and information and how to load a WebP and the arguments about JPEGXL taking place right now, but you wanna be able to pass that down to your team who are going to do the work.

I was at this performance conference just very recently.

Oh God.

I have 90 seconds.

Performance conference.

All right.

That's all we talked about for two days.

Obviously the big teams Google the big teams WebPageTest, that's us.

However, a road transport company.

Performance I hung out with the team from Adidas.

They sent like nine people.

Performance culture And.

Who else was there?

These guys, they actually sent five people down at a performance conference.

I was like, what are you guys doing here?

You know what I mean?

It's I know there's carpet but, the point of the matter is performance culture.

All right?

There is performance everywhere you look right now.

If you're on the Web, you have to deal with it now.

Like I said I'm at WebPageTest.

I.

Do meetups, I go to conferences.

I love talking about performance.

I was doing it before joining WebPageTest by running the meetups.

So to an extent, I feel I do have a bit of a responsibility to make sure that everyone has a chance to understand performance and we talked about this as well at work in case you wanna reduce those pin wait times So we released a course one of our senior engineers by the name of Scott Jehl recorded it super duper you can bang this on the weekend.

You can scan that right there.

I'm gonna pin that on my Twitter, whatever.

But it's a free course.

We just want people to understand what performance is all about modern performance.

We want you to get that vibe.

Yeah, I'm sorry, it's on the left hand side.

You gotta take your camera all the way around.

I got you ma'am.

That was quick.

I want to thank everyone for listening and like I said, it's not so much like a leadership talk, but I want to let you know that what I am doing at WebPageTest, what we are doing is trying to increase some of that literacy and as managers here, and et al if you do have a team of people who work with you these are the things that you wanna talk about, the people that you wanna have on your team, if they understand performance.

You wanna have a few of them around.

I do want to thank you for listening and this way you can find me on the interwebs, Twitter at the top.

Apparently it the, cool kids are hanging out on masterdon.

So that's what the WebPerf social is.

You could find us also at @realwebpagetest on Twitter.

And I am a runner by the way, and I can't wait to go for a long run, and I'm a pinner.

Thank you very much.