The LCP Request Discovery recommendation in PageSpeed helps you to improve the Largest Contentful Paint (LCP) metric on your page.
The LCP element is the biggest piece of content above the fold on your page. It could be an image, a piece of text or a video. In PageSpeed, the request discovery audit is related to images.
When your LCP element is an image, PageSpeed has 3 criteria:
- The image should not be LazyLoaded
fetchpriority=highshould be applied to the image tag- The request for the image should be found directly in the HTML (not in a separate CSS file).
Let’s examine these in more detail.
The image should not be LazyLoaded
This might feel counter-intuitive at first because we’re always told to use LazyLoading to improve the performance of our images. But LazyLoad essentially holds off on loading images until the user scrolls to that point in the page. Because the LCP image is above-the-fold and should be visible to the user right away, it needs to load immediately. So it should be excluded from LazyLoad.
If you’re using an optimization plugin, this might be done for you as part of a specific feature, like WP Rocket’s Optimize Critical Images.
Otherwise you should manually exclude your LCP image from being LazyLoaded.
“fetchpriority=high” should be used
fetchpriority=high is a message to the browser, telling it that this file is important and should be downloaded ahead of other files that are less important and have a lower priority.
Applying this directive to the LCP image or its preload request will satisfy PageSpeed.
It looks like this when applied:
Image code
Preload code
WordPress already adds this to the relevant images automatically, as of version 6.3, so you likely don’t have to worry about this on your images.
But if you are manually adding preload requests to your code, you should make sure to include fetchpriority="high" .
If you’re using Perfmatters, you can configure that in the Preloading settings:
The image request should be discoverable in initial document
The initial document means the HTML of your page, i.e what you see when you go to View Source in your browser.
The most common case for the image request not being in the HTML is because you’re using a background image on an element, where the background image URL is defined in a CSS file.
It’ll look something like this:
In the above case, the cat image is set as the background image for a specific block, and is specified in the bgcss.css file. This means the browser has to do some hunting to find this important image.
In this case the image must be preloaded to satisfy PageSpeed and ensure that the browser can quickly download the image.
Now, just because your image is found directly in the HTML, that doesn’t mean it’s fully optimized for LCP.
Preloading your LCP image is one of the most impactful changes you can make, even if your image is already directly in the HTML.
The above methods will satisfy PageSpeed’s recommendation to fix the LCP request discovery, but your LCP optimization shouldn’t stop there.
Removing render-blocking CSS and JavaScript, as well as using a CDN and having a fast TTFB will all contribute to a fast LCP.