Using the inspector – Speed It Up – Episode 4

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.me/wpbuilds. Hey, Sabrina, how are you doing? You alright?

Sabrina Zeidan [00:00:39]:

Hi, Nathan. Doing good. How are you?

Nathan Wrigley [00:00:41]:

Yeah. Good. Nice to have you with us. This is the 4th Of our, speed it up shows, we're gonna be doing a a user submitted website today. It was actually somebody that was on the call Last week, so that's really nice. We'll get that on the screen, in a moment. Firstly, it's my job to introduce Sabrina. Obviously, if you watch this, You know who Sabrina is.

Nathan Wrigley [00:01:04]:

She's a, as it says, she's a performance engineer. What does that mean, Sabrina? What do you spend your day doing most of most of the time?

Sabrina Zeidan [00:01:12]:

Solving riddles. Yeah. Yeah. I think it's the it's, I think it's the most, interesting work in the world. You know? We all are a little bit afraid that AI We'll take our jobs because so many things can be automated now. But I think if you're doing things that AI cannot do, for sample solving. If you're doing, something creative, if you actually create things, It's it will be a long, long time before AI would take our job, so I'm not worried about this. Yeah.

Sabrina Zeidan [00:01:49]:

So I've been riddles. Why it is slow? Why it's why there are Layout shifts, why something is not working.

Nathan Wrigley [00:01:58]:

Perfect. Well, it's good that you enjoy problem solving because That is the nature of today's show. We're gonna solve problems for somebody. I should probably just say a couple of bits of housekeeping. 1st 1 is if you would like to share this show, let's say you're watching it live and you think it would be a good idea to share it, feel free to do that. The best place to point people, I guess, is wpbuilds.com/live. You can share that, If you like even if you're not watching it live, you could just, you know, stick it in an email and send it to somebody because we'll we'll be doing this each and every Thursday at 3 PM. And that's the place on WP Builds to go for anything that we do live as well.

Nathan Wrigley [00:02:39]:

The other thing to say is if you are at that page, then you can be there's 2 Two options for commenting. The first one is to be logged in to a YouTube account, and you can use the the comments bar, which on the right hand side on desktop and is underneath if you're on a mobile. But, also, if you notice in the little video player, top right hand side is a little black Icon, a little black rectangle which says live chat. You can use that, and then you don't need to be logged in to anything at all. If You happen to be watching this on Facebook, then in order for us to know who you are, you have to go to wave.video Forward slash lives forward slash Facebook. And in that way, that will de anonymize you. If you do join us live and you fancy putting in a comment, feel free. That would be great.

Nathan Wrigley [00:03:27]:

But, you know, we know how it works. People are busy, and they've got different things going on. And We often find that people are watching this at the same time as actually doing their work, so, you know, they don't get to comment and things. But, we have 1. We have Mike. That's handy. We have Mike joining us today. He says, be gentle with my website because he knows what's coming up.

Nathan Wrigley [00:03:47]:

It's Mike. It's Mike's website That we're gonna be looking at today. And, I don't know if you wanna do any background, Sabrina, and just tell us a little bit about it before we share your screen.

Sabrina Zeidan [00:04:00]:

I'd like to tell, a little bit about our show first. So for anyone who is watching this for the 1st time, this is speed it up Joe, well, we are talking about WordPress performance, and, we it's 4th episode. 1st one, we were talking and, if you go to, can we have that link where the archive is On the screen, Nathan?

Nathan Wrigley [00:04:28]:

Yeah. So I haven't got the link for the archive, but I can tell you how to get to the archive. The easiest way to do it is to go to to wpbuilds.com, and then go to the archives menu, which is in the top. And then if you go to the speed it up, it's Actually, the the last item in that menu, so it's just a drop down if you just go to the Yeah. Whilst you, whilst you talk, I'll I'll make a little thing to put it on the screen while Okay. Yeah.

Sabrina Zeidan [00:04:53]:

So it's our 4th episode. The first was about background images on the 1st screen. You know, when you have hero video background on the 1st screen, that's what we talked about in the 1st episode. In the 2nd, we were talking about optimizing images, but not really in regular way because there is a lot of information available about optimizing Image optimization. But what it doesn't say, it doesn't say which images You should optimize because there is, low hanging fruits that you can optimize and win a lot from your efforts, And there are things that you can do for the checkbox that won't bring you a lot of value in return. You know? So 2nd episode was devoted to the question how to identify those images that you should target your efforts on. On in our last previous episode, we looked at 2 websites that were submitted to us Through this form that we have, wpbuilds.com/speed, they were submitted, by someone, And we looked at them live in the show, and this is what we are going to do today, but with another website, with Mike's, website. This is a simple, brochure website that is on staging now.

Sabrina Zeidan [00:06:25]:

It's not live. It doesn't have Google Analytics or Google Search Console connected, but we'll look at it from the front end, and we'll try to figure out From this point, what can be improved if anything needs to be improved at all? What, bottlenecks we might Fine. Let's look at it.

