Project Setup & Lighthouse Report

[00:00:00]
>> Well, it's time to start working with our project. To actually see in action the performance problems and understanding why we need to solve them and how. Just a summary, we are doing this for the user and that's, because it will increase conversion. And that will increase business opportunities.

[00:00:24]
That's why we are doing performance, okay? Just remember that. So, this is what you get from the repo. You have the material section, you have the slides in PDF and the e-book that I promised a copy of the e-book. And then we have a very basic Node.js, with express.js server.

[00:00:43]
So, the only thing you need is to install NPM install. You run NPM install over the folder and it will work. And then you can start the server with NPM start. Nothing really fancy. It opens a server on local host 3030. You can change the port. And you will see something like this, frontend museum.

[00:01:02]
It's a frontend museum, okay? So, it's a very basic HTML website, but if you run it, it feels slow. And you can see it's taking its time to load. And of course, forcing in this code a couple of problems. And if we try to create a Lighthouse report on it.

[00:01:26]
Now maybe, it's time to understand the mode of Lighhouse. If you have ever been playing with Lighthouse in the past five years or so probably, you haven't seen that because that's kinda of new. Navigation is actually the default option that we used to have in Lighthouse. It's actually going to reload the page and measure the performance of the whole navigation process, the load process.

[00:01:51]
Timespan, when you do timespan, it will make analysis over a period of time when you interact with the content. For example, I can start a timespan, and then I should work with the app, interact with the app, select, click, whatever your app is doing. And then end the timespan, and now it will give you some insights and ideas, on performance issues that you might have.

[00:02:19]
Over that interaction that you save, okay? So, that's the one. If you wanna create another report, you have the plus sign there. So, I click the plus sign. And a snapshot is going to take the page as it is right now. So, it's not going to refresh the page, okay?

[00:02:37]
And that's useful for single page applications where you are in a deep link and you wanna test how it looks like the performance of that particular moment of the app. So, you go to that particular moment of the app, to that state, and then you create a report on a snapshot.

[00:02:55]
Most of the time we start with navigation. That's what we want, and it's going to restart. You see the reload. Operation, and the slower your website, the slower you will get the report as well. And it will give me the score, and also a list of problems, that it has found.

[00:03:15]
So I'm getting 60, it can be worse, okay? I've seen website with two, the score of two of 100, okay? Two of 100. So, 60 is kind of here. But, you can see it's a very simple HTML, and we are still having performance issues. So, we see a lot of white.

[00:03:34]
White, white, white, white, white, until we see something. So, we will see how to solve the problem, okay? So, the first contentful paint is almost four seconds. But I guess, we can try to see that in action, but it should be that image, right? It seems like the largest part of the initial page.

[00:03:55]
So, it has performance issues. And if we go to the Network tab, on Chrome Dev Tools and refresh. We can see the Waterfall chart here, okay? So, that's the Waterfall chart. And we can see that's the HTML always the first request is the HTML it's the document. And while there are some exceptions on that.

[00:04:20]
And then we start downloading more assets we can try to do this like this. So, we have a JavaScript, a CSS file, over the timeline..