Lazy loading: teljes útmutató
A lazy loading, magyarul késleltetett betöltés, azt jelenti, hogy a böngésző a képeket, beágyazott videókat és más erőforrásokat csak akkor tölti le, amikor azok a látható terület közelébe érnek. Ettől gyorsabb az első megjelenés és kisebb az adatforgalom. SEO szempontból két szabály számít: a fő, azonnal látható elemet ne késleltesd, és minden tartalom váljon elérhetővé görgetés vagy kattintás nélkül is.
Alapfogalmak
Egy hosszú weboldalon a képek jelentős része a hajtás alatt van, vagyis az oldal megnyitásakor nem látszik. Ha a böngésző mégis mindegyiket azonnal letölti, a sávszélesség egy része olyan fájlokra megy el, amelyeket a látogató talán soha nem lát. Ezek ráadásul versenyeznek a fontos, azonnal látható elemekkel. A lazy loading ezt a versenyt szünteti meg: a hajtás alatti elemek letöltése addig vár, amíg a látogató a közelükbe nem görget.
A technika régóta létezik, eleinte JavaScript könyvtárak valósították meg. Ma a böngészők natívan is támogatják a képeken és az iframe elemeken a loading attribútummal. A natív megoldás egyszerűbb, és nem függ attól, hogy egy szkript lefut-e, ezért a legtöbb esetben ez a javasolt út.
A legfontosabb fogalmak
| Fogalom | Jelentés |
|---|---|
| Viewport | Az oldal éppen látható területe a böngészőablakban |
| Hajtás felett, hajtás alatt | Ami megnyitáskor látszik, illetve ami csak görgetés után |
loading="lazy" | Natív attribútum képekhez és iframe-ekhez: a böngésző dönti el, mikor tölti le |
loading="eager" | Azonnali betöltés; ez az alapértelmezett viselkedés attribútum nélkül |
| Intersection Observer | Böngésző API, amellyel a szkript értesítést kap, ha egy elem a látható terület közelébe ér |
| LCP elem | Az oldal legnagyobb, a hajtás felett megjelenő tartalmi eleme, gyakran egy kép |
Mit lehet késleltetni?
- Képek a hajtás alatt: cikkképek, termékképek egy hosszú listában, galériák.
- Beágyazott tartalmak iframe-ben: videólejátszók, térképek, közösségi beágyazások.
- Nem kritikus szkriptek és komponensek, például egy csevegőablak vagy egy kommentmodul, amely csak interakcióra kell.
A szöveges fő tartalom késleltetése más kategória. Ha a cikk szövege vagy a termékleírás csak görgetésre vagy kattintásra töltődik be, az már nem teljesítményoptimalizálás, hanem kockázat a keresőben való megjelenés szempontjából.
Miért számít ez a SEO-ban?
A lazy loading közvetlenül nem rangsorolási tényező. Két úton hat mégis a keresőre. Az egyik a sebesség: a jól beállított késleltetés csökkenti a versengést a hajtás feletti elemekért, így gyorsabb lehet az első megjelenés, ami a látogatói élményben és a Core Web Vitals mutatókban is megjelenik. A másik a láthatóság: ha a késleltetés rosszul van megoldva, a kereső nem találja meg a képeket vagy a tartalom egy részét, és ami nincs meg a renderelt oldalon, az nem kerülhet be az indexbe sem. Az első haszon, a második kockázat, és a jó beállítás mindkettőre figyel.
Hogyan működik?
A natív lazy loadingnál a böngésző figyeli, milyen messze van egy loading="lazy" jelölésű kép a látható területtől. Ha elég közel ér, elindítja a letöltést, jellemzően már azelőtt, hogy a kép ténylegesen láthatóvá válna, hogy a látogató ne üres helyet lásson. A távolságot a böngésző határozza meg, és függhet a hálózati kapcsolattól is. A fejlesztőnek ezt nem kell beállítania, és nem is tudja pontosan irányítani.
A JavaScript alapú megoldásoknál a kép valódi címe általában egy data-src vagy hasonló attribútumban áll, az src pedig üres vagy egy helyettesítő képre mutat. Egy szkript az Intersection Observer segítségével figyeli, mikor ér a kép a látható terület közelébe, és akkor átírja az src értékét. Régebbi könyvtárak görgetési eseményekre figyeltek, ami lassabb és kevésbé megbízható.
Hogyan látja a Googlebot a késleltetett tartalmat?
A Google a JavaScriptet futtató oldalakat renderelés után indexeli, erről a JavaScript SEO útmutató szól részletesen. A Google Search Central dokumentációja szerint a renderelő nem görget és nem kattint úgy, ahogy egy látogató. Ezért a késleltetett tartalomnak akkor kell megjelennie, amikor a látható területbe kerül, nem pedig görgetési eseményre vagy kattintásra várva. A natív loading="lazy" és az Intersection Observer alapú megoldások ezt a feltételt teljesítik, a kizárólag görgetési eseményre épülő régi megoldások nem feltétlenül.
Mi történik a letöltés sorrendjével?
A böngésző a HTML feldolgozása közben felfedezi a hivatkozott erőforrásokat, és prioritást rendel hozzájuk. A stíluslapok és a szinkron szkriptek magas prioritást kapnak, mert blokkolják a megjelenítést. A képek általában alacsonyabbról indulnak, és a böngésző az elrendezés után emeli meg azokét, amelyek a látható területen vannak. A lazy jelölésű képek ebből a versenyből kimaradnak, amíg a látható terület közelébe nem érnek. Ezért csökken a hajtás feletti elemekre nehezedő nyomás: kevesebb egyidejű letöltés osztozik a kapcsolaton. Ugyanez az oka annak, hogy a hajtás feletti kép késleltetése árt: a böngésző csak az elrendezés után dönti el, hogy le kell-e tölteni.
A kép útja egy példán
- A látogató megnyit egy cikket, amelyben tíz kép van.
- A kiemelt kép a hajtás felett van,
loadingattribútum nélkül, azonnal letöltődik. - A többi kilenc kép
loading="lazy"jelölést kapott. A böngésző csak azokat kezdi letölteni, amelyek a látható terület közelében vannak. - A látogató görget, a böngésző sorban tölti a következő képeket, mielőtt azok beérnének a képernyőre.
- Ha a látogató a cikk felénél kilép, a cikk végén lévő képek le sem töltődnek.
Fő módszerek
A lazy loading bevezetése néhány egyszerű döntésen múlik. A legfontosabb, hogy mit töltesz azonnal, és mit késleltetsz, a második, hogy milyen technikával.
Natív lazy loading képeken és iframe-eken
A legegyszerűbb és legbiztonságosabb módszer a loading="lazy" attribútum a hajtás alatti képeken és iframe-eken. Nem kell hozzá szkript, a kép címe a szokásos src attribútumban marad, így a kereső és minden más eszköz megtalálja. Ha a böngésző nem ismeri az attribútumot, egyszerűen figyelmen kívül hagyja, és a képet azonnal betölti. Minden késleltetett képnél add meg a width és height attribútumot, hogy a böngésző előre lefoglalja a helyet, különben a betöltődő kép elcsúsztatja a tartalmat, és romlik a CLS.
A hajtás feletti fő kép kiemelése
A hajtás feletti kiemelt kép az ellenkező bánásmódot igényli: ne kapjon loading="lazy" jelölést, és ha ez az oldal legnagyobb eleme, a fetchpriority="high" attribútummal magasabb letöltési prioritást kaphat. Ha a kép nem a HTML-ben, hanem például egy CSS háttérben szerepel, a böngésző későn fedezi fel; ilyenkor a preload segíthet. Így gyorsul az LCP, ami a Core Web Vitals egyik mutatója.
JavaScript alapú megoldás, ha muszáj
Ha egy speciális elemet kell késleltetni, amelyet a natív attribútum nem fed le, például háttérképet vagy egy teljes komponenst, az Intersection Observer a helyes eszköz. Képeknél, ha a valódi cím csak egy data-src attribútumban áll, érdemes egy noscript blokkban a hagyományos képet is megadni, vagy még jobb, a natív megoldásra váltani.
Végtelen görgetés és hosszú listák
A végtelen görgetés a lazy loading rokona: a lista további elemei görgetésre töltődnek be. Mivel a kereső nem görget, ilyenkor a további elemeknek saját, lapozott URL-eken is el kell érhetőnek lenniük, egyszerű linkekkel. A részletekről a lapozás útmutató szól.
Döntési szabály
| Elem | Javasolt beállítás |
|---|---|
| Hajtás feletti fő kép (LCP) | Azonnali betöltés, fetchpriority="high", soha nem lazy |
| Logó és egyéb kis hajtás feletti kép | Azonnali betöltés |
| Hajtás alatti cikk- és termékkép | loading="lazy", width és height megadva |
| Beágyazott videó, térkép | loading="lazy" az iframe-en, vagy kattintásra betöltődő helyettesítő kép |
| Fő szöveges tartalom | Soha ne késleltesd, legyen benne a HTML-ben |
| Hosszú lista további elemei | Lapozott URL-ek, végtelen görgetés csak kiegészítésként |
Gyakori hibák
A lazy loading hibái két csoportba esnek. Az egyik a teljesítményt rontja, a másik azt, hogy a kereső megtalálja-e a tartalmat. Mindkettő gyakran egy kényelmes, mindenre kiterjedő beállításból fakad.
A fő kép késleltetése
A leggyakoribb hiba, hogy egy bővítmény vagy sablon minden képre ráteszi a loading="lazy" attribútumot, a hajtás feletti fő képre is. Ilyenkor a böngésző a legfontosabb kép letöltését csak később kezdi el, és az LCP érezhetően romlik. A javítás egyszerű: a fő képet ki kell venni a késleltetés alól. A tartalomkezelő rendszerek egy része ezt már automatikusan kezeli, de sablonfüggő, ezért mindig ellenőrizni kell.
Görgetéshez vagy kattintáshoz kötött tartalom
Ha egy szöveg, egy termékleírás vagy egy képgaléria csak görgetési eseményre vagy egy gomb megnyomására töltődik be, a kereső nem feltétlenül látja. A „Továbbiak betöltése” gomb mögötti termékek, a lenyíló fülekbe csak kattintásra betöltött tartalom mind ide tartozik. A megoldás, hogy a tartalom a HTML-ben legyen, vagy a látható területbe kerüléskor töltődjön be, és a listák további elemei saját URL-en is elérhetők legyenek.
Képcím csak a data-src attribútumban
Ha a kép valódi címe csak egy egyedi attribútumban áll, és a szkript valamiért nem fut le, az oldalon üres helyettesítő képek maradnak. A képkeresés számára a kép ilyenkor nem létezik. A natív megoldás ezt a kockázatot megszünteti.
Tévhit: minél több lazy, annál gyorsabb
A lazy loading nem általános gyorsító. A hajtás feletti elemeknél kifejezetten lassít, mert a böngészőnek először el kell végeznie az elrendezést, hogy tudja, mi van a látható területen, és csak utána indítja a letöltést. A cél a helyes felosztás, nem a minél szélesebb alkalmazás.
Ellenpélda: amikor a kattintásra betöltés helyes
Nem minden kattintáshoz kötött betöltés hiba. Egy beágyazott videólejátszó helyén állhat egy statikus előnézeti kép, és a lejátszó csak kattintásra töltődik be. Ez sok felesleges szkriptet spórol meg, és a keresőnek nem árt, mert a lejátszó maga nem az oldal indexelendő tartalma. A szabály tehát az, hogy a fő tartalom ne kerüljön interakció mögé, a kiegészítő, nehéz beágyazások viszont nyugodtan.
Egyéb hibák röviden
- Hiányzó méretek. A késleltetett kép betöltődéskor elcsúsztatja a tartalmat.
- Kettős lazy loading. Natív attribútum és szkript egyszerre, egymást zavarva.
- Helyettesítő kép rossz arányokkal. Az elrendezés a csere pillanatában ugrik.
- Iframe késleltetése a hajtás felett. Egy fő helyen álló videó későn jelenik meg.
Mérés
A lazy loading ellenőrzésének két kérdésre kell választ adnia: gyorsabb lett-e az oldal, és látja-e a kereső a teljes tartalmat. Az elsőre a teljesítménymérő eszközök, a másodikra a Search Console eszközei felelnek.
Teljesítmény
A Lighthouse és a PageSpeed Insights külön jelzi, ha az LCP elem késleltetett betöltésű volt. Ez a figyelmeztetés a leggyorsabban megtalálja a legsúlyosabb hibát. A böngésző fejlesztői eszközeinek Network lapján görgetés közben követhető, mikor indulnak a képletöltések: ha már megnyitáskor minden kép letöltődik, a lazy loading nem működik, ha a fő kép későn indul, rossz helyen működik. A terepi adatokban, vagyis a Search Console Core Web Vitals jelentésében és a PageSpeed Insights felhasználói adataiban, a változás a gördülő időablak miatt csak később látszik.
Mit lát a kereső?
A Search Console URL-ellenőrző eszközének élő tesztje megmutatja a renderelt HTML-t és egy képernyőképet. A renderelt HTML-ben ellenőrizd, hogy a képek src attribútuma a valódi címre mutat-e, és hogy a teljes szöveges tartalom benne van-e. Ha egy szövegrész vagy egy lista további elemei hiányoznak, a kereső sem látja őket.
Kidolgozott példa: webáruház kategóriaoldal
Egy webáruház kategóriaoldalán sok termék van, a képeket egy régi szkript görgetési eseményre tölti be, a további termékeket egy „Továbbiak” gomb hozza be. Az URL-ellenőrző renderelt HTML-jében a hajtás alatti termékképek helyettesítő képként szerepelnek, a gomb mögötti termékek pedig hiányoznak. A javítás: a szkriptet natív loading="lazy" váltja, a képek méretet kapnak, az első termékkép kikerül a késleltetés alól, a további termékek pedig lapozott URL-eken, egyszerű linkekkel is elérhetők lesznek. Az újabb élő teszt már a valódi képcímeket és a lapozó linkeket mutatja.
Ellenőrzőlista
- A hajtás feletti fő kép nem késleltetett.
- A hajtás alatti képek és iframe-ek késleltetettek.
- Minden késleltetett kép rendelkezik méretekkel.
- A képcímek az
srcattribútumban vannak. - A fő szöveges tartalom a HTML-ben van, nem kattintás vagy görgetés mögött.
- A listák további elemei saját URL-en is elérhetők.
- A Lighthouse nem jelez késleltetett LCP elemet.
Kapcsolódó részletes útmutatók
Csináltassuk meg helyetted
Ha ez sok, mi elvégezzük. Egy munkanapon belül konkrét ajánlatot kapsz.