Lazy Loading Techniques Explained

What is Lazy Loading?

Lazy loading delays loading resources (images, components, data) until they're actually needed — usually when scrolled into view. This speeds up initial page load.

Native Image Lazy Loading

<img src="photo.jpg" loading="lazy" alt="...">
<iframe src="video.html" loading="lazy"></iframe>

Lazy Loading Components (React)

const Dashboard = React.lazy(() => import("./Dashboard"));

<Suspense fallback={<Spinner />}>
  <Dashboard />
</Suspense>
// Only loads Dashboard code when rendered

Intersection Observer (Custom)

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
    }
  });
});
document.querySelectorAll("img[data-src]")
  .forEach(img => observer.observe(img));

What to Lazy Load

• Below-the-fold images.
• Heavy components (charts, maps).
• Routes/pages (code splitting).

FAQs

Should I lazy-load everything?

No — never lazy-load above-the-fold/hero images; it delays what users see first. More in our Performance section.

Does it help SEO?

Yes — faster loads improve Core Web Vitals.