Using the Techcrunch website as a study for Cumulative Layout Shift (Part III) – Speed It Up – Episode 10

[00:00:04] Nathan Wrigley: This episode of the WP Builds podcast is brought to you by GoDaddy Pro, the home of manage WordPress hosting that includes free domain, SSL, and 24 7 support. Bundle that with The Hub by GoDaddy Pro to unlock more free benefits to manage multiple sites in one place, invoice clients and get 30% of new purchases. Find out more at go.me/wpbuilds.

Hello. Hi, Sabrina. How are you

[00:00:38] Sabrina Zeidan: doing? Hi, Nathan. I'm doing good. How are you?

[00:00:43] Nathan Wrigley: Yeah, I'm good. Look where Sabrina is. Isn't that lovely? I'm stuck in a closet, basically. And there's Sabrina in the great outdoors. It's not a background, right? That's not some clever image. No, your hair's blowing around. Unless you've got a fan in your room and they got a really great green screen.

[00:00:59] Sabrina Zeidan: Can you imagine it's next level of Zoom backgrounds. You have a background and then it's 5D, like in movie theatres.

That's lovely.

Then something you're sprinkling in your face.

[00:01:12] Nathan Wrigley: Yeah, I'm so jealous. So Sabrina is joining us from where she lives in Spain, and maybe it's the garden or something like that. That's lovely. Sabrina is a performance expert. She's done quite a lot of shows with us in the past. We've done nine of this show, and we did a variety of other things in the past as well. And each episode is with interesting, insightful tips and tricks and tools to help you, dear listener, conquer the problems of your website, making it faster and speeding it up and all of the benefits that brings. Just before we begin, I know that some people like to drop in and make comments. If you would like to encourage your friends and relations to come and join us, that would be lovely. Send them here, WP Builds. Com/live. If they go there, then They can be logged into a Google account and use the YouTube comments, which are at the right of the video if you're on a desktop. And also you can use the little black box at the top right of the video itself, near where the WP Builds logo is, that way, over there. And if you click that, it says something like live chat or something, then you can be anonymous.

You don't have to be logged into any other account. Alternatively, if you're logged into Facebook, you have to go through this little hoop, go to wave. Video, forward slash lives, forward slash Facebook, and authorise the platform to know who you are. But yeah, one more time, WP Builds. Com forward slash life. Please share it and please make comments. Tell us where you are, who you are, all of that stuff. But we'll get straight into it, shall we, Sabrina, or is there things you wanted to say first?

[00:02:56] Sabrina Zeidan: Of course, I would like to make an overview of what you are doing here. This show is called Speed It Up Show, where we're investigating a couple of vitals issues. And the one thing we would like to do is to investigate issues on someone's website live. If you would like to suggest your website, the website that you're working on, for me to look at it in the show, could you please go to www. WP Builds. Com/s speed. There will be a form there where you can add your website address and let me know what access you're willing to give to me. It can be no access to WP admin or access to Google Search Console only. Any option will be good. Suggest your website and we will look at it in the next shows. It will be so much fun to look at someone's real website. Yeah, that's all right. This episode is the third episode devoted to the same website. It's TechCrunch website, and we're investigating specifically cumulative layout shift there. It's going to be the last one.

[00:04:20] Nathan Wrigley: You say that now, Sabrina.

[00:04:22] Sabrina Zeidan: We started the first episode. It will be... So this one is tense. So if you want to see previous two, it will be number nine and number 8. So there we started first with tools that you can use to investigate if there are issues, how you identify them, which tools you can use, In previous episode, we looked at... I just shared my workflow, how I do things, and that you can repeat, too. Here and today, finally, We will get to investigating issues specifically because now we know for sure that this website on these pages does have issues. It's not a mistake, a fluctuation in the lab tests. It's that we were able to reproduce issues that we could have seen in reports, in real users data reports, we were able to reproduce them in lab. Now, having this information that, yes, there are issues with real users data, yes, we can reproduce them in lab using such and such conditions. Today, we will try and figure out the specific reason for these issues to happen, and I will show how I'm doing this from front-end. It's all going to be from front-end. You will be able to repeat this with tools on your own.

[00:06:13] Nathan Wrigley: Perfect. We started on show eight talking about... I can't remember. Then we ended up in the tech crunch Which website? It was a cumulative layout shift still. And then two episodes went by just concentrating on that. So we'll see. Let's see if we can get through it. Shall I share your screen yet? Are you ready for that? Sure.

[00:06:33] Sabrina Zeidan: I just would like to say hi also to everyone who is watching us. And if you're watching us right now, say hi in comments as Nathan explained how. I hope you will find the way to wave to us to say, Hi, we'd love to have you involved.

