Lazy-lasting utsetter nedlasting av noe til det faktisk trengs — vanligvis når det er i ferd med å scrolle inn i synsfeltet. Dette krymper den innledende nyttelasten slik at den synlige delen av siden lastes raskere.
Nettleseren gjør det nativt med ett attributt:
Behold alltid width/height slik at nettleseren reserverer plass (unngår layout shift). Lazy-last aldri LCP-bildet ditt — det forsinker akkurat det som blir målt.
Del opp tung eller sjelden brukt UI (modaler, diagrammer) i en separat chunk som lastes ved behov:
// I stedet for en statisk import som følger med i hovedbundelen:
const Chart = React.lazy(() => import("./Chart")); // separat chunk, hentet når den rendres
<Suspense fallback={<Spinner />}>
<Chart data={data} />
</Suspense>
Den dynamiske import() forteller bundleren å lage en separat fil som først lastes ned når <Chart> rendres.
Lazy-lasting er den enkleste, mest slagkraftige gevinsten for en tung side: mindre å laste ned i starten betyr raskere LCP og mindre JS å parse. Intervjuere vil se at du ikke lazy-laster hero-bildet — en klassisk feil som skader nettopp metrikken du prøver å hjelpe.
Et bibliotek av IT-intervjuspørsmål med detaljerte svar — fra Junior til Senior.
Doner