Lazy Loading (Načítanie na požiadanie)
Lazy loading je technika, ktorá odkladá načítanie nekritických prostriedkov, ako sú obrázky pod hranicou obrazovky (below the fold), až kým nie sú skutočne potrebné, čím sa zlepšuje počiatočná rýchlosť načítania stránky.
Lazy loading je stratégia optimalizácie výkonu, ktorá odkladá načítanie prostriedkov až do chvíle, keď sú potrebné. Namiesto toho, aby sa pri prvom otvorení stránky načítali všetky obrázky, videá a skripty, lazy loading načíta iba prostriedky viditeľné v počiatočnom zornom poli a ostatné stiahne, keď používateľ scroluje nadol. Najbežnejším využitím je lazy loading obrázkov.
Bez lazy loadingu prehliadač okamžite stiahne všetkých 50 obrázkov, čo plýtvá šírkou pásma a spomaľuje počiatočné vykreslenie. S lazy loadingom sa najprv načítajú iba viditeľné obrázky a zvyšné sa načítajú, keď sa k nim používateľ posunie. Moderné prehliadače natívne podporujú lazy loading pomocou atribútu loading="lazy" na elementoch img a iframe.
V praxi
- Fotografické portfolio s 200 obrázkami na stránku znížilo počiatočný čas načítania z 12 sekúnd na 1,8 sekundy lazy loadingom všetkých obrázkov pod prvými tromi riadkami
- Kategória e-shopu s 60 produktovými obrázkami implementovala natívny lazy loading, čím znížila počiatočnú váhu stránky z 8 MB na 800 KB
- Novinový web lazy loaduje vložené YouTube videá, pričom ich nahradí ľahkými miniatúrami, kým používateľ neklikne na prehratie, čo ušetrí 1,5 MB JavaScriptu na video
- Dlhý článok lazy loaduje widgety súvisiacich článkov a sekciu komentárov v spodnej časti, čím priorituje obsah článku pre čo najrýchlejšie počiatočné vykreslenie
Nie ste si istí, či sa to týka aj vás?
Senior inžinier prejde vaše stránky, vašu prítomnosť vo vyhľadávaní a spôsob, akým dotazy k vám prichádzajú, a potom zapíše tri veci, ktoré sa oplatí opraviť ako prvé. Dokument si necháte v každom prípade.