Az elmúlt héten kétszer is belefutottam ebbe a témába, így gondoltam egy rövid blog bejegyzést megeresztek róla. Egészen konkrétan arról van szó, hogy a böngészők mostmár támogatják a loading=”lazy” tag-et, így mostmár – elméletben – elhagyhatók a lazyload-os JavaScript könyvtárak a projektekből.
Munkahelyen code review során láttam azt, hogy az egyik fejlesztő nemes egyszerűséggel kukázta a JS-es lazyload könyvtárat egy branchben, majd pár nappal később egy TikTok videó jött szembe velem, amiben ugyanerről beszél a készítője.
Még azt is megemlíti, hogy mostmár minden böngésző támogatja a natív, beépített lazyload megoldást. Csakhogy jobban utánanézve kiderül, hogy ebben a Safari eléggé le van maradva.
Egészen idén március-ig, a Safari-ban experimental feature-ként volt jelen, és manuálisan kellett bekapcsolni a támogatást. De még a 15.4-es verzió is csak a képek lazyload-olását támogatja, ami végülis nem gond, mert legtöbbször erre használjuk.
Viszont azt sem jelenthetjük ki, hogy akkor minden Safari támogatja a képek lazyloadolását, mert a 15.4 verzió alattiakon nem működik. Természetesen meg kell vizsgálni, hogy a weboldalunk látogatóinak hány százaléka használ Safarit, és annak is milyen verzióját. Ha azt látjuk, hogy nagyon marginális csak a felhasználói bázis, akkor nyilván bevezethetjük. De ilyenkor is megvan az esély arra, hogy bármikor fordulhat a kocka, és hirtelen sok iPhone felhasználó Safari-ról fogja nézni az oldalunkat, és akkor megint vezethetünk be valamilyen JS lazyload könyvtárat.
Egy szó, mint száz: én jelen pillanatban a weboldalakon nem használnám még a loading=”lazy” tag-et, mivel nem teljeskörűen támogatott megoldás. Még el kell telnie pár évnek, hogy nyugodt szívvel nyugdíjazzuk a Javascriptes megoldásokat.
Mi az a lazyload?
Ha nem mondott semmit a fenti pár bekezdés, és még sose hallottál erről a nagyszerű funkcióról, akkor röviden bemutatnám neked, hogy miről is van szó.
Amikor egy weboldalt megnyitunk – normál esetben – az összes létező tartalom egyszerre töltődik be. Még az is, ami nincs a képernyőn, nincs a látóterünkben. Ez hatalmas optimalizálatlanság, hiszen arra kényszerítjük a klienst, hogy olyan dolgok letöltésére pazarolja az erőforrásokat, amik lehet, hogy nem is kerülnek kirajzolásra a képernyőn.
Okostelefonokon különösen problémás, ha mindent egyszerre akarunk betölteni, hiszen ezzel felesleges adatforgalmat generálunk, ezzel csökkentve a mobiltulajdonos felhasználható mobilinternet keretét.
Ezért találták ki az úgynevezett lazyload-ot, ami csak azt tölti be, ami a képernyőre kirajzolásra is fog kerülni. A gyakorlatban ez úgy néz ki, hogy amikor a felhasználó görget az oldalon, a görgetés hatására bizonyos számú elemet előtöltünk az oldalon. Így mire a felhasználó oda ér a görgetésben, addigra már betöltésre kerüljön az adott elem.