When to lazy load images – Speed It Up – Episode 2

[00:00:00] Nathan Wrigley: This episode of the WPBuilds podcast is brought to you by GoDaddy Pro, the home of managed WordPress hosting that includes free domain, SSL, and 24x7 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 percent off new purchases.

Find out more at go. me forward slash WP builds. Hello. Hello. Hello. How are you doing, Sabrina?

[00:00:40] Sabrina Zeidan: Hello, Nathan. Hello, everyone who is watching us. I'm doing good.

[00:00:43] Nathan Wrigley: Thanks. How are you? Yeah, good. Thank you. Very nice to be joining with you again. We started last week a brand new show. It's called Speed It Up. And it's going to feature Sabrina, who is...

She's there, I can't get the side right. And Sabrina has a background in making websites a whole lot faster, especially WordPress websites. And last week, if you didn't see Sabrina talked about the benefits or the drawbacks or the ways to speed up a site, which has got a video as a background in the header all sorts of different ways that you can make that go quicker, not some of them.

Actually with the website and some of them about actually making the video smaller, that kind of thing. But today we're moving on to a different topic. We'll tell you what that is in just a moment, just a few bits of housekeeping before we start that. If you think this would be of any interest to any of your friends or colleagues, then there's a URL.

You could share it. That's going to be the easiest way for people to drop in. It's wpbuilds. com. Forward slash live. You've got a couple of options there. There's a separate chat box to the right hand side of the player. If you're on a desktop and if you want to comment in there, then you have to use a Google account because it's YouTube comments.

So feel free to drop any comments in there. That's great. Alternatively, if you don't want to log into anything. Actually inside the video player on that page, top right is a little live chat button. It's literally inside the video player. So you can click that and you don't have to be logged into anything.

You just need to tell us what your name is. And so you can you can reply in there. If you're in our Facebook group, there's a little extra thing that you have to do. And that's because Facebook protect your avatar and name and things like that. So you have to go to wave dot video. Forward slash live forward slash Facebook, and that will authorize us to see who you are again, just before we begin, the intention of this show is as the weeks roll on, it would be very nice if Sabrina had some user supplied websites.

So I'm looking at you, dear listener, dear viewer. If you want Sabrina to take a look, it's absolutely free, which is pretty cool. All right. Sabrina will take a look at different aspects of your website to discover what could be, what could be holding things up and little bottlenecks and things like that.

And if you'd like Sabrina to take a look, then go to this URL, wpbuilds. com forward slash speed. It's basically very simple. There's a form there with a very small amount of fields, like six or so fields. And it will just give Sabrina the information that. She needs to get having, basically start to have a look at that page and figure things out.

There are other options in that form that you can check if you want to give her backend access to WordPress. Sabrina will then communicate with you, in a sort of more. One to one way, figuring out how you're going to supply that and give her the admin access that she needs to go and figure things out.

I think that's it, Sabrina, in terms of the the the sort of the setting things up for this particular show. I will just say one thing Sabrina's internet connection, we'll just see how it goes, but prior to starting the call, it was like a little bit patchy, so if it glitches a little bit, just let's be forgiving.

Let's hope that it all works out, though. But we've got Mike joining us. Thank you, Mike. Really appreciate it. I can't believe it's been a week since the first one. I know what the heck happened to the last seven days. Yeah, that's pretty remarkable, but thank you for joining us again. I really appreciate it.

So sorry for all of that, Sabrina, I've used up a full seven minutes having a chat with myself. Should we get your screen shared and get you started or is there any preamble you wanted to do first? Sure, I

[00:04:38] Sabrina Zeidan: would like just to mention before we start about the form that there are a few options there and Yes, full access to your back end will give me More information about your website so that I can see What are back end problems might be causing front end problems, but it's not always possible to provide full access to the live website.

And if it's your case, that's okay. There are two options there where you can provide just access to Google search console and Google analytics so that I can see what's happening there without access to back end or the the lowest. Tier that you can choose without any access if you want to suggest your website If even without any access we will look at front and only we can look What we will be doing today with another website And we will see we will get a lot of information from there as well not everything but Just stick with us.

We'll look at the website without no access right now, and you'll see how much we can see there. And today, we are going to talk. Last time we were talking about background videos on the first viewport. when you have this hero image on your first viewport. And today we are going to talk about images.

