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

What are we learning about today?

Joining me again today is performance expert Sabrina Zeidan. She specialises in speeding up WordPress websites. Sabrina will be sharing valuable insights and practical tips to find out what’s slowing your site down, and how to fix it.

In this episode, Sabrina explores how the Techcrunch website can serve as a useful way of exploring Cumulative Layout Shift.

This episode delves into the importance of understanding specific user experience conditions, reliable testing, and precise fixes for website performance issues. Sabrina shares her expertise on identifying and resolving Core Web Vitals issues, discussing essential metrics, updates, and practical methods to assess and enhance user experience.

You’ll gain valuable insights into leveraging tools like “treo.sh” for performance testing and the Chrome extension “Web Vitals,” essential for optimising core vital metrics to optimise website performance and drive business success.

The episode explores the impact of user experience on website performance and its direct correlation to revenue generation, underscoring the need to prioritise and optimise for the most impactful user groups.

This episode is a must-listen for those committed to enhancing user experience and maximising the impact of their online presence.

In the future, Sabrina will be analysing user-submitted websites for free during the show, so make sure to visit wpbuilds.com/speed if you’d like her expert evaluation.

As always, remember to share this episode with your colleagues and friends who are interested in improving their website speed. Let’s dive right into our conversation with Sabrina Zeidan on how to ‘Speed It Up.’

Mentioned in the show:

treo.sh

Web Vitals Chrome Extension

Overview:

[00:00] Sabrina has worked for various companies.

[06:10] Reviewing submitted websites, focusing on layout shifts.

[07:00] Commenters welcome to share URLs during live.

[10:53] Check competitors’ websites, use Google Search Console.

[13:15] Chrome extension measures core web vitals precisely.

[18:48] Mobile version keeps design consistency, unlike desktop.

[22:47] To improve website performance, use relevant lab tests.

[25:06] Testing web speed with various connection speeds.

[28:52] Analyzing website for problems and replication.

[32:18] New information on page reloading location in Spain.

[34:37] Choose mobile or desktop, then analyze data.

[38:22] Focus on US customers, then expand globally.

[42:05] Improve user experience, boost potential revenue.

[45:38] Ensure user experience mirrors location, utilize Google Analytics.

[49:49] Interrupted live call, will resume next week.

Read Full Transcript

