Lazy loading (késleltetett betöltés)

A lazy loading (késleltetett betöltés) az a technika, amikor a képek és más nehéz elemek nem azonnal, hanem csak akkor töltődnek be, amikor a felhasználó közelükbe görget. Így a látható tartalom hamarabb megjelenik.

Gyorsítja a kezdeti betöltést és csökkenti a felesleges adatforgalmat, jót tesz a Core Web Vitals-nak, főleg mobilon. Figyelj viszont: a legfelső, azonnal látható képet (és a fő tartalmat) ne lazy-loadold, mert az ronthatja az LCP-t. A modern böngészők a loading="lazy" attribútummal natívan támogatják.

2026-ban a mobile-first indexelés miatt a mobilteljesítmény rangsorolási tényező. A lazy loading csökkenti az adatforgalmat mobilon — különösen fontos, ha a látogatók mobil hálózaton böngésznek. Az oldalsebesség javítása egyszerre jelent jobb felhasználói élményt és magasabb Google-pozíciót.

Egy miskolci utazási iroda WordPress alapú weboldala 40–60 nagy felbontású úti fotót töltött be egyszerre minden oldalbetöltésnél. A Google PageSpeed Insights 38 pontos mobilteljesítményt mért, és a teljes betöltési idő 9 másodperc felett volt.

A fejlesztő három lépésben vezette be a lazy loadingot: (1) a WordPress 5.5 óta beépített `loading="lazy"` attribútumot aktiválta minden képen a Functions.php-ban két sorral, (2) a hero banneren szereplő fő képet kivette a lazy loading alól (az azonnal látható tartalom gyors betöltése az LCP szempontjából kritikus), (3) az oldalsebesség és a Core Web Vitals mutatókat a PageSpeed Insights-szal követték nyomon. Az eredmény: mobilteljesítmény 38-ról 74 pontra nőtt, az LCP 8,4 másodpercről 2,9 másodpercre csökkent, és az organikus látogatók száma 3 hónappal később 22%-kal emelkedett.

A lazy loading a technikai SEO egyik legjobban megtérülő eszköze, és szorosan összefügg más területekkel. A Core Web Vitals — különösen az LCP (Largest Contentful Paint) és a CLS (Cumulative Layout Shift) — közvetlen hatással vannak a rangsorolásra: a lazy loading helyesen alkalmazva javítja mindkettőt. Az oldalsebesség a Google rangsorolási tényezője, és a képek késleltetett betöltése az egyik leghatékonyabb módszer a kezdeti betöltési idő csökkentésére.

A mobile-first indexelés miatt különösen fontos, hogy a mobilteljesítmény optimális legyen — a lazy loading itt is kulcsszerepet játszik. A CDN és a lazy loading egymást kiegészítő technikák: a CDN a képeket közelebb hozza a felhasználóhoz, a lazy loading pedig csak akkor tölti be őket, amikor szükség van rájuk.

• A hero kép lazy loadingja: a felhajtott tartalom (above the fold) fő képére soha ne alkalmazz lazy loadingot — ez az LCP mérőszámot rontja, és a Google rangsorolásban hátrányt jelent.
• Nincs placeholder vagy rögzített méret: ha a kép betöltése előtt nincs fenntartott hely (width/height attribútum vagy CSS aspect-ratio), az oldal elrendezése ugrik betöltéskor, ami magas CLS értéket okoz.
• JavaScript-alapú lazy loading modern böngészőkön: ma már felesleges saját JS lazy loading megoldást írni vagy betölteni; a `loading="lazy"` attribútum natívan minden modern böngészőben működik, és gyorsabb is, mert nem függ JavaScript végrehajtásától.

A lazy loading (késleltetett betöltés) azt jelenti, hogy a képek és más nehéz elemek csak akkor töltődnek be, amikor a felhasználó közelükbe görget. Javítja az oldalsebesség és a Core Web Vitals mutatókat, csökkenti az adatforgalmat — különösen mobilon. Az above-the-fold tartalomra ne alkalmazd.