There are loads of information on internet how to optimize your images, which formats you should use, how to scale down your images and everything. But what I would like to start Today is the thing that is far more important. That stuff you can google, but there is a thing that is more important than knowing which format to use.

We'll touch that, but it's not as important as understanding which images are blocking. Your speed right now, because there is no point to optimize images that are not blocking your speed. If you just tick a box, you install some optimization plugin or you buy some service that would serve you WebP or stuff.

It doesn't matter if those images are not the ones that are actually blocking your loading. So let's try to understand together on today's example, how to figure out which images you should be paying attention to, how to find those images that are blocking, because it's the first thing that you need to know before optimizing something.

Shall

[00:07:26] Nathan Wrigley: we? Okay. Yeah. Shall we go for it? Shall I share the screen? Yeah, I think we're gonna get the recursive. Do you wanna just put on your screen the one that you wanna have a look at? And then I'll stick it on so we won't get the there we go. Okie dokey. Whoops. There we go.

Perfect. Over to you then, yeah. I'll interrupt if somebody makes a comment or if I have any intuitions or anything like that. But yeah, go for it.

[00:07:53] Sabrina Zeidan: No, I think it would be cool if we read comments along the way. I cannot see them now, so if you can read them, that would be cool. There's

[00:08:01] Nathan Wrigley: only two so far.

There's just the one from Mike and there's one from Elliot saying Hi Sabrina. From all at the WP, I guess that's Cheltenham meetup Chelt meetup. I'm guessing it's happening on a Thursday. Is that happening now? That's, or is that somewhere you've been before? Anyway, thank you, Elliot, for joining us.

Appreciate it.

[00:08:25] Sabrina Zeidan: Yeah. Thank you, Elliot, for joining us. Yeah, let's look at this website. So it's a very. common website that I have here and it's not loading tremendously slow. I'm intentionally not picking websites that are awfully slow because if the website is awfully slow, it's it's very easy to see what is blocking while when your website is loading like In 5 seconds instead of 2 seconds, with every single second, it's becoming more and more complicated.

So this website, it's not slow, it's fine, but it's not passing Core Web Vitals, and also it can be easily, it can be easily so much better. Even... If just, if we fix this image issue, let me show you what I'm doing. I'm opening first of all, Chrome dev tools. I'm using a keyboard shortcut, but most people use like right click and then you go developers tools.

And here you have inspect and on mock, it will be the same, right? Click and inspect. So I'm opening my Chrome DevTools, I'm opening Network tab here, and here I will make it full screen now. And here I can see everything, absolutely everything that is loading on this page, including any requests to third parties any API AJAX requests.

And for now, I want to go to images. What I'm going to do, I'm going to check. Which images are loaded when I load the page without scrolling, right? Without scrolling, scrolling. I'll do like this, so that we can see that it's updating. I'll do Ctrl F5. So what ideally for this, let me scroll to the top of the page, so our experiment would be fair.

So ideally, what we should, what we expect to see here in our loading tab, we expect to see only what we are seeing actually on the first screen. This would be ideal situation. So only images that are showing in first viewport. Should be loaded here without, before we move the mouse, before we click anything, before we scroll, this would be the ideal situation when only what is needed for user for us now would be loaded instantly and everything else should be lazy loaded.

This is the idea. Let's see what's happening here. First of all, the very first thing that we can do here, that there is a pop up, right? And it's loading instantly. I'm not doing, I'm not moving my mouse. I'm not scrolling. I'm not doing anything. And it will load instantly. First thing we can fix, because in this case, this pop up is very bad.

First of all, it's competing with the main content in our loading order. What is the main content here? The main content is not pop up. The main content is the actual content, the slider in the background. So that should be loaded first, and this thing shouldn't compete with it, because now it is competing.

This is bad in terms of speed, but also it is bad in terms of user experience, obviously, but Also, in terms of how Google sees your page, because what Google will measure as largest contentful paint on your page as LCP might be this pop up, which means it doesn't matter how fast the back, the actual stuff is loaded until this one is loaded.

Google won't count LCP as passing, which increases your LCP passing Core Web Vitals. I've seen that many times the website itself loads fast, but then they have this pop up that is counted as a largest contentful paint by Google assessment. And this is the reason why they are not passing. And the only thing to fix it to fix the situation is to delay this pop up a little bit.

This usually can be done in the plugin that provides this functionality. Most of the plugins have this thing like show this after two seconds. After the page load or show it on scroll action or show it on exit intention or something like this, right? . . This is one option how you can delay it and the other option you can just delay JavaScript through W Rocket or other plugin optimization plugin.

