Odložené načítání obsahu: Lazy loading

Úvod

Jednou z klíčových metod optimalizace výkonu je takzvaný lazy loading. Tato technika se zaměřuje na odložení načítání méně důležitého obsahu, jako jsou obrázky, videa, iframy, skripty a CSS, dokud tento obsah není skutečně potřeba. Cílem tohoto průvodce je poskytnout komplexní a aktuální přehled o lazy loadingu, jeho implementaci, výhodách, potenciálních úskalích a osvědčených postupech.

Co je Lazy Loading?

Lazy loading je strategie vývoje webových aplikací, která spočívá v zpoždění načítání zdrojů, které nejsou nezbytné pro počáteční vykreslení stránky. Místo načítání veškerého obsahu najednou při prvním zobrazení stránky, se lazy loading zaměřuje na načtení pouze toho, co je viditelné v okně prohlížeče (viewportu). Ostatní zdroje se načtou až ve chvíli, kdy se k nim uživatel přiblíží při rolování stránkou.

Pro lepší pochopení se často používají termíny "nad ohybem" (above the fold) a "pod ohybem" (below the fold). Obsah "nad ohybem" je ten, který je viditelný uživateli ihned po načtení stránky, bez nutnosti rolování. Naopak, obsah "pod ohybem" vyžaduje, aby uživatel roloval dolů, aby ho viděl. Je důležité si uvědomit, že hranice "ohybu" se liší v závislosti na velikosti obrazovky a orientaci zařízení. Co je viditelné na stolním počítači, nemusí být viditelné na mobilním zařízení.

Lazy loading se typicky aplikuje na různé typy obsahu, včetně obrázků, videí, iframů, skriptů a CSS pozadí. Na rozdíl od lazy loadingu existuje i eager loading, kdy se veškerý obsah načítá ihned při zobrazení stránky.

Výhody Lazy Loading

Použití lazy loadingu přináší řadu významných výhod pro výkonnost webových stránek.

Zrychlení počátečního načítání stránky:

Odložením načítání obsahu, který není okamžitě viditelný, se zmenšuje objem dat, který musí prohlížeč stáhnout při prvním načtení. To vede k rychlejšímu zobrazení prvního viditelného obsahu a zlepšuje metriky First Contentful Paint (FCP) a Largest Contentful Paint (LCP), které jsou klíčové pro uživatelskou zkušenost a SEO. Uživatelé vnímají web jako rychlejší, i když se ostatní zdroje načítají na pozadí.

Úspora přenesených dat:

Pokud uživatel nikdy nescroluje k dolní části stránky, tento obsah se vůbec nestáhne. To šetří data jak uživatelům, zejména na mobilních zařízeních s omezenými datovými limity, tak i serveru a potenciálně snižuje náklady na hosting a CDN.

Potenciální zlepšení SEO:

Rychlost načítání stránky je jedním z faktorů, které vyhledávače berou v úvahu při hodnocení webových stránek. Rychlejší web může dosáhnout lepších pozic ve vyhledávání a přispívá k lepším skóre Core Web Vitals, na které se Google stále více zaměřuje.

Snížení zátěže na systémové zdroje:

Menší množství stahovaného obsahu při prvním načtení může snížit zátěž na procesor a baterii zařízení uživatele. To je zvláště důležité pro uživatele s méně výkonnými zařízeními nebo s omezenou výdrží baterie.

Zlepšení metriky LCP (Largest Contentful Paint):

Lazy loading, pokud je správně implementován pro obsah pod ohybem, může přispět k lepšímu skóre této metriky.

Implementace Lazy Loading

Lazy loading lze implementovat několika způsoby, od jednoduchých HTML atributů po složitější JavaScriptová řešení.

Nativní Lazy Loading:

Moderní prohlížeče nativně podporují lazy loading pomocí atributu loading u tagů <img> a <iframe>. Tento atribut může mít tři hodnoty:

• lazy: prohlížeč odloží načtení zdroje, dokud se nepřiblíží do viewportu.
• eager: prohlížeč načte zdroj okamžitě, bez ohledu na jeho pozici na stránce.
• auto: prohlížeč sám rozhodne, zda použije lazy loading.

Implementace je velmi jednoduchá, stačí přidat atribut loading="lazy" k příslušným tagům. Podpora tohoto atributu je v moderních prohlížečích široká, nicméně starší verze, zejména Safari před verzí 13.1 a Firefox před verzí 75 pro iframy, jej nemusí plně podporovat. Pro správnou funkčnost a prevenci layout shiftů je důležité u obrázků vždy specifikovat atributy width a height.

JavaScriptové Řešení: 

