Lazy-loading udskyder downloading af noget, indtil det faktisk er nødvendigt — normalt når det er ved at scrolle ind i visningen. Dette formindsker det oprindelige payload, så den synlige del af siden indlæses hurtigere.
Browseren gør det nativt med én attribut:
Behold altid width/height, så browseren reserverer plads (undgår layout shift). Lazy-load aldrig dit LCP-billede — det forsinker netop det, der bliver målt.
Opdel tung eller sjældent brugt UI (modaler, charts) i en separat chunk, der indlæses 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>
Den dynamiske import() fortæller bundleren at oprette en separat fil, der kun downloades, når <Chart> renderes første gang.
Lazy-loading er den enkleste gevinst med højest gearing for en tung side: mindre at downloade i starten betyder hurtigere LCP og mindre JS at parse. Interviewere vil se, at du ikke lazy-loader hero-billedet — en klassisk fejl, der skader netop den metric, du prøver at hjælpe.
Et bibliotek af IT-interviewspørgsmål med detaljerede svar — fra Junior til Senior.
Donér