You, this should be JavaScript that you'll be dealing. So this is. One thing, removing this pop up from our viewport, right? And after we remove the pop up, obviously, the image that is served in this pop up would be removed from a critical rendering path as well. And you will get faster loading immediately.

Now, let's imagine that we removed it from our loading path. What else we can do? I'll close it for now. What else we can do? Let's look here. Here we have logo on the first screen. Logo and slider. So anything that is not logo or slider, any images shouldn't be loaded. Let's take a look which images are actually loaded.

Here we go. 61.

Image is loaded, 61 images loaded, I didn't scroll, I didn't click on the I haven't done it yet. Even before I have done anything, it's 61 images that have been loaded, right? And... If I am to work on this website, I would probably, I wouldn't be picking one by one because I am a lazy person and I am all about efficiency I would probably go to this column size and I will just sort it by size and I would look So, yeah.

Which images are the largest one and I would work on that first like low hanging fruits, yep It makes sense, right? so and here I see that there are quite a few images that are 500 400 300 like quite a few What I can do now, I can just take a look at this image at its name I have here, copy, copy let it be copy link address.

And now I would like to find this image where it is to understand if we need it or not, right? Because it might be the slider image and then there will be another story. So I copied the name of this image and I will go to elements. And I press control F here, and I will search my screen to understand where exactly on the page the image is, right?

And this image is over here.

It's way down.

[00:17:10] Nathan Wrigley: Yeah, it's fairly far down, isn't it? Yeah.

[00:17:12] Sabrina Zeidan: Yes. Let's see. So it shouldn't be, like, by all means, it shouldn't be loaded. Let's see why it is loaded. That would I be doing next. I will try to investigate why it is loading. Let's take a look at the code. Blah, blah, blah, blah, blah. Ok, I can see that here it is.

They are using loading the attribute loading lazy which is lazy loading provided by browser. If user's browser supports lazy loading, if user's browser can recognize this attribute and read it, this image It's supposed to be lazy loading. I'm using Vivaldi, which is built on Chromium.

And it can recognize lazy loading. But in this case, for some reason, it doesn't recognize it, right? Why? There is no easy answer to why. It's much easier to fix it somehow than trying to understand why in specific version of your users. browser and you wouldn't know that no one would come to you and tell you like, in my browser your images are not loaded.

Yeah. So it would be so much easier to, instead of using this lazy loading and this lazy loading browser lazy loaded, it comes. Out of the box in WordPress in the latest WordPress versions, which is great, but it doesn't work in all cases. So what we can do, we can use any plugin that does lazy load for you that doesn't use in built browser lazy loading, but it uses JavaScript.

I'm, I'm a big fan of WP Rocket. I use it everywhere. I used to work for WP Rocket and I love this product, but there are other solutions that can lazy load images for you. And then it will go through JavaScript. Maybe, if you have the same situation. This is the main point of this series that we are making.

There are no easy solutions like go and install this plugin. Go and tick that... checkbox. There is no if you are a developer, you have to look what is happening here, because without looking at code, at what's happening in browser, you wouldn't know which images, what problems, what bottlenecks. If you have exactly the same situation, your images are not using any other lazy loading, but browser lazy loading, but they are not lazy loaded for some reason, you can go and try a plugin for that.

Sometimes it wouldn't work. Help, which, for example, when it's background images when images, URL coded in CSS for example, DDAs that a lot like it's not like here we have image inserted as image tech, right? Yeah. Yep. But sometimes it would be d. Class image in the ground. And then here in our styles, we will have passed to that image that will be loading.

These, a lot of plugins are not able to handle it. It's very hard to lazy load these things. Or for example, it's very hard to lazy load. Images that are inside of pop ups or pop ups, basically anything that, that is not in iframes, in pop ups, that is not part of your main content. I, a minute of self advertisement, I made a solution I, I should have probably prepared link to it, but I made a solution.

It's JavaScript solution that is called lazy load anything. And that my solution it's good. It's not WordPress plugin or something. It's JavaScript based solution that allows me. That's what I do for my clients because I have a lot of cases like this that allows me to lazy load basically anything It can lazy load anything in background.

It can lazy load anything in pop ups and so on so forth Before we add link in the description to this video or I will look for it later. Yeah. Thank