Nathan Wrigley [00:06:47]:

Perfect. Okay. So I'll just go through those URLs just to be absolutely crystal clear. So if you would like To after you've seen this show, maybe write this down. If you want Sabrina to freely so it doesn't cost you anything. It's totally free. If you want to benefit from Sabrina's experience, Then you can either watch the archive of the shows and pick up pick them up 1 at a time. Or if you've got a specific website that you'd like her to look at, Go here, wpbuilds.com/forward/speed.

Nathan Wrigley [00:07:15]:

There's a a form. It'll take you under a minute, I would imagine, in most cases To fill out, you can do that, and then Sabrina will get an email, and she can back and forth with you about what kind of access you want to give her, whether it's just front end or you want to give her the I mean, you know, an admin account on WordPress or what have you. The other one is the archive. If you want to look at the previous episodes, wpbuilds.com/ Speed it up archive with all the, you know, with all the words separated by hyphens. And last But by no means, Elise, just a quick reminder. If you fancy dragging people into this show, wpbuilds.com/live. Okeydoke. That's all the housekeeping, I think.

Nathan Wrigley [00:08:01]:

Okay. Shall I share your screen, Sabrina? Are you ready? Or have you got the

Sabrina Zeidan [00:08:05]:

Sure. Just give me one second. I'll open it. Yeah. I have it on the screen.

Nathan Wrigley [00:08:10]:

Okay. Here we go. So perfect. This is Mike's site. I will hand it over to you. And if anything crops up in the chat or I Have an intuition that I need to interrupt. I'll I'll do just that.

Sabrina Zeidan [00:08:23]:

Okay. So we are looking at the website, that is on staging now, and we don't have, back end, access to it. This is a very common situation that happens to me a lot. Someone would send me a, some colleague would send me a website saying, like, we are building this. Take a look, if it's Okay. So we'll try to do this right now with this website. First of all, As I mentioned before, I have so for the website that doesn't have core web vitals yet, doesn't have field data yet, We will be using Chrome extension that tries to, mimic, the, way, core web vitals are estimating, it uses the same, engine, lighthouse, But it might be using different versions from what is used from what actual core vitals are using because they are not updating synchronously. But it gives us the picture of the website performance anyways.

Sabrina Zeidan [00:09:32]:

We'll look at desktop first. And for that, I will go to my control shift I if you're on PC or you can right click in developer's tools. And here you can, click inspect to open this panel, and I'll throttle my connection to, make it close to the core veritals, assessment. I will throw to to cable, And I will look at I will reload, and I will look what I can see here. I can see here all green, 1.6, good, cumulative layout if we don't have it, beautiful, it's homepage. And here I want to bring our attention to something that we mentioned, in the previous episode. People tend to check home page only thinking that home page would reflect their website Loading, performance, experience Yeah. But it's not the case.

Sabrina Zeidan [00:10:42]:

Right? You, yes. Home page is, important page, but it's just one of important pages. Other important pages you have to define yourself, for example, let's do it for this website. This simple site, right, homepage would be important, services, the services page, This is, I guess, this is archive page, this page would be important. Then every single service would be important, let's see Let's see if they have the same template. Because if you have the same template for different pages, you can check 1 template and expect That are the pages that are using the same template would have similar, user experience. Right? So if you have different types of content on the website with different template, it makes sense to check different Templates, blog post, page template, whatever you have. Let's see.

Sabrina Zeidan [00:11:50]:

General. Here, it looks like this. Uh-huh. It's the same template.

Nathan Wrigley [00:12:00]:

Yeah. Yeah.

Sabrina Zeidan [00:12:01]:

Yeah. So for this website, this is how I do audit usually. I would To define important pages so for this, website, I would take home page. I would take one of the services Because they use, the same template, the services page itself, this one.

Nathan Wrigley [00:12:21]:

Yep.

Sabrina Zeidan [00:12:22]:

Then That's different from them. Yeah. Then, probably, I would look how are the pages outside of services look like. Let's see. Okay. And let's see how contact page look like.

Nathan Wrigley [00:12:39]:

Oh, that's different. Yeah.

Sabrina Zeidan [00:12:41]:

That's different. And contact, that's that would be another important page because contact page is Obviously, call for action on this website. They want people to contact them. Right? And on such websites, I would usually call, click here and see what's happening. Okay. I can see that call is happening because sometimes The button to call would, produce pop up or something, so I will check that one as well. So that Beat is not slow.

Nathan Wrigley [00:13:14]:

Yep. Yep.

Sabrina Zeidan [00:13:16]:

Right? Something,

Nathan Wrigley [00:13:18]:

sales needs to be about the style there, hasn't it, once Yes.

Sabrina Zeidan [00:13:21]:

Sales needs to be adjusted here. Yeah. So it's not our question

Nathan Wrigley [00:13:24]:

right now. That's not our job today. Right?

