Lazy Loading

Problem

I’ve profiled pages where 80% of the JavaScript bundle was code the average user never touches. The browser has to download, parse, and compile all that code before users can click anything. On mobile devices with slower CPUs, that parsing and compiling takes noticeably longer than on a desktop. Images have the same problem, because product shots below the fold use bandwidth and memory even though users might never scroll down far enough to see them.

Solution

For JavaScript, dynamic import() lets your bundler split your code into chunks that load independently. Route components load when users navigate to them, and heavy features such as charting libraries only load when users open the parts of your app that use them.

For images, loading="lazy" lets the browser choose when to load each image, and Intersection Observer gives you finer control.

For third-party scripts, async or defer stops them blocking page rendering. Many of them can load even later, from your own code after the user interacts with the page, since a chat widget doesn’t need to be ready before users can read your content.

Lazy loading works well alongside preloading. When a user hovers over a navigation link, your app can start loading that route’s code before they click.

Example

Component Lazy Loading

import { lazy, Suspense } from 'react';

const AdminPanel = lazy(() => import('./AdminPanel'));

function App() {
  return (
    <div>
      <Header />
      <MainContent />
      <Suspense fallback={<Loading />}>
        <AdminPanel />
      </Suspense>
    </div>
  );
}

<template>
  <Suspense>
    <AsyncAdminPanel />
    <template #fallback>
      <Loading />
    </template>
  </Suspense>
</template>

<script>
import { defineAsyncComponent } from 'vue';

export default {
  components: {
    AsyncAdminPanel: defineAsyncComponent(() =>
      import('./AdminPanel.vue')
    )
  }
};
</script>

<script>
  let AdminPanel = $state();

  async function loadAdminPanel() {
    const module = await import('./AdminPanel.svelte');
    AdminPanel = module.default;
  }
</script>

<button onclick={loadAdminPanel}>Load Admin Panel</button>

{#if AdminPanel}
  <AdminPanel />
{/if}

class LazyComponent extends HTMLElement {
  async connectedCallback() {
    this.innerHTML = '<div class="loading">Loading...</div>';
    const { AdminPanel } = await import('./admin-panel.js');
    this.innerHTML = '';
    this.appendChild(new AdminPanel());
  }
}

customElements.define('lazy-component', LazyComponent);

Route-Based Code Splitting

Route boundaries are usually the best place to split, since each page then only loads its own code:

import { lazy, Suspense } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const Home = lazy(() => import('./pages/Home'));
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Admin = lazy(() => import('./pages/Admin'));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<PageLoader />}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/dashboard" element={<Dashboard />} />
          <Route path="/admin" element={<Admin />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
}

Conditional Feature Loading

If you load features only when certain conditions are met, you can keep premium or admin code out of your standard bundles:

function Dashboard({ user }) {
  const [AnalyticsPanel, setAnalyticsPanel] = useState(null);

  useEffect(() => {
    if (user.isPremium) {
      import('./AnalyticsPanel').then(m => setAnalyticsPanel(() => m.default));
    }
  }, [user.isPremium]);

  return (
    <div>
      <h1>Dashboard</h1>
      {AnalyticsPanel && <AnalyticsPanel />}
    </div>
  );
}

Image Lazy Loading

The browser’s built-in lazy loading works for most cases, and Intersection Observer gives you finer control:

<!-- Above the fold: load immediately, and at high priority if it's the LCP image -->
<img src="hero.jpg" alt="Hero" fetchpriority="high" width="800" height="600" />

<!-- Below the fold: let the browser wait until the user scrolls near them -->
<img src="image1.jpg" loading="lazy" alt="Image 1" width="400" height="300" />
<img src="image2.jpg" loading="lazy" alt="Image 2" width="400" height="300" />

const observer = new IntersectionObserver((entries, obs) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      obs.unobserve(entry.target);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));
// HTML: <img data-src="actual.jpg" alt="Lazy image" />

Preloading on Hover

If the download starts when users hover, the route is ready sooner when they click:

function ProductCard({ product }) {
  return (
    <div onMouseEnter={() => import('./ProductDetails')}>
      <h3>{product.name}</h3>
      <Link to={`/product/${product.id}`}>View Details</Link>
    </div>
  );
}

Lazy Third-Party Scripts

Non-critical scripts with defer or async don’t block HTML parsing while the page loads:

<script src="analytics.js" defer></script>
<script src="chat-widget.js" async></script>

<script>
  function loadAnalytics() {
    const script = document.createElement('script');
    script.src = 'https://analytics.example.com/script.js';
    document.head.appendChild(script);
  }

  document.addEventListener('click', loadAnalytics, { once: true });
</script>

Summary

Lazy loading leaves out code and images until users need them, so the first page loads faster, because the browser skips anything users might never see. It works well for route components and images below the fold, and if you preload on hover, the code is ready sooner when users do click.