**Lazy-loading is great for off-screen images — but disastrous when applied to your critical, above-the-fold content.** This check looks for important content (your hero image, main text, key elements) that's being deferred when it should load immediately. Lazy-loading the very content that defines your first paint delays it, hurts LCP, and can leave it unseen by crawlers that don't trigger the load.
It checks that lazy-loading is applied to the right things — off-screen content — and not to critical above-the-fold elements. Specifically:
- Critical image lazy-loading — whether the LCP / hero image is being deferred when it should load eagerly.
- Main content deferral — whether key text or sections are loaded late via JavaScript or lazy techniques.
- Appropriate use — confirming below-the-fold images and media are lazy-loaded (good) while above-the-fold content isn't (also good).
Critical content loading immediately (with lazy-loading reserved for off-screen media) passes; some above-the-fold content deferred is a warning; the main content or LCP image being lazy-loaded is a fail.
GEObubbly inspects how content and images are loaded and flags critical above-the-fold elements that are being deferred. It's an extended Performance check that runs partially, since loading behaviour depends on how the live page is built.
Lazy-loading — deferring a resource until it's about to be needed — is a genuinely useful performance technique, but only when applied to the right things. Images and media below the fold should be lazy-loaded so the browser doesn't waste bandwidth on content the user may never scroll to. The problem is lazy-loading content that's above the fold or critical to the first paint: if your hero image (often the LCP element) is lazy-loaded, the browser deliberately delays the very thing that defines your loading metric, making LCP worse. Worse still, content deferred via JavaScript-driven lazy techniques may never load for crawlers that don't scroll or run JS — so it can be invisible the same way JS-only content is. The rule of thumb is simple: load critical, above-the-fold content eagerly (use loading="eager" or no lazy attribute on the hero image), and reserve loading="lazy" for off-screen images and iframes. Done right, lazy-loading speeds up the page; done wrong, it hides your most important content.
Lazy-loading defers loading a resource — typically images, iframes or media — until it's about to enter the viewport, so the browser doesn't download content the user may never scroll to. Use it for off-screen, below-the-fold images and embeds, where it saves bandwidth and speeds up the initial load. Don't use it for above-the-fold or critical content, because deferring those delays the first paint and can make them invisible to crawlers. The native way to enable it is the loading="lazy" attribute on images and iframes.
Because above-the-fold images — especially your hero or main image — are often the Largest Contentful Paint element, the thing whose render time defines your LCP score. Lazy-loading deliberately delays loading until the browser decides the element is needed, which pushes back that paint and worsens LCP. For critical above-the-fold imagery you want the opposite: load it eagerly, and even hint the browser to prioritise it. Reserve lazy-loading for images further down the page that the user has to scroll to reach.
It can, if the content is loaded through JavaScript-driven lazy techniques that only fire on scroll or interaction. Crawlers — particularly AI crawlers that don't execute JavaScript — may never trigger that load, so the deferred content effectively doesn't exist for them, just like client-rendered content. Native loading="lazy" on images is generally understood by search crawlers, but deferring your main text or key sections behind scroll-based JavaScript is risky. Keep critical content in the initial server-rendered HTML and load it eagerly.
Add loading="lazy" to images that sit below the fold so the browser defers them until they're needed, and leave your above-the-fold and hero images without it (or use loading="eager") so they load immediately. Always set explicit width and height (or an aspect ratio) on lazy images so the layout doesn't shift as they load, which protects your CLS score. The aim is to defer the images users may never see while loading the ones that define the first impression right away.
Both ways, depending on how it's used. Correctly lazy-loading off-screen images reduces the initial download and can improve loading metrics by letting the browser focus on what's visible. But lazy-loading the LCP image or other critical above-the-fold content delays the first paint and worsens LCP, and lazy images without reserved dimensions can cause layout shifts that hurt CLS. So lazy-loading is a tool that helps Core Web Vitals when applied to the right elements and hurts them when applied to the wrong ones.