Are you staring at a PageSpeed Insights (PSI) report, completely confused by terms like “LCP”? You’re not alone. These technical terms can be intimidating, but the concept behind them is actually quite simple.
This blog post will walk you through what ‘LCP Request Discovery‘ means and, most importantly, exactly how to fix fetchpriority issues.
Video Tutorial: What are LCP Request Discovery Issues
What is LCP (Largest Contentful Paint) and Why Should You Care?
In simple terms, the LCP is the biggest, LARGEST, most important piece of content (usually your main banner image or headline) that loads when someone visits your page.
Think of your website like a restaurant. The LCP is the main course. If it takes too long to arrive, your visitor (the customer) gets frustrated and might leave before it even shows up.
A fast LCP makes your site feel fast. This keeps website visitors happy, stops them from “bouncing” away, and tells Google your site provides a good experience which is a great news for SEO for Google rankings.
One of the most common errors related to this is: Largest Contentful Paint image was not prioritized. PageSpeed tool then suggests you “apply fetchpriority=high”. Let’s dig into what that means.
Understanding the “LCP Request Discovery” Diagnostic
Depending on the website you are looking at, you may see different color messages. Here’s what these color codes mean:
- Green/Informational: = PASS. This is good. It means the browser is discovering LCP the right away.
- Red/Warning: = FAIL. This is bad. It means the browser could not load LCP correctly and had to wait for something else to happen first.
When PSI flags your LCP, it often gives you more clues in a diagnostic section called “LCP Request Discovery.” This test tells you why your main LCP (usually but not always an image) was too slow when loading. You’ll often see two messages that look like errors, but are actually just observations.
lazy load not applied
This sounds like a problem, but for your LCP image, this is actually a GOOD thing if the color is green.
Lazy loading is a technique that tells the browser, “Don’t load this image until the user scrolls down to it.” This is a great feature for images at the middle or bottom of your page, as it speeds up the initial load.
However, it’s terrible for your main LCP image at the top of the page. You want that image to load immediately, not wait for other images to load first.
So, when PSI says “lazy load not applied” for your LCP, it’s just confirming: “Good job, you are correctly not lazy-loading this important image.”
If however “lazy load not applied” for your LCP image is shown in red color, simply remove the loading=lazy tag from your website’s image loading process (usually requires theme modification, simply check your website theme documentation).
Request is discoverable in initial document
This is the second message you’ll often see, and just like the first one, it’s another GOOD thing if its in green color.
This message confirms that the browser found your image’s <img> tag in the initial HTML code. This is much faster than if the image was hidden in a JavaScript file or loaded with CSS, which would force the browser to play detective and hunt for it later.
So, this leaves us with a puzzle…
If you are not lazy-loading the image (good!) and the image is discoverable in the HTML (good!) why is it still loading slow?
The answer is Priority. Even though the browser *sees* the image tag early, it doesn’t know it’s the *most important* one. It might be busy downloading CSS files, JavaScripts, or fonts first, pushing your main LCP image to the back of the line.
How-to Fix fetchpriority=high should be applied Issue
The solution is that you need to explicitly tell the browser: “THIS image is the most important. Load it NOW!”
We do this by giving it a “high priority” instruction at the *very beginning* of the page load. While you can add fetchpriority=”high” to the <img> tag itself, the most effective way to fix this is to add a special “preload” tag to your website’s <head> section.
The Actual Solution: Preload + Fetchpriority + IMG Fetchpriority
You can and should add fetchpriority=”high” to HTML IMG tag for LCP image.
You can and should preload LCP image asset as image using HTML link attribute within HTML head section.
You can and should preload LCP image asset as image using HTML link attribute AND ALSO set fetchpriority=”high” to that HTML link attribute.
<link rel="preload" as="image" href="YOUR-EXACT-IMAGE-URL.jpg" fetchpriority="high">WordPress Function to Add preload and fetchpriority=high to Featured Images
Here is the PHP code template you can add to WordPress Theme functions.php (important, make sure that you are not already using some silly image optimization plugins).
/*
* Preloads the featured image on single posts to improve Largest Contentful Paint (LCP).
* This function checks if the current page is a single post and has a featured image.
* If true, it outputs a tag in the section
* to hint the browser to download the image with high priority.
* @Author: RankYa
* @Author URI: https://www.rankya.com
*/
function rankya_preload_featured_image_high_priority() {
// Only run on single post that have a featured image.
if ( is_single() && has_post_thumbnail() ) {
// Get the ID of the post thumbnail (featured image).
$thumb_id = get_post_thumbnail_id();
// Get the image source details. 'full' can be changed to your specific
// image size if you know it (e.g., 'large', 'medium_large').
$thumb_url_array = wp_get_attachment_image_src( $thumb_id, 'full', true );
// Check if the image source array was successfully retrieved.
if ( $thumb_url_array ) {
// The URL is the first element in the array.
$thumb_url = $thumb_url_array[0];
// Output the preload link tag, ensuring the URL is properly escaped.
echo '<link rel="preload" href="' . esc_url( $thumb_url ) . '" as="image" fetchpriority="high">' . "\n";
}
}
}
// Hook the function into wp_head to output it in the <head> tag.
add_action( 'wp_head', 'rankya_preload_featured_image_high_priority' );After adding this code, clear all your website caches (your plugin cache, server cache, CDN, etc.) and re-run the PageSpeed Insights test. You should see your LCP score improve and that annoying “fetchpriority” warning gone.
