Audit Real-World Performance with PageSpeed Insights

[00:00:00]
>> And I know that some people will say hey, my website is fast because we don't have a clear definition on what's fast, okay? So how fast is fast, so we had to define performance budget. And web vitals already set some performance budget then you can follow or not.

[00:00:20]
And you can define your own budget. I won't talk about budget a lot, okay? You will see why. These are the current budgets for the three core web vitals defined. If you are under green, you are good. If you are under yellow, needs improvement. If you are over the yellow, you are pretty bad.

[00:00:40]
That's kind of the idea. So LCP, Largest Contentful Paint should appear in the page within 2.5 seconds for at least 75% of your users in the real world, that's kind of the idea. Not for everyone because you don't know if the user is in 2g in the middle of the Alps.

[00:01:03]
And yeah, well, you can't do anything about that, so that's why it's for 75% of your users. And you can gather that with real user metrics, you have to render the Largest Contentful Paint, the image, the title within 2.5 seconds. First input delay 100 milliseconds. So it's a metric, you gather the metric and will tell you if you are within that threshold, so within the budget or not.

[00:01:34]
And CLS, Content Layout Shift. That's a value that you don't understand the value by itself. But if it's 0.1, it means you're good. So you are not shifting content while the page loads. So we will start with these budgets. And then when you know what you're doing, when you know better your goals, you can create your own goals, okay?

[00:01:57]
But these are the goals that the community is trying to follow today, okay? So Chrome has something known as Chrome UX that will actually tell you based on URL, they don't have the whole Internet, but they have a lot of website. You can try your website and see if it's there.

[00:02:21]
It's a UX report, so that will give you all the information for your website. Let's see this in action. So if you search for Chrome UX report, you have all the explanation about how it works, okay? And there is an API that you can query about this, and there are some tools available that will let you search that database.

[00:02:48]
This is like a big data where you can play with information about page load, information about metrics for the whole Internet. So you can research on, it can be travel websites, airlines, how airlines are doing with page load, okay? So, you can research using BigQuery, for example, over this.

[00:03:16]
And there are some tools that will let you see this in action. For example, one is PageSpeed Insights. PageSpeed Insights, the URL is pagespeed.web.dev. Will let you type a URL, I know this is my prefer website. Analyze that. It will create an analysis of that URL but is not making a live analysis.

[00:03:43]
It's what your real users are experiencing on Chrome. So this is data from Chrome users browsing that website, okay? So I'm passing Core Web Vitals, fortunately. And this is giving me, for example, the largest contentful paint is 1.7 for my website. So it's under 2.5. Then CLS is under 0.1.

[00:04:07]
So it's pretty good. Time to First Byte is actually pretty good as well. First Contentful Paint, Interaction to Next Paint, we don't have data yet. This is the experimental one, and that's on mobile, I can also see the same on desktop. And you can see that most of the metrics are always better on desktop.

[00:04:27]
Unless you have a completely different website, like you have a mobile website and a desktop website, if it's the same website, typically you will get better results on desktop. And that's because again, more cellular networks, different CPUs. And also, I have some improvement accessibility it seems like. We have that change in this.

[00:04:49]
This is Lighthouse. Have you ever tried Lighthouse? No, okay. So Lighthouse is a tool that was created by the Google Chrome team. Originally it was a plugin and then it was a CLI so something from the terminal, now it's both. It's an open source tool created by the Chrome team.

[00:05:14]
The idea was to create a lighthouse. The lighthouse will point us into the right direction about performance. That was the original idea. So actually, it was originally for PWAs for progressive web apps to give us in the right direction. But now it's also for performance. So it's a tool that you have for example, if I load my website, I can also load Frontend Masters.

[00:05:35]
If you go inspect, if you open DevTools on Chrome, you have a whole category, a tab with the name Lighthouse. That's Lighthouse, okay? That's Lighthouse integrated in Google Chrome. But Lighthouse is also integrated with a lot of other performance tools, such as PageSpeed Insights. That is just a cloud-based analysis tool where you can create here, a report.

[00:06:05]
In this case it's going to create a performance report and we will see that in action today on different modes. I will explain these modes in a minute, but navigation is the default mode that will analyze the page load, it will refresh the page and it will give me an answer, in terms of how good or bad I am.

[00:06:29]
And you can see that right now it's giving me 82 not 90 something that was here, here was 98, because it's using my computer, my network, my plugins, it's live. So maybe if I do another one, it'll give me another result, okay? So that's why this is a live analysis, and PageSpeed Insights is taking data from that Chrome UX report, from that Chrome UX Big Database, that is not my computer today.

[00:07:00]
If it's real users browsing that website, okay? That's the difference. Well, anyway, these numbers are coming from these tool, Lighthouse, that some developers are using as a metric. So it's common to see on Twitter, hey, my website is 99 on Lighthouse. So they're using that performance number as a metric, okay?

[00:07:29]
And that can lead to some problems. For example, that's not a metric, actually, it's a score that the tool is giving us, it's leading us into the right direction, which is okay. But you shouldn't take that as the most important metric for you, because if not, you're optimizing for the metric and not for the user.

[00:07:49]
You're optimizing for the score.
>> On that note [INAUDIBLE] Chat was saying he's been to some websites and web apps that don't have a good score, but they feel fast.
>> Exactly, that's the point. So the score, it can give you a bad score in any way, because it's an automatic tool that is giving you a score based on a list of options.

[00:08:19]
And each option has a different weight over the score. And you can create your own score, actually. The problem with the score is that there are a lot of developers just optimizing for the score, and they're not understanding web performance. They'll say, I have 99 there, I'm good and maybe you're bad.

[00:08:36]
Or the other way around, as someone was saying on the chat. Maybe you have a bad score, but you feel it's pretty fast. So maybe the score is not so important. So have that score there. It's okay to get it, but it's better to understand the vitals behind that and understand what's going on, okay?

[00:09:00]
So have that in mind. So, PageSpeed Insights again, pagespeed.web.dev is a free tool that will give you the chrome UX report data, that again, it's not just a lab test. It's actually testing with real users on real networks which is actually pretty good, to get like a better idea of what's going on, okay?

[00:09:28]
For example this is my speed index. Again, Speed Index just 0.8 seconds is it good or bad? Well it is green right? So we know it's good but I don't know what that means in terms of, remember the speed index is the area above the curve. So, the 8, 0.8, and this is good or bad?

[00:09:48]
But actually, if it's below 2.5 seconds, typically it's good. So, that's the amount of blank that the user has seen over the page load process. Here, there are a couple of opportunities to improve and we will see this later. Anyway, remember you have mobile, you have desktop, and you can see that on mobile you will find more users under the red.

[00:10:17]
This is the percentage of users that were over the red. You can see it's typically higher on mobile, why? Cellular networks. That's the latency. On desktop, you don't have such, I mean, you might feel latency problems on desktop on your Wi Fi if you have a problem but it's not so common.

[00:10:40]
You will probably see that there. And you can try here any website. Fortunately, this is free, PageSpeed Insights, because if you wanna use directly the Chrome UX data, you wanna query that, it's open, but you need to pay for the queries. So it's BigQuery, you have like a free budget, but then you have to pay for that in case you want to make queries, even if it's on your own website.

[00:11:04]
And today, some of that information, not all of the information, but some of that information also appears under Google Webmasters. That's the place where you, as the content owner of a website, you can see information about how Google sees your website. For SEO, well, now, you have a performance section there as well.

[00:11:26]
But as a summary on PageSpeed Insights, you can see Chrome UX reports on your own URLs, if it's a new URL, or if it's not indexed in Google, you won't see that. And you will need to get live data in the meantime