Reviewing The Lighthouse Test

[00:00:00]
>> Let's go back to our example, and let's see how we are doing right now with performance. Is it better or worse? Let's go to Lighthouse and grab, remember 60 was our last, Score. Let's see what happens now. I'm still having my, let's say bad server, that I can solve as well cuz that's a problem that I have.

[00:00:28]
You can see it I'm still at 60. So why is that? Well, I can try this several times, the problem is that we have a lot of Speed Index, remember Speed Index? Remember that the average or the budget is 2.5, and yeah, 7 is actually far away. And Largest Contentful Paint is better than before, it was 7, now it's 5, it's better.

[00:00:51]
But we are still having problems because time to first byte is really high. What is time to first byte? The time that it takes for the first byte from the server to appear. And that is just because I was adding that delay. What I want is to remove my middleware, so we don't have that fake delay, and now it's a more normal server.

[00:01:13]
And now it's almost instant, of course that, yeah, it's still local, okay? We know that, but we can try to get, The results from here, now we are at 94, there is still a place for improvement, as you can see here. Largest Contentful Paint is still 3.0 seconds, we need to find out why, and here we have examples.

[00:01:40]
Well, I'm not converting all the files into WebP and AVIF, so that's why it says hey, you should, maybe, okay, because I did that only with the first one, oops. Also there are some render-blocking resources here going on, .css and background.css, that means a blocking resource is part of what is known as, it's the critical path, okay.

[00:02:08]
The critical path is all the files that are necessary to render something on the screen. So without those files, the browser will never run there. For example here, maybe it's a good idea to merge styles and background into one file. And actually be true, it's not going to be a big difference, but it says hey, be careful because those are blocking resources, okay?

[00:02:31]
Then, and this is true, our CLS isn't really good because I'm not setting the width and height of those images in the HTML. So you should add width and height, so that will create CLS layout shift, okay? Here you can see the critical path in action. Of course, this tool is much better with large websites, where sometimes it's not so simple to see it, okay?

[00:03:03]
But anyway, we are pretty good now, we apply lots of techniques, mostly for getting better web vitals. There's still room for improvement, and on every website, remember that you need to test and see which things are better for you. So don't trust me, don't trust the slides, don't trust the book, trust your own testing, okay?

[00:03:29]
That's kind of what you need to understand.
>> Where would I look to see how you'd set it up so it's a server first for the initial load, and then it'd be the client side rendering for the rest of it, like the individual-
>> Right, that depends on the framework, Next.js, Nuxt.js for Vue.js.

[00:03:48]
>> Does Next.js automatically do that?
>> It will automatically do that, yeah, you can set up, you can customize it, but it is automatic, yeah.
>> So it's automatic with the server first, client second.
>> Yeah.
>> Okay.
>> That's correct, yeah. But you are still using React.

[00:04:04]
So every page is a React component, inside the page you create React component, you use React components, but the first load it's actually, I mean, the same vercel.com is Next.js, that's the company behind Next.js. If we create, come on, cannot create a new report for some reason, I'm trying to click there, it's not working.

[00:04:36]
That's weird, let me remove that one, no, okay, there. They are typically proud that most of the Next.js websites, they got 99, I'm not sure what we get here, 85, not 99. But that depends on the case, because it's a lab experiment. But they're using Next.js and when you look at the page source, you see HTML, it's not just client side.

[00:05:05]
I mean, it's not formatted here, so it's difficult to read this. Even it has CSS embedded, everything is done automatically by Next.js. It embedded the css because it thought that will be faster for this particular example.