Lazy loading: líné načítání obrázků a videí
Lazy loading (líné načítání) znamená, že prohlížeč nenačítá obrázky, videa a další těžké prvky stránky hned, ale až když se k nim návštěvník doroluje. Stránka se tak rychleji zobrazí a na mobilních datech se nestahuje galerie, kterou nikdo neuvidí. Použité na špatném místě ale může web naopak zpomalit.
Aktualizováno
Jak lazy loading funguje
Dnešní prohlížeče umí líné načítání samy. Stačí obrázku nebo vloženému rámu (iframe) přidat jeden atribut:
<img src="realizace-kuchyne.webp" alt="Kuchyň z dubu na míru"
width="1200" height="800" loading="lazy">Prohlížeč pak obrázek stáhne, až když se blíží k viditelné části obrazovky. Dřív se totéž řešilo knihovnami v JavaScriptu; ty už většinou nejsou potřeba. Důležité jsou i rozměry (width a height): prohlížeč díky nim vyhradí místo a stránka při načtení obrázku neposkakuje.
Kdy pomáhá
- galerie realizací a fotek s desítkami obrázků,
- dlouhé stránky s obrázky níž pod úvodem,
- výpisy produktů v e-shopu a kategorie,
- vložená videa a mapy v dolní části stránky,
- loga partnerů, reference a recenze v patičce.
Na mobilu ušetří data a baterii, na serveru přenos. Spolu s moderními formáty obrázků (WebP a AVIF) a správnou velikostí patří k nejlevnějším způsobům, jak web zrychlit.
Kdy škodí: hlavní obrázek nahoře
Obrázek, který je vidět hned po otevření stránky (velká fotka v úvodu, hlavní obrázek produktu), se líně načítat nemá. Prohlížeč by s jeho stažením zbytečně čekal a zpomalil tím to, co návštěvník vidí jako první. Měří to metrika LCP (Largest Contentful Paint), jedna z Core Web Vitals.
Hlavnímu obrázku proto lazy loading nedávejte, naopak mu můžete dát přednost atributem fetchpriority="high". Častá chyba šablon a pluginů je, že líně načítají úplně všechny obrázky, včetně toho prvního.
Lazy loading ve WordPressu a dalších systémech
WordPress přidává atribut loading="lazy" k obrázkům v obsahu automaticky a novější verze se snaží vynechat první obrázek. Pluginy na zrychlení mohou chování změnit, někdy k horšímu. U webů postavených v moderních frameworkech (třeba Next.js) se líné načítání a priorita nastavují v komponentě obrázku. Vždy ověřte výsledek měřením, ne podle nastavení.
Jak rychlost webu změřit a co ji nejčastěji brzdí, popisuje průvodce rychlost webu. Drobné technické opravy děláme v rámci hodinové práce za 1 000 Kč.
Časté otázky
Vadí lazy loading vyhledávačům?
Nativní lazy loading přes atribut loading="lazy" Google podporuje a obrázky i tak najde. Problém bývá u starších řešení v JavaScriptu, která obrázek načtou až po posunutí stránky nebo po interakci; ty mohou způsobit, že vyhledávač obrázek nevidí. Google doporučuje líné načítání, které nezávisí na akci uživatele.
Má mít lazy loading i video z YouTube na webu?
Ano, vložený přehrávač (iframe) je jedna z nejtěžších věcí na stránce. Atribut loading="lazy" funguje i u iframe. Ještě úspornější je ukázat jen náhledový obrázek a přehrávač načíst až po kliknutí.
Jak zjistím, jestli web lazy loading používá?
V prohlížeči klikněte pravým tlačítkem na obrázek, zvolte Prozkoumat a podívejte se, jestli má atribut loading="lazy". Rychleji to ukáže PageSpeed Insights: upozorní na obrázky mimo obrazovku, které se načítají zbytečně brzy, i na hlavní obrázek, který se líně načítat nemá.