Transcript from the "Fetch Priority" Lesson
[00:00:29] So we convince the manager, that's a bad idea. So the best idea which is making a server side render, somehow, next say yes or something like that. Just a few minutes ago, I saw a tweet from Guillermo Rauch. We can even look at that tweet so you can see it.
[00:00:50] So we're from some minutes ago. He's the CEO of Vercel. He's the creator of Next.js, and Vercel. And he tweeted about, where is it? Should be here. This one. The biggest product of the past 20 years, ChatGPT, is a website built with Next.js, which is saying that the biggest, the largest, like ChatGPT is using Next.js.
>> Just one thing I didn't really fully understand with that was because with React, it would be just re-rendering a specific DOM section. But then with Next.js, it's like re-rendering the whole page, right?
>> Not really. So Next.js is not re-rendering all the time the same page. So it's a mix, it's hybrid technology.
[00:02:09] So even it has several names. So sometimes it's not just like classic server-side with PHP or ASP classic. So it starts from the server, but then it can continue client-side. So it's not completely server-side, so it's a mix. The idea of the first rendering should be server-side. It's actually the best idea for performance, why?
[00:03:42] We don't need to wait for the JSON to appear. Now we will have that twice. We should skip it in the JSON, but and now look at this. Now that we have the image here, maybe the preload is not necessary because we don't need to actually discover it.
[00:04:00] It's going to be discovered automatically. So I can get rid of that now. However, wait a minute. So if I run this now. It looks better. Yeah, I have two Ancient Greek, I should remove the second one. But I'm not sure if you realize that it's getting kind of a little better, okay?
[00:04:20] The LCP, it's getting a little better. But when we go back to the network and try to find the image here, the Ancient Greece, that one. Now, it's not, actually it has two for some reason. This is the other one, okay? Although I think that was the preload because I didn't reload.
[00:04:46] This is the one from the script is still here. So we still have a gap there. So what is that? Remember that when I started showing you this, I right click on the columns. And from here, there are a lot of columns that we can add. And I can add Priority.
[00:05:09] With priority, you can see the priority of some resources based on the type. This priority was set by the browser. And we have highest, high, low. For example, the script.js is low. And now when you think about this, no, I don't think it's low. So I'm the author of the website.
[00:05:33] I think it's important because that's the one that is rendering the content. So no, why low? Well, other images are also giving, having a low priority. Well, there is a new aspect now, fetch priority, where you can override the default priority. And you can use it on rel preload and also directly over images.
[00:06:00] So for example, that means that for our LCP image, the one that we know, that is the most important one. I can change the fetch priority. So I can go to this img. And I can search, say, fetch priority high. So now I don't rely on browser's algorithm.
[00:06:25] I say no, no browser, this is high priority. Next question is what happens if I add high priority on every resource? Well, again, if everything is important, nothing is important, so don't do that. Be smart, and pick the ones that you prefer, that you need. Does it make sense?
[00:06:47] And this will improve a lot LCP, mostly when it's image-based. So remember, 75% of LCPs are actually image based, not text based. For example, I could change also fetch priority on the preload. If I feel that that font is important, I can also change the fetch priority and say high.
[00:07:07] And if I see that my browser is setting high on something that I don't think is important. For example, aristotle, I can add low. So I can change the default priority. But I can help the browser make a right decision to improve the user experience based on my content on how my content looks like.
[00:07:33] Does it makes sense? Have in mind that fetch priority was called Priority hints before. In fact, all my previous workshops and talks on web performance, I call that Priority hints. So now it's called fetch priority. So when the standard specs discuss the idea, they changed the name and also they changed the name of the property.
[00:07:55] Okay, before it was called importance, importance equals low or high. Well, now it's fetch priority.