Hogyan működik a natív lusta betöltés a képeknél/iframe-eknél?

Question

Accepted Answer

A `loading="lazy"` attribútum azt mondja a böngészőnek, hogy **halassza el a betöltést** egy kép vagy iframe betöltéséig, amíg az közel nem kerül a viewport-hoz — sávszélességet takarít meg és felgyorsítja a kezdeti betöltést, JavaScript nélkül. ```html

``` ## Hogyan működik - **`lazy`** — csak akkor töltse be, amikor a görgetés közel hozza a viewport-hoz. - **`eager`** (alapértelmezett) — azonnal töltse be, függetlenül a helyzettől. A böngésző margót használ (az elem megjelenése előtt egy kicsit korábban tölt be), így a kép általában készen áll, amikor a felhasználó meglátja. ## Kritikus párosítás: állítsa be a width/height értéket az elrendezés eltolódásának elkerüléséhez ```html

``` Dimenzió nélkül (vagy `aspect-ratio` nélkül), a lustán betöltött képnek nincs fenntartott helye, ezért amikor betöltődik az oldal **ugrik** — az Cumulative Layout Shift (CLS) megsérül. Mindig tartson fenn helyet. ## Ne végezzen lusta betöltést a hajtás feletti tartalmon ```html

``` A **Largest Contentful Paint** kép lusta betöltése valójában *rossz hatással van a teljesítményre* — késlelteti a legfontosabb képpontot. Csak az képernyőn kívüli médiához végezzen lusta betöltést. ## Natív előtt: IntersectionObserver ```js // the old manual approach native lazy-loading replaced const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) e.target.src = e.target.dataset.src; }); }); ``` A natív `loading="lazy"` szükségtelenné tette ezt a legtöbb esetben (bár az IntersectionObserver továbbra is hasznos az egyéni logikához). ## Miért fontos A natív lusta betöltés csökkenti a kezdeti bájtokat és a kéréseket sok képet tartalmazó hosszú oldalak esetén — nagy mobil nyereség — ingyenesen. A árnyalatok fontosak: tartson fenn dimenziókat a CLS védelméhez, és tartsa az oldal feletti/LCP képeket eager-nek (még `fetchpriority="high"`) hogy a fontos tartalom továbbra is gyorsan betöltődjön.