Yeah,

[00:06:52] Nathan Wrigley: that'd be nice. That's nice. I agree. Now, when I raise my screen now, it's all blank. Before it had your TechCrunch website on, didn't it? But it's gone Oh, there we go. Look, that was it. Whatever happened there, I don't know. Okay, over to you. If anything crops up in the comments, I'll let you know. And also, if I have any questions, I'll let you know as well. But I'll just hand it over and let's see where this goes.

All right.

[00:07:17] Sabrina Zeidan: So I won't be repeating what we already discovered in previous episode. We will start from there. So we do know that this website has issues on desktop with CLS. We are talking specifically about CLS here today. Because if we will go to other topics, it will take us forever. It will be like a Brazilian soap opera.

Yeah, that's right.

We will focus on CLS I would like to show today how... We know there is CLS that we can replicate on desktop with certain conditions. All right. How do we understand where CLS is happening and what is causing it? It can be two different things, two different questions, where it is happening and what is causing. Because usually, the place where The place... So CLS, it's Cumulative Layout Shift, which by the name, you can guess that it's cumulative number of all layout shifts on the page. Each and every layout shift is a separate, usually, is a separate problem. They might be connected, they might be not. But we need to approach them as separate problems and try to sort out the one that is the largest problem. Say you have the number of CLS, the metrics, on your website. Here you can see it's 0.19. This will be the sum of all CLSs, of all layout shifts happening on this page. The most sane approach to my mind would be to figure out what is causing the most layout shift and try to fix the main troublemaker first.

Makes sense, yeah.

In most cases, it would be enough to pass cumulative layout shift. If you want to sleep peacefully at night, you might pick, even after passing, you might pick another one, another largest one after that and fix that too. Then you can just forget about others. If they are small, if they don't really impact user experience and so on and so forth, if you're doing this to pass chronovital, you can do only the largest one. Before diving into ChromeDev tools and details, investigation, I want to share another tool. Actually, two tools. First that one can use to see layout shift. It's called waterfaller. Dev. Let me check this website. Here you have a toggle, mobile or desktop. Let's see. I can't remember if we have issues on mobile. Let's check really quickly. Gosh, a week has passed, and I don't remember what we discovered a week ago.

[00:10:55] Nathan Wrigley: This is why the show goes on, isn't it?

[00:10:58] Sabrina Zeidan: Because of my sclerosis. They don't seem to have Not on mobile, but on desktop. Okay, let's check on desktop. Why I like this tool? Because it's very simple, it's visual, it's really easy to use. Everything has graphic interface. You don't need to dive into huge reports and be overloaded with data. It's very user-friendly. So this, while it's loading, I will share another one that I was mentioning millions of times before, but I won't be tired of recommending it. It's a web page webpatch. Org. Now, they have different... They have redirection, I think, because they were bought by Catch Point. Let me check it, Web page test.

[00:12:03] Nathan Wrigley: Yeah, it's called Catch Point now, isn't it? By the looks of the thing. Yeah,

[00:12:08] Sabrina Zeidan: interesting.

Okay, the URL is the same. It's just the branding changed. There is no redirection. Good. The thing with sketch point with the web page test is that you have to be logged in to do tests now. I'm logging in right now and I will share my screen in a minute so that we can see the results there as well.

[00:12:34] Nathan Wrigley: Okay, so that It becomes at webpagetest. Org, but it's called catchpoint. No doubt at some point that they'll flip the URL over because that's a bit weird. Okay, so we're waiting for the test results to come through. How long does that normally take? Is it a fairly lengthy process or fairly quick?

[00:12:55] Sabrina Zeidan: Actually, this whatifoller. Dev sometimes doesn't work. I don't know why. Sometimes it works, sometimes it doesn't. It's not It's a huge company. It's a one-minute show, and I'm just grateful for this to exist, so I can't complain for something I am getting for free. But just so that you don't think that the issue is on your side, if you test, sometimes this service doesn't work. But I can see that it's loaded now. Let's look at it. Show results. This is the case when it doesn't work. Analysis is complete, but there is nothing Oh, okay. Yeah, it happened to me before, but yeah.

[00:13:42] Nathan Wrigley: I'm currently running an analysis as well, so if I get something on my end, I can always show that. Okay.

Thank you. Yeah, that's all right.

We'll see if it comes through. Okay. Let's see what happens. It's gone black again. I don't know what's happened there. Your screen has gone away.

[00:14:04] Sabrina Zeidan: Because I think it's because... Just a second. I think it's because I went to another window where I'm entering the credentials for web page test. Let me Can we share really quick? It's okay. I will be sharing entire screen.