Pro pokročilejší kontrolu a pro lazy loading prvků, které nejsou obrázky nebo iframy, lze použít JavaScript. Často se využívá Intersection Observer API, které efektivně sleduje viditelnost prvků ve viewportu. Toto API je výkonnější než tradiční posluchače událostí (například scroll) pro detekci viditelnosti prvků. Existuje také mnoho JavaScriptových knihoven, které implementaci lazy loadingu usnadňují a nabízejí pokročilé funkce, jako je například zpracování fallbacků pro starší prohlížeče a vlastní callback funkce (např. lazysizes, vanilla-lazyload, lozad.js, yall.js).

Lazy Loading Videa:

Při lazy loadingu videí je třeba zvážit několik specifických aspektů. Pro videa, která se nemají automaticky přehrávat, se doporučuje použít atribut preload="none", který zabrání prohlížeči stahovat data videa předem. Jako zástupný obrázek (placeholder) je vhodné použít statický náhledový obrázek videa (poster image). Pro vkládání videí pomocí tagu <iframe> (například z YouTube) lze využít atribut loading="lazy". Další technikou je použití takzvaných "fasád" (facades), kdy se místo samotného přehrávače videa zobrazí statický prvek (například obrázek) a teprve po interakci uživatele se načte a zobrazí plnohodnotný přehrávač.

Lazy Loading Dalších Typů Obsahu:

Kromě obrázků a videí lze lazy loading aplikovat i na další typy obsahu:

• Iframy: Stejně jako u obrázků lze použít atribut loading="lazy" nebo JavaScriptová řešení pro odložení načítání iframe prvků, které často obsahují externí obsah, jako jsou mapy nebo widgety sociálních sítí.
• Skripty: Lazy loading JavaScriptových souborů je užitečný pro nekritické funkce nebo komponenty, které nejsou potřeba ihned po načtení stránky. Techniky zahrnují dynamické importy a načítání skriptů na základě interakce uživatele nebo při zobrazení ve viewportu. Tím se může výrazně snížit počáteční velikost JavaScriptového balíčku a zlepšit metrika Time to Interactive (TTI).
• CSS: Méně běžné, ale možné, je i lazy loading nepodstatných CSS stylů. Toho lze dosáhnout například načtením CSS souborů na konci dokumentu nebo pomocí JavaScriptu na vyžádání. Tato technika může dále optimalizovat vykreslování tím, že zabrání blokování vykreslování nepodstatných stylů.

Doporučené Postupy

Při implementaci lazy loadingu je důležité dodržovat několik osvědčených postupů, aby se maximalizovaly jeho výhody a minimalizovala potenciální rizika.

Prioritizujte Obsah Nad Ohybem:

Kritický obsah, který je viditelný v počátečním viewportu, by se nikdy neměl načítat pomocí lazy loadingu. Lazy loading obsahu nad ohybem může negativně ovlivnit LCP, protože zpožďuje načtení důležitých prvků.

Specifikujte Rozměry Obrázků:

Vždy zahrnujte atributy width a height (nebo použijte CSS vlastnost aspect-ratio) u tagů <img>, abyste zabránili layout shiftům při načítání načítaných obrázků pomocí techniky lazy loadingu. Layout shifty mohou být rušivé a negativně ovlivnit metriku Cumulative Layout Shift (CLS).

Používejte Zástupné Obrázky:

Doporučuje se používat zástupné obrázky, aby se zlepšil vnímaný dojem z načítání a zabránilo se skákání obsahu.

Optimalizujte Velikosti a Formáty Obrázků:

Bez ohledu na lazy loading je důležité optimalizovat obrázky (komprese, použití moderních formátů jako WebP) pro další zlepšení výkonu.

Nastavte Vhodné Prahové Hodnoty:

Pokud používáte JavaScriptový lazy loading, nastavte vhodné prahové hodnoty vzdálenosti od viewportu, aby se obrázky načetly dříve, než je uživatel skutečně uvidí, a předešlo se tak zpožděním.

Opatrně Zacházejte s Obrázky na Pozadí:

Nativní lazy loading se nevztahuje na CSS obrázky na pozadí, proto je nutné použít JavaScriptová řešení.

Zvažte Prioritu Načítání:

Pro důležité obrázky nad ohybem (například prvek LCP) zvažte použití atributu fetchpriority="high" pro upřednostnění jejich načítání. Kombinace loading="lazy" s fetchpriority="high" na stejném obrázku však stále odloží načítání, dokud se nepřiblíží k viewportu, což může potlačit efekt vysoké priority pro počáteční zobrazení.

Testujte na Různých Zařízeních a Připojeních:

Je nezbytné testovat implementaci lazy loadingu na různých zařízeních a při různých rychlostech internetového připojení (včetně pomalých připojení jako 3G), abyste zajistili konzistentní výsledek.

