Barion Pixel
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 7 napos ingyenes, alapozó webdesign kurzusunkra!

Kipróbálom
Iratkozz fel YouTube csatornákra!

blog

Segédlet Mi az a linkbait?

Mi az a linkbait?

2021. augusztus 30.

Nem clickbait, arról pedig már biztosan hallottál. A linkbait is egyike a webdesign napjainkban kikerülhetetlen édes(?) testvére, a SEO szakzsargonjában nyüzsgő kifejezéseknek. Mint minden valódi terminus technicus, ez is valami valójában közismert, nem túl bonyolult fogalmat ír le, de a saját speciális szemszögéből tálalva, és annak a tükrében értelmezve. Ez magyarán azt jelenti, hogy a […]

Tovább a cikkre