Lazy loading obrázků: nativní atribut, nebo skript

Pro většinu webů stačí nativní atribut loading="lazy", který prohlížeč zpracuje bez skriptu a vyhledávači neškodí. Skriptové řešení má smysl tam, kde potřebujete jemnější kontrolu, třeba vlastní zástupné obrázky nebo podporu starších prohlížečů. Zásadní pravidlo platí pro obojí: obrázek v horní části stránky se líně načítat nemá. Srovnání ukáže rozdíly a pasti.

Co lazy loading řeší

Obrázky mimo viditelnou část se nenačítají hned, ale až při posunu k nim. Stránka se tak rychleji zobrazí a šetří se přenesená data. Pomáhá to hlavně u dlouhých článků a galerií.

Zlepšuje se tím načtení viditelné části, ne celkový objem. Pozor na obrázek, který tvoří největší prvek stránky. Ten musí přijít co nejdřív.

Nativní atribut

Stačí přidat loading="lazy" do značky obrázku. Prohlížeč sám rozhodne o načtení podle vzdálenosti od okna. Není třeba žádný kód navíc a údržba je minimální.

Podpora v současných prohlížečích je široká. Je dobré uvést rozměry obrázku, aby se stránka při načtení neposouvala. Atribut s rozměry šetří kvalitu zobrazení.

Skriptové řešení

Skript sleduje, kdy se obrázek blíží do zobrazení, a teprve potom nastaví jeho zdroj. Dovoluje vlastní efekty, zástupné rozmazané náhledy a jemné nastavení vzdálenosti. Je ale závislý na JavaScriptu.

Špatně napsaný skript může obrázky skrýt před vyhledávačem. Vyhledávač obrázky sice vykreslí, ale riziko chyby roste. Skript proto pečlivě testujte.

Srovnání v tabulce

Hledisko	Nativní atribut	Skript
Složitost	Nízká	Vyšší
Kontrola	Omezená	Velká
Riziko pro indexaci	Malé	Vyžaduje testování
Údržba	Žádná	Průběžná

Pro běžný web volte nativní řešení. Skript jen při konkrétní potřebě.

Co líně nenačítat

Hlavní obrázek v horní části stránky a logo se líně načítat nesmí. Zpozdí se tím nejdůležitější vykreslení a zhorší se metrika zobrazení největšího prvku. Pro takový obrázek použijte normální načtení, případně prioritu.

Líné načtení hodí u obrázků dále v textu, v galeriích a v patičce. Vždy ověřte měřením, zda změna pomohla.

Jak ověřit funkci

V nástrojích prohlížeče sledujte záložku Síť při posouvání stránky. Obrázky mají přicházet postupně. Test zopakujte na mobilu s pomalejším připojením.

Pomocí nástroje pro kontrolu URL v Search Console zjistíte, zda robot vidí obrázky. Chybí-li, hledejte příčinu ve skriptu.

Časté otázky

Zhorší lazy loading pozice?

Při správném použití ne. Zrychlení načtení může pomoci. Chybné nastavení u hlavního obrázku může uškodit.

Má se používat u všech obrázků?

Ne, jen u těch mimo první obrazovku. Hlavní obrázek načtěte hned.

Jak je to s obrázky v pozadí?

Atribut funguje pro značku obrázku. Pozadí v CSS vyžaduje jiné řešení, často skript.

Zdroje

• Dokumentace Google Search Central
• Webová dokumentace standardů HTML