WordPress 5.5 added native lazy loading to all images. Every loading="lazy" attribute. The intention was great: defer offscreen images to speed up initial page loads.
The problem: WordPress applies lazy loading to ALL images — including the first visible image on the page. Your hero image. Your banner. The exact image that Google uses to measure your Largest Contentful Paint (LCP) score.
Lazy loading your LCP image is one of the most common reasons WordPress sites fail Core Web Vitals.
What is lazy loading above the fold?
“Above the fold” means the content visible without scrolling. The LCP (Largest Contentful Paint) element is usually the largest image or text block in this area. Google measures how long it takes to render this element as a key performance metric.
When an image has loading="lazy", the browser delays downloading it until the user scrolls near it. For images below the fold, this is perfect — why download something the user might never see? But for the hero image, it means the browser waits unnecessarily before starting the download.
WordPress 5.9+ improved this by skipping lazy loading on the first content_image — but the detection isn’t perfect. Featured images in custom theme templates, background images, and images added via page builders often still get lazy-loaded incorrectly.
Why should you care?
Direct LCP impact. Lazy loading the LCP image can add 200-500ms to your LCP time. Google’s threshold for “good” LCP is under 2.5 seconds. That margin matters.
Failed Core Web Vitals assessment. If your LCP element is lazy-loaded, PageSpeed Insights explicitly flags it: “Largest Contentful Paint image was lazily loaded.” It’s a clear diagnostic you can see in any PageSpeed test.
It’s the easiest CWV fix you’ll ever make. Removing lazy loading from above-fold images requires minimal effort and delivers measurable results.
The quick fix
Add fetchpriority="high" and remove loading="lazy" from your LCP image. In your theme template:
// For theme-level hero images
<img src="hero.jpg" fetchpriority="high" loading="eager" alt="..." />To remove lazy loading from the first image in post content:
// Remove lazy loading from the first content image
add_filter( 'wp_img_tag_add_loading_attr', function( $value, $image, $context ) {
static $count = 0;
if ( 'the_content' === $context ) {
$count++;
if ( $count <= 1 ) {
return false; // Skip lazy loading for first image
}
}
return $value;
}, 10, 3 );The one-click solution
OvKit includes Disable Lazy Load Above Fold under Features → Performance. It automatically skips lazy loading for the first image on every page and adds fetchpriority="high" to ensure it loads first. No template editing required.
What happens after you fix this?
- LCP improves by 200-500ms — measurable in PageSpeed Insights
- PageSpeed “Largest Contentful Paint image was lazily loaded” warning disappears
- Core Web Vitals pass rate improves — directly impacts search ranking
- Below-fold images remain lazy-loaded — you keep the benefit for offscreen content
FAQ
### Doesn’t WordPress already handle this since version 5.9?
Partially. WordPress 5.9+ skips lazy loading on the first content image, but it doesn’t handle featured images in custom templates, page builder images, or header images. The detection is content-based, not viewport-based.
### Should I disable lazy loading entirely?
No. Lazy loading below-the-fold images is still beneficial — it reduces initial page weight. Only the above-fold LCP image should be eager-loaded with high priority.
### What is fetchpriority=”high”?
It’s a relatively new HTML attribute that tells the browser to prioritize downloading this resource over others. Combining loading="eager" (don’t lazy-load) with fetchpriority="high" (download first) gives your LCP image the best possible loading behavior.
Related reads: