Cuireann lazy-loading íoslódáil ruda siar go dtí go bhfuil sé ag teastáil i ndáiríre — de ghnáth nuair atá sé ar tí scrollú isteach i radharc. Laghdaíonn sé seo an t-ualach tosaigh ionas go lódálann an chuid infheicthe den leathanach níos tapa.
Déanann an brabhsálaí go dúchasach é le tréith amháin:
Coinnigh width/height i gcónaí ionas go gcuireann an brabhsálaí spás in áirithe (seachnaíonn sé layout shift). Ná déan lazy-load riamh ar d'íomhá LCP — cuireann sé moill ar an rud díreach atá á thomhas.
Roinn UI trom nó a úsáidtear go hannamh (modals, cairteacha) i chunk ar leith a lódáiltear ar éileamh:
// 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>
Insíonn an import() dinimiciúil don bundler comhad ar leith a chruthú nach n-íoslódálann ach nuair a rindreáiltear <Chart> den chéad uair.
Is é lazy-loading an bua is simplí, is airde luamhánaithe do leathanach trom: ciallaíonn níos lú le híoslódáil chun tosaigh LCP níos tapa agus níos lú JS le parsáil. Ba mhaith le hagallóirí a fheiceáil nach ndéanann tú lazy-load ar an íomhá laoich — botún clasaiceach a dhéanann dochar don mhéadracht atá tú ag iarraidh cabhrú léi.
Leabharlann de cheisteanna agallaimh TF le freagraí mionsonraithe — ó Shóisearach go Sinsearach.
Síntiús