[00:22:22] Nathan Wrigley: you. That'd be good Yeah.

[00:22:23] Sabrina Zeidan: Yeah. Or you can just search gist github dot com and my name and you can search lazy load everything or just Sabrina Zidane lazy load anything.

[00:22:35] Nathan Wrigley: I'll do that whilst you carry on and we'll see if,

[00:22:37] Sabrina Zeidan: yeah. It's just a script that you can customize and you can modify for your needs. The complexity of using such solutions, my solution, or I wasn't able to find someone else's solution. That's why I made my own. I wasn't able to find a solution that would be universal for all cases.

So the complexity of using such is that you only can tune it for one website. You specifically tell it where the image is. So you tell the class of the parent div and the class of the image, and then it knows what to target. That's how it works. So this is for complicated cases. But... Even if, in most cases, it's not that complicated.

So here, for example, we can just try to use lazy load plugin to lazy load these images. Okay, that was just one image we looked at. Let's see what else we have.

[00:23:47] Nathan Wrigley: Let's see. By the way, I've got the the URL for that. I'll just pop it on the screen. Cool, thank you. That's Sabrina's GitHub repo. It's github. com forward slash Sabrina hyphen Zidane. And then as you'd imagine, lazy load, forward slash lazy load dash anything. Great.

[00:24:09] Sabrina Zeidan: Okay. I'm just seeing that we're already, I don't know where 30 minutes went.

[00:24:14] Nathan Wrigley: That's eight of it was me, wittering on,

[00:24:19] Sabrina Zeidan: all right. Let's move to the next thing, but the main principle here is that you open image tab and you refresh your page and without clicking and scrolling. Ideally, you should only have the first image and and your logo and what appears on the first screen.

And then you can investigate what's loading out of this scope. Another thing that I would mention, that I would like to mention on this website, for example, it's a good example here we have slider, right? This slider has 1, 2, 3, 4, 5, 9 pardon, 8 images. Only first image should be excluded from lazy loading, should be pre loaded, and should be should have attribute loading eager.

Only the first one. So what you want to do with any slider that you have on your first viewport I'm not talking now about sliders that you have somewhere down below the first viewport. Specifically about slider on the first viewport. You would look at this image and... You would look at it code.

Let's see how it's happening here. Here it's loading eager. Cool. It's not lazy loaded. Sorry,

[00:25:54] Nathan Wrigley: Just for the benefit of anybody that doesn't know what's what's eager. Ah,

[00:26:00] Sabrina Zeidan: eager means eager. So it's the same attribute. We looked before at loading lazy. This is the attribute is loading and. Lazy is the value of this attribute and here the value is eager.

Lazy means loaded later when the user scrolls to it and eager means loaded as fast as

[00:26:26] Nathan Wrigley: possible. Exactly,

[00:26:27] Sabrina Zeidan: thank you. So it's not lazy loaded, big win, beautiful. What else we can do to load? Our task is to load the first image, the first slide of our slider as fast as possible. So we want to make sure it's not lazy loaded.

Loading eager Attribute is not necessary. The main thing is not to lazy load it. This is the main thing. Not to lazy load. Okay. This is the first thing. And the second thing what we can do we can pre load it. It's a tag that you add in the head section that says pre load this image.

And it will be pre loaded before it will start loading before everything. So it will improve. It's speed of coming into, it will rise its priority in critical rendering path even higher. So that's another thing that you can do. But, let's look at another slide. For example...

[00:27:41] Nathan Wrigley: So we're hoping this one's lazy. No! No.

[00:27:45] Sabrina Zeidan: Of course it's not lazy. We can hope, but slow it in eager too. Okay. And this is the thing. This is the thing, what they did. They just put attribute eager for every single slide in this slider, but it makes absolutely no sense. Zero sense. You are saying, load these eight images as soon as possible, and they start to be loaded in parallel as soon as possible, while it should be just one image loaded as soon as possible, and all others loaded sometime later, they should be lazy loaded.

Does it make

[00:28:30] Nathan Wrigley: sense? Yeah, it makes perfect sense. Let me just say it back to you, so that I've, so that if I have understood it, any, even a. Pigeon could understand it frankly. Okay, so on the slider, the first image is the one that matters because it's the one that's gonna be inspected when the page loads.

So we want that one, just the first one to be loaded with the attribute of eager everything else because it's off the canvas we want as lazy.

