Performance Problems

[00:00:00]
>> So let's start the problem. So what's the problem? So if you're here, this is an advanced web performance workshop, you already know some things. For example, you already know that your users are actually sad. So you already know that you're losing money, maybe not you, maybe the company you're working for or the customer that you're making websites for.

[00:00:25]
Someone is losing money. Why? Because the web is slow. What you're doing is slow. I'm sorry to be hard on this, but you're making slow websites, that's the average. Don't feel so bad yet about that. So the web is slow, and that has been proven. I'm not going to take too much time on that today, but it has been proven that that leads to less conversion.

[00:00:51]
Whatever conversion means for your website, it can be less users registering to the site, user buying less user, playing with your content, reading content, watching ads wherever, wherever conversion means for you. We have less of that, if your website is slow, okay? So and also it's mostly front end responsibility that some people, when you're getting into web development sometimes you feel that web performance is not about the front end.

[00:01:21]
Sometimes you feel it's about the database, the cloud, the server. Of course, you might have server issues because that's also possible, but that's not typically the case. When we have performance problems in our websites, it's typically because of bad front end decisions, okay? And that's I mean, in this, let's talk about a discipline.

[00:01:46]
So web performance is a discipline web performance optimization. That hasn't been in the web development area for probably 15 years before HTML5, let's say take one moment in history, when we were talking about performance, it was about Apache, and how to make faster queries in MySQL or things like that.

[00:02:11]
We were talking about the backend, we go with thought that performance had to do with server issues. And sometimes that was a problem, but it wasn't the biggest problem, okay? And we will see why in a minute. So and I know that you're already doing a couple of stuff, that's why you're here, right?

[00:02:30]
So for example, you're already optimizing the network transfer. If you know what that is, we will see in a minute. You're already working with TLS and HTTP/2, at least TLS is HTTPS. So you have like a secure origin, okay? We will get deeper on each of these topics, okay?

[00:02:54]
So you have time to ask questions anyway. You're already using CSS as an appetizer. So appetizers should be first and typically small. It's not the main meal, okay? So CSS should be first and small, and we'll understand why in a minute. JavaScript is dessert. So typically, it should go after the main meal, and also it typically also small compared with the main meal, right?

[00:03:27]
So I'm you're really optimizing images, like using the right format with the right size, and going through different compression tools. You're already defining a policy for HTTP cache. I mean, that's because again, you're in an advanced course, right? You're doing this, right?
>> [LAUGH]
>> You're already using service workers, because that's kind of a base today for websites that wanna run really, really fast.

[00:04:02]
You're doing all of this, right? Because I'm watching you. So if we are all doing this stuff that that's kind of a standard, let's say checklist for Web performance today. What's the problem? So why` are we here? Why are we still talking about web performance? So this data is actually really updated.

[00:04:26]
It's from yesterday. So today, the medium on mobile devices for time to interactive, there is a metric that measures at which point in the loading process the website actually works. So, I'm simplifying this, but that means that, the website is ready for interaction. Maybe you have seen this in action when you're trying to use a website, and it doesn't scroll, you click, and it doesn't click, that's because it's not interactive.

[00:04:55]
Well, the median, on mobile devices, yesterday, was 12.5 seconds to get into having a website completely interactive. I know that some people here in the room or watching this video might be thinking, that's fast. I don't know, because we don't know what we believe is actually fast. So to prove if this is fast or not, let's see in a timer, let's feel the pain of 12.5 seconds of silence.

[00:05:40]
You feel it, right? So, that's 12.5 seconds, and that's actually the median on how much time it takes to get a website interactive on a mobile device on real user. This is a real user metric. So, this is measured on real devices, on real network, with real users, with real websites.

[00:06:01]
It's not in the lab. So we have a problem because that's a lot of time, okay? Also, the average time to load the mobile landing page this is actually from exactly before the COVID pandemic, but it's not better now, it's 22 seconds, okay? So on the mobile landing page most of the time or sometimes comes from an ad.

[00:06:30]
So you have a company that is paying for an ad and then for 22 seconds no one is like seeing the whole content. Of course, I'm not yet explaining what's load, because it's a technical concept, loading a page, but we're not exactly sure what load means for the user.

[00:06:52]
We will talk about metrics in a couple of minutes. There are a lot of researches on this thing. And for example, there is a nice research that was done by Shopify I think where they did a research with real people on tables like browsing websites, and they realize that for users, they feel like the website is loaded when the images are loaded.

[00:07:19]
When all the images appears on the screen, users typically feel that okay, now we can use it. So as web developers probably we know that that's not real. Actually you can start using the websites before the images are ready, but that's not important. What matters is what the users are actually feeling, okay?

[00:07:42]
So the same Google research says that as page load time goes from 1 second to 10 seconds, the probability of a mobile visitor to bounce, so to get out of that website, increases by 123%. And again, think about that, when we're talking about landing pages, that's your moment of truth, that's the moment where you need to get that user because the user is there, you already paid the cost to get the user there.

[00:08:13]
The cost can be real money on an ad. The cost can be a mental cost to actually the user goes into typing your URL or clicking on a link, so there was a cost. And then the user is getting there and is going away because your website is slow.

[00:08:29]
There was also, it was like three or four years ago that there was a nice research on ads on TV for different like sport events like really large sport events worldwide. It can be the FIFA World Cup or some other events on each country that are important.

[00:08:52]
So they analyze the URLs that were on ads, and they realized that they were wasting money, because a lot of those URLs were actually really slow. So users were actually maybe getting into the URL, and they were bouncing immediately, okay? So that's a waste of money.