Core Web Vitals

[00:00:00]
>> Now it's time to talk about something known as Web Vitals, and in particular, Core Web Vitals. So what's the deal with Web Vitals? It's an effort led by the Google Chrome team, but it's open to anyone, to define vitals. Like, what are the most important metrics that we wanna focus on as web developers for web performance.

[00:00:27]
And they are calculated over the 75th percentile over mobile and web. It doesn't matter, but actually, the idea is to get real user metrics, and based on real user metrics, define a set of rules that might change with time. In fact, they have been changed a couple of times for us to create better websites.

[00:00:50]
So the idea was actually to define a like common goal for web performance. Because if not, it's not clear how fast it's fast. And today, Core Web Vitals is actually including three metrics. One that we have already covered, actually two, we have already covered two of those. Largest contentful paint, that is measuring loading.

[00:01:16]
First input delay, that is measuring interactivity, how interactive your website feels. I'm not saying that this is what will happen in the future. I will explain that in a second. And then CLS, cumulative layout shift, that detects visual stability. Actually, when you are loading a website and then the website moves around, the elements are moving, because an image appears and then, you probably have seen this typically in newspapers.

[00:01:45]
You are reading the article and then the article shifts down, because a large ad appeared at the top. Well, that's a layout shift and it's bad for performance. So, first input delay is the only one that we're not actually using too much. And it's probably going to be replaced by another one.

[00:02:04]
So after a couple of years of testing it, we ended up saying, well, you know what, it doesn't feel like like the best metric, so it's probably going to be replaced by another one. So, but again, even if you're setting Largest contentful paint as something important, again, the largest contentful pain you will see in an example in a second.

[00:02:25]
So let me go directly there. It checks initial load. So it's like replacing the idea of how fast your website is loading, is at which point the most important part of the content appears on the screen. Because it has to do with the screen it will be different on different viewpoint sizes.

[00:02:48]
So if you're using responsive design based on the width of your screen, the design of the homepage is different or the landing page is different. So it might be different on mobile, on desktop, on tablets because the website is different, okay? First input delay, then it checks interactivity.

[00:03:08]
So at which moment you are releasing the thread enough to, for example, interact with the content. On the visual stability that we don't want the content to shift around while the page loads. So, for example, we can actually try to see here, different metrics in which moments that are happening, okay?

[00:03:32]
For example, typically when you see that your content goes to white, it's Time to first byte. How do you know that? For example, you're on a website, google.com, okay? And then you click, you search for the best library for web developers and frontendmasters appears, and you click on the link.

[00:03:55]
When you click on the link If it doesn't go to white immediately, at least not now, it was in the 90s, your are still at Google, okay. For a couple of milliseconds or seconds and after a while, you see white. When you see white is when time to first byte has fired.

[00:04:15]
So is it depends on the browser actually, but simplifying. Let's say that that's the moment. Then you see in this case a background. That's that gray background that's First paint. So the browser paint something. Is it useful? No, so it's just a gradient, okay? So it's not useful for our brain, remember, we're doing this for the user and our brain says, yeah, something is there, but it's like I don't feel the content is ready.

[00:04:51]
So I don't feel that the website was loaded. Then something appear, okay. In this case, the search box. So this is known as content. Is it the most important content? Probably not, but it's still something that my brain parses. So we are talking about brain parsing right now.

[00:05:16]
It's there, but it's not really, really important. First, now, if you look at the end here, at the end, we see which one can be our Largest contentful paint. That sometimes we have candidates because we don't know which one is the largest. But probably it has to do with the results that we are looking for.

[00:05:36]
So that's why we're expecting, okay? I will show you another example to see this. But actually, the browser will actually do this for us. It will say, okay, this is the Largest contentful paint. I will explain how to see that in action in a second. But here you have an example of first contentful paint that we haven't mentioned a lot because it's not really so important.

[00:05:59]
And large has contentful paint that is the one that is important. Contentful is actually an element the box on the page that has content, it can be text, or it can be an image. And while the page loads, the browser calculates different candidates for largest contentful paint. For example, for a while it was this one, that title, but at the end it was actually the image.

[00:06:27]
So this is Largest contentful paint, and when that image is rendered, its fired. Again, what fired means, nothing is for analytics only, but it fires in our brain, that's the idea. The idea of Largest contentful paint is firing something in our brain, user's brain saying, the most important content is there on the screen.

[00:06:49]
So I can start reading. I can start parsing this. Yes.
>> Is it based on geometry because the image is larger-
>> Yeah.
>> Than the-
>> It's geometry, it's larger, it's about geometry of the element on the screen. In the case of, I mean, it's about rendering, not about CSS.

