Most Performance is Front-End

[00:00:00]
>> Do you remember that I mentioned that web performance is a frontend thing, not typical your backend thing. Well, now that we know what a waterfall chart is and how it looks like, we can actually prove that. So if you look at that chart, that's a simple waterfall chart, and I ask you, but anyway, it can be more complex as well.

[00:00:21]
Now it's just so simple, and if I ask you, where is the backend time there? How can you respond to that? Where is the backend time? Yeah.
>> Would it be that period of time from when the HTML request started to, it ends?
>> So it's first, you mentioned the HTML, so the HTML in here is that one only, right?

[00:00:43]
So it started and end. So yeah, that's correct. In fact, it's even less than that. And I will show you why. So the backend time is just that 5%, even less than that. All the rest and how the browser is loading resources, they may be also contacting the backend, but it's not your Node.js, your Next.js code, your PHP code, if you want.

[00:01:11]
That code is just that small portion, okay? And our metrics, the metrics that matters, such as first-contentful-paint, typically they are around here. So, we have a problem. The server is just that part that you see there. Not even the blue part, because the blue part in this chart, I mean, I'm talking about the blue, where is it, here.

[00:01:38]
That blue bar, that's downloading the file. That will change based on the bandwidth. The server responsibility, just that part. All the rest has to do with how we define things in our HTML. So it's frontend responsibility. Makes sense? And from the top 100,000 sites, only, let's say 16% of the time is because of the backend, okay?

[00:02:12]
Optimizing the backend has less impact and it's not a simple or cheap task. I mean, you wanna optimize your server time. You wanna cut 10% of the time. Sometimes it's about buying some, or putting some more infrastructure or cloud infrastructure, pay for some cache, or adding another layer of something, right, it's expensive.

[00:02:39]
And think about that, if you can cut 10% of the backend time, how much impact do you have in first content load? Then when we go back here, how much impact you will have, if you just change this by 10%? It's not going to change a lot. Yeah, everything will move a little bit that way, but just a little.

[00:03:10]
But optimizing the frontend has high impact. You make a change in the HTML and automatically you can see higher impact on every metric. And it's cheap, it's just changing the HTML. Not on everything that we will see, but it's typically cheap. Do we have a question on the chat?

[00:03:34]
>> Yeah, just to comment that there is no API calls here, but sometimes when you are doing web apps and you have to make a lot of API calls, and those API calls can be-
>> Those API calls, yeah.
>> Could be slow.
>> Yeah, sure, but, in fact, it will be the case in the project that I have that we will test.

[00:03:55]
For now, we are focusing on the first load. If your first load, the first page load needs content from APIs to render the initial page, you might have a problem. But yeah, that's true. That's why I said it's not like the backend is dead after the first initial HTML.

[00:04:16]
But typically, it's not the biggest problem. If you need to call APIs to render your landing page, you have a different problem. And again, I'm looking at you and watching at you React developers, okay? So that's a problem. That's a problem for performance. And maybe you say, and there are always excuses.

[00:04:42]
No, because my team is blah, blah. It's better to do this and this way. In my experience doing consulting for big companies or large companies, the answer is actually, you know what, the CEO realized, someone told the CEO that they're losing money because of web performance. So then the order goes back to the CTO, we need to do web performance no matter what.

[00:05:08]
No, but infrastructure said that it's better to do client side, [SOUND]. No, it doesn't matter. Because we are losing money. It's about money, okay? At one point, you need to go over this.