 On the web page, some content shows on the screen first, and some show out later. Hiya! How does the browser know which resources to load first? Can we influence the priority or measure how fast the main content is loaded on screen? Yes. Today, we're going to talk about Large Contentful Paint, or LCP, and a way to improve it with fetch priority. LCP is one of three core web vitals that Google uses to measure user experience on web pages. LCP is the loading metric and measures how long the page takes for the user to consider it mostly loaded. We define that as looking at when the largest bit of content is loaded. This is often an H1 element or a banner image, and images are what we're going to talk about here. You can find the LCP element in a number of different ways, but let's use the performance panel. After you record a trace, click on the LCP timing. Here you can see the LCP element is the hero image. Images can take longer to display than text. For a start, the browser needs to find the image details on the HTML, then it needs to download the image, and finally it needs to display it. Images can be expensive to display, so often the browser will wait until it knows it really needs the image before going through that whole process. If we switch to the network panel, we can see the priority the image has assigned. Let's filter on images and further adjust the image with hero in the name. Ensure the cache is disabled, and let's switch to slow 3G to really slow this down so we can see what's happening. Here you can see the image is initially a low priority, but after the browser knows that it's an on-screen image, it jumps it up to high to really prioritize it. Oh, that's just a flash and it's easily missed. Yes, luckily, there's a way to view both the initial and the final priority. In the network panel, you can enable the big request row setting to view both. Hover over it and you'll get a tooltip as well. We also show this in the network track of a performance trace. That's good to know, but it still seems like there is an initial period when it's still set to low. So it's good that we can easily see the low priority, but how can we actually avoid that and make it high from the beginning? Aha, let's talk about fetch priority next. Fetch priority is an API to allow you to tell the browser that a resource is higher or lower priority before it figures out for itself. For LCP images, developers probably know which one is the largest content when designing a page, so they can say, hey, browser, trust me, this one is important. Don't wait around to start fetching it. This API might sound complicated, but it's not at all. It's as simple as using the fetch priority HTML attribute on your image element. You can also use it on link elements for preloads or even script elements. Let's use the local overrides to fix this by a page. You can learn about local overrides with this link. Here, we find the HTML resource, we override the content, and then we find the image element to add fetch priority to it. But wait, this image has a loading equals lazy attribute on it too, you definitely don't want that for LCP images. So let's take that out and replace it with a fetch priority equals high. Then let's reload the page and this time we see the hero image starts off high straight away. Great. Interesting. Can you explain a little bit more on the difference between the loading attribute and the fetch priority attribute? Sure, they do similar, but slightly different things. The loading attribute controls lazy loading to tell the browser to hold off from loading content at all, until it's on screen or close enough to that. Lazy loading is a great way to avoid wasting users bandwidth and extra contention during that busy page load time. Fetch priority is all about telling the browser how important a resource is when it starts to fetch it. And that can mean it can start fetching it even earlier than it normally would during initial page load when the browser normally concentrates on more important resources. So one is about when to fetch resources and the other is about how to fetch them. In reality, you probably wouldn't really want loading equals lazy and fetch priority equals high at the same time. That would mean don't load it initially, but when you start to load it, load it with a high priority, which is kind of contradictory. Images you know to be very important on screen images should use fetch priority equals high. Images you know are likely to be off screen should use loading equals lazy. Images that are not super important may or may not be on screen should have neither attribute. Okay, is there any time you want to use fetch priority equal to low? Sure, you can use fetch priority equals low to lower the priority of resources. For example, if you have an image carousel, you can set the first image to be high priority, but the other images to be a lower priority. These other images are still above the fold, so it would still be bumped by the browser to be high priority. However, they're initially hidden from the user, so we don't need them to be high priority. Using loading equals lazy wouldn't be the right thing to do here, as they're still on screen or close enough. So we'd still be loaded despite that attribute. And we do want the images to load, so the carousel works when it flips from image to image. We just want to prioritize all the real on-screen images first. But a word of warning, do use this API with caution. In general, the browser is pretty good at choosing the right priorities, and this is a powerful API to override that, and you should only do that when there's good reason to. Using fetch priority equals high on LCP images is a clear use case. Other use cases may be less clear, so proceed with caution and don't overuse this API. All right, so how can we find images that we should add fetch priority equals highs to? You can use the network panel to see all images that may benefit from fetch priority equals high. Here you can see two images that change priority to high, the logo at the top of the screen, and the hero image. So these are the candidates to consider using fetch priority equals high on. While the hero image is the LCP element and will help improve that metric, your logo may also be important enough to you that you also want to prioritize that. However, as I said before, do not overuse fetch priority equals high. If you make everything a high priority, then nothing is. Limited to one or two resources you really want to make stand out above the others. All right, thanks Barry. Where can we learn more about fetch priority? Go to the link below for lots more details. That's all. See you for the next step, two tips. Ciao.