[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/builds.

Hello. Hi there, Sabrina. You went away there for a moment, but you're back. we're having technical fun, in the background here. Sabrina's, video keeps going off, so if, that happens, I'm gonna have to, Bring out the guitar or something. I don't know. we'll see how we do, but how are you doing, Sabrina?

Happy New Year. I know it's the 18th of January, but I haven't seen you for since 2023. How's life?

[00:01:06] Sabrina Zeidan: thank you. I'm doing good. I'm back to Spain to my, to Mikasa without electricity and water, but with internet signal.

[00:01:15] Nathan Wrigley: How's the internet signal being provided? Is it still mobile phone on the outside of the house with a ditch?

[00:01:19] Sabrina Zeidan: It's mobile phone and I made an, a antenna. Yeah. to amplify the signal. So it's, it works pretty

[00:01:28] Nathan Wrigley: good. When, you say you made an antenna, what, do you mean? You like, got some foil or something and shaped it into a.

[00:01:34] Sabrina Zeidan: No, I took the coex, cable and you put one side, you do a small thing to catch the signal, okay?

And you put one thing to the place where the signal is present and then you put another part of that cable, into the house where the signal is not present and it just works as TV antenna Without electricity. You don't need electricity to amplify the signal. That's what I did.

[00:01:59] Nathan Wrigley: Genius. Wow. Okay. we, that's a whole new thing.

We could be talking about cabling. I think I'm gonna start another podcast all about cabling and antennas. That sounds great. But I'm so glad that you are back, safely in your house in Spain. You've had quite a fun. Couple of, I don't know, maybe a month or so. You've been all over the place, haven't you?

do you wanna get into that for a moment or maybe

[00:02:24] Sabrina Zeidan: not? I just went back home to Kiev because I love being home despite of the war. I just love being at home and I spent winter holidays in Kyiv and it was happy time despite of air rate alerts and bombing and everything. But now I'm here and I'm happy to be back as well.

[00:02:43] Nathan Wrigley: Oh, nice. Okay. thank you for joining us again. So this show is called Speed It Up. The endeavor really is to take little bits of, websites and analyze them. Sabrina obviously has a lot of credentials in this area. She is a speed optimization expert. She has a plugin called Speed Guard. She's worked for lots of different companies, including, WP Rocket and a variety of others.

And In the past, we've looked at various different things that have cropped up. Some of them user generated, some of them not user generated. on that point, if you would like to submit a site of yours, we, haven't really done too much of this, but it would be quite nice if anybody's watching this and thinks, do you know what?

I've got a site, and it would be nice to let Sabrina cast our eye over it. Go there, go to that url, wp build.com/speed, and the form will take you. Really seconds. It's very brief. just to give Sabrina an idea of the URL and what it is that what level of ownership you've got and how much access you're willing to give Sabrina.

So that would be really, good. WP Builds.com/speed. if you are watching this and you want to make a comment, we would love that. That would be fabulous. it really makes. The whole show. go really well. I just think the whole thing's great. The easiest way to do that, 'cause I don't know where you're watching it.

'cause it goes to all these different platforms. It's wonderful, this technology, but you kinda get lost in the spaghetti of where it's being broadcast. Go to WP Builds.com/live and if you look at the video at the top right of the video is a little black button that says live chat. If you click on that's in the video, it's not at the side of it.

you can comment without being logged into anything. Also on the side of the, video is YouTube comments and if you want to comment and you're looking at us from Facebook. You'll be anonymous unless you do this. Go to Wave video slash lives slash Facebook and give us your permission. not us.

The platform that we run this video on, it gives them the permission to know who you are and what have you. And it looks like we've got a couple of comments. Oh, that's nice. Thank you so much. We've got Mike, cotton joining us seeing saying Happy New Year, Nathan and Sabrina. That's lovely. See how much we've.

Cheered up just at the, arrival of a simple comment, how far I'm feeling extraordinarily happy now. Kami McNamara is joining us as well. She says the hat is back. Yeah, I've decided the hat is now the thing I'm doing the hat. I'm sporting the hat most, most of the time. it's tough to sleep in it though 'cause it's got this brain and you end up with your head in the air.

So I hope your family is well. Sabrina, do you want take that one? Do you wanna Yeah.

[00:05:34] Sabrina Zeidan: My family is well, thank you very

[00:05:36] Nathan Wrigley: much. Very, nice. and we also have WebLogic, formerly a media hosting, fellow Britt here. Nathan, very nice to have you on the show. Tell us where you're at if you wish to do that.

And we've got Michelle joining us all the way from San Diego. what she may not be in San Diego. how do I, know? hi Sabrina. Hi Nathan. Excited for another show to speed up our sites. Yeah, me too. But what have we got then this week? Sabrina, what are we gonna do? I think we're picking up where we left off in December.

Right?

[00:06:10] Sabrina Zeidan: we had a few websites, that were submitted to us, and then I looked at them live, at the websites that someone submitted and wanted me to look at. But, we didn't have, Such website in our previous show in previous year, and we started to look at the website, tech Crunch website and discovering it and we didn't finish.

So today we will continue with Tech Crunch website and we'll look at. Cumulative layout shifts happening on this website. It's a beautiful example of cumulative layout shifts happening on this website. And we'll look at it. I'll show from the very beginning how we look at it, what tools they use, how we can identify what is the reason, and we'll look at this website today.

Great.

[00:07:00] Nathan Wrigley: just a thought, if anybody that's joining us live, wants to chuck into the comments or website, Sabrina's so good at this, I bet she'd be able to do, do something, off the cuff live. I don't know. I'm dropping her in it there, but, it's, it, you never know if you wanna drop in a URL and not go through that form and you're watching this look, you see she's.

Totally up for it. How fabulous is that? but let's start with TechCrunch and see if anybody has the courage to drop a URL in there. and if not, you never know, we might have a shorter episode than normal, but, am I ready to share your screen? Shall I go for it? Sure.

[00:07:37] Sabrina Zeidan: Okay. I'll just remind, I'll just remind what we are doing here.

So this all about performance optimization, specifically for core web vitals. And core web vitals consist it's core web vitals. It's a number of metrics introduced by Google to estimate your website performance, how well it's, treats. Users and how well it delivers good user experience to users. in terms of performance, right now, core world vitals consist of largest Contentful paint, LCP, which is, responsible to show how fast the main content on the website is loaded.

Then there is another matrix called CLS cumulatively out shift. It's. It means, it's meant, to demonstrate how stable the picture is, so how stable the elements are so that it doesn't happen that you click on the button and you accidentally click on the ad and you find yourself on another website.

This happens, this cumulatively I shift and we'll look at it today. And then there is another third metrics, first input delay, which is responsible for. interactivity and soon first input, delay in March of 2024 will be replaced with INP. It slipped my mind. How, it's transcribed,

[00:09:09] Nathan Wrigley: but what the acronym is.

Yeah. Okay. Yeah,

[00:09:10] Sabrina Zeidan: yeah. but, it'll be more informative for us to look at INP starting from March because it'll give more information on how interaction happens on the website. First input delay is, responsible for the first. interaction only. And this new metrics, INP, it'll be showing how all interactions are happening.

We'll take, a look at the websites with those issues, maybe late in the future. But today we're looking at cumulatively sheets and we have a website, winner.

[00:09:44] Nathan Wrigley: can I just interrupt 'cause I've had a question? Sure. Which might be perfect for what you've just said. And it's Mike. thank you, Mike.

he's asked regarding. The suite of things that Google does. Core web vitals. Here's a question. How long does it take? Does Google gather data before showing core web vitals on the page? Speed insight tools? Now, you may or may not know the answer, but

[00:10:06] Sabrina Zeidan: I'm gonna, they, claim it to be 28 days, but in fact it's a little bit, shorter period.

So if you check it in three weeks. It'll be already updated. And I see it depends on how attended the website is. So it's if it's a large website and you go to Google Search Console. so what in Core Web vital section on the page, speed Insights comes from, Chrome user experience report and the same very data.

Girls to Google Search Console, but there you have more detailed, information about it. So if, page speed insights, this section, core vitals, it's just an overview. It's just to check, slightly the website, especially when you want to check competitors and websites that you don't have access to. But if it's your website, it's much better.

Go to Google Search Console, and there you will have this, the data from the same source, but it'll be more detailed data and sometimes in the attended, in popular websites where there is a lot of traffic and data is updated rapidly. I can see changes when I do changes on the website to improve core vitals.

I can see them within a week, but they claim it to be 28 days because for, unattended, sites with, low traffic, it's more realistic

[00:11:36] Nathan Wrigley: number I. Okay. And, web Logic has made the same sort of point. He says, Mike, don't quote me, but I think it's based on the volume of traffic. So that's definitely a A component, but you will get that information, even if not. And then, sorry. And if it's not heavily visited and then Kami told, tells us what A IAB is the Interactive Advertising Bureau. Is that what you meant? No,

[00:12:00] Sabrina Zeidan: no,

I, no.

[00:12:02] Nathan Wrigley: no. Okay. Oh my gosh. Keep trying, interaction

[00:12:05] Sabrina Zeidan: to next paint.

Interaction to next paint. Thank

[00:12:09] Nathan Wrigley: you. But I now know what IAB is, so all is good. I was, I was just saying to my wife this morning, I wonder what IAB means and. There we go. We've now found out, and, hi Elliot. He's just joined us as well. And then I've got a question here which we can raise at the end all about a particular plugin, called WP Ultimo.

So let's, put, that to one side and, go for it. Here we go. Cumulative layout shift on the techcrunch.com website.

[00:12:40] Sabrina Zeidan: Alright, so I'm opening this website right now and you are looking at it too. from the very beginning, I'm in Spain right from the very beginning. I see that there is a, popup, telling me something, about cookies probably.

Yeah. It's telling me something about cookies on this website. I don't think, let's reload and check. for starters, look over here. Over here I have chrome extension that is called web vitals. it measures core web vitals on load. It's lighthouse that we have in Chrome development tools, but I would say it's more precise because it uses your connection, your server, your browser.

It's not. It's still lab data because it collects data from your session, not from the session of users on the website, but playing with settings or in your browser throttling the connection and changing, the resolution. I will show it in a bit. you can get approximately what. You can get more specified information on what you, on, what kind of experience your user users are getting on the website.

And this extension shows you the current numbers and how they compare to core web vitals data for real users. So here, for example, let me just reload it for a second. Okay.

Oh, it's not asking me right now about consent. Alright.

[00:14:29] Nathan Wrigley: Okay. they've, managed to gather that you've consented subliminally. Yeah. Yeah. I, find this quite a lot actually. that doesn't, there doesn't ever seem to be a perfect pattern for them showing it to you. Like I, I will go back the next day and they'll show it to me again, and then sometimes I'll visit weeks later and I don't get things.

So I don't know what, mysterious reason is there, but that's anyway. Yeah, it's gone.

[00:14:55] Sabrina Zeidan: So I, I just reloaded the page. I'm viewing this website from the desktop, right? And I don't have my connection throttle right now. And let's look what, results I'm having here in web, in, in, web vitals extension.

So lashes content tool paint, it says it's fine. Okay. Cumulatively out shift it says it's not fine. It says that, it needs some help. But look at these details. It says, your local LCP experience is such and rated good, and then it compares what you've just got. Real user experience on your website.

83% of real user digestable experience on this page rated good. So for me, if search console. Which I usually have of course. But let's pretend that I don't, and I'm, for example, I dunno, looking at competitor's website or I'm doing show like this. Yeah,

[00:15:59] Nathan Wrigley: let's pretend that. Yeah. Yeah.

[00:16:02] Sabrina Zeidan: so for me. This would be a sign that I don't really need to investigate LCP.

It's fine. And then I look at cumulatively achieved and it's marked as needs improvement. So my next step will be to verify is it bad for me only, or this experience correlates with the experience real users have on this website. Okay. And look what it says. It says, your LCP experience is such and rated needs improvement.

27% of FRA users decal, CP on this page were also rated needs improvement. This is a sign for me that I need to investigate this matter because, we have, so how core vitals assessment works if, 75% of users have certain experience. Say good experience. The metrics will be marked as past, if less than seven.

So if 75% of users of the website in all sessions on this page, have good experience, the page will be marked as past. If less than 75, it'll be marked as, its results. So in this case, it's more than, less than 75% of users receive. stable picture. That's why we have this. So it's a sign for us to investigate CLS on this page.

I will get to CLS in a second. Okay? Right now I want to show how we can do the same file. So I'm opening my Chrome dev tools. I was showing this in our previous episodes as well, but it was a long time ago. I'll, I will just remind everyone how to do this. I'm opening Chrome, dev tools, CTRL Shift. I on, I'm on pc.

on Mac. It'll be a little bit different, but the principle is the same. You go to Tive Tools. so I'm opening those and here I can toggle the device. And I'm going to toggle it to iPhone and then in the network tab, I can throw to the connection and I will throw to the connection to fast 3G. That is what's used usually for lab tests

[00:18:29] Nathan Wrigley: for some reason that I can't explain, we can't see those dropdowns, but in previous episodes we could, but it doesn't matter.

But basically at the top of the screen where it says custom. Can you see now? Yeah, we can. That's great. Thank you. There's alternative way of getting around the same thing. Okay. That's perfect. Thank you.

[00:18:48] Sabrina Zeidan: another thing to keep in mind, so right now I'm looking at mobile version of the website and I've put it my doc, this, chrome development tools over here on the side.

And it's fine for a bile because it doesn't interfere the The PO position, not position, but ratio for mobile. But if I do the same for desktop, let me show you. okay. So I am. Reversing everything that I've done before. I, have my, desktop version of the website open, on my laptop, and if I put Chrome Development tools on the site, it will change the way I see the desktop version of the website.

That's why I never do it like this and no one should because it changes the way this page is loaded. So to. Alternatively, I can put it on the side like these.

[00:19:50] Nathan Wrigley: So it doesn't Ah, that's interesting. Yeah. It's harder. Harder for us, but it gives you the right, yeah. Yeah. Yeah. That's good.

[00:19:56] Sabrina Zeidan: But this is not ideal option as well because it doesn't ize it.

Its widths, but it resizes its height. So the ideal option to investigate desktop would be easy to put it as a separate window, which is not really convenient, but better to put it on the separate monitor. If you have two monitors, you put the website that you investigate on one monitor as you see it really as people see it, and you put the Chrome development tools on the other monitor so it doesn't interfere with the experience.

Got it. So now I will switch to mobile view and show what I'm doing on mobile. I'm doing this and now I'm switching. I'm toggling the device over here. Here, I have a range of devices. Yeah.

[00:20:51] Nathan Wrigley: That's the bit that we can't see. We can't see the re we can see the result when you click on one, but we can't see the dropdown, but that's fine.

We can see the result and that's all that matters. But there's a whole bunch of devices there. Yeah.

[00:21:02] Sabrina Zeidan: Alright, so a few words about this devices, some of them are preset in the browser. For example, for, example, motor 4G was preset. in the browser, but some of them you can add, yourself, you can add custom devices, and that's what I've done.

I've added, I formed 12 PRO as custom device and I am using it to test, to test performance on mobile, and you can do the same. finally seeing about Motor 4G, it goes to sites. So page speed insights. I will just, remind that core web vitals is real user data and page speed insights is lab test.

it means that some distant computer or mobile device loads from unknown location with unknown speed your website and gives you the score. That's why page, that's why page speed insights. Are so unin, informative, unrelevant, and doesn't give you anything to work with because the tests are run from.

Location that doesn't correlate with your real users from devices that have no relation to your real users. For example, device that is used in page speed insights to run mobile tests are more, is more 4G G four, it's an old phone. Yeah. Like seven, eight years. Yeah. Yeah. 10 years. I dunno.

[00:22:43] Nathan Wrigley: It's really old. Yeah, it's a long, it's an old one. It really is an old one. Yeah. Yeah.

[00:22:47] Sabrina Zeidan: that's, I dunno, maybe some websites get some users using phones like these, but chances are that your website, doesn't have people who are using such old devices and also page spin and says Throttle's connection to slow 3G.

And together these two points will always give you lower performance scores that lower performance numbers than they actually are. Okay. so for real tests, like, more relevant lab tests like this, I would recommend to set up your own, mobile device. And ideally I do this for my clients and I do this for various websites, right?

But ideally if you do performance for your own website or for few websites that you own, for example, I would go to Google Analytics, look. Which devices, which mobile devices your visitors are really using. Look at the resolutions that they're using and then set up custom device here, according to that data so that your lab tests are as close as possible to field data, that you have.

Thank you. Okay, so I have iPhone 12, checked here, as an option, uhhuh, and now I can go to network. And here you can see no throttling, so I'm using 100% of my. In the middle of nowhere in

[00:24:35] Nathan Wrigley: Spain. Connection. Yeah, it's actually throttled quite a lot already. it's what is No throttling is quite throttle.

I get it. Yeah.

[00:24:42] Sabrina Zeidan: Yeah. But here you can set the limits too. And here you can customize things as well. So for tests, I would set fast 3G. This is. Preset in the chrome, development tools. But I also have these custom settings for 500 kilobytes for 100 kilobytes. Wow. And for cable, five, megabytes, I use cable, five megabits to test, desktop versions of the websites because in most of lab tests, that's what is used and that is like.

Semi average speed that users have, but I use, and we'll be using this today, I use these 500 kilobytes and 100 kilobytes in the cases when I need website to be loaded very slowly so that I can see the things that are happening in the real order so I have time to understand what is happening. Okay.

So right now I am doing just tests. I'm not investigating. Now I'm doing a test. I set up mobile device. I set, I will set up the, connection first 3G. Okay. And I'm loading this website. Let's see what's happening.

it's slow and slow.

[00:26:13] Nathan Wrigley: It, can do that. This website.

[00:26:16] Sabrina Zeidan: It is loading slow. This is a pity. Alright. We are almost there. You

[00:26:27] Nathan Wrigley: can actually see the waterfall being generated. You don't normally It's normally over here. Yeah. Yeah. Yeah. It's actually moving in real time. I've really noticed that before.

'cause normally it's like just on, I don't throttle my own internet connection.

[00:26:43] Sabrina Zeidan: Alright. Okay. So it's loaded. Very good. And we have data here. So it says that we have issues with LCP. Alright, may it look like that? And we don't have issues with cumulative layout shift, but let's look how it reflects the real user experience, iCal CLS experience such and such. And rate good. 64% of real user desktop CLS experience.

On this page, were also rated good. This is important. Look, 64% were rated good, which means

[00:27:21] Nathan Wrigley: quick maths.

[00:27:23] Sabrina Zeidan: 30 36. 36% were not rated as good. So for us, it'll be the sign that we do have issues with CLS on mobile desktop or on mobile device, but we didn't replicate them

[00:27:42] Nathan Wrigley: here. Interesting. I wonder, Sometimes what I've noticed, I'm a frequent visitor to this website, so I have some insight into what I see repeatedly. it's often to do with that ad at the top. The, ad on this occasion is fairly benign and quite, it's not very tall, is it? It's quite short. Whereas quite often the ad is a great big square.

and so it's taking up about a third of the screen. It seems that their ad networks, I dunno quite why, but their ad network seems to deliver that when most of the content has loaded. So you are about to click on an article and then the ad. Pops up or loads and everything moves down. And so many times I've ended up either clicking on empty space or, entirely the wrong article.

Yeah. but that ad if it's smaller so it's not moved anything quite as much. So I wonder if they've either changed their ad distribution network or they've just, this random page load got a rectangle instead of a square. Dunno.

[00:28:52] Sabrina Zeidan: look, with these, feedback from you, we have kinda, insider information about the website.

Let's pretend we don't know that and we just, examine the website Sure. And trying to understand. So the very first question for us to answer about any website if there is a problem. And if there is a problem, how do I replicate it? So now we are trying to understand if there is a problem, and yes, there is a problem because even though this lab test is showing us that our experience is good, there is a problem because only 64% of users get good experience on this.

Webpage it, it means this, 36% of users get problem on this website. So the answer to the first question would be, yes, there is a problem with LCP on this page. Now our question is how do we replicate and the easiest way? So right now there was no issue. We didn't, manage to catch it. Let's reload the page.

I will just make our life a little bit easier and I will take away the throttling because, it's just drives me crazy.

[00:30:09] Nathan Wrigley: Yeah. I wonder if that's, I wonder if it's compound throttling. what I mean by that is I wonder if the browser in conjunction, it wouldn't be, it would be, or it wouldn't be. It shouldn't be.

Okay. okay, great. It

[00:30:23] Sabrina Zeidan: shouldn't be, it shouldn't be throttling onto what is said there. yeah, Okay. Despite of what connection you have. Yeah. Yeah. Got it. Let's try, I just put cable, five megabits. Let's try and see. so in cases like this, I will be reloading page, a few times to see if I can reproduce the issue.

Let's see. Do you

[00:30:48] Nathan Wrigley: do that? Do you do that right at the start of when you begin analyzing? Do you just reload and just take a little visual scan of what's going on?

[00:30:56] Sabrina Zeidan: Yeah, that would be the very, so if someone, comes to me, that would be the very first, the easiest step that I do. Exactly.

[00:31:03] Nathan Wrigley: Yeah. Yeah.

[00:31:05] Sabrina Zeidan: But then I get access to Google Search Console, and from there I have much more information. Yeah. Yeah. Okay. So I reloaded and now there resellers. See, yeah. another point, another thing to know about CLS is that sometimes CLS happens when you have slower connection, but it doesn't happen when you have fast connection.

Yeah. So throttling the connection in most of cases would eliminate, would, kinda highlight the CLS if you have it. And, in our case. It wasn't the case. We saw the CLS even when we took away the throating, right? This gives us another piece of information because everything about performance is about investigation and.

Riddles. So this gives us another piece of information. So it doesn't really depend on the, on the, how fast the connection is. This is a good thing and we can replicate it without throating the connection. Alright, this gives us another part of information. Both times I reloaded this page being in the same location in Spain.

But I will show what we can do also before going to this. So sometimes, I won't be seeing CLS from where I am located from Spain, for example, but I might be able to see it from another country. So say part of the users of the website allocated. In the United States and only that part of users might be having CLS.

How we can investigate such cases and how we can get to know that this is happening. The super easy way to give us idea of such things is to go to the website trail. Ssh nice. And run there free and quick test. I'll put our domain here and it'll show me detailed information about the website months, like during months, by every metrics, but also by geography.

Let's look. Let's look at geography first. Alright. nice look. How interesting. So this website

[00:33:51] Nathan Wrigley: is definitely optimized for Europe and North America, haven't they?

[00:33:56] Sabrina Zeidan: Yeah. So this website, look over here first. We have devices chosen here, all mobile and desktop. Okay. Usually I would switch right away to the one that I'm investigating.

Let's switch to a bio as we already opened it. We do have issue with desktop as well, but we cannot be solving two issues at one, at the same time. We need to solve them. One by one. I have a fireplace next to me with, logs burning. And I'm

[00:34:28] Nathan Wrigley: keeping an eye. Yeah, no, it's fine. You don't want the house to burn down.

You've only just got it.

[00:34:37] Sabrina Zeidan: So here we can choose mobile or desktop. I just used mobile and now we see picture, the picture only for mobile devices. And here we can choose right now it slash control full paint. I'm choosing cumulative layout chief because it's the one that we are investigating right now. So this gives us some information.

Look, cumulative layout chief in December, 2023 was fine for the US and it wasn't fine for Europe and many other parts of the world. So when someone look at this map and have this information, what is your next step? What you are supposed to do with this information? should you, investigate? Should you, get VPN and investigate from every single part of the world and try to fix things for every part of the world?

You can, but actually you don't need to do this. On this stage, you would go to Google Analytics and look from where the most of your customers, the most of your visitors are coming from. And if it's news website for example, like Tick Crunch, you would look because there are few types of websites, the websites that.

leave from advertising. That care about traffic. And there are websites, they don't really care about traffic. They care about conversions and, money sales. So for content websites like TechCrunch, it'll be very easy. You just go to Google Analytics, look from where your customers. readers are coming from and you try to optimize to first few countries in your list.

So say it would be US NGK, two countries, taking 90% of your traffic. Make sure that your website is good, accessible, available is performance. It passes revivals for those. Two for 90% of your users and. It's good enough, but for the websites that sell something, it won't be that easy. You would probably consider them.

Okay. You can have, there are different types of traffic, right? Some people come into your website through informative requests, they do, they look for information. In the web and they can come to your website. Let's do it with an example. For example, I have a, a, recipe website, and I don't really care from where people on the globe will be reading my recipes.

But if I sell something, for example, I sell. local courses, local academy in my town, I, and that this is my revenue stream. Logically, I would care the most about the people who yeah, I'm selling to. So if you are selling something on your website, you should be carrying not only about. Bear numbers of visitors, but that group of users that bring the most revenue to your business.

For example, someone comes, for example, it's a store that works in US only. There can be a lot of traffic to that store from other countries coming to read some articles, blog posts, to read some manuals more maybe or something else. But if you sell only in the US, you should be caring about those customers the most.

After you took care of those, you are welcome to take care about everyone else. But those should be the pro priority. So you open Google Analytics, look from where your traffic and your most valuable traffic is coming from, and then you open this map and you, compare one to another and decide. To which country you want to optimize.

Now, it might happen that after you fix the issue for your target country, for a target region, it might be the same issue that was happening For others, it might be that one, but it might be not. So I would recommend to fix issue, for the most valuable part, group of your users, and then move on to someone else.

[00:39:32] Nathan Wrigley: Can I ask, is, Trio, is it a paid service or is it a

[00:39:36] Sabrina Zeidan: no, it's a paid service. Oh my gosh. This fireplace is really heating.

[00:39:43] Nathan Wrigley: Oh, that's good. We're happy for you. That's better. Better to be warm than cold, I think at this time of year. Yeah.

[00:39:51] Sabrina Zeidan: trail is a paid service, but I just used a free version that, is available without registration, without anything.

So if you want even more detailed information, you can pay for it and get more detailed information, but even free version of this service is super helpful. Super helpful. Thank you For me, what it says to me right now, it says to me that in the US there is no issue or the issue is small, but in Europe.

There is an issue with LCP and if I wasn't in Europe now, right now, if I wasn't in Spain right now, my next step would be to turn on VPN Service and to switch my VPN to the country from where? The issue is happening so that I get in lab during the testing so that I get the experience similar to the people who are getting this issue.

Can I ask

[00:40:53] Nathan Wrigley: you a question about that? Do you have to be a little bit careful about, the data that you get when using A VPN? So let's say for example, I'm in, Australia. But I want to test for uk There's obviously quite a lot of latency between the UK and Australia, introduced into that connection just because of the fact that we're geogra.

So even though I've got a VPN, there's I've gone an extra halfway around the globe, which may impact those things. So is that a thing you need to be careful of or is that you can just ignore it?

[00:41:31] Sabrina Zeidan: It may and will impact of course. Yeah. It'll, you can count it's, you can count in about one second of.

Added once. If you are taking these far parts, it can be up to one second. the difference. Yep. But the thing is that most of the websites, they don't have such good, such high level of performance. That one second would really matter.

[00:42:01] Nathan Wrigley: Okay, got it. Yeah. Yeah.

[00:42:05] Sabrina Zeidan: if you're, if your largest Contentful paint, for example, already passing, you have it at the level of two, two seconds.

And now for reasons, not for reason of passing core web vitals, but for reason of improving user experience over this, over this bar. and for reasons to, Make the process of visiting your website more pleasant for users and to maybe, make more money and or save money. If you are moving from good to very good.

These things matter. Yeah. If you are moving from average or poor to good, you don't need to worry about it. It's just, you don't need to think about it right now.

[00:42:57] Nathan Wrigley: Okay. That was a good answer. Thank you. I just thought I'd introduce that subject. Sorry, I interrupted. Carry on.

[00:43:03] Sabrina Zeidan: I'm just looking at,

[00:43:05] Nathan Wrigley: I'm just looking at time.

I know. I've just, this is the first time I've looked at the clock and we've already gone through for 45 minutes, but keep going. It's good. We'll, we'll get what we can done and we'll put a pin in it until next time. I'm just,

[00:43:20] Sabrina Zeidan: I'm concerned that we always don't have time to answer to comments and to say all the things we want to say.

No, it's, let's,

[00:43:28] Nathan Wrigley: it's such is life.

[00:43:29] Sabrina Zeidan: Yeah. let's do this. I'll summarize what we looked at today and we'll continue in the next episode. Okay. So we are looking, we're trying to look at our, second episode out of three now that

[00:43:47] Nathan Wrigley: we're trying to That's right. Tech has had a, TechCrunch has had a good run.

[00:43:52] Sabrina Zeidan: we're trying to look at cumulatively achieve that is happening on TechCrunch website. we, learned, how we can. Investigate this issue in lab, using our computer by throttling connection and setting the device type, on our computer to make the experience that we have in lab as close as possible to our real user experience.

We learn how in identify if we have the problem. So if you have this, Chrome extension on and it says. Green. It doesn't mean that the website doesn't have a problem. you need to check this data, or no, not over here. You need to check this data. What it's saying here is if the experience that you are getting is reflecting the experience of the major part of your visitors on your website, then when you have this answer, if you have the problem.

You have, the device, the connection, and you have the location, and you try to test from the location where your user users are, right? And then you need to answer the question if you have a certain problem with certain core vitals metrics. In our case, cumulatively achieved not all at the same time, but one by one if you have a certain problem.

Under these conditions with a certain metrics. Okay. If you have it, your next step will be to go to travel H and look if this issue is happening, if this issue depends in any way on location of visitors. Yeah. And if it does, you switch that location so that you. Better reflect the experience that users have, the issues that users have, and then you go to Google Analytics and look from where your users are coming from and if they're coming from those countries.

From those parts of the world, from those countries, right? And then you try to replicate what they're having. This is very, I just can't emphasize this now enough, how important it is to understand the specific conditions, where the issue is happening, and to be able to replicate it because, a lot of.

Many people, most of the people who are trained to do performance, they spend a lot of, they waste a lot of time on fixing things that are not there, that are not issues that, they're just. Try things randomly while if you know exactly what is happening, if there is an issue, and how you can replicate it.

Now, your task will be just to find the issue, find the way to fix it, and then knowing the conditions under which this issue appeared. You can run another test. And if you are running the test under the same conditions, you can rule, you can, it can be reliable for you. You can expect that your fix really fixed the issue.

And then after 28 days or early, you'll see the positive changes in your vitals. Otherwise, it's just, guessing game. So this step of identifying the issue and identifying spec specific conditions, where the issue is happening, it's. Crucial to move forward. And that's what we looked at today and next time.

So we now know that on mobile we were able to replicate the issue with CLS. that is happening not in the years, but is that is happening in Europe and other countries around the globe. And now our task is to find. The source of the issue and to find the way to fix it because, depending on the source of the issue, there will be various, approaches to fixing it.

And we'll talk about it next time. Okay.

[00:48:19] Nathan Wrigley: That sounds good. you covered a lot of ground there. we've got the foundation of how to begin, doing this work and what the tools are that you couldn't deploy in this case. Trio, what was it? Trio, TREO. Tsh. TSH. Yeah, I think I put it on the screen actually, but I'll do that just one more time.

trio sh was the tool that you were using. Also, if you want to use the, Chrome extension that, Sabrina was using it is called, web vitals. I would just google web vitals chrome extension. 'cause the URL is far too unmemorable to put on the screen. You won't make any sense of it. just so that just, I'll take the screen off quickly like that.

if you want to submit your own site. To have Sabrina look at it, WP Builds.com/speed. Go and submit the URL. There. You can find all of the bits and pieces that Sabrina, does at her own website, which, is fairly straightforward. Sabrina Zan, ZZI just said ZI never say Z. We never say that.

Zed Sayi, we say Zed. Z. Yeah, of course. Z-E-I-D-A-N. But it's 'cause it goes into Zan. It just, yeah. z, Z. It's got that flavor to it. so you can find her there. We'll be back next week. That was unexpected. Sadly, for some reason, the video recording stopped there. We were probably about one minute away from the end. And really all that happened at the end is Sabrina. And I just said, goodbye, we'll be back next week, but I can't explain something happened. Apologies. If you are watching the live call and got cut off, but, yeah, we'll be back next week.

So we will be back on, I think it's probably the 25th. Of January, 2024 for another episode. Sorry about the interruption at the end. Bye-bye.

If you’re here looking for the live show, and the time is right…

JOIN US LIVE

If you’d like your website examined by Sabrina, you can submit it…

Submit your site

Supported by:

GoDaddy Pro

Discover more from WP Builds

Subscribe to get the latest posts sent to your email.

Filter Deals

Filter Deals

Category

Category
  • Plugin (13)
  • WordPress (12)
  • Lifetime Deal (10)
  • Admin (3)
  • SaaS (3)
  • eCommerce (2)
  • Maintenance (2)
  • Training (1)

% discounted

% discounted

Filter Deals

Filter Deals

Category

Category
  • WordPress (44)
  • Plugin (43)
  • Admin (30)
  • Content (20)
  • Design (12)
  • Blocks (6)
  • Maintenance (6)
  • Lifetime Deal (5)
  • Security (5)
  • Theme (5)
  • Hosting (4)
  • WooCommerce (4)
  • SaaS app (2)
  • Not WordPress (1)
  • Training (1)

% discounted

% discounted

SUBSCRIBE TO OUR

NEWSLETTER

WP Builds WordPress Podcast

THANKS.

PLEASE CHECK YOUR EMAIL TO CONFIRM YOUR SUBSCRIPTION.

WP Builds WordPress Podcast