Lazy-loading huahirisha kupakua kitu hadi kihitajike kweli — kwa kawaida kinapokaribia kuingia kwenye view kwa scroll. Hii hupunguza payload ya awali ili sehemu inayoonekana ya ukurasa ipakie haraka zaidi.
Browser huifanya kwa asili kwa attribute moja:
Daima weka width/height ili browser ihifadhi nafasi (huepuka layout shift). Kamwe usi-lazy-load LCP image yako — hucheleweshaji kile hasa kinachopimwa.
Gawanya UI nzito au isiyotumika mara kwa mara (modals, charts) kuwa chunk tofauti inayopakiwa kwa mahitaji:
// 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>
Dynamic import() huiambia bundler kuunda faili tofauti inayopakia tu wakati <Chart> inaporender kwa mara ya kwanza.
Lazy-loading ni ushindi rahisi zaidi na wenye faida kubwa kwa ukurasa mzito: kupakua kidogo mwanzoni kunamaanisha LCP ya haraka na JS ndogo ya kuchanganua. Wahojaji wanataka kuona usi-lazy-load hero image — kosa la kawaida linaloumiza metric unayojaribu kuisaidia.
Maktaba ya maswali ya mahojiano ya IT yenye majibu ya kina — kutoka Junior hadi Senior.
Changia