Find out where the bottlenecks are – Speed It Up – Episode 3

Nathan Wrigley [00:00:05]:

This episode of the WP Builds podcast is brought to you by GoDaddy Pro, the home of managed WordPress hosting that includes free domain, SSL, and 247 support. Bundle that with the hub by GoDaddy Pro to unlock more free benefits to manage multiple sites in 1 place, invoice clients, and get 30% off new purchases. Find out more at go.meforward/wpbuilds. Hi there, Sabrina. How are you doing?

Sabrina Zeidan [00:00:36]:

Hello, Nathan. Hello, everyone. I'm doing good. How are you?

Nathan Wrigley [00:00:42]:

We're we're back for our 3rd episode of our speed it up show. We had 2 previous episodes, and on those episodes, Sabrina talked about, videos in the in the sort of hero section, background videos, and how to think about those. And then on the last one, Sabrina spoke about, images and various different ways to optimize them and so on and so forth. I confess, I'm not entirely sure what we're gonna cover today, so we will have to We'll have to wait and see. Just a couple of bits of housekeeping, though, before we do properly begin. Yeah. Thank you, Nero Nero. Yeah.

Nathan Wrigley [00:01:19]:

No video. No intro. Just straight in. Yeah. That was a that was a mistake on my part, but never mind. The the end is is the the end result is the same. We're back here. But, yeah, if you are joining us for the show and you would like to comment, probably, the easiest thing to do is make sure that you're Logged in with a Google account and go here, which is wpbuilds.comforward/live.

Nathan Wrigley [00:01:43]:

If you go there, then the there's a little box on the right hand side, and you have to be logged in to YouTube to use those comments. However, a neat little feature of the platform that we're using is that They actually embed a chat widget in the video. So if you are at that page, look at the top right of the vid no. That's top left, Nathan. That way. Top right over there somewhere. There's something that says live chat, and it's literally inside the the video frame. And you can go in there, and that means you don't need to be Logged into anything.

Nathan Wrigley [00:02:13]:

The other option is if you are using Facebook to access this video, Then we need to get permission from Facebook to know who you are, and you do that by going to wave.videoforward/lives Forward slash Facebook. And you can, you can, in that way, let us have your avatar and name and so on and so forth. So okay. That's it. That's all of our housekeeping. What have we got in store today, Sabrina? I know that you, You were hoping the video would be there so you could paste me the URLs in, but sadly, that's not what happened. So we'll just have to wing it. What's on the agenda for today's speed out?

Sabrina Zeidan [00:02:53]:

So today, we'll do live Show really live because we will look, at the website that someone sent to us to look at. And by the way, if you want to send us a website to suggest your website for audit in this show to be audited live by me, which is free, There is a thank you, Nathan. Wbills.com, forward slash Speed, there is a form there where you can submit your website, and we might look at it in our next editions live. What are the bottlenecks there? What, can be improved? What shouldn't bother you? And we'll do this Today with, 2 websites.

Nathan Wrigley [00:03:43]:

Okay. Great. So these were people who Submitted something over at that form. They obviously had seen a previous show or something and decided they wanted their site to be looked at by you. So, hopefully, you never know. They might be in the comments. But if they are not, fear not, we will be posting this On the wpbuilds.com website, if you go to wpbuilds.com, there's an archives menu at the top. And if you go into the archives menu, you'll see there's one called speed it up.

Nathan Wrigley [00:04:12]:

And if you click on that, you'll see the 2 episodes that we've got so far. And at some point in the next 24 hours or thereabouts, I will make sure that this one is available there as well. So you can, you can write comments on that post and all of that kind of good stuff. So, yeah, should I Shall I share the screen with you? Shall I do that? You know what I mean? Shall I

Sabrina Zeidan [00:04:35]:

share the screen with you?

Nathan Wrigley [00:04:37]:

You know what I mean? Yeah. Shall I click the button? That's what I mean. Yeah. Sure. Shall I, shall I do it? Are you ready?

Sabrina Zeidan [00:04:43]:

Of course.

Nathan Wrigley [00:04:44]:

Here we go. Oh, there it is.

Sabrina Zeidan [00:04:46]:

Alright. Cool. So, today we have 2 websites, and we'll start with the one where we don't have access That's, to the back end and its stage inside. So this is not imaginable. Like, It's not, a fiction situation. When someone would send me, the website that is on staging because it's under development, For example or because the client hasn't given permission, yet for performance optimization, for example, my colleague would send me, Can you have a look at it? And without any access, I just want to share today what we can see without any access On, staging website and just to be clear, you cannot, compare staging To live. If you have access to live, you should be looking at it. But in some cases, you might not be having it.

Sabrina Zeidan [00:05:50]:

For example, when it's still under development and while developing website, before it goes live, you want to see what What's already there? What are the bottlenecks? What can be but obviously, if you are the developer, you have access to the, Back end of staging, which I don't have in this case, but let's look at it. I'll make this larger. Let's look at it. So What this is like the first impression. What I can see from the very first impression just before that, we're first impression. The information that we have, it's staging, so it won't have core web vitals Vitals data, like, real user experience data, which means we will need to Try to replicate conditions under which people will be using it without having real user data. We will try to replicate it. This is the 1st thing that I can see here.

