Lazy Loading

Lazy loading (odlozene nacitani) je optimalizacni technika, ktera odkláda nacitani zdroju, jako jsou obrazky, videa nebo komponenty, az do okamziku, kdy je uzivatel skutecne potrebuje. Misto stahovani veskereho obsahu stranky pri jejim otevreni se zdroje nacitaji postupne, kdyz se uzivatel ke konkretnimu obsahu přiblíží scrollovanim. Vysledkem je rychlejsi pocatecni nacteni stranky, nizsi spotreba dat a lepsi uzivatelsky zazitek zejmena na mobilnich zarizenich s pomalejsim pripojenim.

Moderni prohlizece podporuji nativni lazy loading pomoci atributu loading="lazy" na elementech img a iframe, coz eliminuje potrebu JavaScriptovych reseni pro zakladni pripady. Pro pokrocilejsi scenare, jako je lazy loading komponent nebo dat, vyvojari vyuzivaji Intersection Observer API, ktere efektivne detekuje, kdy element vstoupi do viditelne oblasti viewportu. Frameworky jako Nuxt nebo Next.js nabizeji lazy loading komponent primo jako soucást sve architektury pomoci dynamickych importu.

Spravna implementace lazy loadingu vyzaduje pozornost k nekolika detailum. Obrazky nad zahybem stranky (above the fold) by nemely byt lazy-loaded, protoze to zpomali vnímani nacteni stranky a negativne ovlivni metriku Largest Contentful Paint. Kazdy lazy-loaded obrazek by mel mit definovane rozmery (width a height atributy nebo CSS aspect-ratio), aby prohlizec mohl rezervovat misto a predejit nahlym poskokum obsahu (Cumulative Layout Shift). Pro kriticke obrazky je vhodne pouzit atribut fetchpriority="high" a preload hint, zatimco pro obrazky nize na strance staci nativni loading="lazy" bez dalsich uprav.