If you’ve ever peeked into your WordPress page source and noticed loading=”lazy” scattered across your <img> tags, you’ve already met lazy loading. It’s one of the simplest, most effective ways to speed up a page — but it’s also easy to get wrong, and getting it wrong can quietly hurt the metric that matters most for first impressions: how fast your main content appears.

This guide explains what lazy loading actually does, why WordPress’s default behavior isn’t always ideal, and how to make sure it’s working for you instead of against you.

What is lazy loading, exactly?

Lazy loading is a technique that delays loading an image until it’s actually needed — specifically, until the visitor scrolls close enough to see it.

Without lazy loading, a browser tries to download every single image on a page the moment the page starts loading, even images buried at the very bottom that most visitors will never scroll down to see. That’s a lot of wasted bandwidth and competition for network resources, especially on a long page like a blog post or a product category with dozens of thumbnails.

With lazy loading, the browser instead:

• Loads the images that are visible in the initial viewport (the “above-the-fold” area) right away.
• Waits to request off-screen images until the visitor scrolls near them.
• Fetches each lazy image just in time, so it’s typically ready by the time it comes into view.

The result is a lighter, faster initial page load, because the browser isn’t stuck downloading images nobody has scrolled to yet.

The native loading=”lazy” attribute

Modern browsers support lazy loading natively through a simple HTML attribute:

<img src=”photo.jpg” loading=”lazy” alt=”Description”>

That’s it. No JavaScript library, no plugin overhead — the browser itself handles the deferral. This is sometimes called “native” or “browser-level” lazy loading, and it’s now supported across all major browsers. It’s part of the same web standards that inform Google’s Core Web Vitals guidance on efficient resource loading.

The opposite value is loading=”eager”, which tells the browser “load this immediately, don’t wait.” Understanding when to use each one is the key to doing lazy loading correctly.

The nuance almost everyone misses: don’t lazy-load your hero image

Here’s the catch that trips up a lot of WordPress sites.

Your LCP image — the Largest Contentful Paint image — is usually the big hero photo, featured image, or banner near the top of the page. LCP is one of Google’s Core Web Vitals: it measures how long it takes for the largest visible element to finish rendering, and it’s a direct signal of how fast your page feels to a real visitor.

If that hero image is marked loading=”lazy”, you’ve told the browser to treat your most important visual element like it’s optional and can wait. Some browsers will delay fetching it until they’ve finished setting up the layout, which pushes back the moment it actually renders. The end result: a slower LCP score, a page that feels sluggish even if it “loads fast” overall, and a Core Web Vitals report that flags the page.

The rule of thumb is straightforward:

• Above-the-fold / LCP image → should load eagerly (no lazy loading), and ideally get priority treatment.
• Below-the-fold images → should be lazy-loaded, since the visitor won’t see them right away anyway.

Lazy loading is a great tool, but only when it’s applied to the right images.

Why WordPress’s default lazy loading can backfire

WordPress has added automatic lazy loading to images since version 5.5, which is a genuinely good default — most images on most pages benefit from it. But WordPress applies this rule fairly bluntly. In many themes, it lazy-loads images based on general patterns rather than truly understanding what’s visible in the initial viewport on every device.

In practice, this means the featured image, a hero banner, or a slider image near the top of the page can end up with loading=”lazy” attached to it — the exact image you don’t want delayed. Because WordPress doesn’t know your specific theme’s layout or how a particular image is positioned on a particular page, it can’t reliably tell “above the fold” from “below the fold.” It’s a one-size-fits-all rule applied to pages that aren’t all the same size.

This is a common, easy-to-miss cause of a disappointing LCP score even on a site that otherwise looks well optimized.

How AWP handles this with position-aware loading

This is exactly the kind of nuance AWP — Accelerate Website Pages — is built to handle. AWP is a free WordPress plugin that, when paired with the optional AWP Exchange Server, runs a personalized optimization on your actual pages rather than guessing from generic rules.

During that optimization, AWP looks at how your page really renders — for real device sizes — and determines which images genuinely sit above the fold versus below it. It then applies loading behavior accordingly:

• Images that appear above the fold, including your identified LCP image, are set to load eagerly and given loading priority, so the browser fetches them immediately instead of waiting.
• Images further down the page are correctly marked for lazy loading, so they don’t compete for bandwidth during the critical initial load.
• The LCP image specifically is prioritized, directly supporting a better Core Web Vitals score.

Because this analysis only measures image sizes and page structure — never the contents of your images or files — nothing leaves your server as files, and the optimization is applied on your own WordPress install. AWP also handles the image side of performance more broadly: its Images module can convert uploads to modern AVIF format locally, strip unnecessary EXIF data, and manage image dimensions, while a personalized optimization additionally serves right-sized AVIF variants through a responsive srcset and delivers critical CSS inline for a faster first paint. All of this happens at the output layer, so your original media library and content are never altered and everything stays reversible.

The takeaway

Lazy loading is a simple, effective performance technique — but only when the right images are lazy and the right image isn’t. Native loading=”lazy” defers off-screen images so the browser isn’t wasting time and bandwidth on content nobody’s scrolled to yet, while your hero or LCP image should always load eagerly so your page feels fast the instant it appears.

WordPress’s built-in lazy loading is a reasonable baseline, but it can’t always tell which image is truly above the fold on your specific theme and layout. That’s the gap AWP is designed to close: a personalized, position-aware pass that keeps your above-the-fold content loading immediately, defers everything else, and gives your LCP image the priority it deserves.