Lazy-loading defers downloading something until it's actually needed — usually when it's about to scroll into view. This shrinks the initial payload so the visible part of the page loads faster.
The browser does it natively with one attribute:
Always keep width/height so the browser reserves space (avoids layout shift). Never lazy-load your LCP image — it delays the very thing being measured.
Split heavy or rarely-used UI (modals, charts) into a separate chunk loaded on demand:
// Instead of a static import that ships in the main bundle:
const Chart = React.lazy(() => import("./Chart")); // separate chunk, fetched when rendered
<Suspense fallback={<Spinner />}>
<Chart data={data} />
</Suspense>
The dynamic import() tells the bundler to create a separate file that downloads only when <Chart> first renders.
Lazy-loading is the simplest, highest-leverage win for a heavy page: less to download up front means faster LCP and less JS to parse. Interviewers want to see you not lazy-load the hero image — a classic mistake that hurts the metric you're trying to help.
A library of IT interview questions with detailed answers — from Junior to Senior.
Donate