Sabrina Zeidan [00:13:27]:

Yeah. So I would check contact page, one of the services single pages, services archive page, And homepage, just to make sure that they're all are fine. Let's, look at services. I have A feeling about it because of the images. No, it loads fast, good. In this case, when it just loads fast, it's fine, all green, I would probably anyways, Because it's staging, anyways, I would open, network tab and look how it works.

Nathan Wrigley [00:14:06]:

Can I just ask a question? You know your Chrome extension there, which, whilst it's whilst it's loading the page, it goes to a sort of gray square. Does the fact that it's green, what does that indicate? Does that indicate that the largest contentful paint, the LCP, is It's green. Which one is it picking as the okay. We're green.

Sabrina Zeidan [00:14:27]:

Right. It's it would pick largest content full paint.

Nathan Wrigley [00:14:31]:

Uh-huh.

Sabrina Zeidan [00:14:31]:

Cumulative layout shift and first input delay if we if we do something on the page. And if one of those It's outside of green zone. It will change the color of, this thing.

Nathan Wrigley [00:14:48]:

Okay. So the fact that it's green, you know that the first three things are green, and you have to open it up to other things. Okay. That's good to know.

Sabrina Zeidan [00:14:56]:

Right. Exactly. So even if one thing, would not pass assessment, it would be, yellow or red, And then we'll open and we will see. And cool thing about this extension, if we had, field data already, if it was the live website, it would tell us here, your local LCP experience is such and such And it replicates such percentage of experience of real users of on your website. This is super handy. You can see how your lab tests, replicate actual Core Web Vitals if we if we had it right now. Maybe in our future episodes, we will have Corework Vitals values, and we will have more information here.

Nathan Wrigley [00:15:50]:

Let me just raise a point that Mike's just made. He's asking about the, the inspector itself. And I know that you use Vivaldi as your browser. Is that right, Vivaldi?

Sabrina Zeidan [00:16:00]:

Yeah. Yeah.

Nathan Wrigley [00:16:01]:

Yeah. It's a Chromium derivative, isn't it? So I think it's built on top of Chrome. Anyway, here's the question. How do we how do we access the developer tools that you're using on Chrome? He says he right clicks and then selects inspect, But it looks different. The the guest there would be, Mike, that the Sabrina's using the the menu across The top, so she's in the network menu at the moment. So yeah. Right.

Sabrina Zeidan [00:16:28]:

Mhmm.

Nathan Wrigley [00:16:29]:

And so if if, Sabrina, if you just Come out of there, but, yeah, right click,

Sabrina Zeidan [00:16:34]:

one of the tools inspect. Go through this. So right click, Inspect, right, it will open elements tab. Yep. Right, and here is where you have your HTML And here on your right, you have, if the layout is the same, you have CSS related to each. So I can click on element and see which cell which CSS is applied to that, bit. Right? And here, very handy thing. You can check sizes, for example, and you can see where the this is very handy for CLS, for layout shifts investigation.

Sabrina Zeidan [00:17:17]:

Sometimes the size of the element that we have, it's not defined directly. It's inherited from parent, parent, parent, parent size, and you cannot understand from where the height or the width of the an element is coming from, so this is another part where you can inspect that. And I was in the top network, And here in network, we can see all assets loading this called this is called waterfall. We can see all assets loading, and you can also pick and, separately and see separately JavaScript, CSS, Images, phones, we will do it just now. Let me just reload it, control f five, so we throttle connection.

Nathan Wrigley [00:18:10]:

Let me just say, Mike, if you have a large monitor, what's can be handled is if the very top left of the console.

Sabrina Zeidan [00:18:18]:

Oh, by here?

Nathan Wrigley [00:18:19]:

You can you can do it there. Yeah. Great. So you can undock it from the browser. So Sabrina's screen, we obviously want everything on the screen. It would make no sense in Having that elsewhere because now she's got to resize it, but you get the point. You you could put it you can park it somewhere else on your, monitor, which I prefer when I'm not working on a laptop, if I've got a bigger screen. Mhmm.

Nathan Wrigley [00:18:42]:

Okay. Thank you, miss Sabrina. That was helpful. Mhmm.

Sabrina Zeidan [00:18:46]:

So getting Getting back to the performance of this exact website, it was passing. It was fine. Right? What's happening here? Let's reroute and see why Wiping. No. It's fine. Mhmm. Okay. So it was passing.

Sabrina Zeidan [00:19:03]:

It was fine. But, Anyways, I would do this for any website, and I would recommend to do this to anyone who is looking at it. I will just go and take a look Just in case, what is what is happening here? And order here seems to be fine From the very first sight, because the very first thing that should be loaded is your HTML page. You wouldn't believe, but in many many cases, your HTML might be not the the first thing to load. Sometimes it's, The third party is JavaScript, that are loaded before even HTML of your page. Sometimes it happens. So I would check this, yes, it's loading first, and I will look over here to see how fast it's loading. And here I can see that, like, here we can see how the connection To HTML is happening, and all good here, but this, I don't like.

