Mi az a képek lazy loadingja?

Ha egy weboldal sok képet tartalmaz, az összes kép betöltése az oldal megnyitásakor szükségtelenül megnöveli az első betöltési időt. A lazy loading — vagy halasztott betöltés — egy olyan technika, amely lehetővé teszi, hogy minden képet csak akkor töltsön be, amikor a felhasználó éppen látni fogja azt. Könnyen megvalósítható, és jelentősen javítja a webhely teljesítményét és a felhasználói élményt.

A lazy loading meghatározása

A lazy loading (szó szerint «lusta betöltés») azt jelenti, hogy késleltetjük a nem azonnal látható erőforrások betöltését. Képekre alkalmazva ez azt jelenti, hogy csak az oldal betöltésekor a látható területen (viewport) lévő képek töltődnek le azonnal. A többi kép fokozatosan töltődik be, ahogy a felhasználó görget az oldalon.

Lazy loading nélkül a böngésző az oldal összes képét letölti, amint megnyílik — beleértve az alján lévőket is, amelyeket a felhasználó esetleg soha nem lát.

Hogyan működik a lazy loading?

Két fő megközelítés létezik a képek lazy loadingjának megvalósítására:

1. A natív HTML loading="lazy" attribútum

2019 óta a modern böngészők natívan támogatják a lazy loadingot egy egyszerű HTML attribútumon keresztül:

<img src="photo.jpg" alt="Leírás" loading="lazy">

A böngésző automatikusan dönti el, mikor töltse be a képet a felhasználó görgetési pozíciója alapján. Ez a ma ajánlott módszer: nincs szükség JavaScript könyvtárra.

2. Az Intersection Observer API (JavaScript)

Mielőtt a natív attribútumot szabványosították volna, a fejlesztők az Intersection Observer API-t használták annak észlelésére, mikor lép be egy kép a viewportba, és ekkor aktiválták a betöltését. Ez a megközelítés hasznos marad fejlettebb viselkedésekhez vagy képek belépési animációihoz.

Mik a lazy loading előnyei?

Teljesítmény és betöltési idő

Az indításkor betöltött képek számának csökkentésével a lazy loading csökkenti az oldal kezdeti súlyát és felgyorsítja a megjelenítést. Az olyan teljesítménymutatók, mint a Largest Contentful Paint (LCP) és a Time to Interactive (TTI) ennek eredményeként javulnak.

Sávszélesség-megtakarítás

Az oldal alján lévő képek csak akkor töltődnek le, ha a felhasználó ténylegesen odaér. Egy sok vizuális elemet tartalmazó hosszú oldalon ez jelentős megtakarítást jelenthet — különösen mobilon vagy lassú kapcsolaton lévő látogatók számára.

SEO és Core Web Vitals

A Google figyelembe veszi a Core Web Vitals mutatókat a rangsorolásban. A képbetöltéstől közvetlenül befolyásolt jobb LCP pozitív hatással lehet a keresési eredményekben elfoglalt pozícióra.

Lazy loading: amit nem szabad tenni

A lazy loading nem alkalmas minden képhez. Két gyakori hibát kell elkerülni:

• Soha ne alkalmazza a loading="lazy" attribútumot hero képekre vagy a hajtás feletti képekre — ezek a képek láthatók a betöltéskor, késleltetésük rontaná az LCP-t és a felhasználói élményt.
• Ne hagyja ki a width és height attribútumokat — meghatározott méretek nélkül a böngésző nem tud helyet foglalni a kép számára betöltés előtt, ami elrendezési eltolódásokat okoz, amelyek ártanak a Cumulative Layout Shift (CLS) mutatónak.

Hasznos tudni: a betöltéskor azonnal látható képeknél (banner, hero kép, logó) használja inkább a loading="eager" attribútumot, vagy egyszerűen hagyja el az attribútumot — ez a böngésző alapértelmezett viselkedése.

Böngésző-kompatibilitás

Lazy loading és képtárhely

Amikor képtárhely-szolgáltatást használ vizuális tartalmak tárolásához és terjesztéséhez, mindig emlékezzen arra, hogy a nem azonnal látható képekhez adja hozzá a loading="lazy" attribútumot. A nagy teljesítményű tárhelyszolgáltatás (CDN, automatikus tömörítés) és a lazy loading kombinációja maximalizálja az oldalak megjelenítési sebességét.

Hasznos tudni: egy minőségi képtárhely-szolgáltatás stabil közvetlen URL-eket biztosít minden képhez, ami megkönnyíti a lazy loading integrációját: egyszerűen adja hozzá a loading="lazy" attribútumot az <img> taghez a forrás URL módosítása nélkül.