Sabrina Zeidan [00:06:50]:

Right? The second thing what I can see that site is serving dot a t, it's serving, Austria. It's Austrian domain name. So it's for people who in Austria, probably. Maybe they have clients from outside Austria, But their main target because it's, in Austrian, and because of the domain, We can tell that Austria is the, target market. Okay. This is what we can see. We can see that there is a pop up here. We can see that there is small, background video.

Sabrina Zeidan [00:07:34]:

Let's see how it's loading. Again, I'm opening my Chrome development, tools. Control shift I, Or you can do right click and developers tools, inspect. I think on map on market's the same. Right?

Nathan Wrigley [00:07:50]:

Yeah. It is. Yeah.

Sabrina Zeidan [00:07:52]:

Mhmm. And I'll just take a look what's happening here. And, so how do we test? How do we know? How without real user data, how can we suggest What kind of user experience people are having on this website? In this case, I would turn on VPN, Switch it to Austria or if my VPN doesn't have Austria, I will switch it to the country closest To Austria so that I'm reaching the website from from from the closest point where the audience is So I can replicate the experience. Right? Then I would before doing this, I forgot my my, My workflow. So before doing, before looking at network tab tab, I will open a browser in open to mode. I will paste it. I will switch VPN to Austria. I won't be doing it right now because, I'm worried about my connection.

Sabrina Zeidan [00:09:03]:

But Okay. I would need

Nathan Wrigley [00:09:04]:

to test That's a good

Sabrina Zeidan [00:09:06]:

point. Yeah. And then we need to test it in 2 ways. 1st, For desktop users and second for mobile users. Desktop users is simple. You just keep your desk desktop view And you want in, here network, there is this small thing here, which Consent to consent, what kind of connection you are using? So you want to put here, I have this cast custom cable 5 megabits. Obviously, some people have Fiber, some people have Starlink, some people are using, slow Internet, but 5 megabits cable is what is used By, PageSpeed Insights, by Lighthouse, by web page test, but by most of the testing, lab Testing tools that are testing lab results, not real user data. Because real user data, you don't need to, Pretend anything.

Sabrina Zeidan [00:10:14]:

You have user data. Right? So for lab tests, which we are doing now, this is lab test. For desktop, we would set, cable 5 megabits, and we will see probably I wouldn't need to do it because my speed is somewhere somewhat about that. So so and, also, what I would do, Usually this, window is taking part of the viewport. Right? So if you have the 2nd screen, I would put it on another screen or I would put it at least separately so that It doesn't interfere with the, actual loading experience.

Nathan Wrigley [00:11:02]:

Got it. Yeah. Makes sense. Yep.

Sabrina Zeidan [00:11:04]:

Uh-huh. So full screen, control f 5, and We'll have a look at it. No. I can't do full screen. Sorry. Okay. It's reloading. Yeah.

Sabrina Zeidan [00:11:24]:

Yeah. Yeah.

Nathan Wrigley [00:11:25]:

I see now. Yeah. Yeah.

Sabrina Zeidan [00:11:26]:

And, we have things, recorded here, but also I have a an extension over here, Chromebook Vitals, extension by Eddie Osmani That measures metrics during lab tests. So it measured data for me right now and we can see that with desktop view, this website, With throttling connection to 5 megabits per second, It has LCP of one second. Good. Cumulatively outshipped in green zone as well, very little. Right? And that's what we can see. It's very easy. It's quickly. This is like our first, first impression.

Sabrina Zeidan [00:12:17]:

Right?

Nathan Wrigley [00:12:17]:

Mhmm.

Sabrina Zeidan [00:12:19]:

But there is always a but. Like at this point, you would think that there is nothing to investigate here on desktop anymore because everything is green. Everything is good. Right?

Nathan Wrigley [00:12:29]:

Yeah. It looks that way. Yeah.

Sabrina Zeidan [00:12:31]:

Yeah. Right. But first, It's not live, but we cannot impact that now. But another thing which I can clearly see here right now. Okay. LCP is one second, but what Is LCP? Because I see consent data that is taking half of the screen and this might be counted Counted as LCP. And maybe the background, video is counted as LCP, And it makes difference between lab tests and real users' data because in lab tests, You might have this number because this consent window is counted as largest content will paint on the screen.

Nathan Wrigley [00:13:21]:

Right.

Sabrina Zeidan [00:13:22]:

Real users will be using just screen, your your site. They would Click that once and on all other pages, it won't pop up. So probably the a good idea would be At least, this is like the minimum that we can do. We are allowing cookies. We'll we'll reload and we'll see the results now. And did you see it, Nathan?

Nathan Wrigley [00:13:53]:

I didn't notice anything different, to be honest. I wasn't I was looking at the screen, but I should I have seen something? No. What what would I mean?

Sabrina Zeidan [00:14:01]:

Look different. The screen looked different.

Nathan Wrigley [00:14:05]:

Okay. No. I didn't notice that, to be honest.