[00:14:28] Nathan Wrigley: Okay. Do you want me to put that one up? Is that

[00:14:29] Sabrina Zeidan: okay?

Yeah. Did it work?

Yeah, we've got it.

sadly, what ufollow. Dev didn't work for us this time, but this is a cool tool when it works. I encourage everyone who is watching this to try this tool, especially for CLS. I will describe it just in a few words. They make a snapshot of the view that users get, and then they highlight the errors with CLS. This looks very intuitive for someone who is not used to using Chrome dev tools.

Yeah, I see.

It will be really easy to see the CLS issues. Also, there will be a line saying, such and such div or such and such span is shifting. Then from there, you can go to figuring out why it is shifting. The same, let's run test here as The same will be here, but in less user-friendly interface, but with more details. I will do this. I will check desktop here. This is pretty much it. Let's start. While this test is running, this will take... This will take some time as well. Sorry. I accidentally

[00:16:09] Nathan Wrigley: clicked.

Did you stop it somehow?

Yeah,

[00:16:11] Sabrina Zeidan: accidentally. I'll run the same thing. While this test is running, I will start showing more complicated stuff. If we will forget about these two services, how will we investigate? Let me go back to my desktop view. We know there is CLS here. First thing I want to do, I want to open ChromeDev tools and put this doc either on another monitor that I don't have or separately so that the Chrome dev tools doesn't interfere with the image that Lighthouse is Got it. Makes sense. This will be the first thing. Then I will put, throttle the connexion, as we already know how to do. Beautiful. Next thing. To detect parts that are shifting, I will do control shift P, and then here is run here and layout shifts. Layout, Show layout shift regions. I'm going to pick these and I will reload. Have you seen it?

Let

[00:17:51] Nathan Wrigley: me Go again. No, sorry. I was staring, trying to see if my analysis on the other monitor had worked for the previous tool, but I can't see that yet. Sorry, I was looking the wrong way.

All right.

[00:18:01] Sabrina Zeidan: I just told ChromeDev tools to highlight light regions that are shifting for me, and they are highlighted with this light violet colour. I'm going to reload this page. Take a look how it's highlighted.

Oh, yeah.

[00:18:21] Nathan Wrigley: Oh, yeah, Got it. Little flash, just a wee little flash. Yes, big flash. Big flash. That was the whole page,

[00:18:28] Sabrina Zeidan: right?

So this gives us a huge amount of information, actually. We can even throttled the connexion more and see it very slowly. So if we have used whatifoller. Dev, it would tell you the biggest layout shift, like step by step. Here, it's not telling us numbers. We can have numbers from Lighthouse test from Chrome dev tools, but I rarely do it because I can't really rely on those results without knowing all the conditions. Here I can slow down and even without knowing numbers, I can see with my eyes what's

[00:19:24] Nathan Wrigley: happening.

That's a good point. Yeah, you just get an immediate bit of visual feedback, don't you? That's

[00:19:29] Sabrina Zeidan: good. Yeah.

I will reload it again and let's try together to figure out what is the largest

[00:19:37] Nathan Wrigley: layout.

So what are you on now? A 3G connexion or something?

[00:19:40] Sabrina Zeidan: It's 4G, I think. It's 4G and all full. Nice. I'm

[00:19:48] Nathan Wrigley: outside.

It was that, the whole website, including the menu on the left, but not the icon, not the logo. I don't think the logo was included.

[00:19:59] Sabrina Zeidan: Yeah. So we saw that small bits were shifting, but also the very last one bit, it's like the entire part, this part, this everything except of sidebar shifted, right? And we can conclude, here it is, and we can conclude that this was the largest shift, right? Yeah. So that will be the shift that we want to figure out first of all. And it's going to be very easy because I think, Nathan, you know the answer. What is causing it to shift?

It's

[00:20:40] Nathan Wrigley: that great big iPhone ad at the top. Yeah. it really is big, isn't it? It's a really big ad.

[00:20:50] Sabrina Zeidan: I will just shift and try to fix it. We figured it out. The largest shift is that this part, is on the top in the very beginning, and then the ad is it, insert it, and then shifts down. This is the reason. We know what's shifting and we know what is causing it. The element above it is causing it. It's going to be very easy because The problem is not only to identify, but sometimes you don't have a lot of opportunities to fix it because it might be coming from somewhere else. from plugins, from themes, you need to find creative way to overlap with their stylings. Here, it's going to be easy. Let's see how we can do it. Another thing. Here is a website. Let's imagine it's our website we are working on. Instead of going every time when we try something, go into code, flushing cash, and try and make a change, see what's happening and so on and so forth, what we can do. We are going to do it right now on this website as well. I'm not working on the back-end of this website. I am on front-end.