[00:28:59] Sabrina Zeidan: No, not exactly. The first one should not be lazy lorded through. Browser. Lazy, loaded. Got it. Lazy loaded. Yeah. Or plug a lazy, loaded. You just want to make sure that the first one is not lazy, loaded is

[00:29:17] Nathan Wrigley: not yeah.

Okay, got it. It's not lazy

[00:29:19] Sabrina Zeidan: loaded. Yeah, because as we saw before, this attribute loading, eagle loading lazy, might not be recognized even by, by users recognized by the browser that user. is using. Yeah. So the first one shouldn't be lazy loaded. That's what you want to make sure. Okay.

[00:29:41] Nathan Wrigley: But it's not a good idea to have every one of them as eager.

[00:29:46] Sabrina Zeidan: Awful idea. You pro you actually say prioritize everything. Yeah, but then it makes no sense. The word prioritize means that you should prioritize. One thing and one thing here on this website, on this web webpage is the first. image of the first slide. This is our number one priority.

This is our LCP, Largest Contentful Paint. We should load it as fast as possible.

[00:30:15] Nathan Wrigley: Perfect. Just a couple of things. I'll throw in a few comments. Firstly, Chris just says that he needs to, Chris Lane Jones, thank you for joining us, says he needs to use lazy loading more often. He also then just goes on to comment and says this is a nice video, which is great, a great video.

And then Mike has a question and it's in reference to your Lazy load anything. Script on GitHub. We put the link up on the page. I'll show it again in a minute. He says, can the lazy load anything code be used? It can be used on any WordPress website.

[00:30:48] Sabrina Zeidan: On any website, not only WordPress. It can be used on WordPress

and

[00:30:55] Nathan Wrigley: not WordPress. There it is once again. github. com forward slash Sabrina dash Zidane forward slash lazy dash any, sorry, lazy load dash anything. And in answer to your question, yes, it can be used anywhere because it's JavaScript. Excellent. Okay, carrying on. We've done the slider. We've got some intel from that.

What do we want to look at now?

[00:31:19] Sabrina Zeidan: Next thing like I was planning to spend more time on investigating this image tab, but we don't have much time. So I will summarize. First, you want to look at this network. Tap to understand what is loaded in here. You can copy the name of the image to see where exactly it's on your page.

Do you would rather sort it by size to understand to have it prioritized, not to fiddle with like five kilobytes. As well. You have 500 kilobytes. Yes. And what else? What else I noticed just here now. So there, there are a lot of, there is a lot of information. About four months I will be workweek about this, about formats because there is plenty of information available.

First of all most of the browsers. Can recognize Web P, so wherever is possible use Web P. You don't even need to use HPAC or PNG and then convert it to Web P. You can use Web P now straight. Just. Out of box, you can upload WebP images to WordPress and 99 percent of the users will see them. It's you don't even need to do this job of converting.

And

[00:32:54] Nathan Wrigley: they're so much smaller. They are a fraction of the size of JPEGs and PNGs. Yeah, but there

[00:33:00] Sabrina Zeidan: is a trick, there is a trick. The problem is that if you try it yourself, just, you can go even to this website download this JPEG image and try to make WebP version out of it. So this JPEG image, 545 kilobytes.

If you try to make WebP version of it, it will be about 300 kilobytes. But, which is good, 300 kilobytes it's better than it was, but it's not perfect. Very easy, like a very easy step that you can take to make it so much better is Take your JPEG, optimize JPEG first, and only after convert to WebP, and then the size will be 100 kilobytes, and you won't see any visual difference.

[00:34:03] Nathan Wrigley: You're going to have to say that again. Your audio dropped out just for a brief moment, but it meant that I didn't quite get what you said.

[00:34:11] Sabrina Zeidan: Huh. Huh. Before making WebP version, before converting to WebP, optimize your original image. So you want to take all your checks and optimize them first and only after that.

Those optimized versions you want to convert to WebP. Was

[00:34:39] Nathan Wrigley: my audio good? Yeah, that was fine. Thank you. I totally got it that time. Yeah. Thank you.

[00:34:44] Sabrina Zeidan: Sorry. I can only see my screen and I can't see your face. So I cannot see your face expressions on what

[00:34:53] Nathan Wrigley: I'm saying. I think these days as well is that all the image software, the Adobe Photoshop and more or less everything will.

We'll export it as WebP out of the box. And so hopefully going forward, you won't have to convert anything. It will just be WebP in the media library. Yeah.

