The quickest fix is to stop WordPress from lazy loading above-the-fold images, especially the hero image, logo, featured image, and first content image. Lazy loading helps lower page weight, but it can hurt performance when it delays the image that visitors need to see first. A WordPress site should load critical images right away and lazy load only the images lower on the page.
TLDR: WordPress performance often improves when lazy loading is disabled for the first visible image while kept active for the rest. For example, a blog with a 1.8 MB hero image may see its Largest Contentful Paint drop from 4.2 seconds to 2.7 seconds after removing loading="lazy" from that image and adding fetchpriority="high". A store owner might notice that product pages feel slower because the main product image waits too long to load. The best fix is selective lazy loading, not site-wide removal.
Why Lazy Loading Can Hurt WordPress Performance
WordPress adds native lazy loading to many images by default. It usually does this with the loading="lazy" attribute. That sounds helpful, and often it is. Images below the fold should not load until needed.
The problem starts when WordPress, a theme, or an optimization plugin lazy loads an image that is visible right away. This often includes:
- Hero images on home pages and landing pages
- Featured images at the top of blog posts
- Main product images on WooCommerce pages
- Logo images in sticky headers
- First inline images inside article content
When a browser sees loading="lazy", it may delay the request. That delay can increase Largest Contentful Paint, often called LCP. LCP is a Core Web Vitals metric that tracks how fast the main visible content appears.
Honestly, it feels like a small setting should not cost a full second. Yet it often does. A delayed hero image can make a page look blank, even when the server is fast and the theme is clean.
When Lazy Loading Should Be Disabled
Lazy loading should usually be disabled for images that appear in the first viewport. That means anything visible before a visitor scrolls.
A developer should review these areas first:
- The home page header: Large banners and hero backgrounds need early loading.
- Single posts: The featured image may be the largest visible element.
- Product pages: The main product photo can decide perceived speed.
- Landing pages: A delayed campaign image can hurt conversions.
- Mobile views: Images that sit below the fold on desktop may appear first on mobile.
Lazy loading should stay active for gallery images, related post thumbnails, footer graphics, lower product grids, and long article images. Removing lazy loading from every image can backfire. It increases early network requests and can slow the first render.
How WordPress Adds Lazy Loading
Modern WordPress versions add lazy loading through image markup. A standard image may be printed like this:
<img src="image.jpg" loading="lazy" alt="Example image">The browser then decides when to fetch it. WordPress may also skip lazy loading for some initial images through internal rules, but themes and plugins can override that behavior.
It drives many developers crazy that three separate tools can touch the same image: WordPress core, the theme, and a performance plugin. One plugin may remove lazy loading, while another script adds it back with JavaScript. Expect a bit of checking before the real source is found.
How to Find Images That Should Not Be Lazy Loaded
A site owner can start with PageSpeed Insights, Lighthouse, or WebPageTest. The key report is the LCP element. If the LCP element is an image and that image has loading="lazy", it is a strong sign that lazy loading is hurting performance.
Chrome DevTools can also help:
- Open the page in Chrome.
- Right-click the key image and choose Inspect.
- Look for
loading="lazy"in the image tag. - Check the Network tab to see when the image request starts.
If the main image loads late, or starts only after scripts run, it should be treated as a critical image.
Method 1: Disable Lazy Loading for the First Content Image
WordPress includes the wp_omit_loading_attr_threshold filter. It controls how many images should skip the lazy loading attribute near the start of the page.
A developer can add this to a child theme’s functions.php file or a custom site plugin:
add_filter( 'wp_omit_loading_attr_threshold', function() {
return 2;
} );This tells WordPress to omit lazy loading from the first two matching images. For many sites, that covers the logo and featured image, or the hero image and first content image.
This method is clean because it works with WordPress core behavior. It is also safer than disabling lazy loading everywhere.
Method 2: Remove Lazy Loading From a Specific Image
Some sites need finer control. A custom filter can remove loading="lazy" from images that match a condition, such as a specific CSS class or image size.
add_filter( 'wp_get_attachment_image_attributes', function( $attr, $attachment, $size ) {
if ( isset( $attr['class'] ) && strpos( $attr['class'], 'skip-lazy' ) !== false ) {
unset( $attr['loading'] );
$attr['fetchpriority'] = 'high';
}
return $attr;
}, 10, 3 );Then the theme can add the skip-lazy class to the hero image or featured image. This offers more control, but it requires theme access.
Method 3: Use fetchpriority for Critical Images
Removing lazy loading is only part of the fix. A critical image can also use:
fetchpriority="high"This tells the browser that the image matters early. It works well for one main image above the fold. It should not be added to many images, since that creates competing priorities.
A good hero image may use markup like this:
<img src="hero.jpg" alt="Main product" fetchpriority="high">If the image is also responsive, the theme should still use srcset and sizes. A fast priority image can still be wasteful if mobile users receive a huge desktop file.
Method 4: Check Performance Plugins and CDN Settings
Many caching, image, and CDN plugins include their own lazy loading feature. Some add JavaScript-based lazy loading, which can delay even critical images. This can conflict with native browser lazy loading.
A site owner should review settings for:
- Image optimization plugins
- Caching plugins
- CDN image resizing tools
- Theme performance panels
- Page builder image widgets
The best setting is often named exclude first image, exclude above the fold images, or skip by class. If a plugin supports exclusions, the developer can add classes such as no-lazy, skip-lazy, or eager-image.
Best Practice Setup
A strong WordPress image strategy usually looks like this:
- Disable lazy loading for the hero image and first key image.
- Add fetchpriority high to only the main LCP image.
- Keep lazy loading for images below the fold.
- Compress images and serve WebP or AVIF where possible.
- Use correct dimensions to avoid layout shifts.
- Test mobile and desktop because the first visible image may differ.
After changes, the site should be tested again. A good result is a lower LCP score without a higher total page load burden. If LCP improves but total blocking time gets worse, another script or plugin may be the true problem.
FAQ
Should lazy loading be turned off for all WordPress images?
No. Full removal can slow pages with many images. It is better to disable lazy loading only for above-the-fold images and keep it for lower images.
Which image is most likely to hurt LCP?
The hero image, featured image, or main product image is the usual cause. The LCP report in Lighthouse or PageSpeed Insights can confirm it.
Does WordPress lazy loading always hurt performance?
No. It often helps long pages, galleries, and stores with many thumbnails. It hurts when applied to images that must appear immediately.
Is fetchpriority a replacement for lazy loading?
No. They solve different problems. fetchpriority="high" helps a critical image load sooner. Lazy loading delays noncritical images until later.
Can a plugin fix this without code?
Yes, if the plugin supports exclusions. The site owner can exclude the first image, a CSS class, or specific image URLs from lazy loading.