Wrapping Up

[00:00:00]
>> So today we'll go over what's the problem? Why where performance is important? We've seen a couple of metrics not all metrics, but the most important metrics such as the speed index, time to first byte, and the core that bite us, CLS for a simple delay that it's kind of being deprecated.

[00:00:19]
And probably the most important one, the one that we wanna focus initially for the initial page load that is the largest contentful paint or LCP. We've seen briefly some tools, but now you know the tools, it's time for you to get deeper with those tools. Lighthouse, DevTools with a network layer.

[00:00:40]
We've seen patients Big Insights that he's taking information from the Chrome UX report or on your real users. We've seen Web Page Test is pretty cool option. A pretty cool tool that you will use a lot as a web performance engineer. We'll cover briefly charts and diagrams, the most important one being the waterfall chart.

[00:01:04]
The bars that we have there, the lines, the milestones over that a filmstrip view, how you can see in action screenshots of your world while it's loading. We understand the browsers, so how browsing works, so when you type a URL, what's going on there, what are the steps, and why then we need to do some things to improve performance.

[00:01:29]
We'll cover basic optimizations, then a lot of other more hacky things to apply and like get really moved forward, move farther the optimizations that you can get. And finally, a quick hint on performance APIs available in the client. Just remember, always, why are we doing this? I think this is important.

[00:01:57]
Don't apply all the techniques just because you read an article, or you were here watching this video, or you were here doing this course. It's not important. What's important is to get better metrics, because that will lead into more conversions. Because just remember that performance should be top priority for a lot of websites.

[00:02:20]
Because it impacts directly the business. There are much more tricks to push the limits. So it's actually a huge discipline within web development or web engineering. But I think it's a worthwhile effort to actually do that stuff if you remember what's the goal and why we're doing this?

[00:02:43]
>> So it seems like a lot of this stuff is just taking a while to get adapted as an industry like standard as well. Do you see that a lot of that changing in the next five years, just being automatically sort of configured configured into it?
>> Well, there are many of the things that we've cover that are being automatically applied when you are using some tools, some proxies when you are adding a front on top of your website.

[00:03:09]
Again, talking about Klausler, they're not paying me to mention them. But anyway, I don't think unless Machine Learning and ChatGPT replaces us in the future, but I don't think that it will replace human work, any automatic tool. Because there are a lot of things that, I mean we mentioned that before, you can get a really good score at lighthouse and be pretty bad in the real performance.

[00:03:43]
Or the other way around. So while tools can help, we still need to make manual decisions. And for that you need to understand where performance and while techniques might change with time the basics are still the same, is understanding how HTTP works, understand how the network layer works, what the browser is doing When you understand how that works, then you understand when you have a problem, why is the problem there and how to solve that.

[00:04:15]
We each understand how painful requests are by default. So from now on, you should try to be more careful about adding more assets. Because you know, our budget is limited. We don't have a limited budget. It's a small budget. So we should be very careful about that budget, and we are spending the budget sometimes without even knowing that that's a problem.

[00:04:47]
Okay, so feel with the browser how painful it is, each HTTP request, and make it work. So if you are going to make a request, it should be important, okay, that's kind of the deal here, okay? Because performance is important. Just you're here at frontendmaster.com, it's a really, really fast app website.

[00:05:12]
You can try, probably you know that. Well, it's Manila JS and that's the reason. And because you take performance as important and when you do that, you think about that and every step you make, you think, will it impact performance negatively or not? Then you make that decision, okay?

[00:05:36]
Going back to the original idea, are you feeling bad enough about what you have been doing and how? And why it was slow, okay? But anyway, I hope that you learned at least a couple of new tricks that you didn't know to improve web performance. Having said that, that's all I have today for you on web performance.

[00:06:00]
There's much more, you have the ebook, you have a copy of the ebook also if you wanna read more on web performance and keep engaged with the community because it's a big community. Questions? Have a question?
>> Yeah, I'm not sure if you mentioned, but Todd Gardner has a web performance course.

[00:06:19]
We also have JavaScript performance, specifically with Steve Kinney.
>> Also, in terms of service workers, you had the one from Kai Simpson, also the storage one that I did. It covers cache storage and service worker that is important for improving web performance.
>> You have the PWA course.

[00:06:39]
>> The PWA course also. Do you have any final question, comment, opinion?
>> The other one I was looking at was React performance.
>> React performance.
>> I think you talked a lot about how it's easy to make performance a priority when it comes top-down. There's a CEOs friend or something complaints.

[00:07:01]
But VOD, going bottom up like as a individual developers, there's something that you have found has been an effective way to convince people.
>> I think that most convincing way is to create a video of the loading process from webpage test where you can actually see, when you say 12 seconds, they say, that's fast.

[00:07:22]
When you see 12 seconds of white with the timer, you feel those 12 seconds. And I think that's good enough. And the other thing is probably play golf and try to get into
>> [LAUGH] The CEO game.
>> Yeah, but
>> Or work for a company where the CEOs of developer and cares about it.

[00:07:42]
>> Well, yeah, that's another but in my experience if you don't have the whole company on web performance if it's difficult because sometimes you need to make concessions. I mean, some other parts of the company need to make some concessions to make that work. There is no enough belief in, if the company is not believing you, it's like, again, you are the geeky guy with the timer, and they don't understand that that's not the case, or maybe that's the case as well.

[00:08:15]
But we are doing this because it's better for the whole company, and it should be top priority. And if infrastructure needs to make a change in how they're doing things, it has a cost. Okay, it's an investment because you will have a return. There is a ROI their return of investment that, yeah, someone needs to convince first, at least the second line, early, at least CTOs.

[00:08:41]
This CTO can fight for that in the rest of the company. That's the case. But yeah, it's not simple. I know that when you are just a developer, yeah, you are the geeky person. And no one actually believes that that's true. I mean, Google has a lot of case studies on web performance on their website.

[00:09:04]
Where they big companies already are showing their information where they say we increase performance talking about e commerce sites, sign from travel sites, enterprise solutions. And well that you can gather information greater report and say hey, we can do the stuff, and also the experiment that I mentioned, similar to the experiment that Amazon did is also another good idea.

[00:09:32]
If you get approval for that, you create an experiment of adding milliseconds to every request or to the page load for groups on the same day at the same time and see the conversion how the conversion rate changes. And then with that, we will prove that on your website for your website like the better performance, the better conversion.

[00:09:57]
So that means that now we need to go down, from where we are, if we go down, we will incorporate, we will increase that. Yeah, we will remember money.
>> Awesome, thanks Max.
>> Thank you.
>> [APPLAUSE]