[00:35:10] Sabrina Zeidan: Yeah. But the scenario that I see a lot is when people have a media library, they install some plugin that would create WebP versions for them.

But those images are not optimized originally. Yeah. And they're creating web b versions from not optimized images. Yeah. And another thing with optimizing images, I don't use any plugins to optimize images. Usually I might do this, I might install them after my work, but when I do my work I do it.

Either through a command line or on my computer because if you just make tests yourself and try to optimize images with Plugins with some plugins, I wouldn't name those plugins, but some plugins are not doing very good job in optimizing images like yes, it will put a nice title saying your media library became 20 percent smaller because we optimized it.

Beautiful, but it could have became... 50% smaller, easily. . Maybe this is a thing that you would like to try. If you have this media library to optimize, try desktop optimizers or common line optimizers to optimize your images versus plugins and see the difference. If there is no difference, maybe your images were origin.

Optimized well before that's okay, but you might see difference. I see it a lot. That's why I use other software. Okay. Yep. Yep. Yeah. Another thing that is often overlooked. Like we're talking about WebP and formats. And by the way, before moving forward about for formats. PNG, most of the people know this, but I will just remind that PNG is supposed to be used only for images that have transparency.

If your image doesn't have transparency, do not use PNG. It will be three times larger than JPEG. Just don't use this format in the way it's not intended to be used. It's only intended to be used to transparent images. If it's a regular picture, it should be spec or WebP that, this is a big bottleneck that I see that people would be using, just using wrong formats.

[00:38:03] Nathan Wrigley: Got it. Good to know.

[00:38:09] Sabrina Zeidan: Ah we're talking about images and sizes and everything. It's good to have media optimized, of course, and served in the right size. I will talk about it in a bit. But much, much more important is the order. Say you optimized your image from 300 kilobytes to 100 kilobytes by using proper format, by optimizing it and everything, which is good.

But... If it's somewhere below the first viewport and it's loading, Before the image that is above it doesn't really matter because it blocks your load in either way, and at the same time, if you have super fast first screen where everything is optimized and then there are some thumbnails or something, I dunno, something below that isn't, is in one format in one size, not optimized.

It's not that bad it's, it shouldn't be your priority to optimize images for the sake of optimization. You should only focus on the first screen and on the order of loading. If you are able to... Make images on the first screen of the right size, right format, Lightweight and the main thing of the loading in the right order so that they load first and everything else later This is already, this will be a huge win already.

This is If there is one thing you take out of this video, this is the main thing. Just optimize the order of loading. First screen loads first, everything else is lazy loaded. And then it doesn't matter then that much if they're optimized, which format you use and so on and

[00:40:13] Nathan Wrigley: so forth. Good to know. I will just raise a comment from Mike Cotton again.

Thank you, Mike. You're being the chief commenter. He says he's just used Adobe Photoshop and he's opened up a JPEG, which was close to 400 kilobytes, 370 kilobytes. And when he saved it as a web P it was 16 kilobytes. No loss of quality. Yeah that's my experience, especially if it's things like.

Big blocks of mono color, if it's a if it's a picture of a forest or something with hundreds of intricate little things, it's probably not going to be quite the saving as that, but certainly if it's I don't know, something where there's lots of similar things, then you really look, that's what, that's a 20th of the size, something along those lines.

So thank you, Mike, for clarifying that or confirming that. That's great.

[00:41:04] Sabrina Zeidan: Let me see, it's a quarter

[00:41:06] Nathan Wrigley: to five. I know, we've got about ten more minutes because I've got a hard stop at five too, so we'll have to knock it on the head in ten minutes. But let's do another ten.

[00:41:16] Sabrina Zeidan: Let me just add one more thing. I'm trying to think about more low hanging fruits here. And, I would like to add just one more thing to all this what we see here.

So here images are served from CDN, from the DOM domain different from our main domain. It's other domain, right? CDN. It's not always beneficial to serve images. from CDN. No matter how good that CDN is, I would suggest that you look at your website, and even if you don't know a lot about performance you can always...

You might not be able to figure out why, but you can always run tests and try out things, because some CDNs they provide such functionality, like you offload your images to CDN Cloudinary, for example, does that. You offload stuff there, and then CDN Takes care of serving it in right size, it resizes it for you.

[00:42:33] Nathan Wrigley: Yeah, it's amazing, isn't it? What they can do now? Yes. ,

