Čo je Lazy Loading?
Lazy loading je technika odloženého načítavania zdrojov, pri ktorej sa obrázky, videá alebo časti kódu načítajú až vtedy, keď ich používateľ skutočne potrebuje. Znižuje počiatočný objem dát a výrazne zrýchľuje prvé vykreslenie stránky. Prehliadače dnes podporujú natívny lazy loading cez atribút loading="lazy".
Definícia Lazy Loading
Čo je lazy loading
Lazy loading (po slovensky odložené načítavanie) je návrhový vzor, pri ktorom sa inicializácia objektu alebo načítanie zdroja odkladá až do momentu, keď je skutočne potrebný. V kontexte webu to najčastejšie znamená, že obrázky, videá a <iframe> prvky pod ohybom stránky (angl. below the fold) sa nesťahujú pri prvom načítaní, ale až keď sa k nim používateľ posunie.
Ako funguje lazy loading
Existujú dva hlavné prístupy:
- Natívny lazy loading — moderné prehliadače podporujú atribút
loading="lazy"na elementoch<img>a<iframe>. Prehliadač sám rozhodne, kedy zdroj načítať na základe vzdialenosti od viditeľnej oblasti. - JavaScript Intersection Observer — rozhranie Intersection Observer API sleduje, kedy element vstúpi do viditeľnej oblasti a až vtedy nastaví skutočný
srcatribút.
Výhody pre výkon webu
- Rýchlejšie prvé vykreslenie — prehliadač sťahuje menej dát pri úvodnom načítaní
- Nižšia spotreba dát — používatelia na mobilných zariadeniach nesťahujú zdroje, ku ktorým sa nikdy nedostanú
- Lepšie Core Web Vitals — zlepšuje metriky LCP a FCP
- Nižšie zaťaženie servera — menej súčasných požiadaviek na zdroje
Pri implementácii je dôležité nepoužívať lazy loading na obrázky nad ohybom stránky (hero obrázok, logo), pretože by to paradoxne spomalilo ich zobrazenie.
Praktický príklad
Príklad: E-shop s elektronikou má na stránke kategórie 60 produktových obrázkov.
Bez lazy loadingu prehliadač začne sťahovať všetkých 60 obrázkov naraz — celkovo približne 12 MB dát. Stránka sa načíta za 4,5 sekundy na mobilnom pripojení.
Po pridaní atribútu loading="lazy" na obrázky pod ohybom sa pri prvom načítaní stiahne len 8 viditeľných obrázkov (asi 1,6 MB). Zvyšných 52 obrázkov sa načíta postupne pri scrollovaní. Čas prvého vykreslenia sa skráti na 1,8 sekundy — zlepšenie o 60 %.
Často kladené otázky
Čo je lazy loading a prečo je dôležitý?
Lazy loading je technika, pri ktorej sa obrázky a ďalšie zdroje načítavajú až keď sú potrebné — typicky keď sa používateľ k nim posunie na stránke. Je dôležitý, pretože výrazne zrýchľuje prvé načítanie stránky a šetrí dáta.
Ako implementovať lazy loading na webstránke?
Najjednoduchší spôsob je pridať atribút loading="lazy" na elementy <img> a <iframe>. Pre pokročilejšie scenáre môžete použiť JavaScript Intersection Observer API alebo knižnice ako lazysizes.
Ovplyvňuje lazy loading SEO?
Pri správnej implementácii lazy loading negatívne neovplyvňuje SEO. Google bot dokáže spracovať natívny lazy loading aj Intersection Observer. Dôležité je, aby obrázky mali vyplnené atribúty alt a aby sa hlavný obsah nad ohybom načítaval okamžite.
Ktoré prehliadače podporujú natívny lazy loading?
Natívny lazy loading cez atribút loading="lazy" podporujú všetky moderné prehliadače: Chrome, Firefox, Edge aj Safari. Globálne pokrytie presahuje 95 % používateľov.
Súvisiace pojmy
Potrebujete pomôcť s webom?
Napíšte mi a poradím vám s vaším projektom. Prvá konzultácia je zadarmo a nezáväzná.