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:
- használhatunk modern, kevesebb helyet foglaló képformátumokat,
- minifikálhatjuk az oldalunk kódját
- bevethetünk egy CDN-t a távolabbi látogatók gyorsabb elérésére
- megfontolhatjuk, hogy környezetbarát webdesignnal gyorsítsuk a betöltést
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.)
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