[00:42:36] Sabrina Zeidan: it determines the size that the image is needed and it won't be load in the large image. If it's not needed, it won't load in large images on mobile it'll serve images in web performance. It will. Also, Lazy Lord, this is this functionality, the company I used to work at XWP made that plugin, made that functionality, and I'm now remembering what they've done, and this is amazing.

This is Cloudinary, right? And they also can. Lazy load from their side, lazy load for you and serve like blurred version of images, not a blank page, but blurred version of images while they are loading. There are a lot of cool stuff there, but not all CDNs work like this. And many, in many cases, it doesn't make any sense to serve images if CDN that you are using for offloading Images only for speed purposes, not for taking this amount of space of your server.

If you're using CDN for that try running tests with and without CDN to understand what is faster for you. Especially if the business of the website is local and in the

[00:44:04] Nathan Wrigley: server,

[00:44:05] Sabrina Zeidan: where the site is hosted is. Located physically, located somewhere nearby. So if this, for example, this is American website, right?

And if they have server somewhere next to them, somewhere next to Texas, it would be so much easier to fetch data from there CDN.

Because they don't need this worldwide. Maybe they don't even do de... Bad company. That's... They don't even do delivery overseas. They serve only the US market. And if they don't target people overseas, there is no reason to sacrifice speed of the US. Users to have good speed in Australia, if they don't work there, it would be so much faster to use fast server that's extending 100 kilometers from you to serve fast website to the people who are in this area.

In this case. It would definitely be faster for them to use, not to use CDN, but in many other cases too. Even without knowing many things about performance, you can just run tests. You can just test out with CDN and without CDN and see, but mind to test to compare apples to apples. If you're testing images delivery from CDN disable that and only and leave other things that you might be using in CDN.

Because okay. We would never finish this if I'll go. For them, because some CDN services, they provide fast DNS, SSL it's a whole another story. So if you have the ability to just disable. Part by part and make tests. That would be the better, the best way to go. Sorry, Nathan, it took so long.

[00:46:21] Nathan Wrigley: No, it's okay. I think I think I'll just raise one more quick comment. It's from a friend of yours. I know that Michelle. There's Michelle. Look, saying hi Michelle. It just

[00:46:33] Sabrina Zeidan: warms my heart

[00:46:36] Nathan Wrigley: to know that my friends are watching this. This is so beautiful. How to get in and delve into the weeds of it all, doesn't it, Michelle?

So yeah, that's a really nice comment as well. I feel that if we embark on anything else, we'll probably go straight through my hard stop in five minutes time. Yeah. So should we, if there's anything that you've missed, we can pencil that into the beginning. of next week, if you want to do that. But if you feel that you've covered off everything, that's great.

If you are watching this and you fancy Michelle showing, sorry, not Michelle's over there in California somewhere. If you fancy Sabrina. Checking your site out. And you'd like her to have a quick look at it and use just like she's doing on the show now, but with a site that you've been playing with and you want some pointers.

Don't forget the way to do that would be to submit your site, go to wpbuilds. com forward slash speed. And depending on how much, how many permissions, there are three options. They get increasingly more. Complicated, if you can give Sabrina the option to really get into the weeds and get into your WordPress website and things like that.

But you'll, you're not going to submit anything about, DNS or login details over that form. You'll end up just basically having an email exchange with Sabrina. So if you fancy that wpbuilds. com forward slash speed submit the form and we will hopefully be able to show you on a show soon. So that was great.

We learned a load of, Oh boy, I just went all dark. We we learned a load about how to optimize your site in terms of images, especially images that need to be loaded right at the beginning. Lazy loading, eager loading, all sorts of different things. Sabrina, is there anything else you want to add before we knock it on the head, as we say in the UK?

You know me, Nathan?

[00:48:40] Sabrina Zeidan: I can be talking about performance forever. . Yeah. But I think we'll take it to the next episode

[00:48:45] Nathan Wrigley: next week. Okay, that sounds great. In which case I will say goodbye. We will see you. We'll be here again. We'll be next Thursday. I dunno what the date will be. Something of November.

Maybe the third or something, the second, something like that. 3:00 PM UK time. Wpbuilds. com forward slash live. That's it. We will end this broadcast and we'll see you next time. Thanks for joining us. Thanks for leaving the comments. Take it easy. Bye.

[00:49:10] Sabrina Zeidan: Bye.