Lazy-loading odgađa preuzimanje nečega dok stvarno ne zatreba — obično kad se približi ulasku u vidno polje. To smanjuje početni payload pa se vidljivi dio stranice učita brže.
Lazy-loading slika
Preglednik to radi nativno s jednim atributom:
html
Lazy-loading odgađa preuzimanje nečega dok stvarno ne zatreba — obično kad se približi ulasku u vidno polje. To smanjuje početni payload pa se vidljivi dio stranice učita brže.
Preglednik to radi nativno s jednim atributom:
Uvijek zadržite width/height kako bi preglednik rezervirao prostor (izbjegava pomak layouta). Nikad lazy-load svoju LCP sliku — to odgađa upravo ono što se mjeri.
Podijelite teški ili rijetko korišteni UI (modali, grafovi) u zaseban chunk koji se učitava na zahtjev:
// Umjesto statičkog importa koji se šalje u glavnom bundleu:
const Chart = React.lazy(() => import("./Chart")); // zaseban chunk, dohvaćen kad se renderira
<Suspense fallback={<Spinner />}>
<Chart data={data} />
</Suspense>
Dinamički import() govori bundleru da stvori zasebnu datoteku koja se preuzima tek kad se <Chart> prvi put renderira.
Lazy-loading je najjednostavniji pobjednički potez s najvećim učinkom za tešku stranicu: manje za preuzeti unaprijed znači brži LCP i manje JS-a za parsirati. Ispitivači žele vidjeti da ne lazy-loadate hero sliku — klasična pogreška koja šteti metrici kojoj pokušavate pomoći.
Knjižnica IT pitanja za razgovore za posao s detaljnim odgovorima — od Juniora do Seniora.
Doniraj