Sabrina Zeidan [00:14:07]:

Okay. Maybe. I don't know. Something is different. But anyways, back to my point. And I'll open it now and it's 1.6. So indeed, that consent thing was counted as LCP in this lab test. And now when they we don't have it, Something else is counted as LCP.

Sabrina Zeidan [00:14:31]:

On this website, it might be the ground video. It might be this piece of, this title or it might be this entire piece of text. And without real user data, we don't know what is counted as LCP. Just in August, just in August, core web vitals had update Well, they are trying not to count background videos as LCP. They are Trying to set up the, evaluation in a way that background video is not counted as large as contentful paint because if it is background, It's probably not the main information point

Nathan Wrigley [00:15:19]:

Mhmm. Mhmm.

Sabrina Zeidan [00:15:20]:

On the page. It's not supposed to be the main information point. So for many websites, whom which have, background video After August, they might have seen changes positive changes in their LCP evaluation just because the algorithm Changed.

Nathan Wrigley [00:15:42]:

Got it. Okay. I didn't know that. That's good to know.

Sabrina Zeidan [00:15:45]:

Mhmm. So this is what we can see here. This is with desktop. Okay. So we figured out at this point that, LCP It was counted differently for people who already clicked consent and didn't click it. What would be the right way to act here? Don't act not to act at all might be the way. I think it's the question more of user, experience and of accessibility. Do you really want The coolest thing to be blurring your main content or you don't want.

Sabrina Zeidan [00:16:27]:

Right. I think it's going not to performance, but to user experience and to accessibility, this question. So we see that's from performance standpoint. Both versions are fine. Right? The next thing which I would do for desktop and for mobile as well. So before starting auditing any website, I would define myself Or with client or with the developer, the important pages on the website because people tend to test their homepage, Which is not their website. Homepage is a homepage. It's just 1 page.

Sabrina Zeidan [00:17:03]:

Right? And to get the picture of your website performance, you need to test Important pages and important pages, it's, pages where you direct people, Landing pages. It might be checkout page. It might be the page that gets The the page template that gets most of the traffic on your website, say say you have, recipe website. So recipe Template would any recipe template, if they're all the same, would be an important page for your website. Then you might have news template, which is different from recipes, so you need to test news template as well. And if it's for example recipe website, categories would be really important page to test, because People tend to use categories

Nathan Wrigley [00:18:03]:

Yep.

Sabrina Zeidan [00:18:03]:

On recipe websites. They might not be using categories on news websites, You know, when you open news

Nathan Wrigley [00:18:11]:

Yeah. Yeah. Yeah.

Sabrina Zeidan [00:18:13]:

You don't go to okay. Let me check all economic news for today. No. But if you open the recipe, you might go to something related. And, you like, And today usually have this button, like, see all recipes with this ingredient or see all recipes, of such kind, And it will bring you to the category to archive page, to taxonomy or something, but it will be archive page. So archive page in that case, it depends on the website What which web which pages would be important? So before doing all these, you need to define important pages on on your website and do the same with them, which we did just now with the this page. Okay. All is good here.

Sabrina Zeidan [00:19:00]:

Let's test. It was so fast because I'm looking at at the time, And, it's,

Nathan Wrigley [00:19:11]:

Where does it go?

Sabrina Zeidan [00:19:12]:

Yeah. Where where it's going? Of course, it's not everything that you would test, And, of course, it's not everything you can get to know, but if we go into everything, we won't get anywhere. Let's, make the structure today and we'll get into more details in our next, episodes. So that was for the desktop. Another thing is just for mobile, obviously. To test for mobile, what we will do, we'll set the, Throatling of connection to fast three g, this is the same. This is what, test Lab testing tools use, to make to run tests. So I will set the same, here, and I will set to Usually, I have access to to website, Google Analytics and Google Search Console.

Sabrina Zeidan [00:20:07]:

So before Choosing the device here and before choosing the desktop device, I would go to Google Analytics And I would check out, the resolution of the screen that are most used by users of this website.

Nathan Wrigley [00:20:25]:

Right. Right. Yep.

Sabrina Zeidan [00:20:27]:

Right. So knowing the information about, majority of screens, I would set that in desktop, for example, if For this, some graphic, sorry, some, graphic website. It might be a routine. It will be it might be large screen and ever since I will set it accordingly. Here, usually, if I don't know the device, I have different devices here, but if I don't know the device, I will just pick iPhone 12. In this case, I don't know the device. I will I will pick iPhone, 12 and I throttle my throttle to my connection, and I will reload it and I will check what's here.

Nathan Wrigley [00:21:11]:

Okay.

Sabrina Zeidan [00:21:14]:

Let's see.

Nathan Wrigley [00:21:15]:

Here we go. Guess it's gonna take a few moments. I always get the little language warning there. Google trying to be helpful.

Sabrina Zeidan [00:21:23]:

Yeah. Let me just because I can see something on this website I want us to look at, let me disable this, options. Never translate this side. I learned options. Mhmm.

Nathan Wrigley [00:21:39]:

I think it's German.

