In this lesson, let's talk about using Lighthouse and PageSpeed Insights for debugging performance issues in a Vue or Nuxt application. The first tip I want to give you is that you should only run Lighthouse on a build project. If you run Lighthouse on a project in development mode, it's not going to give you an accurate result. So therefore, I've already run npm run build inside of the Nuxt application.
Now I'm just going to actually run that built project. Back over in the browser, I'll open up the browser dev tools and then navigate to the Lighthouse tab. This allows us to generate a report on mobile or desktop. And then it also has a couple of different tests we can do.
We could do not only performance test, but also accessibility best practices and SEO tests. Let's just stick with performance though, since that's what the course is all about. Now I'm gonna hit analyze page load. This is going to analyze the load of this particular page on my application, that is the home page, and not any other page.
So when you're running these Lighthouse reports, do note that it's on the page you're currently looking at. And in this case, we got a great score. That is a score of 94. These overviews are pretty easy to read.
Green basically means you're... doing well, and the score 94 is out of 100. So you can see that right down here. But then it breaks down the overall score into a few important metrics.
First of all, we have First Contentful Paint. This is a browser performance metric that measures how long it takes to render the first content on a web page when a user navigates to it. A low First Contentful Paint means that the user will see content immediately when they load the page, while a high first contentful paint means that the page will take a long time to render and the user may perceive it as slow. Largest contentful paint is a metric that measures how long it takes for the largest visible content on a webpage to appear on the user's screen.
We talked about this a little earlier in the course during the images lesson. 5 seconds or less, which is why ours is yellow in this case because ours takes just a little longer than that. Total Blocking Time, or TBT, is a metric that measures how long a browser's main thread is blocked while processing tasks. Cumulative Layout Shift, or CLS, is a web performance metric that measures how much a web page's layout unexpectedly shifts during the loading process.
We also talked about this one in the images lesson as well. Finally, the speed index or SI is a metric that measures how quickly a web page's contents are visibly populated. It's calculated by measuring the percentage of the page that's visually complete at every 100 millisecond interval until the page is fully loaded. The overall score is the sum of the individual intervals.
It provides a single metric that can give you a good idea of your site's overall speed, efficiency, and performance. The diagnostics portion of this report is one of the most valuable in my opinion. Why? Because it gives you some great next steps about what performance optimizations to pursue.
For instance, we could enable text compression and save about 158 kilobytes. We could eliminate some render blocking resources, reduce unused JavaScript and CSS, and so on and so forth. So this is a really great way to pick what you want to tackle next. Plus, you can give yourself a pat on the back for all the audits you did pass.
These are all the things you're already doing right to keep your page fast. Great. So that's how easy it is to use Lighthouse. I've left a link in the description below to some further documentation where you can read about it further.
Another tip though I want to give you about using Google Lighthouse is that you should usually run this inside of incognito mode or at least in a browser window instance where you don't have a lot of browser extensions installed. I don't have a ton of browser extensions installed in my particular user here for this Chrome profile. So I just went ahead and ran it directly without incognito. But browser extensions can interfere with the score.
Obviously, your end users aren't going to have those same extensions. So make sure you remove them from the equation. Furthermore, you could also scan your entire website with Google Lighthouse with this tool called OnLighthouse. It's built by a member of the Nuxt core team.
Harlan Wilton, and it's a great way to run these kind of reports, not only in your browser manually, but also in automated pipelines. Finally, another tool that's related to Lighthouse is called Page Speed Insights. It has a lot of the same reports available. However, Lighthouse is run completely in a lab environment.
It's not real world data. Page Speed Insights, on the other hand, takes into account real users on your site. and their actual experiences. So make sure you're using a combination of both of these tools to run your tests.