What is Lazy Loading?
Lazy loading is a technique that defers loading of off-screen resources — typically images and iframes — until the user scrolls near them. Lazy loading reduces initial page weight and speeds up loading.
Why Lazy Loading matters
A typical page loads every image at once even though the visitor sees only the first screen. Lazy loading defers images, iframes and sometimes scripts until they are about to scroll into view, which cuts initial page weight, saves bandwidth on mobile and speeds up the parts that matter first. Modern browsers support it natively with a single attribute; no library is needed for images and iframes.
The one rule that trips people up: never lazy-load anything visible on first render, and especially not the largest element, because that delays LCP instead of improving it. Lazy-loaded images also need explicit dimensions so the layout does not shift when they arrive.
Example
Native lazy loading below the fold, eager above it:
<img src="/hero.webp" width="1200" height="600" fetchpriority="high" alt="…">
…
<img src="/screenshot-3.webp" width="800" height="500" loading="lazy" alt="…">
<iframe src="https://www.youtube.com/embed/…" loading="lazy" title="Product tour"></iframe>One attribute, no JavaScript, and the browser decides when to fetch.
Common mistakes
- •Lazy-loading the hero image, so LCP gets worse.
- •Missing width and height on lazy images, which causes layout shift on scroll.
- •JavaScript lazy-load libraries that hide images from crawlers when they fail.
How Webmatik checks it
Webmatik's Image optimization and Page size checks surface oversized and offscreen images from Lighthouse, and Main content load speed names the LCP element so you can confirm it is not one of the lazy ones.
Check your own site
Free Website Speed Test
See your LCP, CLS and INP on mobile and desktop, with the fixes ranked by payoff.
Related Performance terms
See how your website scores across SEO, GEO, performance, and more
Run a free audit