Lazy-Load Below-Fold Content

Why this matters

The initial viewport (above the fold) is the only content the user sees when the page first loads. Everything below the fold is invisible until the user scrolls. Loading below-fold content upfront has three costs:

Slower initial load: The browser must download, parse, and render below-fold images and components before the above-fold content becomes interactive. This directly increases LCP and TTI.

Wasted bandwidth: On mobile networks (which account for 60%+ of web traffic), downloading images the user may never scroll to wastes data and slows down everything else on the page.

Main thread blocking: Loading and rendering below-fold components occupies the main thread, delaying interaction handlers for above-fold content. Users experience jank and unresponsive buttons.

Lazy loading defers below-fold work until the user scrolls near it, making the initial load fast and efficient.

The rule

Lazy-load all images, heavy components, and non-critical data that are below the initial viewport. Use loading="lazy" for images, React.lazy() for components, and intersection observers for data fetching.

Bad example

// All images load immediately — even ones 3000px below the fold
export function ProductPage({ products }: { products: Product[] }) {
  return (
    <div>
      <HeroSection /> {/* Above fold */}
      {products.map(product => (
        <div key={product.id}>
          <img src={product.image} /> {/* Loads immediately even if below fold */}
          <HeavyReviewsWidget productId={product.id} /> {/* Loads immediately */}
        </div>
      ))}
    </div>
  );
}

Good example

import { lazy, Suspense } from "react";
 
const HeavyReviewsWidget = lazy(() => import("./reviews-widget"));
 
export function ProductPage({ products }: { products: Product[] }) {
  return (
    <div>
      <HeroSection /> {/* Above fold — loads immediately */}
      {products.map(product => (
        <div key={product.id}>
          <img
            src={product.image}
            loading="lazy"           {/* Deferred until near viewport */}
            width={400}
            height={300}
          />
          <Suspense fallback={<ReviewsSkeleton />}>
            <HeavyReviewsWidget productId={product.id} />
          </Suspense>
        </div>
      ))}
    </div>
  );
}

How to detect

Search for images without lazy loading:

grep -rn '<img' --include="*.tsx" --include="*.jsx" | grep -v 'loading='

Use Lighthouse to identify "offscreen images" that should be lazy-loaded.

Remediation

1. Add loading="lazy" to all <img> elements below the fold (do NOT lazy-load above-fold hero images — this hurts LCP)
2. Use React.lazy() with Suspense for heavy below-fold components
3. Use Next.js Image component which handles lazy loading automatically
4. Add width and height attributes to prevent layout shift during lazy load
5. Test with Lighthouse and verify LCP is not regressed by over-eager lazy loading

References

• web.dev: Lazy loading images
• MDN: loading attribute
• Next.js: Image Optimization