Sabrina Zeidan [00:21:43]:

Is it German?

Nathan Wrigley [00:21:44]:

I think so. Is anybody watching this who knows? Let us know. I'm pretty sure it's German, but I could be wrong.

Sabrina Zeidan [00:21:52]:

Let's see. Alright. So, so we're happy we opened we opened this website, I will reload it again. Just watch closely what's happening.

Nathan Wrigley [00:22:12]:

Yep. You're getting it loading in sort of 4 different sections, aren't you? At least it's appearing.

Sabrina Zeidan [00:22:19]:

Something something the the like, even without any tools, without anything telling you anything, You can tell that the visual picture is not stable. It wasn't stable. Something was blinking, something was moving. It shouldn't be like this. And this is what CLS cumulative layout shift is responsible for. And if I open here, let's see let's see interesting. We can see that light just contour paint here is very high And cumulative layout shift is not showing. It's not an uncommon situation that lab tests, not always replicating what is happening, but the cumulative shift was there and I saw it and I'm going to to get what's happening there.

Sabrina Zeidan [00:23:13]:

I'll open my beautiful dev tools and I'll do, Control shift p, this will open this, small,

Nathan Wrigley [00:23:30]:

Windows team. Yeah. Yeah.

Sabrina Zeidan [00:23:31]:

Yeah. Where I I can choose the option show. I never type it like this. I always have to type it layout chiefs. Show layout chief regions. That's what I'm going to pick here. And I will go back, do control f 5. It doesn't work for it's because of my okay.

Sabrina Zeidan [00:24:02]:

No. I I clearly can see the shift in here, but it's not highlighted. So in this case, like, I see the shift even with my eyes, you know, I can see the shift, and it means that I need to investigate why and where it's happening, but it's not highlighted. Then I will go to my fast three g, and I will throttle the connection Even slower. I will do slow 3 g. I will do a control f 5 again. To catch to catch the place where the things are shifting.

Nathan Wrigley [00:24:48]:

There.

Sabrina Zeidan [00:24:49]:

Okay. I can see. You saw it too. Right? I can see it visually, but it wasn't highlighted. In this this is a tricky, case by by the way, in in this case in this case and also why LCP is so Now you can see why LCP was so high because look at this again. I will open this See? It's 11 seconds now because I

Nathan Wrigley [00:25:17]:

throttled Yeah. Of course.

Sabrina Zeidan [00:25:18]:

I throttled the connection. Right? It was 5 seconds,

Nathan Wrigley [00:25:20]:

but when I throttled it Yeah.

Sabrina Zeidan [00:25:22]:

I can, get more information by throttling the connection, but look look at it again. Title loaded, text loaded, it shifts.

Nathan Wrigley [00:25:42]:

Yep. And we're still waiting. There. Just there.

Sabrina Zeidan [00:25:49]:

Still waiting. We are still waiting. Still waiting. Still waiting. We are still waiting. And what we are waiting for, we are waiting for this moving part.

Nathan Wrigley [00:25:57]:

The whatever that is in the background that's moving. Yeah.

Sabrina Zeidan [00:26:01]:

Yes. The small, small, small background is counted as LCP.

Nathan Wrigley [00:26:07]:

Got it. Yes. I'm with you. Yeah. Yeah. Yep.

Sabrina Zeidan [00:26:11]:

So it's counted as LCP. The the interesting thing is that in, core web vitals, when this website goes live, In Corribable Vitals, it might not be the case because and this is tricky thing too because there are different algorithm, algorithms, there are different versions of Lighthouse that are used by this Chrome Extension by Lighthouse in my browser and by, Lighthouse version that Core Web Vitals uses. Got it. So it might be at this stage, I would be worried, Like, if, site is not not live, I would be worried about CLS for sure because it's, The thing should this thing should be fixed. It will be the same on, live site. But about, background video, I would probably wait. I wouldn't put any time, and time means money because, it's developer's time. It's money that someone pays, Client pays someone's someone paid someone has paid.

Sabrina Zeidan [00:27:26]:

I would probably do nothing on staging in this case because it's edge case, And no one knows how it will be loading live, so probably I would do nothing with, this background image, while it's on stage and while it's on live and when the data is collected, I would just keep an eye on it. I would keep an eye on it knowing that we might have this problem. And if it confirms we do have problem there, I would go and fix, whatever is going with background video. But about CLS, actually, Here, we don't see any CLS, but it was here. It was clearly there.

Nathan Wrigley [00:28:09]:

Yeah. You could see something, couldn't you? For sure. Yeah.

Sabrina Zeidan [00:28:12]:

Right. So I'm just going to to do it right now, but I will tell the algorithm how to in this case. So I showed how to highlight these, moving parts. Chrome development tools, DevTools, is supposed to highlight them, but it didn't work. It didn't highlight them. What we can do in this case in this case, we can add either in browser itself or somewhere in CSS, we can add the CSS rule Saying at red border, just in instead of border use outline, Outline attribute, add, outline of red color 1 pixel to every single element On the page.

Nathan Wrigley [00:29:09]:

Right.

Sabrina Zeidan [00:29:10]:

