Lazy-loading stelt het downloaden van iets uit totdat het daadwerkelijk nodig is — meestal wanneer het bijna in beeld scrollt. Dit verkleint de initiële payload zodat het zichtbare deel van de pagina sneller laadt.
De browser doet het native met één attribuut:
Houd altijd width/height aan zodat de browser ruimte reserveert (voorkomt layout shift). Lazy-load nooit je LCP-afbeelding — dat vertraagt precies het ding dat gemeten wordt.
Splits zware of zelden gebruikte UI (modals, charts) af in een aparte chunk die op verzoek wordt geladen:
// In plaats van een statische import die in de main bundle meegaat:
const Chart = React.lazy(() => import("./Chart")); // aparte chunk, opgehaald bij render
<Suspense fallback={<Spinner />}>
<Chart data={data} />
</Suspense>
De dynamische import() vertelt de bundler om een apart bestand te maken dat pas downloadt wanneer <Chart> voor het eerst rendert.
Lazy-loading is de eenvoudigste, meest effectieve winst voor een zware pagina: minder om vooraf te downloaden betekent snellere LCP en minder JS om te parsen. Interviewers willen zien dat je de hero-afbeelding niet lazy-loadt — een klassieke fout die precies de metric schaadt die je probeert te helpen.
Een bibliotheek met IT-sollicitatievragen met gedetailleerde antwoorden — van Junior tot Senior.
Doneren