Lazy Loading and Code Splitting

Best Practice: Lazy Loading and Code Splitting

Lazy loading and code splitting are complementary techniques for shipping less code and fewer assets up front. Code splitting breaks a large JavaScript bundle into smaller chunks that load on demand, typically per route or per heavy component. Lazy loading defers loading of resources such as images, iframes, and those code chunks until they are actually needed. Together they shrink the initial payload, speed up first paint and interactivity, and improve Core Web Vitals, especially on slow networks and low-end devices.

Step-by-Step Implementation Guidance

1. Analyze the bundle to find large or rarely used modules.
2. Split the bundle by route so each page loads only its own code.
3. Lazy-load heavy components behind dynamic imports, with a loading state.
4. Lazy-load offscreen images and iframes with the native loading attribute.
5. Preload or prefetch chunks the user is likely to need next.
6. Avoid lazy-loading above-the-fold critical resources such as the LCP image.
7. Re-measure performance after each split to confirm the win.

Common Mistakes Teams Make When Ignoring This Practice

• Shipping one monolithic bundle that blocks first interaction.
• Over-splitting into many tiny chunks, adding request overhead.
• Lazy-loading the hero image and hurting LCP.
• Missing loading and error states for deferred components.
• Not prefetching likely-next chunks, causing visible delays on navigation.

Tools and Techniques That Support This Practice

• Dynamic import() with bundlers like Webpack, Vite, and esbuild.
• React.lazy, Suspense, and framework route-based splitting.
• The native loading="lazy" attribute and Intersection Observer.
• Bundle analyzers such as webpack-bundle-analyzer.

How This Practice Applies to Different Migration Types

• Cloud Migration: Serve split chunks from a CDN with long-lived caching.
• Database Migration: Defer data-heavy components until their data path is ready.
• SaaS Migration: Lazy-load embedded vendor widgets so they never block first load.
• Codebase Migration: Introduce route-based splitting as part of a framework modernization.

Checklist

• Bundle analyzed for large modules.
• Code split by route.
• Heavy components lazy-loaded with states.
• Offscreen images and iframes lazy-loaded.
• Likely-next chunks prefetched.
• Critical above-the-fold assets not deferred.
• Performance re-measured.