Lazy Loading

Lazy loading (odložené načítání) je optimalizační technika, která odkládá načítání zdrojů, jako jsou obrázky, videa nebo komponenty, až do okamžiku, kdy je uživatel skutečně potřebuje. Místo stahování veškerého obsahu stránky při jejím otevření se zdroje načítají postupně, když se uživatel ke konkrétnímu obsahu přiblíží scrollováním. Výsledkem je rychlejší počáteční načtení stránky, nižší spotřeba dat a lepší uživatelský zážitek zejména na mobilních zařízeních s pomalejším připojením.

Moderní prohlížeče podporují nativní lazy loading pomocí atributu loading="lazy" na elementech img a iframe, což eliminuje potřebu JavaScriptových řešení pro základní případy. Pro pokročilejší scénáře, jako je lazy loading komponent nebo dat, vývojáři využívají Intersection Observer API, které efektivně detekuje, kdy element vstoupí do viditelné oblasti viewportu. Frameworky jako Nuxt nebo Next.js nabízejí lazy loading komponent přímo jako součást své architektury pomocí dynamických importů.

Správná implementace lazy loadingu vyžaduje pozornost k několika detailům. Obrázky nad záhybem stránky (above the fold) by neměly být lazy-loaded, protože to zpomalí vnímání načtení stránky a negativně ovlivní metriku Largest Contentful Paint. Každý lazy-loaded obrázek by měl mít definované rozměry (width a height atributy nebo CSS aspect-ratio), aby prohlížeč mohl rezervovat místo a předejít náhlým poskokům obsahu (Cumulative Layout Shift). Pro kritické obrázky je vhodné použít atribut fetchpriority="high" a preload hint, zatímco pro obrázky níže na stránce stačí nativní loading="lazy" bez dalších úprav.