And then when it's loading, you will see which part is moving, and then you will be able to investigate Why it's moving? And here is the trick, another shortcut. Most of the times, The part that is moving has nothing to do with movement. It's probably something that above it is causing it to move.

Nathan Wrigley [00:29:33]:

Right.

Sabrina Zeidan [00:29:33]:

So once you, yeah, once you, understood what is moving, just Go through the code and see what is before that. Maybe most usual, scenario that this because this Spot was lower than it got up. Right?

Nathan Wrigley [00:29:56]:

Yeah. Moved a few a few pixels up, didn't it? You're right. I saw that. Yeah.

Sabrina Zeidan [00:30:00]:

Yeah. Most likely that CSS that are define that is defining this space Is loaded after everything else is loaded. So most likely scenario here is that you would just need To define the CSS earlier, and this is a just check where it's defined if it's custom, CSS is very easy to move around. If, For example, there, there might be a case where, this CSS is in plug in, in SIEM, and you can't, impact that directly. Right? So the way the way to fix it in this case, would it be either to use sorry. I am promoting WP Rocket every single time.

Nathan Wrigley [00:30:54]:

It's okay.

Sabrina Zeidan [00:30:58]:

To use use CSS that would extract all CSS from the page And put it in the head section. This is 1 scenario. Another scenario. I do this a lot for Divi or Elementor where there are a lot of add ons And there are a lot of styles edit in different places, not in 1 place, and and they are overlapping and everything. You can just put it in, not in style CSS, but in functions PHP. You can put it in WP head section. If it if this thing happens, especially, on, every page, for example, it's connected to navigation bar, Just put those few lines of CSS in the help section of, the site so that they you don't wait while The main CSS's of the plug in or add on is loaded, but you have it right, from the very beginning when the page starts to load it. This will be the way to fix it.

Sabrina Zeidan [00:31:57]:

That's neat. Alright.

Nathan Wrigley [00:31:58]:

Really good good suggestions in there. So first of all, Throttle the connection and keep going backwards, throttling it more and more until you notice things, but also, go in another At a solid 1 pixel red border around things and throttle it more, and then you'll be able to see what's going on. And then maybe you need to take a Take some aggressive action with where the CSS is loaded and in what order and combining it into the head. Got it.

Sabrina Zeidan [00:32:26]:

Just one detail. It shouldn't be border. It should be outline because

Nathan Wrigley [00:32:30]:

Outline. I apologize. You did say that. Yep.

Sabrina Zeidan [00:32:32]:

Yep. Quite right. Because border is Taking that 1 pixel

Nathan Wrigley [00:32:38]:

And adding to it.

Sabrina Zeidan [00:32:38]:

Yeah. Yes. And outline is not. And the border is Renew layout sheet.

Nathan Wrigley [00:32:44]:

Yep. Yeah. You're right. You could, yeah. You could who knows what that 1 pixel all around the edge might do? It might Catastrophically bad for a pixel perfect laugh. Yeah. Okay. That's great.

Nathan Wrigley [00:32:55]:

There was loads in there.

Sabrina Zeidan [00:32:57]:

Thanks. So LCP issues, they are really they are really straightforward. They are very easy to identify To identify, sometimes they are not easy to fix because of how the website is built. But to identify LCP issues, it's, not that hard. But for CLS, for cumulative layout shift, it's Sometimes it's very hard to identify the issue. And then fixing it, it's the, work of 2 minutes. You just And, write CSS rules, and this is it. But to identify where it's happening, which rules you need, to add, usually, it takes a lot of time, and I just want to add to this.

Sabrina Zeidan [00:33:47]:

Maybe we'll if we have, another example, Someone suggests us a website with the CLS issue. Maybe we'll go in that much deep in detail, in next episode.

Nathan Wrigley [00:34:01]:

Okay.

Sabrina Zeidan [00:34:03]:

But just for someone who is having trouble right now, So if, showing layout, shift with Chrome DevTools didn't work, if red border didn't work, What else you can do because red body might not work as well. You might be just too confused. You might not be seeing what's causing the issue. So in case these 2 didn't give you the answer, In 90% of cases, it would give the answer, but sometimes it's not. I'll Sure. Just quickly, there is a step here, sources, and then you have overrides. Using overrides, you can you can save basically, you are saving, the code and all assets of the page On your computer and you can edit it later.

Nathan Wrigley [00:35:02]:

Got it.

Sabrina Zeidan [00:35:03]:

Okay. You are saving, like, you know, like, Old school. Like, we're we're saving, web pages as HTML. Yeah. That's what it does. So you can save This, page HTML to your computer, you can edit it and you sometimes I need to remove Everything, like, bit by bit, I'm removing part of the page before I find And what is causing layout shift? Because, I just don't have any better way to figure out. So using overrides, you might be able to investigate what you were not able to investigate with Previous tools.

Nathan Wrigley [00:35:51]:

Got it. Nice. Mhmm.

Sabrina Zeidan [00:35:54]:

Alright. Let's move to the website. So this was Staging. We can tell a lot about staging, without even having access, but, in some cases, for example, with LCP, what is counted as LCP, You might want to wait for real user's data to know either you want to bother with that or you don't. That was with staging and let's look at the website now where, that is live. We have another website here.

Nathan Wrigley [00:36:42]:

Alrighty.

Sabrina Zeidan [00:36:43]:

Food photography.

Nathan Wrigley [00:36:45]:

Again, this was submitted by a user To our form. Right? Mhmm. See if I got that right. Yep.

Sabrina Zeidan [00:36:51]:

So this is live site. Right? And with any live site, I would start With the access to I would ask access to, Google Search Console And Google Analytics. Google Analytics to know where the users are coming from, we and what devices they are using, and what are the top visited pages. That's Three things that I usually check-in the very beginning. And then I would go to Google Search Console To know the current state of core web vitals, so I would go to core web vitals section in Google Search Console, And I will check information here. And here, usually, you would have detailed very detailed. Maybe someone would submit later a website with detailed information, and we will have opportunity to look at it. Usually, you have very detail Detailed information, about every, single URL on the website that is having issues, and It will be a structure right structurized into groups which, by issues, LCP or CLS, and then it will be also grouped By template.

Sabrina Zeidan [00:38:04]:

So for example, blog, posts would be 1 group, recipes would be another group, and you can see the difference. This very useful See Google Search Console, when it has data, you can see the difference between performance of different templates. You can see, for example, that your website is failing Core Web Vitals just because one template on your website. It might be something you can discover there because, for example, let's get back to recipe of recipe website. Recipe template, for example, has issue with CLS. There is CLS layout shift on recipe template, But all other templates are good and they are passing and they are fine and both LCP and CLS and FID, they they're passing. Right? But because the recipe template is so attended, it's so it's the most popular content on the website, it impacts, the core web vitals total, it makes it that 75% of more than seventy 5% of users get better experience, so your core whole core web vitals fail. But knowing Exactly which template, needs your attention, saves you lots of time.

Sabrina Zeidan [00:39:30]:

You don't need to go and Guess that you don't need to work on things that don't need your work. You can go lay down and read a book, you know. So, yes. If later on someone would send us, a website with the access to core web vitals where there is data, we'll go through that in detail. But now I want to, just To point out, what do you do if the website is live, but it doesn't have Data here, there is no live data. It happens when there is very low traffic on the website. There are no much, people can't not much not many people come into the website, so it didn't collect any data. What do you do? Most of the people would go to page speeds and sites and search, place, paste their your homepage URL here And get some data, but that data in page speed insights, it's outdated tool.

Sabrina Zeidan [00:40:33]:

It's not relevant. It's It's the topic for another episode, but in 2 words, page speed and size. It's not it's It's not showing real user data. Right? It's it's showing lab data. But The way it counts lab data is not accurate at All, like, at all, it has no relation to to to your website. That's why you need this Chrome extension And you need to know the connection type and, screen size of your users so you can run your own tests For your users knowing what connection they're using. For example, PageSpeed and Sites use for testing mobile, It uses as, device, it uses motor Motorola 4, Like Motorola, more to 4, it's

Nathan Wrigley [00:41:44]:

That feels like from a decade ago or more.

Sabrina Zeidan [00:41:47]:

Yeah. Even more.

Nathan Wrigley [00:41:48]:

Yeah. Yeah. Yeah.

Sabrina Zeidan [00:41:49]:

Even more. I have never seen it in real life.

Nathan Wrigley [00:41:52]:

Yeah. Okay. I have. And it's a long time ago. Yeah.

Sabrina Zeidan [00:41:56]:

It's not time ago and I'm not that young that's, like, you know, like, I haven't seen old things. I did, but not that far. So that's what PageSpeed and Science uses even now to run tests, and it uses that Fast three g throttling. So, it uses both outdated device with the screen size that doesn't match it Definitely doesn't match most of your users with processor Yeah. And, with and Also, your, for example, we are connected we are both in the same room, connected to the same Wi Fi and having different phones, And we are assessing the same website from the same room, and we will have different performance experience because of our phones Because our phones will have different, CPU, different processors, different, RAM, memory

Nathan Wrigley [00:42:57]:

All of that. Yeah. Yeah.

Sabrina Zeidan [00:42:58]:

Different, video memory, and they will process the data Differently, and it will impact our experience. Both of some and and also we'll be using different browsers On top of all, and browsers are adding another layer to our, to the end experience that we are having.

Nathan Wrigley [00:43:22]:

Yeah. So it's Yeah. There's a lot, isn't there? Yeah.

Sabrina Zeidan [00:43:24]:

It's connection, it's location, it's device, it's browser. It's a lot of things, you know, and with page speed insights, it's just standardized test For everyone, everywhere. On one hand, it's better than absolutely nothing because it just gives you An idea that gives you, just very basic Basic understanding that performance is important. This is it.

Nathan Wrigley [00:43:58]:

Okay. So it gives you something but not a fat lot that you can make use Yeah. Yeah.

Sabrina Zeidan [00:44:03]:

Yeah. So whenever you know what what site you are looking at, don't use it. Use Chrome extension. It's the most accurate, lab test that you can do. Set up VPN to the country that you're testing for, throttle connection use, Chrome extension to test. And in this case, we have live website. Right? But we don't have any data, and we will do the same thing as we did on staging. We will do we will go And do test here and knowing the sizes of screen and connection, we can throttle it the same.

Sabrina Zeidan [00:44:52]:

We don't have many much time left. Let me just do

Nathan Wrigley [00:44:55]:

Yeah. Where did that go?

Sabrina Zeidan [00:44:57]:

Mhmm. Let me just do mobile quickly because most of users On most of users on most of the websites are mobile users now. Some websites don't have mobile users at All at all just because people who are using them not using them from their mobile, but most of their websites, like, It would be a good idea to test mobile first. So I'll set iPhone here, I will learn network, Change to fast three g instead of slow three g that you had before, and just let's take a look at it.

Nathan Wrigley [00:45:36]:

I'm gonna watch carefully.

Sabrina Zeidan [00:45:39]:

Let's see. Let's see.

Nathan Wrigley [00:45:46]:

Oh, lot going on there.

Sabrina Zeidan [00:45:51]:

A lot. So in this case, when, it's loading Awfully slow with throttled connection just to investigate what is happening. You want to it Because it will take forever to understand what's happening, let's It's not reloading. Sorry.

Nathan Wrigley [00:46:26]:

That's okay.

Sabrina Zeidan [00:46:26]:

It's my keyboard. He doesn't reply, always. Wonder if

Nathan Wrigley [00:46:29]:

this platform has stolen that keyboard shortcut. It's still doing no. It's significantly quicker to load the background image, but it still loaded in 2 halves, didn't it, if you like?

Sabrina Zeidan [00:46:40]:

Yeah. Yeah. Significantly quicker, but and it's fast enough so we don't fall asleep, but it's slow, you know, that we understand what is happening. Okay. So we have, let's say you have 2 minutes to audit this website. What we can see here, 1st first, we would want to identify what is our LCP. Our LCP is the 1st slide on this slider. Right?

Nathan Wrigley [00:47:12]:

Yeah. Yep.

Sabrina Zeidan [00:47:13]:

The picture the picture will be our LCP. Once we identified what what is our LCP, We want to make sure that it's loaded as soon as possible and everything else is delayed. So we talked about this, Yes, Igor. We talked about this last time about, how to make slide, slider loading fast, And it's simple answer, just load the 1st slide first. You want To make sure the picture of the 1st slide is loaded before anything else, before before before anything else, And all other slides are lazy loaded. So this is easy to, to see, but This is, the example of the case where it might be hard to do. For example, slider is provided by some plug in, and you don't have Access to to modify the classes and so on and so forth, that might be tricky to do, but that should be done. So load 1st slide.

Sabrina Zeidan [00:48:22]:

1st, lazy load all other images. Now you want to make sure that logo is not Lazy loaded. On this on this very page, you want to make sure about 2 things. 1st slide is loaded Very early, which is means which means it's not lazy loaded. Ideally, it's loaded, ego. Ideally, it's preloaded, but at least the very least you can do, do not lazy load. 1st flight, do lazy load Other slides. This

Nathan Wrigley [00:48:57]:

Yep. Yep.

Sabrina Zeidan [00:48:59]:

The basics. Right? Logo, do not place a load Logo. Usually, I would prefetch logo on every website, preload logo on every website because it It happens on every page. It's the Internet on every page. Just mind when you preload, local to preload different Versions for desktop and mobile because if you use different size of logo on desktop and mobile and you're preloading just 1, for everyone, it it slows down, the that version that, Yep. Does doesn't match. Right? Yep. Another thing that I noticed here.

Sabrina Zeidan [00:49:44]:

So before, before the image was loaded, we could see this we could see this, icon And I bet it's connected with JavaScript. I bet it's provided with a bundle of CSS. So you want to delay that before. You see, it's loaded before

Nathan Wrigley [00:50:04]:

the meeting. Right from the start, isn't it? And then that little icon comes along.

Sabrina Zeidan [00:50:08]:

The first thing that is loaded no. This should be delayed. This should be the first, 1st slide should be the 2nd, then This picture should load the 3rd, so your pro pro pro priorities would be first first slide, This would be, the 3rd thing to load and only after, these images, that's, on slide 2, on slide 3, and so on. So probably you would want to exclude from lazy loading from lazy loading the 1st slide, logo and this first image. Yep. And then you want to delay this stuff. Also another thing is, it's quite important, look at, at, Header part, again. Not nice.

Sabrina Zeidan [00:51:08]:

Right?

Nathan Wrigley [00:51:09]:

Yeah. It's the wrong way around, isn't it? You got the got the menu and the phone icon before the logo, and that comes out the icon comes out as a little Square at the start, didn't it? It was not there.

Sabrina Zeidan [00:51:20]:

Right. This is not nice. And remember, we're not throttling connection right now. So on on throttled connection, it would be even less attractive.

Nathan Wrigley [00:51:31]:

Yep. Yep.