[00:07:10]
So I know if you have an image without padding, it's not taking the padding in consideration. It's about the content itself, right? Not about the HTML element and the CSS inside. It's not the box of HTML. It's what you see on the screen actually, okay? Yeah.
>> If you put like a skeleton like using suspense or like a loading sort of thing like that I would assume that that would like keep people engaged is there like a percentage for that that is effective for keeping those people engaged to stay on that while it's loading?

[00:07:43]
>> Well, let me answer first with something. Never assume. Test it. So again, don't trust anyone. That's first rule. Second rule, don't assume. In fact, it's old at this point. I can't even Google that special. If it's still there, let me see if it's there. Avoid the spinner, that's the one I was looking for.

[00:08:11]
It's from 10 years ago, and he was saying, avoid the spinner. That was you were suggesting, okay? So he was saying, don't do this. Why? Because if you do that, you're creating a big sign in your website saying that you're a slow. So, yeah, but that's the Gmail case actually, remember when you saw the Gmail?

[00:08:35]
What happens when you do that is the speed index goes wrong. You get the worst speed index because you see just the loading spinner for lot of time, and then everything is render. So, sometimes you don't have any other option, I mean, you're loading an Neflix movie and the movie is not coming, well, you have to put loading.

[00:08:55]
Okay but four standard web apps and website based or content based websites, it's a good idea to avoid the spinner, and again, for that you need to just test this with your user. You can do AB testing. And in this case, the idea is to start rendering parts of the content or placeholders and you can see these a lot in social networks, TikTok, Facebook, Instagram.

[00:09:23]
If it's taking time you actually get to see this kind of placeholders that it feels sometimes it's an animation, it feels like we are typing, we have some little guys inside the computer typing. So it's an effect that it's not really a loading spinner but it's kind of giving you the effect, it's tricking your brain to get you there.

[00:09:49]
So we need to remember why are we doing performance? We are doing performance at the end because we are losing money, okay? Why are we losing money? Because our users are unhappy about the performance. Users are not sometimes conscious about that, okay. So it's not like, this website is slow, let's get out of here.

[00:10:10]
You click on a link, it doesn't work, you don't feel it's what you are looking for, you get out. So that's the moment that you are losing the user. So because we are losing the user, we care a lot about perception, user's perception. So we are doing web performance because of user's perception that that leads to better conversion, okay.

[00:10:30]
So, that's why we're doing this. So that's why tricking the user sometimes makes a better result. But again, don't trust Luke. Try it. So, it depends on the case. It depends on what you're doing. What's your project, but just remember that we are doing it for the user.

[00:10:56]
Okay, so the answer will be how the user will perceive this?
>> See maybe more likely to get better results if it's not a spinner, necessarily, but an engaging animation of some sort.
>> Something, yeah, something that the trick is to, that it feels like it's loading, it's generating, it's coming, it's there.

[00:11:18]
>> They're using their time well.
>> Yeah, but it's something that you can try. So you can test, you can do A-B testing over that, over your users that might be different to other users from other websites. Maybe your community's different. So it's tried, okay, measuring
>> Facebook uses that kind of pulsing content outline thing.

[00:11:42]
You've seen that
>> Yeah, like a placeholder. And so if they have something, well, they don't have that one here. But yeah, it's like it's like you feel like a paragraph of text, but it's not really text. That's kind of, yeah, an animation that it's really. It's it's more animation.

[00:12:00]
It's not really huge but
>> Then I've seen those, but they make they take an image and they put they make like a placeholder, SVG that's kind of the outline of the image. They show that first, and then they show the image.
>> Yeah, I remember one trick that was to take images.

[00:12:21]
So if you have an image, I mean for a newspaper, I'm not sure if I have one, let's say this one, and for that image, but actually after a while, Newspapers stopped doing that because they realized that they had another issue. But they were taking the image server-side and resizing the image to really really small, such as 16 by 16 pixels, really really small.

[00:12:46]
They were converting that into a base 64 and inline image. And then they were in-lining in the IMG tile, just a very, very compressed version of that image. So then when you load the page, initially, you see a very, very low resolution of the image. It's more like a couple of colors, like large pixels with colors.

[00:13:08]
But and then after a while, you'll replace that with a real image. And that was a trick, okay, for users perception that that image was loading even if it was, it wasn't true. You weren't loading the image. Anyway, try it. So try different techniques, test them on the real world and see which works best.

[00:13:30]
There are more metrics in Web Vitals. For example, there is one that today is experimental. That's the one that I think is going to replace the interactivity part is Interaction to next paint. This metric will try to measure responsiveness based on a more complex algorithm, but now Chrome is supporting it.

[00:13:52]
From Chrome, I think it's 108, a supported Interaction to next paint. So have in mind that Web Vitals, this effort, community effort to define metrics will change over time. So every once in a while they sit down and see, okay, let's see the metrics that we have defined.

[00:14:13]
If they're still good or not let's gather real user metrics and see if that's the right metric or maybe we have to change them