Lazy Loading Done Right: Optimize Performance Without Hurting LCP

What Is Lazy Loading and Why Does It Matter?

Lazy loading is a performance technique that defers the loading of images, iframes, and other media resources until they’re actually needed. Instead of downloading every asset when the page loads, lazy loading waits until users scroll near those elements. This approach conserves bandwidth, reduces initial page load time, and improves the perceived performance of your site.

Native lazy loading—using the loading="lazy" HTML attribute—has become the standard approach. Major browsers including Chrome, Firefox, Safari, and Edge support this feature natively, eliminating the need for custom JavaScript libraries. The browser automatically manages when to fetch these resources based on connection speed and proximity to the viewport.

The Performance Benefits of Lazy Loading

When implemented correctly, lazy loading delivers measurable results. On 4G networks, testing data shows that 97.5% of lazy-loaded images load completely within 10ms of becoming visible. Even on slower 2G connections, 92.6% of lazy-loaded images finish loading within 10ms.

For e-commerce sites, the impact is substantial. Reducing the number of images that load on initial page render can save dozens of HTTP requests. Real-world examples show page weight reductions of 70–80% when combined with image format optimization and compression.

The browser uses network-aware thresholds to decide when to start loading lazy images:

4G networks: Images load at 1,250px below the viewport
3G or slower: Images load at 2,500px below the viewport

This intelligent behavior means images arrive just before users see them, without requiring your development team to adjust thresholds.

The Critical Pitfall: Never Lazy-Load Your LCP Element

The most damaging mistake you can make with lazy loading is applying it to your Largest Contentful Paint (LCP) image—the largest image or text block visible in the initial viewport. This single error can add 200–400ms to your LCP metric, significantly harming your Core Web Vitals score and user experience.

Here’s why this happens: The browser can only determine which images are above the fold after rendering the page and calculating layout. When you lazy-load your LCP image, the browser waits for this layout calculation to complete before discovering it needs to load. Only then does it start downloading. This unnecessary delay directly increases your LCP time.

According to web.dev’s LCP optimization guide, “Never lazy-load your LCP image, as that will always lead to unnecessary resource load delay.” Many CMS platforms, including WordPress and WooCommerce, automatically apply lazy loading to all images by default. You must explicitly configure them to exclude above-the-fold and LCP images from this behavior.

Identifying Your LCP Element

Before you can protect your LCP image, you need to know which element it is. Use Chrome DevTools to measure this:

Open Chrome DevTools (F12 or right-click → Inspect)
Navigate to the Performance tab
Record a page load
Scroll down and expand the Largest Contentful Paint entry in the timeline
Check the Elements panel to see which image or element triggered LCP

Typically, your LCP element is a hero image at the top of the page, a product image on an e-commerce listing, or a prominent banner. On WordPress and WooCommerce sites, the first product image is often the LCP element.

Strategy 1: Use `fetchpriority="high"` on LCP Images

Once you’ve identified your LCP element, the most effective optimization is to signal its importance to the browser using the fetchpriority="high" attribute. By default, images load with low priority—the browser only boosts them to high priority after layout calculations complete. This delay is often too late for LCP images.

With fetchpriority="high", the browser starts downloading your LCP image at high priority from the beginning, before other competing resources finish loading.

Real-world impact: Google Flights improved their LCP by 700ms (from 2.6 seconds to 1.9 seconds) by simply adding fetchpriority="high" to their hero image. Other sites report improvements of 20–30% with this technique.

Implementation is straightforward:

<img src="hero-image.jpg" fetchpriority="high" alt="Hero Image" width="1200" height="600" />

You can also combine this with a preload link in your document head for even earlier resource discovery:

<link rel="preload" as="image" href="hero-image.jpg" fetchpriority="high" />

Important: Only use fetchpriority="high" for your 1–2 most critical resources. If everything is marked as high priority, nothing stands out.

Strategy 2: Lazy-Load Below-the-Fold Images and Iframes

Lazy loading is powerful for content users never see during initial page load. Apply loading="lazy" to images and iframes that appear below the fold or off-screen:

<img src="product-thumbnail.jpg" loading="lazy" alt="Product" width="300" height="300" />
<iframe src="https://www.youtube.com/embed/..." loading="lazy" width="560" height="315"></iframe>

This approach is safe because these elements don’t affect your LCP calculation. The deferred loading frees up bandwidth, allowing your LCP image to load faster. When you lazy-load everything below the fold, you reduce network competition, which can actually improve LCP indirectly.

Always include dimension attributes (width and height) on lazy-loaded images to prevent Cumulative Layout Shift (CLS), another Core Web Vital that affects user experience.

