In this article, you’ll learn why this happens and how to fix it permanently by adding the fetchpriority="high" attribute to your main WooCommerce product image.
Why This Error Happens
By default, WordPress automatically adds loading="lazy" to all images.
This is great for long blog posts or image-heavy pages — but on a product page, your main product image is usually the LCP element, meaning it’s the largest visible image above the fold.
When that image is lazy-loaded, the browser waits too long to fetch it, delaying the render.
Google’s Lighthouse detects this as an LCP discovery issue.
To solve it, we must prevent lazy-loading on that specific image and tell the browser that it’s a high-priority resource.
The Solution: Add fetchpriority="high" for the Main Product Image
You can do this easily by adding a simple code snippet to your theme’s functions.php file (or a custom functionality plugin if you prefer to keep your changes update-safe).
Here’s the full code:
// Disable lazy loading & Add fetchpriority="high" to main WooCommerce product image
add_filter( 'wp_get_attachment_image_attributes', function( $attr, $attachment, $size ) {
if ( is_product() && isset( $attr['class'] ) && strpos( $attr['class'], 'wp-post-image' ) !== false ) {
// Disable lazy loading for the LCP image
unset( $attr['loading'] );
// Add fetchpriority to prioritize this image
$attr['fetchpriority'] = 'high';
}
return $attr;
}, 10, 3 );
How This Code Works
Let’s break it down step-by-step:
-
add_filter('wp_get_attachment_image_attributes', ...)
Hooks into WordPress’ internal image rendering system. Every time an image tag is generated, you get access to its attributes. -
is_product()
Ensures that this only runs on WooCommerce product pages, not everywhere else. -
strpos( $attr['class'], 'wp-post-image' )
Checks that the current image is the main featured product image, not gallery or thumbnail images. -
unset( $attr['loading'] )
Removes theloading="lazy"attribute, so the browser loads it immediately instead of waiting for scroll. -
$attr['fetchpriority'] = 'high';
Tells the browser this image is critical and should be fetched as soon as possible.
This ensures your product’s main image is downloaded early, rendered fast, and recognized by Lighthouse as a properly discoverable LCP resource.
