Lazy Loading

Lazy loading (odložené načítání) je technika optimalizace výkonu, která odkládá načítání nekritických zdrojů, především obrázků a videí, až do chvíle, kdy je uživatel skutečně potřebuje. Místo stahování všech obrázků na stránce hned při jejím načtení lazy loading počká, až se má obrázek objevit ve viditelné části okna (viewportu), a teprve pak si ho vyžádá ze serveru. To snižuje počáteční váhu stránky, zrychluje dobu do prvního smysluplného vykreslení a šetří data uživatelům, kteří nikdy nedoscrollují na konec stránky.

Nejjednodušší implementace používá nativní HTML atribut loading="lazy" na elementech img a iframe, který dnes podporují všechny hlavní prohlížeče. Pro větší kontrolu nad načasováním a chováním vývojáři používají Intersection Observer API, funkci prohlížeče, která efektivně detekuje, kdy element vstupuje do viewportu nebo se k němu blíží. Přístup přes Intersection Observer umožňuje přizpůsobení, například načítání obrázků ve chvíli, kdy jsou v zadané vzdálenosti od viewportu, takže obsah je připravený dřív, než k němu uživatel doscrolluje, a nenačítá se viditelně až při jeho příchodu.

Dopad na Core Web Vitals je významný, ale vyžaduje pečlivou implementaci. Lazy loading zkracuje Largest Contentful Paint tím, že prohlížeč upřednostní obsah nad ohybem stránky před obrázky níže. Pokud ale nesprávně odložíte načtení hero obrázku nebo jiného obsahu nad ohybem, LCP naopak zhoršíte, protože zpozdíte přesně ten prvek, který metrika měří. Osvědčený postup je načítat všechny obrázky viditelné v úvodním viewportu okamžitě a odložit vše pod ohybem. Kvůli Cumulative Layout Shift vždy u lazy-loaded obrázků definujte explicitní atributy width a height nebo použijte CSS aspect-ratio, aby prohlížeč rezervoval správný prostor ještě před načtením obrázku a nedocházelo k poskokům layoutu, které uživatele frustrují a sráží vaše výkonnostní skóre.