Lazy loading

Lazy loading is the practice of deferring the loading of resources — typically images, iframes, and sometimes scripts — until they're actually needed. Instead of loading every image on a page when the page first opens (including those below the fold, which you can't see), lazy loading waits until the user scrolls near each image before fetching it.

Lazy loading waits until the user scrolls near each image before fetching it. The result is faster initial page loads, less wasted bandwidth, and better Core Web Vitals scores.

Why it matters

A product or article page could have dozens of images. Without lazy loading, all of them download immediately, blocking other resources and inflating the page weight before anything visible has even rendered. Many users will never scroll far enough to reach many of these images.

What lazy loading improves:

• Largest Contentful Paint (LCP) — by reducing competition for bandwidth during the critical loading phase.
• First Contentful Paint (FCP) — fewer resources to fetch before the first render.
• Total Blocking Time (TBT) / Interaction to Next Paint (INP) — less JavaScript and image decoding work on initial load.
• Mobile data usage — significant savings on long pages.

Native lazy loading

Modern browsers (Chrome, Firefox, Safari, Edge) support lazy loading natively via the loading attribute:

<img src="image.jpg" alt="..." loading="lazy" width="800" height="600">
<iframe src="https://www.youtube.com/embed/..." loading="lazy"></iframe>

Values:

• lazy — defer loading until the resource is near the viewport.
• eager — load immediately (default behaviour).

This is the simplest, most reliable approach. No JavaScript needed. Browsers handle the threshold heuristics — typically starting the load when the resource is a few screen-heights away from being visible.

What to lazy load

• Below-the-fold images — the most common use case.
• Iframes — particularly third-party embeds (YouTube, Vimeo, maps, social feeds), which are often the heaviest single resources on a page.
• Off-screen videos.

What NOT to lazy load

• The Largest Contentful Paint (LCP) image — the hero image that dominates the initial viewport. Lazy loading the hero image delays its render and hurts LCP. Use loading="eager" (or omit the attribute) and consider adding fetchpriority="high":

  <img src="hero.jpg" alt="..." width="1600" height="900" fetchpriority="high">
  

• Above-the-fold images.

• Critical CSS or JavaScript required for the initial render.
• Logos and icons in the header.

A common mistake is applying loading="lazy" site-wide to all images. This regresses LCP because the hero image is now lazy-loaded.

Lazy loading and SEO

The benefits

• Improved Core Web Vitals → improved ranking signals.
• Better mobile experience → better engagement metrics.
• Lower data usage → users don't abandon mid-load.

The risks

• Images that are never loaded aren't crawled. If lazy loading is implemented in JavaScript that doesn't fire during Googlebot's render, those images won't be indexed for image search. Native loading="lazy" doesn't have this problem — Googlebot handles it correctly.
• Content hidden behind lazy loading that requires user interaction (e.g., infinite scroll without paginated URLs) may not be discovered.

Best practice: use native lazy loading where possible, ensure images have proper <img src> references in the HTML (not just in JavaScript-driven data-src attributes), and provide paginated URLs for any infinite-scroll content.

Always specify width and height

Lazy-loaded images that don't have explicit dimensions cause layout shift when they finally load — directly hurting Cumulative Layout Shift (CLS). Always include width and height attributes (or use the aspect-ratio CSS property) so the browser can reserve the right amount of space upfront.

Iframe lazy loading is high-impact

A single embedded YouTube iframe can add 1–2 MB of JavaScript and dozens of network requests. Lazy loading these — or replacing them with a static thumbnail that loads the iframe on click — can dramatically improve page performance:

<iframe src="https://www.youtube.com/embed/..." loading="lazy"
        width="560" height="315" allowfullscreen></iframe>

For maximum performance, the "facade" pattern (clickable thumbnail that swaps in the real iframe on click) avoids the iframe's overhead entirely until the user wants it.

Implementation

Native loading="lazy" is the modern default. Apply it to all images and iframes below the fold. Keep the LCP image eager. Always set explicit dimensions. Audit periodically with PageSpeed Insights to confirm the lazy/eager mix is correct.

Performance

Disclaimer: All information contained herein is for informational purposes only. It is not advice or instructional.