/
/
Lazy loading explained for WordPress site owners

Lazy loading explained for WordPress site owners

4 min read

Lazy loading is the most misunderstood speed setting in WordPress. Turn it on for everything and you make your most important image slower. Here is the rule.

Lazy loading is the most misunderstood speed setting in WordPress. The idea is simple — do not load images until they are about to scroll into view — and for most images it is exactly right. But applied to the wrong image, lazy loading makes your page measurably slower, and the advice to “lazy-load everything” that was sound a few years ago is now a mistake.

Here is what lazy loading actually does, the one rule that matters, and how WordPress handles it for you in 2026. It is part of our wider guide to how galleries affect page speed.

What lazy loading does — and the one thing it doesn’t

Lazy loading defers off-screen images so the browser spends its early bandwidth on what the visitor can actually see. That speeds up the initial load when most of your images are below the fold. What it does not do is set priority. The loading attribute tells the browser when to fetch an image, not how important it is. Those are two different controls, and confusing them is the root of the most common mistake.

Native lazy loading: no plugin needed

Every current browser supports native lazy loading through loading="lazy" on the image tag. WordPress has added it automatically since version 5.5. You do not need a lazy-loading plugin in 2026 — if anything, a plugin layered on top of the native behaviour can cause double-deferring and bugs. The browser-level feature is the one to rely on.

The one rule: never lazy-load the LCP image

Your Largest Contentful Paint image — the biggest thing visible when the page first loads — should load immediately, with high priority. Lazy-loading it tells the browser to wait, which delays the exact moment Google measures as “the page has loaded.” On an image-heavy page this single misconfiguration can be the difference between passing and failing your LCP target.

The correct setup is: lazy-load everything below the fold, load above-the-fold images eagerly, and add fetchpriority="high" to the one image that matters most. That last attribute is the “how important” control that loading is not.

WordPress 6.3+ does most of this for you

Since version 6.3, WordPress is smarter about this. It skips lazy loading on the first images in the content and automatically adds fetchpriority="high" to the image it judges most likely to be the LCP element. For a lot of sites this means the default behaviour is already correct — the trouble starts when a theme or plugin overrides it with blanket lazy loading.

Do this now. Run a key page through PageSpeed Insights and find the named LCP element. View the page source and locate that image — if it has loading="lazy", that is your bug. Remove the lazy attribute from that one image and add fetchpriority="high". Leave every other below-the-fold image lazy. If a lazy-loading plugin is overriding WordPress core, consider turning the plugin off and letting core handle it.

How the browser actually prioritises images

To use lazy loading well, it helps to know what the browser is doing under the hood. When a page loads, the browser builds a list of resources to fetch and assigns each a priority. Images start at a low priority by default, because the browser does not yet know which ones are important — it raises the priority of images it discovers are in the viewport as it lays the page out. This is the mechanism lazy loading and fetchpriority both hook into. Lazy loading says “do not fetch this until it is near the viewport.” fetchpriority="high" says “fetch this one urgently, ahead of the default queue.” They are two different dials on the same system: one controls timing, the other controls urgency.

The reason lazy-loading the LCP image is so damaging is now clear: you have taken the one image that should be fetched most urgently and told the browser to defer it entirely. The browser was going to discover it was important (it is in the viewport) and raise its priority — but the lazy attribute overrides that, holding it back until the lazy-load threshold triggers. You have fought the browser’s own optimisation and lost. Removing lazy from that image lets the browser do what it wanted to; adding fetchpriority="high" tells it to go even faster. That is the whole game.

Lazy loading in galleries specifically

Galleries are where this goes wrong most often, because the instinct is to lazy-load the whole grid. But the first row is usually above the fold. The right gallery behaviour is to load that first row eagerly and lazy-load the rest as the visitor scrolls. This is exactly the kind of thing worth checking on whatever gallery plugin you use — a blanket “lazy-load all” setting will quietly cost you LCP. FotoGrids handles this in its free tier: native lazy loading with the first row left eager, plus intersection-observer prefetch so the next images are ready just before they are needed.

Common mistakes

  • Lazy-loading the hero or first gallery row — the classic LCP killer.
  • Stacking a lazy-load plugin on top of WordPress core — double-deferring and conflicts.
  • Lazy-loading iframes you need immediately — same priority confusion, different element.
  • Assuming lazy loading sets priority — it does not; use fetchpriority for that.

Key takeaways

  • Lazy loading defers off-screen images; it does not set priority.
  • Never lazy-load the LCP image — load it eagerly with fetchpriority="high".
  • WordPress 6.3+ handles most of this automatically; you rarely need a plugin.
  • In galleries, load the first row eagerly and lazy-load the rest.

Do I need a lazy-loading plugin for WordPress?

No. WordPress has added native lazy loading automatically since version 5.5, and current browsers support it directly. A separate plugin layered on top can cause double-deferring and bugs — the built-in behaviour is the one to rely on.

Why would lazy loading make my page slower?

If you lazy-load your Largest Contentful Paint image — the biggest thing visible on load — you tell the browser to delay the one image it should fetch first. That pushes back the moment Google measures as the page loading. Lazy-load below the fold only.

What is the difference between loading and fetchpriority?

The loading attribute controls when an image is fetched (lazy or eager). fetchpriority controls how important it is. They are separate — for your most important above-the-fold image, load it eagerly and set fetchpriority=”high”.

FotoGrids · Free

Fast galleries, no second plugin.

Native lazy-loading with the first row left eager, responsive srcset images, and built-in caching — the performance fundamentals, in the free tier.

  • Lazy-loading that respects the LCP image.
  • Responsive images with srcset and sizes.
  • Built-in cache layer, no extra plugin.

In this article

Share the article
Related Articles