Barion Pixel
Ez itt a lifelong learning

Sosem tudhatsz eleget!

Blog

Segédlet

Lusta képek – Lazy Loading

2021. július 27. | Bognár Péter

# # # # # # # #

A sebességoptimalizáció kulcskérdés a webdesignban, ezzel a témában kutakodók napi szinten találkozhatnak, meg persze én is rengeteget írtam már róla itt, a blogon. Ahhoz, hogy a weboldalunk a lehető leggyorsabban töltsön  különböző trükköket lehet bevetni, amik közül már többet kicsit alaposabban is kitárgyaltam:

Van egy trükk még a webdesigner tarsolyában, amit futólag ugyan említettem, de alaposabban még nem néztünk a körmére, ez pedig a kellemesen csengő nevű Lazy Loading

A lusta töltés megint csak a jobbára a legtöbb sávszélességet fogyasztó objektumok: a képek betöltésének problematikáját próbálja egy ravasz csellel kitrükközni. A Google-féle Page Experience Index kapcsán már volt róla szó, hogy az elfogadható sebesség egyik mércéje a Largest Contentful Paint, azaz az az idő, ami alatt az oldal kritikus tartalmi elemei betöltődnek, hogy a felhasználó már tudjon mit kezdeni az lappal. (Ha ez  2,5 másodperc alatt van, jók vagyunk, ha nem, akkor kezdhetünk optimalizálgatni.)

Kép: Web.dev

A lényeg, hogy a Lazy Loading azt próbálja elérni, hogy a nem kritikus oldalelemek, például a csak gördítés után látható képek csak egy második lépcsőfokban töltődjenek be, és így a fontos elemek prioritással hasítsanak le a képernyőre. A web.dev cikke a témában egy remek példaoldalt is tartalmaz, ahol rengeteg kiscicás kép töltődik be a megfelelő sebességgel.

Hogyan lehet ezt elérni?

Ha magad kódolod az oldaladat, a Safari kivételével a legtöbb böngésző már egy ideje képes kezelni az <img> címkével jelölt képeknél a loading=lazy attribútum alkalmazására, így nagyon egyszerűen ellustíthatod a kevésbé lényeges képek betöltését. 

Ha WordPressben tevékenykedsz, van egy jó hírem: az 5.5-ös verzió óta a WP natív módon tartalmazza  a Lazy Loadingot, az attribútum kapcsolódik minden olyan képhez, ahol a height és width attribútumokat is megadtuk. Ha viszont kicsit árnyalni szeretnéd a lusta töltés viselkedését, mint mindig, most is számos plugin állhat a rendelkezésedre. 

Az a3 Lazy Load egy elég pehelysúlyú megoldás, ami a fenti beépített lehetőségen túl olyan trükkökre is képes, mint a külső forrásból behívott képek lustítása, vagy a vízszintes scroll kezelése. 

A legtöbb komplex optimalizációs plugin is tartalmazza a Lazy Loading opciót, így pl. a Jetpack Boost és az Autoptimize is természetesen képes az ilyesmire.

Címkép: Chromium Blog

Iratkozz fel YouTube csatornákra!

blog

Díjazottak lettünk az Év honlapja versenyen E-learning kategóriában!

Díjazottak lettünk az Év honlapja versenyen E-learning kategóriában!

2021. december 27.

2021 nagyon sűrű év volt. Nem csak azért, mert idén voltunk 10 évesek, hanem mert az év elején kívül-belül megújultunk, egy igazán naprakész és interaktív tanfolyam várja a tanulni vágyókat. A vírushelyzet okán hétköznapivá vált online kapcsolattartási eszközök beépültek a tanmenetbe, így a tanfolyami anyagot idén sok-sok Facebook és Zoom Live óra keretezte, amelyek kiegészítő […]

Tovább a cikkre
Secured By miniOrange