But even being on front-end, I can do this. I can open developers tool, and there is a tab here called sources, and then there is another tab here called overrides. I'm going to explain what I'm doing here. I'm going to save this page as it was loaded with assets and everything on my computer, and I will be making changes. It will be saved as old-school HTML, and I will be making changes to the version saved on my computer. Can you hear the

[00:22:59] Nathan Wrigley: geese?

Yeah. I was wondering if it was like a rusty swing, but then I thought, no, it will be an animal. Geese, nice. There's geese. See, unless you've got a great Zoom background with a fan and some geese in the room.

[00:23:19] Sabrina Zeidan: I'm going to edit that HTML page and see how my edits will impact. Sources, overrides, enable local overrides, and then I can go to Page. I can choose this page I'm at. I can click Write button, and here I can save as. I think save as. Now, wait a second. It's going to be... Maybe that's why.

[00:23:47] Nathan Wrigley: Yeah, it depends that. I think there's some counting system going on, but you seem to have got away with it. Every time I've loaded that page, it adds that after a while.

[00:24:04] Sabrina Zeidan: Should be over here. Sorry, I'm not sure why. So this is the content of this page.

This is the

[00:24:19] Nathan Wrigley: HTML doc, yeah.

[00:24:20] Sabrina Zeidan: Yeah. Save as overrides, should be saying here. Make a copy, delete. Let's try make a copy, but for sure it was not No, that's not it. But for sure, it was safe as local overwrite. Okay. All right, let's try make a copy. What if save as, and I will just save as a stack crunch. I'm pretty sure I was following different paths all times before. Yeah. Maybe it depends. Maybe there was some update in my Vivaldi or something.

Maybe.

[00:25:13] Nathan Wrigley: that's entirely possible.

Yeah.

[00:25:19] Sabrina Zeidan: Now, when we have it saved, It's great, hopefully. Let's look what is causing layout shift here exactly. The problem here is that this ad appears later than it should with the height is not set to it. Our task would be very easy to identify the proper tag where we will need to set maximum height. It should be maximum because for ads, usually when you have ads on your website, you know that maximum size from your ad provider. But let's see what we can get from this. You can see Chrome Dev tools, right?

I can,

[00:26:10] Nathan Wrigley: yeah. It's right

[00:26:11] Sabrina Zeidan: there.

Nice. Let's see. So this is a frame that goes into... My task is to find the appropriate container. This is not the one. Not the one, This is not.

That could be.

Might be.

[00:26:44] Nathan Wrigley: Because it did impact the menu as well, so it could be that one. I wonder what the one above it is.

Yeah, you see

[00:26:51] Sabrina Zeidan: how it said? It said margin left for the menu. It's not like floating. It's not So that's exactly the case when it might be... We know the issue. We I don't know how to fix it, but it might be tricky to implement because of the way the theme is built.

[00:27:13] Nathan Wrigley: I understand. Yeah, because you've got margins and padding and things might be... Yeah, the content might be pushed out the way of the navigation in this case with a margin on the left or so.

[00:27:23] Sabrina Zeidan: But let's try this one.

Let's try content. Here in ChromeDev tools, I can see in this part, I can see not only numbers, I can also see where they are set. If I click here, I will max width, mean height. Let's see if we have Yeah, this is the problem. Min height says 80 %.

[00:27:58] Nathan Wrigley: The minimum height is always big, basically.

[00:28:04] Sabrina Zeidan: And the problem with 80 % is that it needs to be calculated. And 80 % from what?

From

[00:28:14] Nathan Wrigley: what? Exactly. If there's nothing there, it can't... 80 % of nothing is nothing. So it has no height.

[00:28:22] Sabrina Zeidan: Exactly. So it has no height in the very beginning. Then it loads the layout of the page. It sees the height of the page or for the height of the block, and then it calculates. That's why we see this layout shift. Let's just do the easiest thing we can here.

[00:28:50] Nathan Wrigley: Content, that one. Yeah.

[00:28:51] Sabrina Zeidan: Yeah, content. Right now, it's 250. So ideally we would go to different devices and see the maximum height for different devices. If you own this website and you have access to ads, you know this number. But if you don't, you can even do this. Let's set minimum height to 250 and see what happens. this one, content, add unit. I would go to sources. I would find here add unit. Here we are. Add unit, content. What if Let's just... I will never get used to

[00:29:59] Nathan Wrigley: this.

I'm trying to find the equal sign. Yeah, in broad daylight.

I'm