Strategy 3: Audit and Configure WordPress and WooCommerce Defaults

Vilee LLC combines deep technical expertise in WordPress/WooCommerce development with AI-powered automation to operate 520+ profitable online businesses at scale.

WordPress and WooCommerce can automatically lazy-load all images on your site, which is dangerous if it includes your LCP image. Starting with WooCommerce 10.6, product images are lazy-loaded by default.

To configure this behavior safely:

Check your lazy loading plugin settings: If you use WP Rocket, Autoptimize, or a similar performance plugin, verify that it provides an option to exclude above-the-fold images from lazy loading.
Use WooCommerce filters: WooCommerce 10.6+ provides the woocommerce_product_image_loading_attr filter, which accepts lazy, eager, or auto. Set the first product image to eager while keeping gallery images lazy.
WordPress theme defaults: Check if your theme automatically applies lazy loading. Many modern themes do; disable it for your hero image.
Image optimization plugins: ShortPixel, Smush, and other image optimization plugins may apply lazy loading globally. Exclude your LCP image.

Example WordPress filter to protect the first product image:

add_filter( 'woocommerce_product_image_loading_attr', function( $value, $product ) {
  if ( $product->is_featured() ) {
    return 'eager'; // First/featured product image loads immediately
  }
  return 'lazy'; // Gallery images load lazily
}, 10, 2 );

Lazy Loading Checklist

Task	Status
Identify your LCP element using Chrome DevTools	☐
Verify LCP image does NOT have `loading="lazy"`	☐
Add `fetchpriority="high"` to LCP image	☐
Add `width` and `height` attributes to all images	☐
Apply `loading="lazy"` to below-the-fold images	☐
Apply `loading="lazy"` to off-screen iframes and embeds	☐
Check WordPress/WooCommerce lazy loading defaults	☐
Disable automatic lazy loading for LCP images in plugins	☐
Run PageSpeed Insights to measure LCP improvement	☐
Monitor Core Web Vitals in Search Console	☐

Common Mistakes and How to Avoid Them

Mistake 1: Lazy-loading all images indiscriminately. Many plugins offer a “lazy-load all images” option. Resist this. Your LCP image must load eagerly, and images in critical areas above the fold should prioritize fast loading over deferred loading.

Mistake 2: Forgetting dimension attributes. Without width and height attributes, the browser doesn’t know how much space to reserve for lazy-loaded images. When they eventually load, the page layout shifts, harming your Cumulative Layout Shift (CLS) score.

Mistake 3: Over-using fetchpriority=”high”. This attribute only helps when resources compete for bandwidth. If you apply high priority to everything, you’ve diluted its effect. Reserve it for your top 1–2 critical resources.

Mistake 4: Not testing on real networks. Chrome DevTools throttling is useful, but test your site on actual 4G and 3G connections to see how lazy-loaded images behave in the real world.

Measuring Impact: Validation and Testing

After implementing lazy loading, measure the impact using these tools:

Google PageSpeed Insights: Provides LCP measurements and recommendations. Run this on desktop and mobile to see your actual LCP time.
Web Vitals Chrome Extension: Monitors Core Web Vitals during real browsing. Install it and navigate your site to see live LCP, FID, and CLS data.
Chrome DevTools Performance tab: Record page loads and examine the timeline to see when your LCP element becomes visible and finishes rendering.
Google Search Console: Under “Core Web Vitals,” track your LCP performance across thousands of real user sessions.

Sources

Frequently Asked Questions

What's the difference between loading="lazy" and fetchpriority="high"?

loading=”lazy” tells the browser to defer loading an image until it’s needed (when the user scrolls near it). fetchpriority=”high” tells the browser to prioritize downloading a resource that’s already been discovered. They work together: use eager loading + fetchpriority=”high” for LCP images, and loading=”lazy” for below-the-fold content.

Will lazy loading hurt my SEO or Core Web Vitals?

No—when implemented correctly, lazy loading improves Core Web Vitals by reducing initial page load time and network congestion. However, if you lazy-load your LCP image, you’ll hurt your LCP metric significantly. Always ensure your hero/main image loads eagerly with fetchpriority=”high”.

How do I disable automatic lazy loading in WordPress for my LCP image?

Most performance plugins (WP Rocket, Autoptimize) allow you to exclude specific images by CSS class or ID. For WooCommerce, use the woocommerce_product_image_loading_attr filter to set the first product image to ‘eager’. Check your theme and plugin settings to identify where automatic lazy loading is enabled, then add exclusion rules for above-the-fold content.