Lazy loading je technika odloženého načítania obsahu, pri ktorej sa obrázky, videá alebo iné elementy načítajú až keď ich používateľ naozaj potrebuje, teda keď sa k nim posunie vo viewporte. Namiesto toho aby prehliadač sťahoval všetko naraz pri otvorení stránky, lazy loading rozloží záťaž v čase a výrazne zrýchli prvotné zobrazenie webu.
Praktický dopad je jednoduchý: ak máte článok s 15 obrázkami, bez lazy loadingu prehliadač stiahne všetky hneď pri načítaní. S lazy loadingom stiahne len obrázky viditeľné nad prvým zlomom stránky a zvyšok až keď sa používateľ posúva nižšie. Pri stránkach s veľa vizuálnym obsahom to dokáže skrátiť čas načítania o 30-50%.
Lazy loading (doslovne „lenivé načítanie") je optimalizačná technika, ktorá odkladá načítanie nepotrebného obsahu až na moment, keď sa stáva relevantným. Prehliadač nemusí čakať na stiahnutie všetkých médií pred vykreslením stránky, zobrazí to čo vidíte ihneď a zvyšok doťahuje na pozadí.
Google explicitne odporúča lazy loading ako jednu z core techník pre optimalizáciu Core Web Vitals. Konkrétne ovplyvňuje Largest Contentful Paint (LCP), ak sa váš hlavný vizuálny element načíta rýchlejšie, lebo prehliadač nemusí súťažiť o bandwidth so všetkými ostatnými obrázkami, dostávate lepšie hodnotenie. A lepšie hodnotenie znamená vyššie pozície v organickom vyhľadávaní.
V praxi to riešime pri každej tvorbe webstránok, lazy loading je štandard, nie bonus. Web bez neho je v roku základného HTML5 anachronizmus.
Mechanizmus je elegantne jednoduchý. Prehliadač sleduje pozíciu používateľa na stránke (presnejšie: ktoré elementy sa blížia k viditeľnej oblasti, viewportu). Keď sa obrázok alebo iframe dostane do určitej vzdialenosti od viewportu (typicky 100-300 pixelov), prehliadač spustí jeho načítanie. Používateľ to nevníma, lebo médium je pripravené skôr než k nemu doscrolluje.
Moderné prehliadače používajú na detekciu Intersection Observer API. Toto rozhranie efektívne sleduje, či sa element prekrýva s viewportom, bez toho aby zaťažovalo hlavné vlákno prehliadača neustálym počúvaním scroll eventov. Starší prístup cez scroll listeners bol náročný na výkon, musel sa spúšťať pri každom pixeli scrollovania.
Od roku 2019 podporujú hlavné prehliadače natívny lazy loading cez atribút loading="lazy" priamo v HTML. Stačí pridať jeden atribút k img tagu a prehliadač sa o všetko postará. Žiadna JavaScript knižnica, žiadna konfigurácia.
JavaScript riešenia (napr. lazysizes, lozad.js) stále majú zmysel v dvoch prípadoch: ak potrebujete podporu starších prehliadačov, alebo ak chcete pokročilejšie funkcie ako blur-up efekt, prioritizáciu načítania, alebo vlastnú logiku kedy čo načítať. Pri bežnom webe vystačíte s natívnym riešením.
Najjednoduchšia implementácia lazy loadingu obrázkov vyžaduje pridanie jediného atribútu. Váš pôvodný tag <img src="obrazok.jpg" alt="popis"> sa zmení na <img src="obrazok.jpg" alt="popis" loading="lazy">. Hotovo.
Pre iframy (vložené videá z YouTube, mapy) platí identický princíp: <iframe src="url" loading="lazy"></iframe>. YouTube embed bez lazy loadingu pridáva k načítaniu stránky 500-800 kB. S lazy loadingom sa toto prenesie až keď používateľ scrollne k videu.
Lazy loading má jedno zásadné pravidlo: nikdy ho neaplikujte na obsah viditeľný bez scrollovania (above the fold). Ak dáte lazy loading na hlavný hero obrázok, paradoxne spomalíte LCP, prehliadač najprv vykreslí prázdne miesto a až potom spustí načítanie obrázku. Presne opačný efekt než chcete.
WordPress od verzie 5.5 automaticky pridáva loading="lazy" ku všetkým obrázkom vloženým cez editor. Ak používate aktuálnu verziu, lazy loading funguje bez zásahu. Môžete to overiť v HTML zdrojovom kóde stránky, vyhľadajte img tag a skontrolujte prítomnosť atribútu.
Problém nastáva pri obrázku v hlavičke alebo featured image. WordPress v niektorých témach aplikuje lazy aj na tieto elementy, čo škodí LCP. Riešenie je buď v kóde témy (odstrániť lazy z konkrétnych obrázkov), alebo cez filter wp_lazy_loading_enabled. Pri tvorbe e-shopov na to dbáme automaticky, produktové obrázky v detaile produktu musia byť prioritné, lazy loading len pre galériu a súvisiace produkty.
Ak potrebujete viac kontroly, osvedčené pluginy zahŕňajú WP Rocket (platený, cache + lazy loading), Perfmatters (platený, minimalistický a rýchly), alebo Autoptimize (zadarmo, slušná funkcionalita). WP Rocket má výhodu v tom, že správne exkluduje above-the-fold obrázky automaticky na základe analýzy stránky.
Pozor na stacking pluginov. Ak máte natívny WordPress lazy loading, k tomu plugin na cache ktorý pridáva vlastný lazy loading, a ešte k tomu optimalizačný plugin, dostávate konflikty. Jeden systém, nie tri naraz.
Krátka odpoveď: nie, ak ho implementujete správne. Googlebot od roku 2020 plne podporuje natívny lazy loading cez atribút loading="lazy" a štandardné JavaScript riešenia využívajúce Intersection Observer.
Dlhšia odpoveď: problém môže nastať pri exotických implementáciách. Ak používate riešenie ktoré nahradí src atribút vlastným data-atribútom a JavaScript ho prepíše až pri scrolle, Googlebot nemusí obrázok nájsť. Roboty nescrollujú stránkou ako človek, renderujú ju a hľadajú src atribúty.
Bezpečná implementácia pre SEO: používajte loading="lazy" s plným src atribútom (nie data-src). Alternatívne používajte noscript fallback pre prípady keď JavaScript nefunguje. Google Search Console → URL Inspection → Live Test vám ukáže presne ako Googlebot vidí vašu stránku vrátane obrázkov.
Pred a po implementácii odmerajte v Google PageSpeed Insights alebo Lighthouse. Sledujte konkrétne metriky:
Pri nastavení trackingu a analytiky sledujeme aj bounce rate pred a po optimalizácii. Rýchlejší web drží používateľov dlhšie, každá sekunda navyše pri načítaní znamená približne 7% nárast bounce rate podľa dát od Google.
Iframe z YouTube alebo Vimeo sú náročné zdroje. Jedno YouTube video embed pridáva minimálne 500 kB k načítaniu stránky. JavaScript player, thumbnail, fonty. Pri viacerých videách sa toto násobí.
Riešenie: loading="lazy" na iframe funguje v moderných prehliadačoch. Ešte efektívnejšie je facade pattern, namiesto skutočného embedu zobrazíte statický obrázok (thumbnail videa) a iframe sa načíta až po kliknutí. Šetrí to bandwidth používateľom ktorí video aj tak nepozrú.
Služba lite-youtube-embed je open source riešenie ktoré automaticky implementuje tento pattern. Znižuje záťaž z YouTube embedu z 500 kB na približne 100 kB až do momentu interakcie.
Lazy loading je jedna z optimalizačných techník, nie zázračné riešenie. Ak máte obrázky v plnom rozlíšení (3000x2000px pre web kde stačí 800px), lazy loading len oddiali problém, stále sťahujete zbytočné megabajty, len neskôr.
Kompletná optimalizácia obrázkov zahŕňa: správne rozmery (responsive images cez srcset), moderné formáty (WebP, AVIF), kompresiu (kvalita 80-85% je vizuálne identická s originálom), a až potom lazy loading pre obsah pod zlomom. Pri návrhu webu riešime všetky tieto vrstvy súčasne.
Pre viac inšpirácie si pozrite naše projekty z praxe.
Lazy loading patrí medzi základné optimalizačné techniky ktoré by mal mať každý moderný web. Implementácia je jednoduchá, jeden HTML atribút pre natívne riešenie, prípadne plugin pre WordPress. Kľúč je správne identifikovať čo lazy loadovať a čo nie. Hero obrázok nikdy, galérie a obsah pod zlomom vždy. Pri projektoch ako e-shop pre krby a krbové vložky, ktorý sme robili pre Gabo Krby, bolo optimalizovanie načítania stoviek produktových obrázkov nevyhnutnou súčasťou výkonu. Ak riešite rýchlosť webu a potrebujete pomoc s implementáciou, napíšte nám a prejdeme váš projekt spolu.