[00:30:06] Sabrina Zeidan: using your keyboard and it's been three weeks already, and I'm still not used to it. It's a gaming keyboard, and I don't get

[00:30:13] Nathan Wrigley: it.

I see. Everything's in different places, is it? Oh, that's

[00:30:17] Sabrina Zeidan: fascinating.

Yes, it has much more buttons that I would expect than I ever use. Min height. At least numbers are at the same place.

That's

[00:30:32] Nathan Wrigley: good. You got to find the colour. There you go.

Yeah.

[00:30:42] Sabrina Zeidan: So this is it. Normally, we're putting it here for testing purposes. Then it will be another challenge. If it works and we know what we need to put, it would be another challenge to put it in the right style sheet so that it loads as early as possible It's possible. Ideally, you would want to put it into HTML. If you have the opportunity to put it into inline HTML, that would be ideal. Let's see how it changes. It didn't change at all. Why?

[00:31:24] Nathan Wrigley: Oh, no. There was a... Oh, no, the ad was 250, wasn't it? It did look like there was a bit there, but...

No,

[00:31:43] Sabrina Zeidan: let's have a

[00:31:49] Nathan Wrigley: I've managed to get something in my eye and it keeps watering.

I do apologise. I'm going to just keep rubbing my eye for a bit. It's got right in there, little midget or little insect or something. Pesky little thing.

[00:32:13] Sabrina Zeidan: I can see that our styles that we have just added here, they were not updated, which means that overrides.

[00:32:23] Nathan Wrigley: That is in the wrong place. So it didn't save as an override. Okay, so we've tracked down the problem.

[00:32:29] Sabrina Zeidan: Let me try. I don't really like Chrome, but let's try. Maybe it's the version, maybe it's update to Vivaldi or something that is causing issues to me.

Reject.

[00:32:47] Nathan Wrigley: You clicked accept. Yeah. Okay, let's see if this works. Okay, so if you're watching this, Sabrina was using the Vivaldi browser, and the Vivaldi browser didn't allow her to save the overrides in the way that she was anticipating for reasons unknown, maybe an update to the browser or something like that. So we're going to run the whole process again over on just the regular Chrome browser, Google's browser. And let's see if the Mind you, I suppose Vivaldi's chromium-based, it's probably taken from the same channel, but I guess they do have their own slight variations. Okay, here we go.

[00:33:32] Sabrina Zeidan: No internet, why?

[00:33:35] Nathan Wrigley: You've definitely got internet. I can see you. That's true. That's hysterical. this is why we don't use Chrome.

[00:33:46] Sabrina Zeidan: I think it's some magic going on with TechCrunch website because we are working on it. It's like three- Yeah, there. Three episodes in a row. There you go. Okay, page.

Override content.

Override content. Override content. Okay. Here we go. Here I will look for add-Unit.

[00:34:13] Nathan Wrigley: Add-unit.

[00:34:15] Sabrina Zeidan: And here is my container. Here we go. That's what I added. That's what I added in Vivaldi, right? Yeah.

[00:34:24] Nathan Wrigley: Okay, that's weird. What the heck? How did that

[00:34:30] Sabrina Zeidan: get there?

Let's see. Because they're using the same

[00:34:32] Nathan Wrigley: directory-They're probably using the same path for the saved file, All right.

Okay, so that's something. So it was saved in the right place.

Yes.

Okay.

[00:34:41] Sabrina Zeidan: And I can't figure out why it doesn't work. All right. When something like this happens, what we can do, go to overwrite. Find our website, click Write button, click Delete.

Start

[00:34:58] Nathan Wrigley: again. Start over. Okay. Yep, this is what It happens in quite a lot of my life starting again, just because things don't work. I know this feeling. All right, you can do it this time. I know you can. No. No. No, you can't. I know you can't.

[00:35:21] Sabrina Zeidan: All right, doing it again. So overrides. We are sources, overrides, page, right click, save, overrides content. I will find here our add unit. All right. Here our content style, and then we go...

Oh,

[00:35:45] Nathan Wrigley: it's gone.

Why?

I don't know. It just decided to take it away. Did you delete the file in Windows Explorer? I wonder if it knows if it's

[00:35:57] Sabrina Zeidan: got a- It should be deleting itself when I can delete. From

[00:36:02] Nathan Wrigley: the GUI,

[00:36:04] Sabrina Zeidan: yeah.

Style.

[00:36:07] Nathan Wrigley: It hates you. Chrome,

[00:36:10] Sabrina Zeidan: literally.

I'll use my laptop. Look what's happening. I don't understand.

