Lazy loading obrázků: podrobný průvodce

„Lazy loading“ je technika odloženého načítání obsahu, která optimalizuje rychlost načítání stránek. Obrázky a jiné zdroje jsou načítány pouze tehdy, když se blíží k zobrazení ve viewportu uživatele.

S čím přesně tato technika pomáhá?

• Snižuje počáteční čas načtení stránky (metrika First Contentful Paint)
• Pomáhá rychleji zobrazit LCP prvek (zlepší metriku Largest Contentful Paint).
• Šetří objem stažených dat a počet requestů.

Celkově tato metoda zlepšuje uživatelský zážitek, zejména na mobilních zařízeních nebo při pomalém připojení.

V tomto podrobném průvodci líným načtením se dozvíte, jak tuto techniku implementovat, jak dopady měřit a jaká zlepšení rychlosti jsme viděli po její implementaci.

Atribut loading u značky IMG

HTML poskytuje atribut loading, který umožňuje určit způsob načítání prvků. Tento atribut jednoduše přidáte ke značce <img>.

<img src="image.webp" loading="lazy" alt="…" width="200" height="200">

Atribut loading může mít dvě použitelné hodnoty:

• lazy – obrázky jsou načítány pouze tehdy, když jsou blízko nebo uvnitř viewportu.
• eager – obrázky jsou načítány okamžitě. Toto je výchozí nastavení.

Jak lazyloading obrázků implementovat?

Obecně vám doporučujeme konzervativní přístup, tedy aplikaci loading="lazy" na všechny obrázky, které se spolehlivě nacházejí mimo první viditelnou část obrazovky. Možných přístupů je ale více a společně se na ně podíváme.

Konzervativní přístup: obrázky mimo první viewport

Všechny obrázky mimo první viewport načtěte líným způsobem pomocí atributu loading="lazy". Toto je vhodné řešení pro většinu situací.

Kromě LCP elementu zároveň doporučujeme upřednostnit obrázky, které tvoří důležité prvky uživatelského rozhraní nebo pomáhají uživateli rozpoznat brand a jednoznačně identifikovat web. Atribut loading="eager", který k tomu slouží, nastavíme na LCP element, ikony v hlavičce (zejména v mobilní hlavičce) a logotyp značky.

Radikální přístup: všechny obrázky mimo LCP element

Pokud se řadíte ke zkušenějším vývojářům, můžete si dovolit aplikovat lazyloading na všechny obrázky kromě největšího obrázku v prvním viewportu (tzv. LCP elementu).

Toho dosáhneme výjimkou pro LCP element, kde nastavíme loading="eager" nebo parametr vůbec neuvedeme.

Všechny ostatní obrázky na stránce budou tedy mít loading="lazy". Raději upozorňujeme, že toto řešení je riskantní z pohledu možné chybovosti v případě, že se např. bude měnit HTML kód nebo design webu.

Líně načtený obrázek musí mít vždy definované rozměry pomocí atributů width a height. Tímto zabráníte případným problémům s metrikou CLS. Rovněž doporučujeme vždy používat obrázkový formát WebP.

Pozor, nikdy líně nenačítejte LCP element!

Nikdy nepoužívejte atribut loading="lazy" na LCP element, protože to zhorší metriku LCP. Atributem loading="lazy" prvek získá nižší prioritu a oddálí se jiho stažení.

Nejhorší kombinací, je použití javascriptového lazyloadu a jeho aplikace na LCP element, což automaticky dělají některé javascriptové knihovny. Nejprve se pak čeká na stažení a zpracování javascriptu a následně na to teprve prohlížeč stáhne zdroj obrázku.

Javascriptový lazyload

Pro pokročilejší implementaci lze využít JavaScript a Intersection Observer API.

Intersection Observer API je javascriptové API, které umožňuje sledovat prvky při přiblížení k viewportu. To lze využít např. pro vlastní implementace lazyloadingu.

Toto je však velmi pokročilá metoda a rozhodně ji nedoporučujeme pro běžnou optimalizaci.

Výhody:

• Flexibilita.
• Možnost definovat složitější podmínky načítání.
• Tento typ lazy loadu je možné využít v javascriptových komponentách jako jsou karusely a podobně.

Nevýhody:

• Vyšší složitost.
• Čekání na stažení a inicializaci javascriptového kódu.
• Potřeba alternativního řešení promocí <noscript> pro prohlížeče bez zapnutého JavaScriptu.
• Nemožnost plného využití preload scanneru prohlížeče.
• Při nesprávné implementaci hrozí, že obrázky nebudou viditelné pro vyhledávací boty.

Co vám doporučíme?

• Používejte nativní lazyloading, který je široce podporovaný.
• Používejte JavaScript lazyloading pouze pro složitější případy, které nelze pokrýt nativním atributem.

Vztah mezi atributem loading a zvýšením priority načtení pomocí fetchpriority

Hodnota eager je pokyn k okamžitému načtení obrázku, aniž by se načítání zdržovalo, pokud je obrázek mimo obrazovku. Obrázek se načítá stejně rychle jako obrázek, který nemá atribut loading.

Pokud chcete zvýšit prioritu načítání důležitého obrázku (například obrázku LCP), využíjte priority hints a atribut fetchpriority="high".