Sabrina Zeidan [00:51:32]:

So What I would do here, like, first thing slider, then excluding from lazy loading and, delaying this stuff, but then I would take a look what's happening here and what is used here as icons. And here. Okay. Okay. Okay. Before before So it's, the font that is yes. It's icon font, that's coming from Elementor that is used. What we can do here, first of all, the the the Right way to do this not to use icon fonts.

Sabrina Zeidan [00:52:18]:

Right? But it might be not easy to to do. Sometimes it's easier, sometimes it's harder, but the proper way not to use icon forms at all, it's, the proper way would be to use SVG only for icons that are using because icon font means that The font with different types of icons with all kinds of errors, emojis emojis, like, different types of icons are loaded on your website to show only 2 icons that are used. Right. Yeah.

Nathan Wrigley [00:52:58]:

The phone and the little hamburger icon. Right? Right.

Sabrina Zeidan [00:53:02]:

Right. Let's, take a look, Fonts. And here are our fonts.

Nathan Wrigley [00:53:13]:

So we got font awesome in there as well.

Sabrina Zeidan [00:53:16]:

Yeah. So this is, 95 kilobytes that are loaded only to show these 2 icons. You don't need that. Right? And the problem with icon fonts, not only in this 95 kilobytes That's a loaded. It is the problem. Yes. But even worse that this icon font It's called from CSS that is loaded. So first, your HTML is loaded.

Sabrina Zeidan [00:53:49]:

After your CSS is loaded only then your, WAV file, font file is loaded. That's why it takes so long because it's long chain. While if you have it as SVG, first of all, you're not loading all this stuff And you're not doing these steps. It's loading just from the page because SVG, it's inbuilt into HTML. That's what, the first thing, what what, I would fix here. So it's, about time for us.

Nathan Wrigley [00:54:24]:

Yeah. We feel like we just got started. But, yes, you're right.

Sabrina Zeidan [00:54:29]:

Yeah.

Nathan Wrigley [00:54:30]:

It is. I mean, I guess we could carry on with that one next time. We'll be back.

Sabrina Zeidan [00:54:35]:

You. Next

Nathan Wrigley [00:54:37]:

week. We don't know if we'll carry on with that, but, I'll just quickly remind anybody who is watching this whether you're live or, you know, you're watching this after the fact. Just a quick reminder that if you want Sabrina to have a look at your site and honestly, I I think the people who were looking at that So far, they probably got a great deal out of that. Let's just take that off. So here's the, here's the form, wpbuilds.comforward/speed. It suddenly got really dark in here. I just feel like it's night.

Sabrina Zeidan [00:55:08]:

Yeah. It's a little. Yeah.

Nathan Wrigley [00:55:09]:

It's weird. Now that I can see me big, it looks like everything's really dark, but it's really not. Umwpbuilds.comforward/speed. If you want to drop us a form in there, Then Sabrina will take a look at please please feel free. There's 3 different levels that you can give access to, Sabrina. And we don't ask you to submit anything weird Over the form, we just ask for your, some basic details, including your email address and things. And then Sabrina will Write you an email, and you can decide how you wanna, let Sabrina have access to your site, you know, whichever way you want to securely give her the Log in credentials to that. So, yeah, one last time, wpbuilds.comforward/speed.

Nathan Wrigley [00:55:53]:

We'll be back next Wednesday. No. We won't. We'll be back next Thursday. Good. Yeah. Where where did it go? And hopefully, we'll have some more interesting stuff for you then. At the beginning of the the podcast, we, we failed to do the, the intro.

Nathan Wrigley [00:56:09]:

Let's hope that we get the outro. So at this time, it's just like a little 10 second Little video with some promotional stuff on it. But, Sabrina, if that's everything, should we say see you next week?

Sabrina Zeidan [00:56:20]:

Now before we say goodbye, I just want to say that it's very sad to see that no one has commented except Nero who

Nathan Wrigley [00:56:26]:

No. Just right at the beginning. Just just 1 person. Yeah. Yeah. We've got several I

Sabrina Zeidan [00:56:31]:

don't know. Is it because we are so boring or you it was just thought provoking and People didn't have time to

Nathan Wrigley [00:56:38]:

Who knows? I mean, there's

Sabrina Zeidan [00:56:39]:

there's definitely No. There's no one. Yeah.

Nathan Wrigley [00:56:46]:

It's the nature of the beast, Sabrina. You can somehow sometimes you can do a an episode like this and you get, like, 50 comments. Another time, You do it, and you don't get anything. And it's just the way it goes sometimes. You just have to just have to be sanguine about it. But, yeah, if you, If you wanna drop, us a comment, feel free to do that. We'll this will be posted onto, I guess, YouTube and things, but also it'll be in Twitter and things. So you can give us some Comments there if you like.

Nathan Wrigley [00:57:13]:

But, yeah, that's it. I guess we'll we'll knock it on our head there. I'll see you next week, Sabrina. Yeah?

Sabrina Zeidan [00:57:19]:

See you next week, Nathan.

Nathan Wrigley [00:57:20]:

Take it easy.