[00:36:18] Nathan Wrigley: Yeah, it's literally deleting text that you've just typed in. I think they've decided, We're not going to allow this. Yeah, that is most peculiar.

[00:36:27] Sabrina Zeidan: Okay. No, this is crazy. Just keep I don't know what time it

[00:36:36] Nathan Wrigley: is.

Yeah, it's okay. Keep going. We'll give it another minute or two, and if it doesn't work, we'll move on. I've got the test results from the catch point service that we could look at, but I haven't managed to be able to get the Waterfaller service to work. Every time I click refresh, it just delivers me a set of blank analysis, which isn't particularly helpful. Okay, come on. Everybody link arms in the virtual world. Link them. Look, there we go. I'm reaching out either side of the monitor, virtually grab the arms. Let's see if we can circle the wagons around Sabrina. Wishing you the best of luck. Here we go.

[00:37:22] Sabrina Zeidan: Thanks.

[00:37:26] Nathan Wrigley: Live coding. Who would do it?

[00:37:34] Sabrina Zeidan: There it is I disconnected my keyboard just to take it out of the game.

[00:37:41] Nathan Wrigley: Oh, in case the keyboard was in some way interfering.

[00:37:44] Sabrina Zeidan: Yes, but it wasn't keyboard. I can see jumping and something is happening. someone else has access

[00:37:52] Nathan Wrigley: Yeah, you haven't accidentally left anything on the trackpad of your tablet or have your phone?

No. There's no goose with a mouse in the backyard. No.

[00:38:05] Sabrina Zeidan: I'm not sure what's happening. All right, let's take a look. Let's make a little break here. Take a look at webpagetest. Org, and we'll come back here in a few minutes.

Sure.

Maybe it will behave. Okay, Web page test for CLS. It can be a little bit overwhelming, but here we have Web Vitals, view Web Vitals, and here we have CLS. This can be very, helpful. I like this part, view as film stream.

[00:38:55] Nathan Wrigley: Okay. I'm following along on my screen, by the way.

[00:38:59] Sabrina Zeidan: And you can see how it's painted frame by frame.

That is

[00:39:04] Nathan Wrigley: nice.

[00:39:06] Sabrina Zeidan: Yeah. It is nice, except of that it's not showing the CLS that we saw with our eyes on our computers.

[00:39:14] Nathan Wrigley: Are you sure? Let's just move along a bit to the right. Is the ad not bigger than that? No, The ad? No. Now, interestingly, though, that ad is significantly smaller than the one that we were served.

[00:39:27] Sabrina Zeidan: First, and also, can you see that on this lab test, because this is lab test, the space is reserved. Left, the space, white space over here. That's why this goes back to my point in our previous episode that you should identify the issue first And then you should find the conditions under which this issue can be replicated, a way you can replicate the issue. Because looking at these test results, the There is no issue. Everything is beautiful, but there is an issue.

I

[00:40:10] Nathan Wrigley: have a different set of results. I'm actually looking on a mobile device at TechCrunch, and I can see on my... I could share my screen and you could see what you make of it quickly. Do you fancy doing that quickly?

Sure.

[00:40:25] Sabrina Zeidan: I just want to point out that when we are investigating issue under one set of circumstances, we shouldn't be going to another, not to mix issues, mobile and desktop.

Yeah,

[00:40:42] Nathan Wrigley: okay. That is a good point. I'll show it anyway, just in case there's any utility in it. You never know, there might be. So I have done exactly the same thing as you in that I went to webpagetest. Org, typed in techrunge. Com, and now we're looking at the film strip view But I don't know where I tripped up and ended up with a mobile view, but you can see that my view is not the typical rectangle. But you can see, if I quickly scan here, how do I get, how do I invoke that? Oh, craky. How do I invoke that bar? There we go. There's the scroll bar. You can see that in my case, it took 24 and a half seconds to load, but round about there, you can see that there's something going on. It started out as a really big gap, and then it got a little bit smaller, and then finally it ended up right there. But also at the beginning, When it was loading, look at that. That's peculiar. It went from extremely narrow to the full width. So that was at the eight and a half second mark.

So that's speaking as well. Anyway, there you go. So slightly different. But you're right, we're mixing, we're muddling up the waters, aren't we? And as they say in Ghostbusters, don't cross the streams. So I'll take that off and we'll go back to your screen instead.

[00:42:21] Sabrina Zeidan: And also, Nathan, as you already shared this and we looked at it, I just wanted to point out for everyone who is watching that there might be weird things happening during the load. It doesn't mean that you need to fix them For example, that super narrow part that you've seen, if it doesn't happen to most part of users, if it doesn't impact CLS, if it doesn't impact user experience, just forget about it, and this is it. It's the question, what we identify as a problem. Do we identify everything that we see We at this point that is wrong as a problem, or we identify the real problem with real users first. That's why I was talking about this for so long in previous episodes. We need to identify the problem for real users first and then try to replicate this real problem in the lab. And then, being able to replicate, we should be investigating the real problem.