Sabrina Zeidan [00:20:13]:

Waiting for server response, 700 milliseconds. I don't like it. I don't know why and how this is happening, but whenever I see this, when it's more than 300 milliseconds, I would probably do the following. I would just check this the server. In this case, we don't really need to do this because This site lives on staging, on Mike's staging for now, but if it was real staging or real website That is already live, and I would see that waiting for server takes 700 second milliseconds. I just want to show it Now what I would do, I would go to there is, Key sedan performance Oh, no. You you haven't

Nathan Wrigley [00:21:06]:

quite got the spelling right. It'll

Sabrina Zeidan [00:21:09]:

Yeah. Kiss again. New keyboard. Nice.

Nathan Wrigley [00:21:16]:

Nice problem, Tara.

Sabrina Zeidan [00:21:16]:

Performance test. And here, I can do this. Look. I can put My URL here, and it will test the website from servers around the world, and I will see time to first bite From around the world.

Nathan Wrigley [00:21:42]:

Oh, that's neat. I I didn't know about this. That's very I use a different thing, but that's great. Look at that. Yeah.

Sabrina Zeidan [00:21:47]:

Mhmm. And look what we can see here. Look what we can see here.

Nathan Wrigley [00:21:55]:

Yeah. If you

Sabrina Zeidan [00:21:55]:

I don't like what I see here. It's, yeah, so London, Frankfurt, And website is for UK. So this question right now, it's more for Mike's own, server question to his server, not for the website because it's stating, but in other situation, I would go and check, and This, you would expect this to be less than 2, 3, 100 milliseconds. And what you can tell from what we're seeing here, connection is very, very fast. Right? And we're checking those locations that in Frankfurt, Amsterdam, London. So we're checking the con their locations next to our, actual audience. So connection to the server is fast, but time to first bite is slow. And this means this indicates to us That there there is a problem not with the server itself, but with WordPress back end Because if it was server, we would see something here.

Sabrina Zeidan [00:23:14]:

We would see slowness here, but this means that before server So server receives the request, and before it responds, it takes server some time To put PHP together. So in this case, if I had ex access, I would probably go to WordPress dashboard, Install query monitor and see what's happening there. Maybe there are long queries there or there are issues with, autoloaded options or something. There there should be something in back end that's slowing it down.

Nathan Wrigley [00:23:52]:

Just just so that you know, Query Monitor is a plug in Which you can get from the repository. It's completely free as far as I'm aware. I don't think there's a k version, but I think maybe there is. I'm not sure. But you can download that plugin, and it gives you all sorts of data, in your WordPress dashboard, including lots of data actually in the admin bar, which is really useful to look at. Can I just interject there as well? Is it possible that because this is a staging environment, I know that a lot of hosting companies will put less resources into the Staging, setups that they have than they would do into their live, setups. So is there a possibility that because it's on Staging the the the hardware, if you like, that that the hosting company are putting into that might be a a factor.

Sabrina Zeidan [00:24:43]:

I don't think that it's the case in this case because it's not a separate URL. As I can see, Mike is hosting it on the Yeah. Website. So I both its multisite network

Nathan Wrigley [00:24:54]:

Yeah.

Sabrina Zeidan [00:24:54]:

That where where Mike has, clients' websites.

Nathan Wrigley [00:24:58]:

Thank you. Well said to.

Sabrina Zeidan [00:25:00]:

But as you already mentioned it, I think it's important to understand that when you have server and you have Production and staging on the same server. Staging is eating resources from your production. So if you have a tight server And you put staging live or you make few stations like dev environment staging environment, just keep in mind The resources that you have for production are spread now between 3 websites. Yes. There might be, no visitors there to load the website, but some processes might be happening in the background, nevertheless, and taking Resources for staging and dev sites and some versions because I've seen situations where there are, like, 5, 6, 7 development environments, created for different purposes on the same, on the same server as production, And, people are wondering why why why the back end why the back end is slow.

Nathan Wrigley [00:26:07]:

Okay. Mike Mike's come in and said that the site is running on A live shared server. So at least we've got that information. Thank you, Mike.

Sabrina Zeidan [00:26:17]:

So by this information, what we have now, We can tell that, okay, we are passing call revitals, but server responses, like, this time to fur to first byte It's not very good, and, it's good that we are passing, core vitals, lab test Right now, but this is something that we might want to look into if we are not passing because we are passing despite of it. Let's get back and see what we can see also in the loading, situation. So we have here our HTML document. And just after it, I can see there is a JavaScript file, Which actually shouldn't be happening. In this case, I would probably open the JavaScript file and look what It is doing. Ideal situation is that you have your HTML document loading. After that, You have CSS loaded but not everything but only those CSS that are needed. After that, you have images that On the 1st screen, load it and after that you have JavaScript loading, whatever it is.

