Co je líné načítání a jak funguje?

Ne každý obrázek na stránce se musí načíst ve stejnou chvíli. Líné načítání obrázků odkládá stahování obrázků, které ještě nejsou vidět v zobrazené oblasti návštěvníka, takže se prohlížeč soustředí na obsah, který návštěvník skutečně vidí, místo aby načítal celou stránku najednou. U stránek s mnoha obrázky může už tato jediná změna výrazně zkrátit počáteční načítání a zlepšit metriky, na kterých záleží pro zážitek návštěvníků i pozice ve vyhledávání. Tento článek vysvětluje, co je líné načítání, jak technicky funguje, co by se mělo a nemělo líně načítat a jak ovlivňuje skóre Core Web Vitals.

Když prohlížeč načítá stránku bez líného načítání, stáhne každý obrázek na stránce bez ohledu na to, zda je některý z nich už vidět. Návštěvník, který stránku otevře a hned odejde, přesto spustí stahování každého obrázku pod hranou obrazovky. Je to promarněný přenos dat a zpomaluje to načítání všeho nad hranou obrazovky, co návštěvník skutečně vidí. Líné načítání to mění tak, že se stahuje jen obsah, který je právě v zobrazené oblasti. Souvislosti toho, jak to zapadá do širšího obrazu rychlosti načítání stránek, najdete v článku o tom, jak zkrátit dobu načítání webu.

Co je líné načítání?

Líné načítání (lazy loading) je technika, která odkládá načítání nekritických zdrojů, dokud nejsou potřeba. U obrázků to znamená, že se obrázek nestáhne, dokud se k němu návštěvník nepřiblíží posouváním. Místo aby prohlížeč při načtení stránky žádal o každý obrázek, požádá jen o ty, které jsou vidět nebo se brzy stanou viditelnými, jak návštěvník se stránkou pracuje.

Co líné načítání mění na průběhu načítání

• Bez líného načítání: prohlížeč při prvním načtení stránky žádá o všechny obrázky, bez ohledu na to, zda jsou v zobrazené oblasti
• S líným načítáním: prohlížeč žádá jen o obrázky, které jsou v aktuální zobrazené oblasti nebo blízko ní. Ostatní si vyžádá, jak se k nim návštěvník posouvá
• Celkové množství dat přenesených během celého projetí stránky je stejné, ale počáteční načtení je výrazně lehčí
• Návštěvníci, kteří stránku neposunou za určitý bod, nikdy nespustí stahování obrázků, ke kterým se nedostanou

Jak líné načítání technicky funguje?

Líné načítání obrázků lze zavést dvěma způsoby: nativním atributem prohlížeče a řešeními založenými na JavaScriptu.

Nativní líné načítání

• Všechny hlavní prohlížeče podporují nativní líné načítání pomocí atributu loading="lazy" přidaného přímo do značky obrázku
• Není potřeba žádný JavaScript ani externí knihovny. Chování načítání řeší prohlížeč sám
• Je to dnes standardní přístup k línému načítání obrázků na webu a k zavedení stačí minimum technických znalostí
• Prohlížeč určí, kdy začít obrázek načítat, podle jeho vzdálenosti od zobrazené oblasti, což je hranice, která se mezi prohlížeči mírně liší

Líné načítání založené na JavaScriptu

• Než se nativní líné načítání široce podporovalo, vývojáři používali knihovny JavaScriptu, které sledovaly polohu posouvání a spouštěly načtení obrázků, když vstoupily do zobrazené oblasti
• Standardním přístupem v JavaScriptu je Intersection Observer API, které zjišťuje, kdy prvek vstoupí do zobrazené oblasti nebo z ní vystoupí, aniž by se spoléhalo na posluchače událostí posouvání
• Líné načítání v JavaScriptu se stále používá pro složitější případy, například líné načítání obrázků na pozadí nastavených v CSS nebo videa
• U běžných prvků obrázku je nativní líné načítání s loading="lazy" jednodušší a spolehlivější

Co lze líně načítat kromě obrázků?

Iframy

• Atribut loading="lazy" funguje také u iframů ve všech hlavních prohlížečích
• Vložené mapy, formuláře a obsah třetích stran v iframech lze odložit, dokud se k nim návštěvník nedostane
• Je to užitečné zejména u stránek s vloženými mapami nebo widgety třetích stran v dolní části stránky, protože ty často zahrnují těžké externí skripty

Video

• Soubory videa jsou výrazně větší než obrázky a mohou mít velký dopad na počáteční dobu načítání, když jsou umístěné pod hranou obrazovky
• Líné načítání videa vyžaduje přístup přes JavaScript, protože nativní atribut loading se na prvky videa nevztahuje
• Častým postupem je zpočátku načíst jen náhledový obrázek (poster) a soubor videa začít načítat, až když s ním návštěvník interaguje nebo se k němu posune

Komponenty a sekce

• V aplikacích silně založených na JavaScriptu lze líně načítat celé sekce nebo komponenty stránky, což znamená, že se jejich kód a obsah nestahují, dokud návštěvník k dané části stránky nedojde
• Je to pokročilá technika používaná ve složitých webových aplikacích a obvykle ji řeší framework, ne ruční implementace

Co by se líně načítat nemělo?

Líné načítání zlepšuje výkon, když se použije správně, ale použití na nesprávném místě způsobuje problémy, místo aby je řešilo.

Obrázky nad hranou obrazovky

