Optimizing Images

[00:00:00]
>> Alex Okrushko: The next optimization we're going to do is we're going to improve our LCP. We're going to improve our images. Right now, if we look in here in our network, when we load those images, those images are pretty big. Right there, there are 6 megabytes in size each. That adds significant load time, especially if we do the throttling to some even like fast 4G.

[00:00:38]
And we'll just refresh the page. We'll see that they become a major problem on the slower network. You can see they're just not there yet, and you can see them slowly getting there, and this is as fast as 4G, right? The fastest internet we had 4 years, 10 years ago, right, something like that. So that's obviously not great. So how can we improve this?

[00:01:05]
Before I forget to, I'll just do the no throttling again. So how can we improve this? Angular is coming and, before we start improving this, let's take a look again at our Lighthouse report that we just had. One of the things that I will complain about. See, it does tell us about our images that are huge in size, and they were nowhere near the dimensions that we need.

[00:01:43]
And it also says that our fetch priority should be applied as well. So that's some of those things that we can improve already, and then, yeah, this is not going to go anywhere. So let's see how we can improve this. Let's go, this is our event list, so we're going to go in our app event card here. This is where we pass the image URL to it. And in here we're going to do a few things.

[00:02:19]
First, we're going to import, it's called NgOptimizedImage directive. That directive will help us work with the image. So image tags stay as is, right, we're not touching this, but instead of the source, which is the default attribute of this, we'll just use ngSrc. NgSrc, that is a directive from ng-optimized image. And it can help in a few ways. First of all, we can also help and set width and height for this as well, like saying, hey, this is what we're trying to get for width, and this is what we're trying to get for height, for example, 500 by 200.

[00:03:16]
We also can set the priority for this image. So now because it's in the main page, I'll try to load it as fast as possible. Now there's a little caveat here as well, because the data that we have initially was not there, right? We load the events, so even though we set the priority high, you might still complain that initially is not fetched high. If you add the ngSrc attribute, it'll optimize the image.

[00:03:46]
Is that what you're saying? So when we add the ngSrc, it will apply this directive, which is ng-optimized image. That's a directive. So what are you getting out of this? There's a few things. One of them is you can set the priority high. Other thing you can do the source set. Source set allows us to, if we have different source set images, to basically images in different formats.

[00:04:14]
There's a high quality, huge image or smaller images. If we have that serving somewhere, it will automatically apply for us. Right now we don't have it. We're locally only serving the large image anyway, so it won't be able to really optimize that. But I'm going to show you how we can optimize that as well. So right now, and we apply this directive, we'll set the height and width.

[00:04:43]
It won't help right now, because again, we don't, the only image we have is one huge image. If we had different sizes, then it would optimize this, but I'll show you how to work around this. So let's see if it already improved things a little bit. So we're at 66 right now. I don't expect a lot of improvements. It might do just a bit. Let's see. Analyze the page, here, analyze the page.

[00:05:19]
So we're running a new analysis, and we should be getting results really fast. 66 to 66, so it didn't improve yet, right? So we see a lot of other same kind of complaints. But we see the fetch priority already applied, right, so that's remember it was a red. So we have this for our images already. Again, the images are so huge that it didn't really move the needle much, but we're already starting to be more compliant or for LCP optimizations.