Got it. Got it.

And don't mix in.

[00:43:37] Nathan Wrigley: Yes.

Don't cross the streams. Yeah. So am I on the wrong screen? I think I'm on the wrong screen now, aren't I? I think you were on that one. There we go.

[00:43:47] Sabrina Zeidan: I've got you. Right now, I'm on a film strip view for desktop. Yeah, I got it. For desktop. I found it. Yeah. Interestingly, we do not have that big issue here. And also, going back to the result that you just shared on mobile. There was a big reserved space first. See, I cannot be not thinking about it right now. There was a big space reserved first, then the ad was Then there was a frame with ad served, and then the content shifted. It means that on mobile, they have the opposite, the problem that is opposite to what they have on desktop.

It's too It's big and then it shrinks.

Yes. Okay. They do have reserved space, larger than it should be.

[00:44:42] Nathan Wrigley: It's interesting because I'm guessing the ads are fairly dynamic, because what I can see on the different ways that I've loaded it is that sometimes the ads are probably like 90 pixels high, which is a typical ad unit height. But the one that we saw earlier, the iPhone one, was 250 high. Maybe Apple are prepared to pay more or they just occupy a little bit more in place. But it's curious that a website that big don't have something in place to figure out what ad they're about to serve. I don't know if that's even possible, but it definitely is a problem. And when I use the TechCrunch website on my And on the phone, I very often, by the time I'm putting my finger to the link, it's gone. The whole thing is shifted up. And that rings with what you've just said, because usually the link has gone up. So that is exactly what we were seeing there. The space for the ad block has been provided, then the ad turns out to be smaller, so it shrinks, and then the whole thing goes up underneath it. That's a curious thing about the need for ads, isn't it?

It spoils the experience for all of their valuable readers, but it's the way that they make money selling ad space.

[00:45:57] Sabrina Zeidan: They wouldn't exist without it. So I'm just looking that We have 10 minutes more left. No, we won't be doing... I don't think we will be doing-We can't do a fault. For tech crunch only. But I want to point out the way of approaching to fixing such issues. You said, Isn't it possible to figure out the size of ad in advance? Some Sometimes it might be possible if you only set your ad network to be serving the certain size. It might cut the revenue. That's why no one is doing this. The solution to this might be It might have different implementations depending on your setup, but the approach is the following. You set the maximum height that you get as reserved space. Then you try to pretend that what is there, it's by design. Your mind?

The main thing here is to try not to make it very obvious to user, obvious in the way that it looks ugly by colours. For example, Sometimes the background might be of different colours, and then you can see that something is definitely missing by a line. If you align this ad in the centre and in the middle of div, it might help. If you don't know, and you don't know the size of the ad that will be served, you have to reserve space for the largest one, and you can just centre what you get. In a way, it fits in your design better.

Oh,

[00:48:11] Nathan Wrigley: you mean so centre it vertically?

Yeah,

[00:48:13] Sabrina Zeidan: vertically and horizontally. For example, if you look at this screenshot, if we centre it, right now it's centred in centre. It's aligned in centre. It looks ugly. If we would align it on left side, it would look like it's a part of design.

Yeah,

[00:48:36] Nathan Wrigley: I know what you mean. So centre it, so justify it to the left, but centre it vertically.

[00:48:45] Sabrina Zeidan: Centre it vertically for height, and for widths, it depends on the design. Yeah, of course.

[00:48:54] Nathan Wrigley: it's not going to be perfect, is it? Do you know what would be nice? Do you know what? I've just come up with a novel idea. I haven't come up with a novel idea. Wouldn't it be interesting is if, let's say that the ad got served and there was a piece of JavaScript or something which realised that there was a bit of cumulative layout shift about to occur, and it did it very slowly. So it reduced by a pixel or two every, I don't know, 10th of a second or something. So it slid up gently instead of all

[00:49:28] Sabrina Zeidan: in one going.

The ground music is playing, smooth background music.

[00:49:36] Nathan Wrigley: That's right. Yeah, you could have that as well. I'm loving it. But the interesting thing is when I've used the TechCrunch website, the fact that my finger goes and the whole thing moves in a heartbeat, then I miss the link, and that's infuriating. Whereas if the whole thing were to just slide up very fractionally over a period of a few seconds, I probably wouldn't miss the link because it'd only be a little pixel out of line by the time my finger got there. Does that make sense?

