Mi az a Lazy Loading (Lusta Betöltés)? Képek, Videók és Weboldal Sebesség
A Lazy Loading (lusta betöltés) csak akkor tölti le a képeket és iframe videókat, amikor a látogató odaér a görgetés során. Beállítás és LCP hatások.
Hogyan működik a Lazy Loading és miért gyorsítja meg az oldalt?
Egy átlagos hosszabb cikk vagy webshop kategóriaoldal akár 20–50 képet és beágyazott videót is tartalmazhat. Hagyományos működés esetén a böngésző a lap megnyitásakor az összes képet egyszerre kezdi el letölteni a szerverről — még azokat is, amik az oldal alján vannak, és a látogató lehet, hogy soha le sem görget hozzájuk! Ez a sávszélesség pazarlása, és másodpercekkel megakasztja az oldal megjelenését. A **Lazy Loading (Lusta Betöltés)** lényege, hogy a hajtás alatti elemek letöltését elhalasztja, és csak akkor kéri le a fájlokat, amikor a felhasználó lefelé görgetve megközelíti az adott szekciót.
- Azonnali kezdeti betöltési sebesség: az első képernyő (Above-the-Fold) azonnal megjelenik.
- Drasztikusan kevesebb felesleges adatforgalom mobilon.
- Kisebb szerverterhelés a látogatói csúcsidőszakokban.
Natív böngésző szintű Lazy Loading a modern HTML-ben
Ma már nincs szükség nehéz külső JavaScript könyvtárakra (pl. jQuery vagy speciális scriptek), mert az összes modern böngésző natívan támogatja a `loading="lazy"` attribútumot képeken és beágyazott iframe-eken (pl. YouTube videók, Google Térképek):
A legveszélyesebb hiba: Lazy loading alkalmazása a hajtás feletti főképen (LCP gyilkosság)
Sokan elkövetik azt a hibát, hogy vakon ráteszik a `loading="lazy"` címkét a weboldal legfelső, fő Hero banner képére vagy a cikk legelső fotójára. Ez végzetes hiba a Core Web Vitals szempontjából! A böngésző ilyenkor szándékosan késlelteti a legfontosabb kép betöltését, ami miatt az LCP (Largest Contentful Paint) mutató 2.5 másodpercről 5-6 másodpercre ugrik (piros zóna).
- A legfelső, hajtás feletti 1-2 képre SOHA NE tegyél `loading="lazy"`-t!
- A főképre ehelyett használj `fetchpriority="high"` prioritást!
- Csak a képernyőből elsőre kilógó, lejjebb található képeknél alkalmazz lusta betöltést!
Nem vagy biztos benne, hogyan állítsd be a weboldaladon?
Minden weboldal és tartalomkezelő (WordPress, Webflow, Shopify vagy egyedi fejlesztés) más technikai felépítéssel működik. Ne pazarold az idődet a kockázatos kísérletezésre! Két debreceni egyetemistaként alaposan átvilágítjuk a teljes weboldaladat, feltárjuk az összes rejtett technikai, sebességi és SEO akadályt, és pontos, személyre szabott feladatlistát készítünk a javításhoz.