Lazy-loading odloži prenos nečesa, dokler tega dejansko ne potrebuješ — običajno tik preden zdrsne v vidno polje. To skrči začetni prenos, tako da se vidni del strani naloži hitreje.
Brskalnik to počne domorodno z enim atributom:
Vedno ohrani width/height, da brskalnik rezervira prostor (izogne se premiku postavitve). Nikoli ne lazy-loadaj svoje LCP slike — s tem zavlačuješ prav tisto, kar se meri.
Razdeli težek ali redko uporabljen UI (modali, grafi) v ločen kos, naložen po potrebi:
// 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>
Dinamični import() bundlerju pove, naj ustvari ločeno datoteko, ki se prenese šele, ko se <Chart> prvič izriše.
Lazy-loading je najpreprostejša zmaga z največjim vzvodom za težko stran: manj za prenos vnaprej pomeni hitrejši LCP in manj JS za razčlenjevanje. Spraševalci želijo videti, da ne lazy-loadaš hero slike — klasična napaka, ki škoduje prav metriki, ki ji poskušaš pomagati.
Knjižnica IT vprašanj za razgovore s podrobnimi odgovori — od začetnika do izkušenega.
Doniraj