The WordPress theme enables global lazy loading — including on the hero banner and the image that defines Largest Contentful Paint. Mobile Lighthouse shows LCP at 4.2 seconds. Disabling lazy on that single image brings LCP down to 1.8 seconds. The team had "optimized" by delaying precisely the resource that mattered most to users and to Google.
Lazy loading defers downloading a resource until it approaches the viewport. For below-the-fold content, that is free bandwidth and faster initial load. On the first screen, it is a measurable — sometimes dramatic — degradation of the performance signal search engines observe.
The right question is not "should we lazy load?" but which resource deserves to arrive first, and which can wait until the user scrolls.
Above and below the fold
The basic rule is simple to state and easy to break in production: everything the user sees without scrolling must load immediately; the rest can wait.
| Element | Recommended strategy |
|---|---|
| Hero image / LCP candidate | loading="eager" + fetchpriority="high" |
| Header logo | eager, lightweight file, preload if critical |
| First row of products or page thumbnails | eager or no lazy |
| Images at bottom of page | loading="lazy" |
| Comment avatars, secondary icons | lazy |
In native HTML, syntax is straightforward:
<img src="product.webp" loading="lazy" decoding="async" width="800" height="600" alt="...">
Delaying the LCP image means optimizing the wrong priority order.
Many themes and plugins apply lazy by default on every <img> tag. Before enabling a global option, identify the actual LCP element via Search Console or Lighthouse — it is not always the image you expect.
fetchpriority, preload and dimensions
Beyond the loading attribute, two levers complete prioritization. fetchpriority="high" tells the browser to treat one LCP candidate resource as high priority — usually the hero image or main product photo.
Preload (<link rel="preload" as="image" href="hero.webp">) compensates for late discovery: for example when the LCP image is set as a CSS background rather than an <img> tag. Avoid the latter if possible — LCP images in CSS are harder to optimize and measure.
width and height attributes remain mandatory, lazy or not: they reserve space before load and prevent layout shifts (CLS). Well-configured lazy loading never compensates for missing dimensions.
Iframes, maps and third-party scripts
Images are not the only resources to defer intelligently. An embedded YouTube iframe loads several megabytes of JavaScript as soon as the page renders — far beyond a static thumbnail.
Two effective approaches:
- Lite-youtube facade (or equivalent): a preview image and a player loaded on click.
loading="lazy"on the iframe if no facade is available.
For Google Maps, a static image linking to the interactive map often suffices until the user clicks. Combine lazy loading with cookie consent before loading third-party trackers: that is both more compliant and more performant.
CMS, themes and common pitfalls
WordPress 5.5+ enables native lazy loading on images. Use wp_lazy_loading_enabled filters or the skip-lazy class to exclude hero and logo. Shopify and WooCommerce deserve the same check: the main product gallery should not be lazy by default if it occupies the first screen.
On shared hosting or VPS, front-end lazy loading sometimes compensates for slow hosting — but it does not replace a CDN or proper image compression. Compare offers via our directory if TTFB stays high despite correct lazy configuration.
The peak: lazy loading as a substitute for thinking
Here is what "lazy load all images" options hide behind reassuring labels.
Speeding up the first screen sometimes means loading an image sooner, not deferring it. That is counterintuitive, but LCP measurements in production prove it.
Decide and move forward without blind spots
In half a day you can put lazy loading at the service of real performance. First identify the LCP element via Search Console or a mobile Lighthouse audit and note the exact selector. Force eager and fetchpriority="high" on that element, then exclude it from the theme or plugin global lazy setting. Enable lazy loading only on below-the-fold images and long galleries. Replace heavy iframes with click-to-load facades for YouTube and maps. Verify width and height on all images to prevent layout shifts. Finally test under realistic conditions with WebPageTest 4G filmstrip — the hero must be visible from the first frame.
To compare hosting and CDN if LCP stays slow despite correct lazy loading, use the comparison tool and guides on performance.
Frequently asked questions
Should lazy loading be applied to all images by default?
No. Above-the-fold elements — hero, logo, first visible image — must load immediately. Lazy loading applies to content the user will discover by scrolling, not what they see on arrival.
Native loading="lazy" or custom Intersection Observer?
The native attribute suffices in most cases and avoids extra JavaScript. A custom script is justified for advanced placeholders (LQIP) or very specific loading rules — not as a systematic replacement for native.
Does lazy loading affect SEO?
Indirectly yes, via LCP and Core Web Vitals. Delaying the main image degrades the performance score. Critical images must remain accessible without interaction or infinite scroll that would hide content.
What about YouTube or Google Maps iframes?
Combine loading="lazy" with a facade that loads the player only on click. Impact on page weight often exceeds lazy loading of images alone.
Useful lazy loading defers what is invisible — not what the user came to see first.