Sabrina Zeidan [00:27:40]:

In many themes, It won't be possible because, sometimes JavaScript needs to go somewhere higher.

Nathan Wrigley [00:27:49]:

Mhmm. Mhmm.

Sabrina Zeidan [00:27:49]:

It's not a good situation, but if you're already stuck with that theme, you can't do much. But if it's in your power, This is the ideal order that you should have document first, CSS after, fonts, fonts, Images and JavaScript after other JavaScript. Let's see what this is doing. So this is hosted. First of all, this is JavaScript, we don't want it there, but also it's hosted somewhere outside. Yeah. Yeah. Yeah.

Sabrina Zeidan [00:28:23]:

It's hard to tell from

Nathan Wrigley [00:28:24]:

Yeah. It's so minified, isn't it?

Sabrina Zeidan [00:28:26]:

Yeah. You can. Yeah. It's, No. Sometimes, you know, by words.

Nathan Wrigley [00:28:33]:

Yeah. You look for little clues. That's right. Yeah. Yeah.

Sabrina Zeidan [00:28:36]:

Yeah. I can tell what it is doing. I don't know what it what it is doing. But if I were working on this website, I would investigate what it is doing. And do we really need it so high in critical Call rendering pass? Probably not. And then I would fiddle with the order of forwarding to make it go Down after CSS, then we can see CSS here. And for our convenience, I will switch to CSS tab Here to see CSS only. Let's see.

Sabrina Zeidan [00:29:10]:

That's a lot of CSS, and they all, so here in waterfall, you see the blue line?

Nathan Wrigley [00:29:17]:

Yeah.

Sabrina Zeidan [00:29:18]:

This is our largest content full paint, blue line. Right? So all these CSS is loaded Before, LCP, do we really need all these CSS To show the 1st screen? Probably not. What we can do here, we can use, something that would extract, CSS that is used on the page. And load it first, put it in, head, of our page. Load it first and Don't and wouldn't be making all these requests to all these CSS. So it will be, Critical rendering, CSS loaded first, and all other CSS that is needed, for example, To show footer would be loaded after. WP Rocket does this, Perf matters does this.

Nathan Wrigley [00:30:24]:

Yeah. Is that is that Sabrina, is the when you do that exercise, let's say you're in the plug in WP Rocket or Perf matters, or There's a host of other ones that'll take this work on as well. Is is it a case of just moving things to lower down in the cascade if you like And then loading the site and looking, because sometimes Java sorry. Sometimes CSS is is modeled up in all sorts of different places, isn't it? And you You can't quite tell until you load the site and see, oh, that's not that's now broken. So, obviously, that that Yeah. Can't be in that place. Yep.

Sabrina Zeidan [00:30:59]:

Yeah. And, sometimes there is CSS that should be loaded in certain order. And once you change the order, you can see glitches.

Nathan Wrigley [00:31:11]:

Yep.

Sabrina Zeidan [00:31:13]:

That's why, a lot of services, including birth matters and double that provide this functionality. They have So you click the button. You have the work done, but there is the opportunity to manual manually adjust tune what you need to tune. For example, to exclude certain classes from, this process or to make them load faster Or to make it the to make them load later, for example, there are there is tuning there that might be needed. And that's why after doing this, it would be a good idea to go to different templates and look at different templates because it would extract CSS per template. And if 1 template looks fine, it doesn't mean that another template looks fine as well. So after It's complicated process.

Nathan Wrigley [00:32:10]:

Right. Right. And, also, you were you were saying on last week's show that some of those plugins will enable you to just not load CSS on a particular page because it doesn't have any purpose being there. So it may be that you can do that exercise as well. You know, go to the different templates and figure out, well, I don't need That's because I'm on the homepage now, or I need that because I'm on an archive page or something. Yeah. Yeah. Just a couple of quick things.

Nathan Wrigley [00:32:33]:

Just a sorry. Couple of quick comments, have come in. Because Sabrina's on full screen, she can't see the comments, so I'll just quickly raise them in. 1st, Nero was just asking, Mike if he was on the latest version of WordPress, which he, said it was. And, Nero was asking, does that possibly affect Speed, the the latest version of WordPress. I guess, in short, probably not massively, but they are making quite a lot of progress on WordPress's core speed. But Sabrina can answer that in a second. So does core updates affect speed? And, also, Mike has a question about If he enabled his themes enable or disable, sorry, the themes enable CSS preload option, would that help? So let's go to the Does the WordPress version affect speech? We tackle that one first.

Sabrina Zeidan [00:33:25]:

This is a very good question, and it's not a simple question as as it might look like. It's a very deep question, in fact. When I see this news, like, I know a lot of people in performance team who work on or in WordPress core, Actually, a lot of my colleagues from XWP or WP Rocket or people whom with whom I worked, they work for performance team. They contribute there. And when I see news that performance team did such and such, and this will improve, The performance of such and such element, I feel very happy on one side, but in another, I think there is a lack of understanding of such news. So these Improvements, they are affecting all WordPress websites in the world, Huge amount of websites but in a small way. So for your particular Website, it might not be seen as improvement at all because most likely, Your particular website is slow was slow not because of that small thing in the core, you know? Mhmm.

