Lazy Loading & Code Splitting

Lazy loading moves non-essential work out of the first page load. The goal is not to hide slow code; it is to avoid downloading, parsing, and executing code or media before the user can benefit from it. Good candidates are routes, modals, drawers, charts, editors, maps, and below-the-fold media.

Dynamic Imports

Bundlers split dynamic imports into separate chunks. The initial bundle gets smaller, and the chunk loads only when the route or feature is needed.

type RouteModule = {
  render: () => void;
};

export async function loadSettingsRoute(): Promise<RouteModule> {
  const module = await import("./routes/settings");
  return module;
}

React wraps this with React.lazy. In Svelte islands, you usually keep the island focused and dynamically import heavy helpers or data visualizations inside the component when a user action requires them.

Native Media Lazy Loading

Images and iframes support browser-native lazy loading. In TypeScript-heavy codebases, you can still centralize attributes through a typed helper.

type LazyImageAttrs = {
  src: string;
  alt: string;
  loading: "lazy";
  decoding: "async";
};

export function lazyImage(src: string, alt: string): LazyImageAttrs {
  return { src, alt, loading: "lazy", decoding: "async" };
}

Do not lazy-load the largest above-the-fold image because it usually affects Largest Contentful Paint.

IntersectionObserver Pattern

For custom components, place a sentinel near the content and mount the expensive component after it intersects.

export function observeOnce(
  element: Element,
  onVisible: () => void,
  rootMargin = "200px",
) {
  const observer = new IntersectionObserver(([entry]) => {
    if (!entry?.isIntersecting) return;
    onVisible();
    observer.disconnect();
  }, { rootMargin });

  observer.observe(element);
  return () => observer.disconnect();
}

Prefetch hints are useful when intent is likely. For example, prefetch a settings route after the user opens the account menu, not on every page load.

Further Learning

Search these terms to go deeper:

• “dynamic import code splitting Vite” — how chunks are created by modern bundlers
• “IntersectionObserver lazy loading component” — viewport-triggered rendering patterns
• “native image loading lazy LCP” — when lazy loading helps or harms metrics
• “link rel prefetch route chunks” — warming likely future navigation

Lazy Loading & Code Splitting

Why make someone download your entire app just to see the home page? Lazy loading means loading things only when they’re actually needed — so the first screen appears fast, and heavier stuff loads on demand.

Code splitting: load pages when visited

Instead of bundling every page into one giant file, split them so each page’s code loads only when someone goes there. The magic is the import() function (note the parentheses):

// this page's code downloads only when this runs
const settings = await import('./routes/settings')

In React, you’d wrap this with React.lazy. Your initial download shrinks, and the settings code loads the moment someone opens settings.

Lazy-load images (one attribute!)

For images below the fold, the browser can wait until you scroll near them — just add one attribute:

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

Load components when they scroll into view

For custom components further down the page, you can watch when they’re about to appear (using the browser’s IntersectionObserver) and only build them then. Great for a heavy chart or map that’s way down the page.

What’s worth lazy-loading?

Good candidates: other routes/pages, modals and drawers (hidden until opened), heavy things like charts, editors, maps, and below-the-fold images. Basically: anything the user doesn’t see right away.

In one sentence

Lazy loading defers non-essential code and media until needed — split pages with import(), add loading="lazy" to off-screen images (never the hero), and load heavy off-screen components only when they scroll into view.

Want to go deeper?

Switch to Expert mode above for the IntersectionObserver pattern, prefetching likely routes, and measuring bundle impact.