[00:50:13] Sabrina Zeidan: It does. I even would like to develop this thought more. Why? Imagine we do it. It's slightly moving. The thing with web browser showing us pixel is that Why a layout shift happens? Because every movement is a repainting.

If we have one big jump from here to here, it will be one repainting.

If we have smaller jumps, it will be 100 small repairments.

[00:50:54] Nathan Wrigley: It's not a good solution.

[00:50:57] Sabrina Zeidan: I don't know. I genuinely do not know because From what I'm just thinking right now, each time it will be repainting and it will be taking resources from main start and it will be utilising CPU and RAM for these things. But I don't know, there are browser games.

Yeah.

There are games that you can play in browser. It means that some things can be done in the way they are both efficient and smooth.

[00:51:39] Nathan Wrigley: Yes, I see what you mean. Yeah, it is possible with, I would imagine, modern JavaScript to do something like that. But anyway, there's your homework for this week, Sabrina. Come up with a solution for content layout shift, specifically for the TechCrunch website, and then you can approach them and sell it to them, and their problems will be over, and you will be incredibly wealthy.

[00:52:02] Sabrina Zeidan: Yeah.

[00:52:02] Nathan Wrigley: Okay. Do you think we're done for today, or is there more you wish to say?

[00:52:10] Sabrina Zeidan: Because we already were looking at it, I just can't help not saying it. Just let's look at our page test result Can you hear me again?

Oh, yeah.

Here, it's over here.

There it is.

It's over here. I just want to bring attention It doesn't relate to CLS and to the topic of today's show, but this is an example of what we were talking before. When what you think is largest contentful paint on your website and what two lab tools might think of it and what it really is by Chrome user experience report. It might be three different things. Look, this lab test, and this uses Lighthouse as well. This lab test assumes that largest contentful pain, the main element on this page is this pop-up.

Interesting.

For numbers that you would see in this report, for this very test, they would be for this element, while clearly, largest continentful paint here is this image or maybe this text. Sometimes The ad can be recognised as largest contentful paint. But this is probably a topic for another show, maybe the next one. Ideally, what we as developers and we as owners of the website, as marketers of the website, want to introduce to people as largest contentful paint, what we consider to be the main thing on the page. Ideally, it should be the same as it appears to them. If you would ask visitors of your website, What is the main thing on this page? They would pick the same thing that you intended to be the main thing. Ideally, if it's reflected in the reports as well so that by real user's data, Google assumes that largest content will paint is what you designed it to be and not something else. Like here, where we have cookies or what is that? A small pop-up in the bottom of the page counted as large as content will pay.

[00:55:09] Nathan Wrigley: we had mixed success there today, didn't we? We had gremlins in the system, just prevent the weird Vivaldiness and services deciding not to give us any data. How dare a free service not provide us valuable data. Never mind. It was useful anyway. I actually saw some stuff in there that I hadn't used before. I haven't done the saving of the file in the way that you doing there. I've learned something, nevertheless, despite the technical gremlins. Are we back next week? Are we doing next week as well? We'll have something else to say.

[00:55:44] Sabrina Zeidan: Of course. We'll be back next week. If you have a website to suggest, please suggest it through the form that we have on wpbuild. Com/speed. I'm thinking, wouldn't it be nice to talk next week about fake LCPs? If you have an example of the website where you have LCP counted as not what you intend LCP to be. Interesting. This website for the next episode, it would be nice to see a live website with this issue.

[00:56:19] Nathan Wrigley: I'll keep my eyes peeled, see if I can find one that does exactly that. What I think we should do next week, though, is I think you should be holding a goose during the episode whilst trying to navigate the mouse and the keyboard just for comedy's sake, just to see. Don't actually do that, by the way. I was joking. Please don't bring a goose that way. It might not work out. Okay, that's it. We're done. We'll be back next week. It'll be same time. It'll be Thursday, 3:00 PM UK time. Is it the same time where you are? Is it now coming up to four? It's four o'clock. Yeah, so it's basically the same time. That's handy.

No, it's 4:00 PM when we start for me.

Okay, so it's five o'clock now. Look how bright it is where you are at five o'clock. It's four o'clock here and it's basically pitch black. I need to move to Spain. I can see it's on the cards. that's it. we're going to go. We'll be back next week, 3:00 PM UK time, every Thursday for the Speed It Up show with Sabrina. There she is with Sabrina Zidane. See you soon. Thanks, Sabrina.

Thank you, Nathan. Bye. Thank you, Nathan. Bye, bye, bye, bye. Thank you, Nathan. Bye. Bye.