Nathan Wrigley [00:34:47]:

Yep. Yep.

Sabrina Zeidan [00:34:50]:

When, they test before, after, like, here is an issue, we can fix it in this way, This is our lab test for performance of this function, for example. We improved it in such way, and here here are our improvements. This is beautiful, but these numbers, for bare WordPress, installation, in lab. And when even if you have Older version of WordPress, but it's clean, neat. It doesn't have buggy plug ins. It doesn't have old functions. It doesn't have flaws of Pop ups and all third party services that are there, it might be very fast, And you can have the latest version of WordPress, but with all that baggage with you, you won't notice any difference after update, And that's why this news, they make me a little bit sad because they are putting so much effort into improving, important things, but many people won't see the result of these efforts because their websites are So slow, like, it was slowed in, for example, like, LCP was 6 seconds, and now because of such efforts, it's 5.4. What does change? It doesn't change much.

Nathan Wrigley [00:36:20]:

I'm with you. And Okay. So it does matter, but caveat emptor, you still gotta do this work. And then Yeah. Let's just deal with this one. Obviously, in his theme I don't know what theme he's using. I didn't catch sight of that. Maybe it was Cadence? I think I saw that word.

Sabrina Zeidan [00:36:35]:

Yes. Exactly.

Nathan Wrigley [00:36:37]:

He says he's got an option called enable CSS preload. I don't know if you know what the cadence theme does there, off the off the top of your head.

Sabrina Zeidan [00:36:48]:

I don't know. Maybe it does, because, some themes and filters, they have this inbuilt functionality. When when it extracts the UCSS and put it in the head Section of the page. Maybe this exactly what Canon's, developers meant by Preloading CSS. Maybe it does exactly that. So to check that, Mike, you can, enable that function And look, in the code. So if it does what we are thinking it's doing, you won't see You shouldn't be seeing CSS files loading here, but instead, you would see CSS Control I. Sorry.

Sabrina Zeidan [00:37:39]:

Control your keyboard. Instead, you would see CSS, added to the head part of your, page, I can see cartons based CSS here, so there is a little bit Already. You you see? Gardens global in CSS. Mhmm. So there is a little bit of CSS already here. Maybe that option Would bring more staff in hand and, free up those requests. Important thing here to understand that we don't want to bring all CSS here. We only want CSS that is actually used On the page and, ideally, that is, used on the 1st screen or first 2 screens to be in the head, part and all other CSS to be loaded later.

Sabrina Zeidan [00:38:34]:

This is ideal situation.

Nathan Wrigley [00:38:36]:

Okay. Alright. Back to where you were. Sorry, Sabrina. We had

Sabrina Zeidan [00:38:40]:

a Yeah. I think we're back to something you mentioned, Nathan, about, perf matters, for example, have this, functionality where you can disable, load of assets of, plugins that are not used On certain pages, and here is a good example of this. Contact form, contact page. So we don't have contact form on other pages. You know, some websites, they have contact form on every Single

Nathan Wrigley [00:39:13]:

Yeah.

Sabrina Zeidan [00:39:13]:

Page of their website in, for example. On this website, we don't have it. So we don't need to load JavaScript and CSS of this contact form on any other page except of contact page. I would probably take a look with what this contact form is done. It's done with. Okay. And let's see what it uses as CSS. It uses block styles, so I don't think we can optimize in that way it here.

Sabrina Zeidan [00:39:53]:

Okay. But

Nathan Wrigley [00:39:56]:

But if there was a separate file for, I don't know, the Cadence contact form block and you could see that, you could potentially With something like Perf Matters or WP Rocket, you can switch it off except, obviously, on that page where you would need it.

Sabrina Zeidan [00:40:11]:

You can do it, for example, for contact form 7. Mhmm. It loads its JavaScript and CSS separately. So for the pages where it's not in use, you can toggle. In Perf Meters, you can toggle do not load CSS and JavaScript on Are the pages except of contact form? Double broker doesn't have this functionality. It proof matters. You can also do this as a function, in functions PHP. Just, if you put the function, If page such and such, if the page is contact us add those CSS and JavaScript them.

Nathan Wrigley [00:40:58]:

Yeah.

Sabrina Zeidan [00:40:58]:

If it's something different, Deku. Daqui sorry.

Nathan Wrigley [00:41:03]:

N n q n q and d q.

Sabrina Zeidan [00:41:06]:

D q. Thank you. I I'm always confused with the presentation of this. Yeah. This is what we can do. Alright. Let's It's, 43 minutes. I don't

Nathan Wrigley [00:41:20]:

think so. What that text. Mind you, we've covered a lot of ground. I think there's been a lot of good stuff. It's been great. Don't worry. We're in good shape.