• Hlavní obrázek, logo nebo jakýkoli výrazný vizuální obsah viditelný při prvním otevření stránky se musí načíst okamžitě
• Použití líného načítání u obrázků nad hranou obrazovky zpožďuje LCP, což zhoršuje skóre Core Web Vitals i zážitek návštěvníků
• Pravidlo je přímočaré: všechno, co je vidět bez posouvání, by se mělo načíst okamžitě. Všechno pod hranou obrazovky lze načítat líně

Obrázky blízko hrany obrazovky

• Obrázky těsně pod viditelnou oblastí se mohou objevit rychle, jakmile návštěvník začne posouvat. Pokud se líné načítání použije příliš agresivně, mohou se tyto obrázky stále načítat, když k nim návštěvník dojde, a krátce je vidět prázdný zástupný prvek
• Nativní líné načítání to řeší pomocí hranice: obrázky začne načítat dřív, než jsou plně v zobrazené oblasti, místo aby čekalo do poslední chvíle

Kritický obsah na rychle se načítajících stránkách

• Na stránkách s velmi malým množstvím obsahu a jen několika obrázky je průběh načítání už rychlý. Líné načítání v takových případech přidává složitost bez znatelného přínosu
• Líné načítání je nejcennější na stránkách s mnoha obrázky nebo s dlouhým posouvatelným obsahem

Jak líné načítání ovlivňuje Core Web Vitals?

Líné načítání má při správném použití přímý vliv na dvě metriky Core Web Vitals a na třetí vliv nemá.

Largest Contentful Paint (LCP)

• Líné načítání by se nikdy nemělo používat u prvku, který je pravděpodobným kandidátem na LCP, obvykle u hlavního obrázku
• Při správném použití líné načítání snižuje počet zdrojů soutěžících o přenosovou kapacitu při počátečním načtení, což může LCP zlepšit tím, že se obsah nad hranou obrazovky načte rychleji
• Při nesprávném použití u obrázků nad hranou obrazovky líné načítání LCP přímo zhoršuje, protože zpožďuje největší viditelný prvek

Interaction to Next Paint (INP)

• Méně obrázků načítaných zpočátku znamená méně síťové aktivity soutěžící se spouštěním JavaScriptu v kritickém okně načítání
• To může nepřímo snížit blokování hlavního vlákna a zlepšit skóre INP na stránkách, které dříve načítaly mnoho obrázků najednou

Cumulative Layout Shift (CLS)

• Líné načítání CLS přímo neovlivňuje, ale líně načítané obrázky bez definovaných atributů šířky a výšky mohou při načtení způsobit posuny rozvržení
• U líně načítaných obrázků vždy nastavte výslovné rozměry, aby prohlížeč vyhradil správné místo, než se obrázek načte

Úplný rozbor toho, jak se LCP, INP a CLS hodnotí a jaké jsou hranice, najdete v článku o tom, co jsou Core Web Vitals.

Ovlivňuje líné načítání SEO?

Při správné implementaci líné načítání SEO neškodí a díky lepšímu skóre rychlosti stránky může přispět k lepšímu výkonu ve vyhledávání.

Jak vyhledávače zacházejí s líně načítaným obsahem

• Roboti vyhledávačů vykreslují stránky podobně jako prohlížeče a dokážou indexovat obsah, který se načítá líně
• Líně načítané obrázky jsou stále procházitelné a mohou se objevit ve vyhledávání obrázků
• Přínos pro SEO plyne především ze zrychlení, která líné načítání umožňuje. Stránky s lepším skóre Core Web Vitals, které líné načítání může pomoci zlepšit, mají výhodu v pozicích

Alternativní text platí i nadále

• Líně načítané obrázky vyžadují stejný alternativní text (alt) jako jakýkoli jiný obrázek. Atribut alt by měl obsahovat popis obrázku bez ohledu na to, zda se načítá líně
• Jak psát účinný alternativní text, najdete v článku o tom, jak používat obrázky na webu

Jak na web přidat líné načítání?

U jednotlivých obrázků v HTML

• Přidejte loading="lazy" ke každé značce obrázku, která je pod hranou obrazovky
• Zajistěte, aby měl každý líně načítaný obrázek výslovné atributy width a height, které brání posunům rozvržení při načítání obrázků
• Nepřidávejte loading="lazy" k hlavnímu obrázku ani k žádnému obrázku viditelnému bez posouvání

Přes platformu webu

• Mnoho tvůrců webů používá líné načítání u obrázků pod hranou obrazovky automaticky, bez nutnosti ruční implementace
• Než ho přidáte ručně, podívejte se do dokumentace výkonu své platformy, zda se to neřeší automaticky

Úplného průvodce optimalizací obrázků nad rámec líného načítání, včetně formátů souborů, komprese a responzivních velikostí, najdete v článku o tom, jak optimalizovat obrázky pro rychlejší načítání.

Jak WEMASY řeší líné načítání

Tvůrce webů WEMASY používá líné načítání automaticky u obrázků pod hranou obrazovky na všech stránkách. Obrázky nad hranou obrazovky, včetně hlavních obrázků a veškerého obsahu viditelného bez posouvání, jsou z líného načítání vyloučeny, takže se vykreslí okamžitě. Obrázky se také ve výchozím stavu doručují s definovanými rozměry, což brání posunům rozvržení, když se líně načítané obrázky dostanou na své místo.

Líné načítání funguje vedle komprese obrázků a doručování přes CDN v každém tarifu WEMASY. Tato tři zlepšení dohromady snižují počáteční váhu stránky i dobu doručení obrázků, což přímo přispívá k rychlejšímu LCP a lepšímu skóre Core Web Vitals v analytické administraci.

Co všechno je v ceně, zjistíte u tvůrce webů WEMASY, nebo si projděte možnosti tarifů v ceníku.

Často kladené otázky