Lazy loading (lusta betöltés)

A lazy loading a képsúlyos oldalak egyik legolcsóbb gyorsítása. Egy terméklistán húsz kép helyett négy tölt be azonnal. A mobilos látogató ezt meg is érzi.

• Sebesség: kevesebb párhuzamos letöltés az első másodpercben, így hamarabb rajzolódik ki a fő kép.
• Mérőszámok: a Core Web Vitals közül az LCP javulhat, a CLS viszont romlik, ha nincs méret a képeken.
• Adatforgalom: aki nem görget az oldal aljáig, annak azok a képek le sem töltődnek.
• Költség: kevesebb kiszolgált bájt a szerveren és a CDN-en.

A fordítottja is igaz. Rosszul beállítva lassít. A riportokban rendszeresen látjuk, hogy a nyitókép is lazy, és emiatt az LCP fél másodperccel később üt be.

Minden olyan oldalra vonatkozik, ahol a hajtás alatt is vannak képek vagy beágyazott iframe-ek.

Számít:

• webshop terméklisták és kategóriaoldalak
• blogcikkek sok illusztrációval
• galériák, referencia- és portfólióoldalak
• hosszú landing oldalak

Kevésbé számít:

• egyetlen képernyőnyi, egy-két képes oldalak
• a hajtás feletti elemek, ezeken tilos is
• CSS-ből betöltött háttérképek, mert rájuk az attribútum nem érvényes
• e-mail sablonok

Staging környezetben a mérés félrevezető lehet, mert ott gyakran más a képkészlet. A magyar KKV-oldalak többségén ez az egyik legkönnyebben pótolható hiány.

1. Nyisd meg az oldalt böngészőben, majd nyomj F12-t. A Network fülön szűrj az Img típusra.
2. Frissíts úgy, hogy nem görgetsz. Nézd meg, hány képkérés fut le azonnal.
3. Görgess végig az oldalon. Ha közben új képkérések indulnak, a lazy loading működik.
4. Nézd meg a forráskódot (Ctrl+U), és keress rá a loading="lazy" szövegre.
5. Ellenőrizd külön a hajtás feletti fő képet. Azon nem lehet lazy érték.
6. Futtass egy PageSpeed Insights mérést. A "Defer offscreen images" tétel sorolja fel a feleslegesen korán betöltött képeket.

Jó jel:

• a hajtás alatti képeken ott a loading="lazy"
• a fő képen nincs lazy, viszont van fetchpriority="high"
• minden img tagen szerepel a width és a height
• görgetésre indulnak új kérések

Rossz jel:

• az első képernyő képe is lazy
• a src helyén data-src áll, és JavaScript nélkül nincs kép
• görgetés közben ugrál az elrendezés
• egyetlen img tagen sincs loading attribútum

Mit néz ebből a riport

Az audit azt vizsgálja, hogy a hajtás alatti képeken szerepel-e a loading="lazy" attribútum. Ez alacsony hatású, kód hatókörű szabály. Az ajánlása egyetlen mondat: adj loading="lazy" attribútumot a hajtás alatti képekhez.

WordPress

1. A WordPress 5.5 óta a szerkesztőből kikerülő képekre magától rákerül a loading="lazy".
2. Az 5.9 óta az első tartalmi kép kimarad ebből, hogy ne romoljon az LCP. Ellenőrizd a forrásban, hogy tényleg így van-e.
3. Ha a sablon vagy a page builder saját img tageket ír ki, azokat kézzel kell kiegészíteni.
4. Ne futtass két lazy load plugint egyszerre. A duplázás gyakran töri a képeket.

Shopify

1. A témában a képek jellemzően az image_tag szűrőn mennek át.
2. Add át neki a loading paramétert: {{ kep | image_url: width: 800 | image_tag: loading: 'lazy' }}.
3. A nyitóképen és a terméklap fő képén hagyd el a lazy értéket.

Unas

1. A terméklista képeit a rendszer kezeli, ezért először a sablonbeállításokat nézd át.
2. A saját képeidnél a leírásmezőben válts HTML-nézetre, és írd be az attribútumot.
3. A hosszú leírásokba illesztett képeknél ez marad ki a leggyakrabban.

Shoprenter

1. A sablonfájlok szerkesztésével tudod módosítani a kiírt img tageket.
2. A termékleírás szerkesztőjében válts forrásnézetre a kézi kiegészítéshez.
3. Sablonfrissítés után ellenőrizd újra, mert a módosítás elveszhet.

Egyedi fejlesztés

1. Tegyél loading="lazy" attribútumot minden hajtás alatti img és iframe elemre.
2. Írj ki width és height értéket, vagy adj CSS aspect-ratio szabályt.
3. A fő képre tegyél fetchpriority="high" értéket, lazy nélkül.
4. Tálald a képeket WebP vagy AVIF formátumban, mert a lazy loading önmagában nem elég.

• Lazy a nyitóképen: a böngésző későn kezdi tölteni a legnagyobb elemet, ettől romlik az LCP.
• Hiányzó width és height: a kép betöltésekor beugrik a hely, és ugrál az elrendezés.
• JS-alapú lazy load tartalék nélkül: ha a cím csak data-src értékben van, a robotok nem látják a képet.
• Plugin, ami mindenre ráteszi: a globális beállítás a hajtás feletti logót és ikonokat is késlelteti.
• Optimalizálás helyett használt lazy loading: egy 2 MB-os JPEG lazyn is 2 MB marad.
• Elvárás a HTML-mérettel szemben: az oldalméreten nem javít, a markup ugyanúgy ott van a válaszban.
• CSS háttérképre írt attribútum: a loading csak img és iframe elemen működik, máshol nincs hatása.

A hajtás feletti fő kép és egy hajtás alatti kép helyes jelölése:

<!-- Fő kép: nincs lazy, van prioritás -->
<img src="/kepek/hero-1200.avif"
     width="1200" height="630"
     fetchpriority="high"
     alt="Kék munkavédelmi bakancs oldalnézetből">

<!-- Hajtás alatti kép: lazy, fix mérettel -->
<img src="/kepek/termek-42-800.webp"
     width="800" height="800"
     loading="lazy" decoding="async"
     alt="Fekete bőr munkavédelmi cipő">

<!-- Beágyazott videó: iframe-en is működik -->
<iframe src="https://www.youtube.com/embed/AZONOSITO"
        width="560" height="315" loading="lazy"
        title="Terméktesztünk"></iframe>

Gyors számolás a nyers HTML-ben, JavaScript futtatása nélkül:

curl -s https://pelda.hu | grep -o '<img' | wc -l
curl -s https://pelda.hu | grep -o 'loading="lazy"' | wc -l
curl -s https://pelda.hu | grep -o 'data-src=' | wc -l

Az első két szám különbsége adja a lazy nélküli képek számát. Ha a harmadik szám nem nulla, scriptes lazy load fut az oldalon, és azt érdemes natívra cserélni.