Cumulative Layout Shift Q&A

[00:00:00]
>> Speaker 2: And why isn't the header included as part of the impact?
>> Todd Gardner: Sure so in this particular example, let me go to back to this one, so the header in this particular case doesn't move during the load sequence. If we go back to our page check this out, so here's the header, here's the promo banner, and here's the hero image.

[00:00:22]
Now if I reload this page,
>> Todd Gardner: It's really slow. There it is, see the header is there, the body is there, the promo image forces its way in. The header didn't change, the header didn't shift around, the header is where it rendered, it didn't move, that's why it's not included.

[00:00:44]
It wasn't part of the impact, it didn't change at all as part of this layout shift. The things that changed was the promo banner and then everything below it was forced down. So that's why everything except the header was included in this calculation.
>> Speaker 2: So what happens if you scroll down the page?

[00:01:04]
>> Todd Gardner: It's wherever the user's viewport is. So if you start, if the user starts scrolling down before the page is done, well, like things are still loading, and things move in the user's viewport, that's a new CLS score or that's a new layout shift and will be included.

[00:01:28]
So, it's dependent on user interaction, these aren't the kind of scores. One thing, I think a lot of people get hung up on is that there's not one score here. It's not like like you can say go to this page and this page is like this is your LCP this is your CLS, and that's just definitive is what it is, it's not.

[00:01:47]
Every single time a user comes in the user is going to do different things the user is gonna be on a different device, on a different network. And they're gonna interact with the page in a different way and it's gonna generate a unique score. And so you can't necessarily go to your page and say, I ran a report and it says my LCP is one second, and that's what it is.

[00:02:08]
No, it's going to be thousands of LCP scores, tens of thousands, depending on how big and busy your site is and how many users, all of those LCP scores coming in together. And Google is gonna consolidate all of that data together and pick what is the general score.

[00:02:26]
It's going to use what's called the 75th percentile. We're gonna talk about statistics and how to interpret all this data here in a little while. But it's not one score, it's lots and lots of scores. So if your website has a user interface that it seems to be encouraging the user to start interacting before it's done.

[00:02:43]
And other things shift around the page, maybe a little bit down in the viewport, that's going to affect your CLS score. Because you've encouraged the user to look at something that's not ready to be looked at yet. And so it's gonna cause a layout shift, you need to try and be done with everything that the user is going to see and prevent those layout shifts from happening.

[00:03:04]
Ideally, layout shifts don't happen outside of the viewport either because you don't know where the user's gonna be looking, yeah.
>> Speaker 2: You might be talking about this later, but if you're doing service side rendering is this, just remove most of problems with the layout shifts?
>> Todd Gardner: No, because of resources, so client-side rendering definitely is a big cause of layout shifts, is asynchronously rendered content.

[00:03:31]
But even if you just have like a giant image, if you decide to tell the browser, hey, I don't know how big this Images, and this image takes a long time to load. When the image eventually does load, the browser will figure out how big it is and shove it into the document, which can cause a layout shift.

[00:03:50]
There's actually a subtle layout shift that happens in this page. It's not quite as good for our example of what this is. But the images itself is actually causing another layout shift because it's so big that sometimes it renders into the document layout and pushes everything around.
>> Speaker 2: Are these based on Dom elements specifically?

[00:04:14]
>> Todd Gardner: Yeah, it's based on the Dom element size.
>> Speaker 2: So if you have something that's rendering in a Canvas that is changing the- Yeah, so it's not looking inside of the Canvas.
>> Todd Gardner: So if you had a Canvas that's like 200 pixels by 200 pixels and stuff in the canvas moves and shifts around, Google doesn't know about that, doesn't care about that.

[00:04:35]
As long as the canvas is 200 by 200 and the canvas doesn't Like when the canvas is created or whatever, if it doesn't have that 200 by 200 reserved in the layout, it's fine. If it doesn't have that reserved in the layout and then it pops in, everything around the Canvas will move and that will trigger a layout shift.

[00:04:58]
>> Speaker 3: Semi-related to that, about reserved layout spots are skeletons counted in layout shifts.
>> Todd Gardner: I don't know what a skeleton is.
>> Speaker 3: I think they mean the kind of the the skeleton, like placeholder kind of-
>> Todd Gardner: Yeah, so you use a placeholder if you're like hey this box is going to be 200 by 200 in the future and.

[00:05:19]
And for now, I'm gonna put a placeholder there that reserves the space. That's exactly how you prevent layout shifts, because when you swap it out, the layout does not move around it. A layout shift happens when there is not a skeleton and you just shove in a new element, not caring what was there before, and everything has to reorganize around it.

[00:05:39]
That's the layout shift and that's the problem that we're measuring right here.
>> Speaker 3: And does CLS consider the layout shift from an iframe?
>> Todd Gardner: From an iframe, so the iframe itself, if an iframe comes in initially. And you didn't specify its correct size. Let's say you lazy load an iframe and then it changes size when it pops in, that is a layout shift.

[00:06:06]
Now, if you care about the stuff that's inside the iframe is also shifting, that's a different thing, that doesn't like bubble out.