Sabrina Zeidan [00:41:29]:

Let's let's do this. We'll take a look That's it. And we'll try to figure out one more important thing here. Okay. We talked about, it's, time to first bite, this JavaScript that is loaded where we don't want it, right, And then the CSS that we can improve. Now we have fonts following. This is a normal situation. Fonts should be following, but what I would also do, I would switch to font and see how many fonts are loaded.

Sabrina Zeidan [00:42:07]:

And this is beautiful website. This is, it's only 2 fonts that are loaded here. This comes from my Loom extension. This is not from the website. Yeah. Yeah. So we have only 2 fonts loaded here. Cool.

Sabrina Zeidan [00:42:21]:

Beautiful. How nice their initiator. It's, What is calling that form? They are called directly. Cool. Because sometime not sometimes, often, Indeed in, in Elementor, for example, font file would be called from CSS. So in order to load font, it should be, a call down to CSS, and then from CSS, there would be a call to font. And so often, it's a call to Google phones, so it's few calls that you can easily skip. But here, the situation is good.

Sabrina Zeidan [00:42:59]:

Okay. Let's move forward. What else? Let's take a look at this, JavaScript. Mhmm. And I switched to JavaScript, and we have our blue line here. So these 4 JavaScripts are loaded before LCP and all others after. Without even looking What are those JavaScripts? I can tell that this is a good situation. It's only 4.

Sabrina Zeidan [00:43:36]:

It's not 44. This is beautiful all already. And these are unknown for me script that probably should go out from here. It's, that was the one that we saw

Nathan Wrigley [00:43:50]:

at the top. Right? You mentioned that one.

Sabrina Zeidan [00:43:51]:

Yeah. Yeah.

Nathan Wrigley [00:43:52]:

The same one.

Sabrina Zeidan [00:43:53]:

And navigation and then banner. Probably, this banner should go somewhere down as well. Oh, it comes from the same place. Look. Yeah. Client data, binary JavaScript. I would I would suggest that this binary JavaScript can be easily delayed without sacrificing any functionality or anything. Just like we have, all other things delayed, we need to delay that one as well.

Sabrina Zeidan [00:44:21]:

Let's look at images now. What we have here? Logo. Logo. 1st. In on the 1st place. Cool. Good. And SVG.

Sabrina Zeidan [00:44:35]:

Beautiful. Okay. Another thing. What is it? Address, email, SVG. This is from here?

Nathan Wrigley [00:44:48]:

Yeah. These ones. Yeah.

Sabrina Zeidan [00:44:50]:

Like, ideally, this should be amazing.

Nathan Wrigley [00:44:53]:

Yeah. Yeah. Yeah.

Sabrina Zeidan [00:44:54]:

Yeah. But I wouldn't spend any time on doing this because there are no problems here. Less than half a

Nathan Wrigley [00:45:03]:

kilobyte in some cases. I know 7 Yeah. Flights. Yeah.

Sabrina Zeidan [00:45:07]:

Yeah. Yeah. While we have a little bit of time, Let's just look at mobile version. So for mobile version, I would, do the same. I would open this panel, and then I have this Small toggle here when where I can choose the device I'm viewing, as. And I will choose iPhone 12 here, and I will throttle the connection more to fast reach and Just let's take a look how it's loaded. And, usually, when I'm doing this on one screen, I would put You

Nathan Wrigley [00:45:44]:

can push it to

Sabrina Zeidan [00:45:48]:

The other side, can't you? That's nice. Yeah. Sorry.

Nathan Wrigley [00:45:49]:

That's alright. You can just drag it, can't you? There you go. Yep. Yeah. Lovely.

Sabrina Zeidan [00:45:58]:

Lovely. Let's see. That wasn't super fast.

Nathan Wrigley [00:46:15]:

Oh, something definitely largest content for pain, is it?

Sabrina Zeidan [00:46:20]:

Yes. It was largest contentful paint that is slow. Beautiful thing that we don't have layout chiefs here. This is our luck. But Why? Why LCP is slow here? And I have an idea why, and let's check if I am right. This image, which is our background, right, Let's check. So for this, I would do, right click here on the element that's is our LCP inspect, and I would open the, element itself and see how this image is where it's defined Or if it takes me longer, I will check if the one that is loaded is the one I'm looking at.

Nathan Wrigley [00:47:14]:

Yeah. You could, I guess, contact hyphen scaled dot webp.

Sabrina Zeidan [00:47:18]:

Uh-huh. So I would do control f here. Was it contact

Nathan Wrigley [00:47:27]:

hyphen scaled

Sabrina Zeidan [00:47:29]:

Scaled.

Nathan Wrigley [00:47:30]:

Dot Yeah. With a d Uh-huh. Dot webp. That's it.

Sabrina Zeidan [00:47:34]:

Background image. Yeah. Yeah. So Background image. I would suggest that it's not sized properly. That's why it's taking a while. This this it can be.