Obrázek s atributy loading="lazy" a fetchpriority="high" se nenačítá, dokud je mimo obrazovku. Pokud je uvnitř viewportu nebo v jeho blízkosti, je načten s vysokou prioritou. Tato kombinace není nutná, protože prohlížeč by tento obrázek pravděpodobně stejně načetl s vysokou prioritou.

Vzdálenost od viewportu: prahové hodnoty načítání obrázků

Všechny obrázky, které jsou okamžitě viditelné ve viewportu bez posouvání stránky, se načítají ihned. Obrázky, které se nacházejí daleko pod viewportem zařízení, se načtou pouze tehdy, když se k nim uživatel přiblíží.

Implementace lazyloadingu v prohlížeči Chrome se snaží zajistit, aby se obrázky mimo obrazovku načítaly dostatečně brzy, aby se dokončilo jejich načítání v době, kdy k nim uživatel teprve přejde, a to tak, že je načtou mnohem dříve, než se stanou viditelnými ve viewportu.

Jak je to nastaveno v prohlížeči Chrome? U rychlých připojení (4G a výše) má Chrome prahové hodnoty vzdálenosti od místa zobrazení 1250 px a u pomalejších připojení (3G nebo nižší) má prahovou hodnotu 2500 px.

Konečné rozhodnutí, kdy se začne obrázek stahovat závisí čistě na prohlížeči a zde udávané hodnoty jsou jen orientační.

Jak analyzovat, zda je lazyloading implementovaný správně?

Při implementaci lazyloadingu je potřeba zjistit, které prvky jsou pro lazyloading vhodné. Také je dobré vědět, jak ověřit, jestli jsme lazyloading implementovali správně.

Analýza lazyloadingu v timeline prohlížeče

Lazyloading lze analyzovat například pomocí Chrome Developer Tools v části Performance. Načtení obrázků je zde viditelné jako oddělené žádosti v čase při scrollování uživatele.

V prvním zobrazení stránky jsou staženy jen obrázky, které jsou viditelné v prvním viewportu a nebo velmi blízko něj.

Další obrázky s parametrem loading="lazy" se začnou stahovat až při uživatelské interakci. Například při skrolování stránkou.

Obrázky s parametrem loading="lazy" se začnou stahovat až při uživatelské interakci

Analýza v nástroji Lighthouse nebo Monitoringu PLUS od PageSpeed.cz

V nástroji Lighthouse nebo monitoringu PLUS lze identifikovat obrázky vhodné k lazyloadingu v „Detailu běhu testu“. Obrázky jsou vypsány ve varování „Odložte načítání obrázků mimo obrazovku“ v syntetickém testu Lighthouse.

1. V hlavním menu zvolte záložku „Příležitosti“.
   Monitoring PLUS, Lighthouse test

2. Vyberte test pro konkrétní URL.
   Monitoring PLUS, Lighthouse test

3. Najděte položku „Odložte načítání obrázků mimo obrazovku“. Zde jsou vypsané obrázky, na které je vhodné aplikovat lazyloading.
   Zde jsou vypsané obrázky, na které je vhodné aplikovat lazyloading.

Rady, které v této části dostanete jsou kvalitní a zhruba odpovídají tomu, co výše píšeme o konzervativním přístupu k línému načtení.

Lazyloading lze využít i na jiné prvky webu než jen na obrázky.

Lazyloading pro iframe

Lazyloading lze použít i na iframy, což může podstatně zlepšit metriky Core Web Vitals například na stránkách s vloženými videi nebo mapami. Použití je velmi podobné jako u obrázků?

<iframe src="https://example.com" loading="lazy"></iframe>

Podpora lazyloadingu v prohlížečích

Všechny moderní prohlížeče podporují atribut loading. Vždy doporučujeme použití nativního lazyloadingu před javascriptovým řešením.

Příklady z naší praxe při optimalizaci rychlosti

Nasazení lazyloadingu na obrázky

U tohoto klienta použitím lazyloadingu na obrázky v hlavním menu a patičce došlo ke skokovému snížení datového objemu obrázků.

Monitoring PLUS - snížení datového objemu obrázků.

Čísla v obrázku:

1. Snížení datového objemu obrázků použitím lazyloadingu

Výsledkem bylo také zlepšení metriky LCP.

Nahrazení javascriptového lazyloadingu nativním řešením

Nahrazení javascriptového lazyloadingu nativním lazyloadingem a zvýšení priority atributem fetchpriority="high" se LCP obrázek začne stahovat velmi brzy a LCP metrika se výrazně zlepší. V tomto případě se metrika LCP zrychlila na pomalém připojení (Fast 3G) o cca 2 sekundy.

Původní stav

Vysvětlivky k obrázku:

1. Začátek stahování LCP obrázku až po zpracování JavaScriptu app.js.
2. Zobrazení LCP obrázku na stránce.

Stav po optimalizaci

Vysvětlivky k obrázku:

1. Začátek stahování LCP obrázku proběhne hned po stažení HTML dokumentu.
2. Zobrazení LCP obrázku na stránce.

Shrnutí

Líné načtení obrázků doporučujeme jako jednu ze základních a zároveň velmi efektivních metod optimalizace rychlosti načtení stránky. Doporučujeme vám konzervativně odložit načtení všech obrázků mimo první viewport. Dejte si pozor na aplikaci líného načtení na obrázky, které jsou LCP elementem, což může rychlost naopak zhoršit.