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 provides an in-depth analysis of Core Web Vitals, emphasising the critical factors of speed, stability, and interaction and their profound impact on user experience.
The conversation delves into the complexities of addressing Cumulative Layout Shift (CLS) issues, offering practical insights into identifying and mitigating factors contributing to layout shifts, such as dynamically inserted ads or videos.
Sabrina’s uses tools like Google Search Console and treo.sh to monitor and assess Core Web Vitals, highlighting the significance of geographical insights for understanding user behaviour and optimising performance.
We get some practical strategies, real-world examples, and valuable advice for website owners and developers, underscoring the importance of optimising performance for diverse user experiences in different regions.
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:
Overview:
[00:00] Summary: Core web vitals comprise three metrics for performance.
[06:32] Measurement of cumulative layout shift during page load.
[09:42] Real user data available in Google Search Console.
[13:19] Google Search Console provides website performance insight.
[16:52] Detailed review of core web vitals stability.
[19:25] Analyzing data with Google Analytics can be insightful.
[23:34] Chromebook Vitals extension measures and displays web performance.
[25:20] Local CLS experience needs improvement, user desktops.
[28:31] Calculate and declare specific ad container dimensions.
[33:40] Save and modify web pages with overrides.
[36:58] Unusual UX with weird asynchronous loading issue.
[40:31] WP Builds calendar for upcoming events.
[00:00:04] Nathan Wrigley: This episode of the WP Builds podcast is brought to you today by Omnisend the top rated email and SMS marketing platform for WordPress. More than a hundred thousand merchants use Omnisend every day to grow their audience and sales ready to start building campaigns that really sell. Find out more at www.omnisend.com.
And by GoDaddy Pro, the home of managed 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. You can find out more at go.me/wpbuilds.
Hello there. Good afternoon, good morning, good evening, depending on where you are in the world. I'm Nathan Wrigley from WP Builds, and that is Sabrina Zidan, who is a performance engineer. How are you doing, Sabrina? I.
[00:01:09] Sabrina Zeidan: I'm doing great. Thank you, Nathan. How are you?
[00:01:11] Nathan Wrigley: Yeah, good. Thank you. We're on episode.
I dunno what we're on. I think we're on episode eight. Eight. Eight. I got it right. Yay. and in previous episodes, Sabrina has been picking, either a website or an aspect of any website, which you might like to look at if you are a web developer or a website builder in terms of speeding it up.
That's the endeavor every week is to find something that we can help you with. it's not me. I don't have any knowledge in this area. It really is all Sabrina. but that's the plan. Now, just a quick couple of things. If you, would like to have your site put in front of Sabrina and you would like that, Don, she'll do it for free on the show, but you need to give some information to make that happen.
If you would like that, go to wp builds.com. Slash speed once more. Wp builds.com/speed. It's on the video right there and there's a simple form which you can fill out, in order to make that happen. We've had it filled out a few times in the past, but I don't think that's the case today. We're tackling something out of Sabrina's head.
Today, other couple of things which are just really to do with, just operating this platform. That is to say that if you would like to make a comment, please feel free to do that. if you're at wp builds.com/live, then you can use YouTube comments there over on the right of the video. Or you can use the little embedded chat.
You don't have to be logged into anything. It's a little black box, inside the video. And it says live chat. Use that. if you're on Facebook, you have to go to Wave Video slash lives slash Facebook in order that we know who you are. Now, we're on the clock a bit today because Sabrina has, urgent things to do in about 40 minutes time, so we'll crack on with it, if that's all right, Sabrina, and get stuck in.
What are we gonna be talking about today?
[00:03:04] Sabrina Zeidan: We're gonna be talking about something that we mentioned in our previous episode, but I've got, quite a few questions coming in, in private messages, asking me more detail. So I'm going to go through this again. usually when we talk about performance, we talk about, in speed, right?
But core web vitals. Are not just the speed, but three components. Speed, which LCP largest Contentful paint is measuring the speed, the how fast it's load in the main element on the page, but also there are two more cumulative layout shift. And, first input delay. We wanna be talking about first input delay today and about LCP large quantum full paint, but we'll be talking about cumulatively out shift.
These metrics is responsible for stability, so it's three metrics in core vitals. LCP, that it's measure comp, adds to the compound rating, right? it's LCP for speed of loading, cumulative layout shift for stability of picture. it should be stable. You should be clicking on in the right place when you want to click.
There. You, it shouldn't be jumping all over when it's loading or when you clicking somewhere. And another one is first input, delay, which is interaction. How fast, we can interact with the website. So we are going to talk today about cumulatively achieve the stability of the, picture on the first view port.
And we are going to take two websites that. Cumulatively out shift, issues. I haven't looked at them yet. I just know that they do have these issues. This is going to be absolutely unprepared. I don't, I'm not giving any promises how good it'll go, but it'll be showing how usually I work and how fast or how slow we can identify what is happening on the website.
[00:05:14] Nathan Wrigley: Nice. So you're gonna show us the tools that you're using, how you use them, and Yeah. that's as good as anything else in a way, because you're showing the secret source of how all of that is done. So a cumulative layout shift is that annoying problem that you get when you go to a website. I, found it especially on a mobile phone where the finger is the point of contact where you clicking on things of the finger and your finger is just about to collide with the button that you want.
And at that exact moment, it feels like something loads. Up there somewhere. Pushes it all down and that button just goes away. It just, Your finger misses entirely. So you end up doing something that you didn't intend to do. So
[00:05:50] Sabrina Zeidan: that's, for example, you're giving you, you end up clicking on the add where you to click it.
[00:05:57] Nathan Wrigley: the worst offender for this, in my experience is a website called TechCrunch. If you come across TechCrunch, it's actually a WordPress powered website. And very often I'll get there and I'll be five seconds into reading the article and I'll go to click. So that's a long time. And I'll go to click something and it all just moves.
And typically I just end up clicking on text. It's not that I end up the wrong place, it's just that there was a button there. And the bottom's gone. And so I'm just now trying to find it and I either have to scroll up or scroll down. So anyway, there you go. Would you like me to raise your screen, for everybody to
[00:06:32] Sabrina Zeidan: see?
Sure. And you know what I was thinking, it's very good that you mentioned this website and that it's happening after you have been a while on the website. So I, just want to give a short overview how cumulative layout shift is calculated on the page. Thank you. Some people think that, when you load the page, it's whether it's happening on the first screen or not.
It used to be a case, a year ago, I think it was a case, but, lighthouse, assessment was moving to the place where it'll be counting not only the first screen, but accumulatively I'll shift. During the entire page load. So approximately a year ago, websites they didn't, that seemed not to be having cumulatively out shift before they were passing Corwell White health assessment before they started.
To, fail. Okay. For assessment, because cumulatively our shift was counted during the entire, experience. So say you opened the website on mobile. It's stable. It's loaded without, it was loaded without any jumps, But then you are scrolling down and then usually it's an ad and usually, yeah.
[00:07:59] Nathan Wrigley: This is what I found on TechCrunch. It was always the loading of a dynamic in dynamically inserted ad. Yeah. Yeah.
[00:08:05] Sabrina Zeidan: And usually it's video inside the ad. that would be moving things around. Yeah. Maybe you could even, share the link and we'll look at the website too.
[00:08:15] Nathan Wrigley: Yeah, We can try it. The thing is they redesigned their website not that long ago, and I've had less problems with it.
But, I certainly will. We can look at that later. Let see. Okay, so the, if you want to go to that, it's techcrunch.com. TECA. Ah, TechCrunch. Of course. Yeah. Yeah. But you'd have go mobile. because that's the only place I ever experienced problems. And let's see if it's, we may, find it's totally fruitless and everything works as expected, but let's put it on the screen.
Oh,
[00:08:41] Sabrina Zeidan: nice. Nice.
There you go. Did you see that? Did you see that? Yes, I saw it. And not only this, oh, let's start with this website. It's fun. so we are on desktop now, right? And just let's imagine that we are optimizing the performance of this website that we are really optimizing. So what we would start with, we would go to page science.
I would go, if I had the access to Google Search Console, I would go there, but I don't have it. So I'm going to Google page speed and size. And here I'm going to check choral vitals assessment results. Okay, here we go. just a reminder, for those who haven't been watching us before and know this stuff, page speed and size, insights.
Is lab test. So it's not relevant to your real user's experience. What is relevant to your user's experience is core vitals assessment. This is, the data that is collected from your real user, user's experience during the last 28 days on your website. And this is the real data from your website.
You can, access the detailed data. in Google Search Console, but the shortened version of this data is available in these page speed insights. And you see there is a lab test running over here. I don't care about that. I don't, I'm not interested in that at all. The only thing I'm interested here is this, discover what your real users are experiencing.
Core vitals assessment. Alright, so, just to, to note that if your core web vitals are passing here and here on desktop, if they are passing, you don't need to worry about lab tests. You're good. You can just relax and do nothing about this Nice. For this website. Nice, For this website we have, we see that Core Vitals assessment failed both on mobile and desktop.
Let's see why it is failing. So first thing, core vitals is the compound of three elements largest Contentful paint. First in put delay and cumulatively sheets, shift, these three. They are for investigation purposes only. They do not add to, to the assessment itself. Yeah. Yeah. So if one of these three largest quantit Contentful pain person could delay accumulatively out, shift, shift fails, core vital, already is alsoould be failing as well.
So here we can see that first input delay is passing, it's green right and LA content food paint is failing in it's, 3.2. While it should be something below 2.5. And cumulatively our shift is all already is also failing. So we won't be looking at logistic confu Contentful paint. Today we have three episodes.
Before that we were looking at that. We were talking about background e background videos. We were talking about optimizing images, about, speeding up JavaScript and CSS in previous episodes. Today we are going to look at cumulatively our shift only. And another note, what does passing versus not passing means like when it becomes, yellow, red, and when it becomes green, it's all about the majority of users.
So if 75% of all visits on your website get, good experience. You'll get, the assessment as passed if it's less than 75%, of all visits that were, in a good shape. You, are going to get a yellow or red, assessment. Yeah. And this is showing layout shift for us. let's start looking at it.
We'll just take home. By the way, if we were really improving performance of this website, we would have access to Google Search Console and how it's different from this. This is a shortened version, right? But in Google Search Console, you can go. I'll show you where, but I don't have data there. I'm showing as an example of my own website and I don't have data here, because I don't have enough visit, visitors on my website and I can't share.
Any others website, but for your website you can go Google Search Console, then you can choose your website here and you go to Core Revital section. And here you have mobile and desktop. And if you have a decent amount of visitors as tech client would have, obviously here you would see, detailed information, which URL groups.
Are not passing because different pages on the website, they have different templates and it's important to understand how templates performance are different from each other. One template can be passing, another can be not, and instead of wasting your time tracking, trying to figure out which templates are not passing, you can go here and you can see detailed information about which templates are not passing and which and with which numbers.
You might have one group in the Yellow Zone, another group in Red Zone. If I were in that situation, I would start with those who are in Red Zone, because probably by fixing their issues, you would fix issues of Yellow Zone as well. But we don't have access to there now. Just,
[00:14:45] Nathan Wrigley: quick question, Mike.
Mike's raised a comment. He said, do you need to have, you are answering it now, which have, which is why I've raised it. He said, do you need to have Google Analytics installed to capture core web vitals? No.
[00:14:58] Sabrina Zeidan: you go to Google Search Console, I think you can see it's on my screen, right? Yeah, we can, yeah.
Just, yeah. You go there and you go to this section and there where everything, all the information is available to you. There is, there is. Google Analytics, API, allows you to create dashboards outside of Google Analytics and track the detailed information. But this is like an up level for like web agencies that would be tracking, data of various websites on different platforms.
[00:15:35] Nathan Wrigley: okay.
[00:15:36] Sabrina Zeidan: Great. Thank you. The data is, that is here is absolutely enough to investigate. You don't need anything else. Thank you.
I just remembered now the tool that I haven't mentioned before, but I'm going to mention it right now before I forgot. this is a tool, that lets you see the historical information on your website about core vitals, but also it provides you with information that these Google Search Console doesn't have.
It provides you with geographical. Information. Let me share this tool really quick. It's called Trail sh. It's super cool for in to investigate what's happening and, it's, very u useful to investigate when things went sideways, after which, event on your website, which update or you added, add system or something.
They went, in wrong direction. Let's see. And I'll put this website here and we'll see historical data about this website. Look how cool it is. So here I can see in detail core web vitals, and I can see by months what was happening to all metrics. So we are looking at slightest Contentful paint right now and we can see that it was pretty stable.
It has pretty stable numbers during the last year. Let's see, cumulatively out shift, it was pretty stable as well. So probably the issues that they're having now, they were present there, before this tool is useful in case when. It's good to check here, and then try to connect changes on your website with, changes with core web vitals.
You might figure out, you might find out that after update of some plugin that is core plugin for your website. For example, if it's a recipe website, it would be WP Recipe Maker or Double P Recipe Pro, after major update, something went wrong or you changed advertisement system, or you added. Some chart, bot or something, and you can see, like in history of coral vitals when it happened.
And another cool thing here, you can, choose to see things on map. Look how nice.
[00:18:19] Nathan Wrigley: Oh, it is nice. Yeah. You really see where their visitors are coming from,
[00:18:24] Sabrina Zeidan: So for this website, for example, Canada and US and some Europeans count European countries, they are having good. experience, and this is super cool that we open this website because look how differentiated.
[00:18:43] Nathan Wrigley: Yeah, it's really defined, isn't it?
[00:18:46] Sabrina Zeidan: Yeah. So these can give us a hint. It's, we are looking right now it's largest content, full paint, right? So this is about, speed. Yeah. so we can see that if. The loading time for these countries, for these parts of the world, we will be passing cor vitals.
It's, we need to figure out why here. Why here we have it loading slower than in other countries. And we, need to fix that. That can be very, insightful. Yeah. Especially if you have Google Analytics on hand and you can see which countries visiting, which URLs. So for example, some countries might be it's, tech news website, right?
So for example, Australia. Can be visiting a lot of news reg that has some relation to Australia or something. I dunno, I'm just making things up now, but yeah, Analytics in hand. You can match data that you have here with Google Analytics, and this tool is, it's page tools. it's, a page two trail, but even a free version that I'm using right now.
It gives you this information. Super
[00:20:13] Nathan Wrigley: useful. This was Trio, TREO. Dosh, right? Yeah. Okay.
[00:20:19] Sabrina Zeidan: The same thing is super useful. The same thing we can do for accumulatively out shift. Let's try to do it. Here we go. Alright. And this is insightful as well. This is cool. This is very good. so cumulatively I achieved, happens everywhere.
And this removes the question for us. Does it depend on geographic geography of the user? No, it doesn't because sometimes you have cumulatively achieved, happening only for certain regions. A simplest example is European countries with consent window. So it'll be, there won't, be any cumulatively achieved in America.
But then in European country where you have consent window, yeah. cookie consent window, not window pop-up, like a pop-up or something. Yeah, and it immediately gives you the direction where to dig. So in case if, here we would see for cumulatively achieved in case if here we would see, noticeable difference between.
Few countries, I will switch to V to VPN. That would be from that country, and I would be investigating the issue, having VPN on to have all the assets and images and cookies and whatever loaded specifically for that region so that I can replicate the issue. Got
[00:21:52] Nathan Wrigley: it. Yeah, it makes sense.
[00:21:55] Sabrina Zeidan: Alright, so going back to our cumulative layout achieved, if you do have data here, go here first.
If you don't have data here, like I don't have, let's see what, what can be done from the front end. Let's look at this website first. I'm going to open it in.
[00:22:18] Nathan Wrigley: whilst you do that, I'm just gonna raise a comment by Steven. He said The Guardian, which is a UK based newspaper, is desperate for the this same problem, cumulative layout shift on mobile says you're reading along Article An A appears or disappears, and the content shift a number of paragraphs.
Sometimes that's useful. If the news is bad, get the bad news out the way. Thank you for your comments, Steve.
[00:22:44] Sabrina Zeidan: ah, yeah. Maybe we can look at Guardian next time. Let's see. Yeah. so what I'm going to do, I'm going to throw all my connection here because I'm on very fast. I'm back at home in Kiva. I'm on very fast internet, and when I was in Spain, in our first. Episodes. I didn't need to throttle connection.
[00:23:07] Nathan Wrigley: Because it was throttled already.
[00:23:10] Sabrina Zeidan: Yeah. so I'm throttling, my connection here to see things happening in slow motion. And I'm going to check desktop first. So I'm going to put this like this so it doesn't interrupt.
Yep. The view right. Important thing. Just one second important thing. My beautiful extension for Chromebook vitals is over here. I mentioned it quite a few times. I'm using it all the time, is Chromebook Vitals extension from Idio Mining. It uses Lighthouse, and what it does, it. Measures core web vitals.
It's a lab test, obviously, but it measures core web vitals while the patient is load and it compares it to what is stored in the Google, database. Oh, Let's, yeah, and it shows to you. Let's see. It'll show us the difference between what and what ma majority of users are experiencing on your website.
Sometimes it glitches and it's not updated right away. Let's see. Ah, I see. Maybe I thought a little bit too much. Let me get back faster. G was too much. Let's do cable. Five. Five megabits, because it'll be too, slow.
[00:24:37] Nathan Wrigley: Yeah, it was really, I could see the ad literally just beginning to. get generated there.
And there we are.
[00:24:46] Sabrina Zeidan: Here we're, it was pretty fast. What I'm trying to do here, I'm trying to catch, the issues without doing it really, slow.
[00:25:04] Nathan Wrigley: Yeah. We're all waiting and there it is. Yeah. I think I could see the issue, but whether it got captured in your tools is another matter. It looks like it did. There just, it just went into the fail status, didn't it?
[00:25:20] Sabrina Zeidan: just to go back to what I was mentioning before, look, your local CLS experience is such and rated needs improvement in tier. There is the line about real user experience on the website. 33% of real user desktop CLS experience on this page we're also rated as needs improvement. this way we can relate.
So we were here, we, are here. This reflects the experience of 23% of users, 7% of users, yeah, having bad experience and 70 If we were improving the performance of this website, we would be aiming to make 70 per turn, 70% to 80, and this would be good enough. Yeah, like you can improve as long as you want, but it would be good enough to pass It would be maturity of users.
Yeah. Yeah, Okay, so we replicated, we do have CLS on this website. Now let's try to figure out where it happens. And also cumulative layout shift. It is cumulative metrics. It means that it, there is one layout shift happening somewhere. Another, and another, it'll, it, this will be the sum of this different layout shifts on your page.
[00:26:40] Nathan Wrigley: It cascades, it's a, yeah, an accumulated. Yeah, problem. Yeah.
[00:26:45] Sabrina Zeidan: So to make this as efficient as possible and for my work, that's what I do. I'm trying to do it as efficient. I'm not, trying to fix everything. There is no point and no need into wasting my time to do it. I target mainstream first. I fix, I find the main troublemaker, and after I fix it.
If it's not enough, I'm finding the next main troublemaker and so on so forth. And that's how I work And. That's how I recommend to work on performance. you try to find low hanging fruits, fix them and then go check if, it helps, and then, fix some the next thing. Alright, let me hide these and just let's try to see with our eyes and try to figure out where it's happening.
Alright, this is easy. Yeah, this is super easy.
[00:27:47] Nathan Wrigley: Wow. That's, yeah, it's the ad at the top and the ad on the right.
[00:27:51] Sabrina Zeidan: Super easy. ad on the top 100%. A And this would be the main thing.
[00:27:57] Nathan Wrigley: Yeah. 'cause the whole thing moves down. There's nothing that doesn't get affected by that ad.
[00:28:03] Sabrina Zeidan: Yeah. before I go to how we fix it, it's very, it's the simplest thing.
Ever. you saw that it was nothing there. Then everything shift. So obvious solution would be, it just means that the container that. Contains this ad doesn't have the height, written down, clearly. Yeah. The height is, it's not declared
[00:28:30] Nathan Wrigley: as a specific height.
[00:28:31] Sabrina Zeidan: Yeah. It's calculated. So that's all that we need to do.
We need to declare the specific height and, what we'll would do here, we would find the container that contains this ad and we would add, At we, we would add widths and height maybe, for it as well. And we would, no height and maybe widths as well. They might be internet. Yeah, and we would put the maximum height that is allowed there for a net.
you know how Google adds to works? You have the sport, say 300, pixels. High, and if there is no relevant at 300 pixels high, it would be 200 pixels high. It would be a slightly different format. So what we don't want. To have here. We don't want Google ad to, move to take place after it figures out which ad to serve.
We want to provide it with a fixed place, and if it wouldn't be taken completely by the ad and there will be some margins there, we don't care. At least there won't be any layer achieved. let's see. Let's try to see what's here.
So somewhere over here. Somewhere inside there? Yeah, somewhere here. So we'll go add union. Super easy. That's it. Margin bottom over here. I just want to show how to some, sometimes it's really tricky to find where the height or widths or any other attribute is defined, and I just want to show how to do this.
so we have this multiplied child in this container, right? And the, widths and height can't be, can be, defined somewhere inside. So if you open this, Chrome developers tool tools, you have this thing here. you can go to the very, very last piece. Here, and it'll be iframe in our case. No, it'll be this one.
Let me see. Iframe. It'll be the last, the last child. Yeah, the last nest child. You can go there and starting from the last nest child, you can over here, you can see where it's, its properties, its properties are defined. So for example, height. Let's see.
It doesn't show where it's defined. It means that it probably either calculated or defined in the upper element. Yeah. In a paragraph. Uhhuh. Yep. See Wes Auto, but. I don't like this. Weeds auto important. I don't like it. It means that height can be calculated as well. Here's the answer that was very, simple.
It was very simple. Mean hate, mean height. What we can do here, oh, they
[00:32:06] Nathan Wrigley: put it at 90 pixels, which is not height.
[00:32:10] Sabrina Zeidan: Yeah, as a mean height, as minimal height, we can put the actual minimal height. And as we already opened this one, I want to show how we can test. Our guesses without making changes to the website.
So usually when you found something, then you need to find out where it's stored. Where it's set. For example, here we can see that it's in main CSS, right? Yeah. You go there, you change. Then cach is not clear, clearing. Then caching is updating and you don't know if the cache at, CloudFlare has updated and if it's applied right.
And. So on, so forth. It takes a lot of time. Yeah. And sometimes, sometimes you can find yourself fix, trying to fix things that don't need to be fixed. They,
[00:33:05] Nathan Wrigley: you've already fixed them. In fact,
[00:33:06] Sabrina Zeidan: you've already fixed them. Yeah. It's so frustrating. so to avoid doing this, I want to show how we can avoid do this here in our beautiful developers tool, we have a tab called Sources.
And here we have another tab called overrides. What I can do, I can save this page. Remember how we used to, do, like 15 years ago we were clicking, right click on the page. Save as to read later. Yeah. That's what it's, doing. Basically, I can save any page on my computer with all its assets on my computer and modified on my computer and see the changes.
So I'm going to click here, enable, local overrides, and I'm going to choose this page and save it. save s oh, no, sorry. overrides over. Should be, Hmm, wait a sec.
When I do this, every day of the week, every day, I don't even think it's usually here.
I don't remember. Maybe they changed the wording.
[00:34:47] Nathan Wrigley: Yeah, that does sometimes happens as well, doesn't it? You get a,
[00:34:50] Sabrina Zeidan: yeah, because before it was called, save as Override, and now it was saying, override the content. Yeah. But here it is. We saved it. We can control s here and now you see if I change something.
Sick. Which one? No, it doesn't have which one? For example, here is the title. Yep. Hi.
It's weird. It's not an H one. It's H, yeah. What is it? H
[00:35:32] Nathan Wrigley: two. Oh my God. So the title is an H two. Okay, come on. Te
[00:35:36] Sabrina Zeidan: Ah. Tech Crunch needs not only me to improve their performance, they need some, SEO help. Obviously the main title on the page is H two, not H one. Wow. Alright.
Wait. Not here. Sorry. This is all
[00:35:59] Nathan Wrigley: title. Oh, now hold on. That's because there's some weird thing about the navigation. So you are not actually looking at that article. That's an archive of articles and you have to Oh, it's my page. Yeah, but it's an archive. It's got this very strange ui, Uhhuh where you click and it auto, it loads it.
In the background. it's weird. It's just a strange experience. Anyway, carry on. Sorry. Oh, by the way, I'll just let you know you've, we're now at two minute, 22 minutes to four here in the uk. I know Sabrina's gotta go in seven minutes, so just to keep you posted on the time, just so we know.
[00:36:43] Sabrina Zeidan: Oh my gosh. Thank you. I didn't know where the go, the time goes. I know. Alright, so that's what I'm doing here. I edit my name in front of the, title and it should be over here.
[00:36:58] Nathan Wrigley: Yeah. I don't think, I think you are looking at it. I think this is a very, unusual ux. You have to click on that title. In order there. Now you've opened up the post and I'm suspecting that will be an H one if you look at it now. So there's a lot of weird asynchronous loading. the one,
[00:37:19] Sabrina Zeidan: yeah. Okay. But, I just want to finish what I'm showing, how we can, how we can modify, Let me do it. Control five, control shift.
I, I'm opening this. The, here is my page. I'm override content here. They changed the wording. Okay. here is my title. This is title. Okay. Let's check. Let's change title. So title should have changed. Okay. Control five CSZ. This is, this was me. Control five S, Z. Yep. Uhhuh but weird. It's changing back and I don't know why.
[00:38:12] Nathan Wrigley: I, suspect it's got something to do with the, the way that each of those posts loads, Yeah. And yeah, we picked a, we picked an interesting site, didn't we? This week? Yeah, that's for sure. It's
[00:38:24] Sabrina Zeidan: some sort of redirection or something. Yeah. Yeah. but, technically the process is such, you open overrides, you save your page.
For overrides, and then you can modify it in your browser without go, without going to the backend. You can modify it in your browser. Add height and width. We start going back to where we started. the whole point of this is to add, fixed. Height to our add block so it's not, jumping. and you can add that height.
Just, I would do it just in the head section of CSS. I would add it there and see. So also to see. If I add some, if I add CSS lines in head section of the website, it would be loaded early. Yeah. And that way also I can see the order of over because, the order of overriding, CSS properties.
Because something in, say, you, you are saying in your, HTML that this should be. 100 pixel pixels, right? And then in another CSS you are saying 300, and then in another you are saying 600. So 600 would be applied because it would be the last one. So this thing is, helpful to figure out the order as well.
This is how we can share, we can change. Everything on the page without going to the backend. And when we found what needs to be changed and how, then we do just one thing, we go to our, WordPress backend and change the thing there. let me check
[00:40:06] Nathan Wrigley: the. I, the time is against you, Sabrina. I think you've got less than three minutes before you need to go.
So I think we should maybe put a pin in that as they say. Yeah, and maybe we could, begin, the next one, next episode. Yeah. Where, we left off just now. so are we back next week? I can't remember if we've put one in for next week or not, or if we've left that one for Christmas, but it'll be on the.
WP builds calendar. If you go to the homepage and you scroll down a little bit, there's a yellow accordion or you can go to wp builds.com/schedule and if it's in there, then yes, we're gonna be doing it. And if not, then we're probably having a couple of weeks off for Christmas or something like that.
I'll chat to Sabrina about that in just a moment. again, just to mention that if you would like Sabrina to have a look at your website, head here. WP builds.com/speed fill out the form and you never know. You may very well be able to make use of Sabrina's excellent services live on this show.
Sabrina, I think we're gonna have to knock it on the head there. I know that you've gotta go, thank you so much for your participation. Again, we'll pick up where we left off next time.
[00:41:16] Sabrina Zeidan: It'll be double episode for us.
[00:41:18] Nathan Wrigley: Yes. We'll have to, we make that one, maybe even an extra long one. thanks, Sabrina. Take it easy.
[00:41:24] Sabrina Zeidan: See you in a week.
If you’re here looking for the live show, and the time is right…
JOIN US LIVEIf you’d like your website examined by Sabrina, you can submit it…
Submit your siteSupported by:

and by:

Discover more from WP Builds
Subscribe to get the latest posts sent to your email.