Nathan Wrigley [00:47:55]:

Is it gone? There it is. There it is. Right at the bottom. Yep. Grab that. Hey. Hey. Hey.

Sabrina Zeidan [00:48:00]:

So You can't

Nathan Wrigley [00:48:02]:

get in there. Can you double click into it or no? Yeah.

Sabrina Zeidan [00:48:05]:

Yeah. So what, the reason What, how we can make this bid faster? First of all, if we have this opportunity I don't know if you can do this, But if you have this opportunity, do not put it in background image. Make it look as a background image. But if it's on the 1st screen, You would want to put it in image or picture tech better because it would be loaded faster than bet than image called through CSS, So if there is opportunity in the theme to make this not, as a CSS Attribute, background. Yeah. Yeah. But picture, do this. This would be a better solution, and we can open it Open it,

Nathan Wrigley [00:48:57]:

and look it. How big it is.

Sabrina Zeidan [00:48:59]:

Itself. It was 50 kilobytes. And for mobile, we would probably want to cut it to the right size because it's loaded in It's full size, and then in browser, it gets scaled and fit, and this takes time. Not only and I think there is a con there is confusion here, about these images. It's not because it's not only because it's 50 kilobytes, And we will do 30 kilobytes from it. It's not because of those 20 kilobytes. It's because of calculation done in the browser. When you load the image that is not of the size that is needed And you use CSS to size it properly.

Sabrina Zeidan [00:49:48]:

There is calculation behind it, and it should happen using resources, using browser resources, computer resources, or mobile phone resources, and this might take longer time than actually load Kilobytes of image. This makes sense.

Nathan Wrigley [00:50:06]:

Yeah. It does. Makes perfect sense. Mike says that he thinks he's not sure. I don't think. He thinks in the cadence theme, there is an option to, load up different images on mobile. And so, Yeah. Having that as having that as an actual image but also swapping that out for mobile, I mean, you could make it a 3rd as big, couldn't you? And, Yeah.

Nathan Wrigley [00:50:29]:

It would still Yeah. Still worked perfectly well. And

Sabrina Zeidan [00:50:33]:

the trick here would be not even to cut those 20 kilobytes From the image size itself, but to to skip the work needed from the browser and, mobile device To to get done?

Nathan Wrigley [00:50:49]:

Yeah. Yeah. Yeah. All the computation involved in yeah. Yeah. Yeah.

Sabrina Zeidan [00:50:52]:

Exactly. So this would be our Last point today, I think. It's, it's not that much that we looked at,

Nathan Wrigley [00:51:02]:

sadly. Oh, don't be so wild on yourself. I think we looked at a lot. I hope Mike has able been able to gather, a little bit from that. I think I think I've gathered a a few bits and pieces, if only, to navigate around the inspector and begin to familiarize yourself with where all the tools are and What have you? Shall I take the screen share off? Yeah. Go. So, Mike, hopefully, you got something out of that. It's, it's gone dark where you live, Sabrina.

Nathan Wrigley [00:51:33]:

Now it's like I think it's the wind's a

Sabrina Zeidan [00:51:36]:

light shining just

Nathan Wrigley [00:51:40]:

Everything in the background looks really dark, but never mind. That's absolutely fine. So, that's a wrap for today. If you fancy sharing this, I will put it out on social not on social media. I'll put it on the website. Let me just, Share that one more time. I'll share the little caption for that. It will go on to the archive, which is here, wpbuilds.com/speeditoparchive, all separated with hyphens.

Nathan Wrigley [00:52:08]:

You'll be able to see that probably Tomorrow, probably at some point. And if you want to share that with your friends and colleagues, you'll be able to see the progress of all the episodes. If you wish to, like Mike did, if you would like to submit your own site, there's a form at wpbuilds.com Forward slash speed. If you go there, then you can submit your site, and Sabrina will get in touch and, figure out the level of access that you, that you require. One last, one last little comment from Mike. You obviously did find it useful. So he says thank you so much. Lots of information to take forward.

Nathan Wrigley [00:52:43]:

And, Nero said he learned a lot about the inspector tool today. So, yeah, isn't it funny how things that you do every day, Sabrina, you kind of you probably have the assumption that, well, everybody can Do that. And, of course, they can't. Just things like the inspector is total mystery to a proportion of the people. So, Yeah. That's it. Thank you so much. Anything to add before we knock it on the head, Sabrina?

Sabrina Zeidan [00:53:09]:

I think, I'm looking forward to for the next episode, I'm looking forward to what we will have submitted for the next week.

Nathan Wrigley [00:53:17]:

Yeah. That'll be nice. Well, we'll be back this time next week, so Thursday, 3 PM UK time, whatever that is, wherever you live, and, we will see you in a week's time. Thanks, Sabrina. Cheers.

Sabrina Zeidan [00:53:29]:

Thank you. Thank you, Nathan. Thank you, everyone, who joined. Bye.