Lazy-loading skjuter upp nedladdningen av något tills det faktiskt behövs — oftast när det är på väg att scrollas in i vyn. Detta krymper den initiala nyttolasten så att den synliga delen av sidan laddas snabbare.
Webbläsaren gör det nativt med ett attribut:
Håll alltid width/height så att webbläsaren reserverar plats (undviker layout shift). Lazy-loada aldrig din LCP-bild — det fördröjer just det som mäts.
Dela upp tungt eller sällan använt UI (modaler, diagram) i en separat chunk som laddas på begäran:
// 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>
Det dynamiska import() talar om för bundlern att skapa en separat fil som laddas ner först när <Chart> renderas första gången.
Lazy-loading är den enklaste vinsten med störst hävstång för en tung sida: mindre att ladda ner i förväg betyder snabbare LCP och mindre JS att parsa. Intervjuare vill se att du inte lazy-loadar hjältebilden — ett klassiskt misstag som skadar just det mått du försöker hjälpa.
Ett bibliotek med IT-intervjufrågor och detaljerade svar — från Junior till Senior.
Donera