Potenciální Úskalí a Nevýhody

Přestože je lazy loading účinnou technikou, může mít při nesprávné implementaci i své nevýhody.

Layout Shifty:

Nesprávná implementace, zejména chybějící rozměry obrázků, může vést k layout shiftům, kdy se obsah stránky posouvá, jak se  obrázky postupně zobrazují.

Dopad na užvatele:

Pokud je lazy loading příliš agresivní nebo jsou prahové hodnoty nastaveny nesprávně, uživatelé mohou při rolování pociťovat zpoždění v načítání obsahu, což může být frustrující. Velmi rychlé rolování může někdy předběhnout načítání líně načítaného obsahu, což vede k prázdným místům nebo indikátorům načítání.

SEO Aspekty:

Pokud není lazy loading implementován správně, může to způsobit problémy s SEO, protože vyhledávače nemusí být schopny procházet a indexovat veškerý obsah. Je důležité zajistit, aby se veškerý obsah načítaný pomocí lazy loadingu stal viditelným v DOM, když je ve viewportu, protože roboti vyhledávačů obvykle nespouštějí uživatelské interakce, jako je rolování.

Problémy s Přístupností:

Pro uživatele, kteří se spoléhají na čtečky obrazovky, může lazy loading způsobit problémy, pokud se obrázky nenačtou, než k nim dojdou, nebo pokud dynamické načítání obsahu není správně oznámeno. Je nutné zajistit, aby načítané obrázky měly odpovídající alternativní text a aby dynamicky načítaný obsah byl oznámen asistenčním technologiím pomocí atributů ARIA.

Zvýšená Složitost:

Implementace lazy loadingu pomocí JavaScriptu může přidat složitost do kódu.

Potenciální Režie Výkonu:

Pokud kód JavaScriptu pro lazy loading není optimalizován, může sám o sobě způsobit určitou režii výkonu.

Lazy Loading a SEO

Pro zajištění, že lazy loading pozitivně ovlivní SEO, je klíčové dodržovat několik zásad. Vyhledávače musí být schopny objevit a indexovat veškerý obsah, včetně toho, který je načítán líně. Proto je důležité načítat obsah, když je viditelný ve viewportu, a nespoléhat se na uživatelské interakce pro načtení kritického obsahu. V případě implementace nekonečného rolování je nutné zajistit správné stránkování s unikátními a trvalými URL adresami pro každý načtený segment obsahu. Doporučuje se také používat soubory sitemap pro obrázky. Obecně platí, že Google je nyní schopen efektivně zpracovávat lazy loading implementovaný pomocí JavaScriptu.

Přístupnost

Z hlediska přístupnosti je nezbytné zajistit, aby lazy loading nebránil uživatelům s postižením v přístupu k obsahu. Všechny obrázky, včetně těch, které jsou načítány pomocí lazy loadingu, by měly mít vyplněný atribut alt s relevantním popisem. Je třeba zvážit, jak čtečky obrazovky interagují s lazy load načítaným obsahem a zajistit včasné načtení nebo správné oznámení dynamicky načítaného obsahu. Nedoporučuje se takto načítat kritické prvky uživatelského rozhraní, které uživatelé potřebují okamžitě. Pro dynamicky načítaný obsah (například prostřednictvím nekonečného rolování) se doporučuje používat ARIA live regiony pro informování čteček obrazovky. Důležité je také zajistit, aby lazy loading nenarušil navigaci pomocí klávesnice; uživatelé by měli mít možnost přístupu a interakce se vším obsahem pomocí klávesnice.

Testování a Ověření

Pro ověření správné implementace lazy loadingu je vhodné použít nástroje pro vývojáře v prohlížeči (záložka Síť), kde lze sledovat, zda se líně načítané zdroje načítají pouze tehdy, když se mají zobrazit. Dále se doporučuje použít nástroje pro testování výkonu, jako je Google PageSpeed Insights, Lighthouse a GTmetrix, k měření dopadu lazy loadingu na dobu načítání a skóre výkonu. Nástroj Kontrola adres URL v Google Search Console může pomoci zajistit, že veškerý obsah je vykreslen a indexovatelný. 

Závěr

Lazy loading představuje účinnou techniku pro optimalizaci výkonu webových stránek a zlepšení uživatelské zkušenosti. Odložením načítání nepodstatného obsahu se zrychluje počáteční načítání stránky, snižuje se spotřeba dat a potenciálně zlepšuje SEO. Při správné implementaci, s ohledem na osvědčené postupy, potenciální úskalí, SEO a přístupnost, je lazy loading cenným nástrojem pro dosažení rychlejšího a efektivnějšího webu.

Tabulka 1: Podpora atributu loading="lazy" v prohlížečích

7