A lazy-loading elhalasztja valaminek a letöltését addig, amíg ténylegesen szükség nem lesz rá — általában amikor épp be akar görgődni a képernyőre. Ez csökkenti a kezdeti payloadot, így az oldal látható része gyorsabban töltődik be.
A böngésző natívan megteszi egyetlen attribútummal:
Mindig tartsd meg a width/height értékeket, hogy a böngésző helyet foglaljon (elkerülve a layout shiftet). Soha ne lazy-load-old az LCP-képedet — ez éppen azt késlelteti, amit mérnek.
Bontsd külön chunkba a nehéz vagy ritkán használt UI-t (modálok, diagramok), amelyet igény szerint töltesz be:
// 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>
A dinamikus import() azt mondja a bundlernek, hogy hozzon létre egy külön fájlt, amely csak akkor töltődik le, amikor a <Chart> először renderelődik.
A lazy-loading a legegyszerűbb, legnagyobb hatású nyereség egy nehéz oldalnál: kevesebb kezdeti letöltés gyorsabb LCP-t és kevesebb feldolgozandó JS-t jelent. Az interjúztatók azt akarják látni, hogy nem lazy-load-olod a hero képet — ez klasszikus hiba, amely rontja azt a metrikát, amelyen segíteni próbálsz.
IT interjúkérdések gyűjteménye részletes válaszokkal — Juniortól Seniorig.
Adományozás