Si i bëni lazy-load imazhet dhe komponentët, dhe pse?

Question

IT Interview Practice · Accepted Answer

**Lazy-loading** e shtyn shkarkimin e diçkaje derisa faktikisht të nevojitet — zakonisht kur është gati të hyjë në pamje gjatë scroll-it. Kjo e zvogëlon payload-in fillestar që pjesa e dukshme e faqes të ngarkohet më shpejt. ## Lazy-loading i imazheve Browser-i e bën atë në mënyrë native me një atribut të vetëm: ```html

``` Mbajeni gjithmonë `width`/`height` që browser-i të rezervojë hapësirë (shmang layout shift). Kurrë mos e bëni lazy-load imazhin tuaj LCP — e vonon pikërisht atë gjë që po matet. ## Lazy-loading i komponentëve (kodi) Ndani UI-në e rëndë ose të përdorur rrallë (modal-e, chart-e) në një chunk të veçantë të ngarkuar sipas nevojës: ```js // Instead of a static import that ships in the main bundle: const Chart = React.lazy(() => import("./Chart")); // separate chunk, fetched when rendered }> ``` Dynamic `import()` i tregon bundler-it të krijojë një skedar të veçantë që shkarkohet vetëm kur `` renderohet për herë të parë. ## Pse ka rëndësi Lazy-loading është fitorja më e thjeshtë dhe me leva-në më të lartë për një faqe të rëndë: më pak për të shkarkuar që në fillim do të thotë LCP më i shpejtë dhe më pak JS për të parse-uar. Intervistuesit duan të shohin që *nuk* e bëni lazy-load imazhin hero — një gabim klasik që dëmton metrikën që po përpiqeni të ndihmoni.

Lazy-loading i imazheve

Lazy-loading i komponentëve (kodi)

Pse ka rëndësi

Pyetje të ngjashme