Lazy-loading yana jinkirta download wani abu har sai an yi bukatarsa da gaske — yawanci lokacin da yake shirin shiga cikin view ta scroll. Wannan yana rage initial payload don ɓangaren page da ake gani ya loda da sauri.
Browser yana yin sa a asali da attribute guda:
Koyaushe ka kiyaye width/height don browser ya ajiye sarari (yana guje wa layout shift). Kada ka taɓa lazy-load LCP image ɗinka — yana jinkirta ainihin abin da ake aunawa.
Raba manyan ko rarely-used UI (modals, charts) zuwa wani chunk daban da ake loda a lokacin bukata:
// 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() yana gaya wa bundler ya ƙirƙira wani file daban wanda ke download kawai lokacin da <Chart> ya fara render.
Lazy-loading shi ne nasara mafi sauƙi kuma mafi ƙarfi ga page mai nauyi: ƙasa da za a download tun farko yana nufin LCP mai sauri da ƙasa da JS da za a parse. Masu tambayoyi suna son ganin ka ba lazy-load hero image ba — kuskure na gargajiya da ke cutar da metric ɗin da kake ƙoƙarin taimakawa.
Ɗakin karatu na tambayoyin hira na IT tare da amsoshi cikakke — daga Junior zuwa Senior.
Ba da Gudummawa