Lazy Loading Images & Fonts

[00:00:00]
>> Okay, so what else with images? We now have lazy load. So with lazy load, we can apply loading="lazy" to some images. What's the idea? The idea is to lazy load images that are not in the viewport, so are not currently visible, they're not in the above default.

[00:00:20]
When you start scrolling and those images are becoming to be in the viewport, not exactly, it's not waiting for them to be in the viewport, it's when it feels like you will see more images, it then goes and loads those images there. This has pros and cons, because yeah, when you scroll, you may see some white spaces, because the image is not there yet.

[00:00:44]
But also what it's doing is clearing up the bandwidth for the initial load. So we're not downloading everything. So, for example, in our case, we do have, let me close this, images that typically can be there. Before HTML support in this, we were typically using JavaScript libraries, some external dependencies that were looking at the scroll event and verifying the position of images and loading these with lazy load.

[00:01:19]
Well, now it's pretty simple, it's just loading=lazy. So we can go to our code, script.js, and add to the images loading="lazy". So if the image is in the viewport when the page loads, it won't change a thing. If it's below, it won't download the image until it's close to appear on the screen.

[00:01:41]
Which again, well, probably, not everyone is scrolling your websites, it depends on the website, but sometimes it's even less than 20%. And why are you downloading resources that 80% of your user won't see? Well, that will also leave your server a little bit more space to do other stuff, so it helps a lot.

[00:02:04]
Should we use loading="lazy" with everything? No, not really. Definitely not for LCP images, definitely not. So for our LCP image that now is embedded in the HTML, talking about this one, don't use lazy load. Because a lazy load also change your priority to low, and no, we want high priority, okay, on that one.

[00:02:29]
Remember, don't mess with your LCP image. Also something to play with, it's async image decoding. So this is something that we don't have enough research yet to have a final conclusion on when it's a good idea to change that or not, but decoding the image is actually a process that is being done in the main thread.

[00:02:58]
It's not the biggest of the deals in page loading, okay? This is taking the bytes of a JPEG and actually getting a bitmap on the screen, that's decoding the image. You can actually say sync or async. When the image is really important, you want sync, because, okay, you just stop everything and go and decode that image as soon as possible.

[00:03:24]
I want you to do that when you have time, no, no, no, now. So decoding sync, we have a candidate for decoding sync, our LCP image. Does it make sense? Decoding="sync", because this is the most important image for our web vitals. And remember, it's not because of the sake of performance, or the sake of having good web vitals, it's because that will improve user's perception, and that will increase business opportunities and conversion for our websites.

[00:03:55]
That's why we're doing this, okay? So web fonts, someone asked about web fonts here, I have more and more info on that. We try avoid FOUT, Flash of Unstyled Text. Remember I mentioned that text by default is non-blocking, and when we add web fonts, we are converting that into blocking.

[00:04:15]
Well, something that we can do is to use font-display optional or font-display swap. And in this case, every browser might change the implementation of this, but we are saying, hey, let's start with swap. If you say font-display swap, the browser will first, it will wait. It will start downloading the font.

[00:04:36]
You have a title with a nice font. It will download the font, but it will wait 200 milliseconds around that. If within 200 milliseconds it cannot get the web font yet, it will render the text with the next font in the list. Font family has a comma-separated list of fonts.

[00:04:59]
And when the font appears, it will swap the font. So you will see kind of a flash. I mean, it's Times New Roman and then it's a fancy font. Optional, it says, you know what, if you can't load the font, it's okay, go ahead with the next one.

[00:05:19]
In this case, typically the browsers are waiting a little more. It can wait 100 milliseconds. If the web font is not ready, at that point, they say, okay, we give up, let's move to the next font, and it will render the text immediately with the next font. You won't see a flash and you won't see a text for some milliseconds, but not forever.

[00:05:42]
Make sense? Let's go to our example. In the case of web font, today, well, I think this is the one I pasted from Google. You can add that property in the URL, such as in this case, display=swap. In this case, we are asking Google to add font display swap.

[00:06:03]
But if you don't want swap and you want optional, you can say optional here. And in our case, it will use the next font in the list. So if Inter is not within one second, it will go to Sans Serif, or I can have Arial, whatever. Make sense?

[00:06:24]
With that, you will avoid that flash of unstyled text. Sometimes you get into your website, you see buttons, you see a logo, and nothing else. You see, well, why we have whites around? Because the font is still loading. The text is there, the browser is ready to render the text, but it doesn't have the font.

[00:06:42]
There are more things to do about fonts than we have in API, so you can check if the font is installed. If it's installed, you can use the installed version of the font instead of downloading. So if you wanna get more into web fonts, there are much more to read about that.