Lazyload Images
Defer off-screen images until they near the viewport, reducing initial page weight and freeing bandwidth for critical resources.
Metrics
This technique can move up to 67% of LCP's share of the Lighthouse score.
This technique does not move TBT.
This technique does not move CLS.
This technique can move up to 33% of FCP's share of the Lighthouse score.
This technique can move up to 67% of SI's share of the Lighthouse score.
This technique does not move TTFB.
Each ring is a metric this technique moves.
Impact grade, A+ to D: how much of the Lighthouse score this technique can move. Unaffected: TBT, CLS, TTFB.
The Problem
On image-heavy pages, browsers eagerly download every image regardless of scroll position. This floods the network queue with low-priority requests while critical resources — the LCP image, fonts, key CSS — wait in line. The result is a slower First Contentful Paint, delayed LCP, and wasted bandwidth for images the user may never scroll to.
Performance Impact
LCP
High
LCP image loads faster when off-screen images no longer compete for bandwidth
FCP
Medium
browser finishes initial render sooner with a smaller network queue
SI
below-fold images deferred; freed bandwidth reaches above-fold content faster, accelerating visual completion
How it works
01
Native loading="lazy" — zero JavaScript required
Adding
loading="lazy"to an<img>tag activates the browser’s built-in deferred loading heuristic. The browser determines the appropriate distance threshold and starts the download just before the image enters view. WordPress applies this automatically to most images viawp_lazy_loading_enabled.02
JavaScript-based approach with IntersectionObserver
The real
srcis replaced with a tiny placeholder; the actual URL is stored indata-src. An IntersectionObserver watches for each image approaching the viewport and swapsdata-srcintosrc, triggering the download.03
Above-the-fold images must be excluded
The first one or two images on a page are likely visible immediately — lazy-loading them delays display of the most important content and directly harms LCP. WordPress Core automatically skips the
loadingattribute for the first image in post content.04
width and height attributes prevent layout shift
The browser uses
widthandheightattributes to calculate the image’s aspect ratio and reserve the right amount of space before the image loads. Without them, loading an image pushes content down, creating a CLS problem.
Limitations
- The most critical performance rule: any image visible in the initial viewport — especially the LCP candidate — must not carry
loading="lazy". Doing so directly delays its download and harms LCP. - JavaScript-based solutions break when JS is disabled. Native
loading="lazy"has no JavaScript dependency. - Missing
widthandheightattributes cause layout shifts when deferred images load — always provide explicit dimensions. - Some caching setups that generate separate mobile/desktop HTML need to ensure the “skip count” (number of non-lazy images at the top) is appropriate for each viewport.
Common Mistakes
Applying loading=”lazy” to every image on the page
The LCP image and any images visible without scrolling must load eagerly. Most implementations should skip the first 1–3 images in the main content area.
No width and height attributes on lazy-loaded images
Without dimensions the browser cannot reserve space, causing content to jump down when the image loads — a CLS penalty. Always include width and height.
Installing two plugins that both implement lazy loading
Theme lazy loading plus a performance plugin both adding the attribute can cause double-observer conflicts. Audit your setup and disable one source.
Forgetting about CSS background images
loading="lazy" only works on <img> and <iframe>. Background images in CSS require a separate IntersectionObserver JavaScript approach.
Need help applying this to your site?
Targeted fixes, not guesswork. We identify which techniques move the needle for your specific WordPress stack.
Start an Engagement