Lazy loading

Co je lazy loading?

Konkrétně lazy loading je technika, programovací designový vzor aplikovaný na weby, ve kterém se prvky a zdroje nenačítají celé, ale spouštějí se za běhu nebo na vyžádání podle toho, jak je uživatel používá, čímž vzniká „odložené načítání" obsahu.

Zdroje jsou tak optimalizované a obsah jako text, videa, obrázky a další materiály se načítá jen tehdy, kdy je vyžadován, čímž se zlepšuje rychlost, využití paměti a procesoru, responzivita i doby načítání. To kontrastuje s plným načítáním, kdy se stránka nebo web nahrává celý, i když uživatel každý prvek nepoužívá.

Obecné výhody lazy loadingu

Protože hlavním účelem lazy loadingu je optimalizovat načítání prvků jen tehdy, když se používají, existuje několik výhod, které lze shrnout do:

• ›Rychlost zobrazení hlavních prvků webu.
• ›Výrazné zlepšení uživatelské zkušenosti webu (UX).
• ›Zlepšení výkonu na mobilních zařízeních, zejména když mají omezené zdroje síťového připojení; aktivní lazy loading umožní procházet stránky, které by za podmínek špatného pokrytí jinak byly nemožné.
• ›Celková optimalizace zdrojů jako CPU, RAM a baterie na mobilních zařízeních.
• ›Zvýšení doby setrvání na našich stránkách díky absenci problémů s načítáním se nepřímo promítá do zlepšení umístění.
• ›Snížení bounce rate.

Stejně tak má programovací přístup lazy loading výhody a novinky z technického pohledu:

• ›Lazy loading je plně kompatibilní s JS frameworky jako React a Angular i s CMS platformami jako WordPress. Ve skutečnosti bylo nedávno oznámeno, že lazy loading u obrázků bude ve výchozím nastavení zahrnut ve WordPressu verze 5.5.
• ›Díky API IntersectionObserver neskrývá obrázky před vyhledávači.
• ›Podpora více typů obsahu, jako jsou obrázky a responsive zdroje.
• ›Umožňuje indexovat obrázky webu, což je pro SEO zásadní.
• ›Je to 100% SEO friendly zdroj, protože přímo i nepřímo zlepšuje mnoho klíčových bodů v SEO.

Jak implementovat lazy loading ve WordPressu?

Pokud máme web na WordPressu, měli bychom vědět, že máme velkou výhodu, protože pro implementaci lazy loadingu na stránkách existuje mnoho řešení, aby se načítaly mnohem rychleji. Tento screenshot níže ukazuje některá možná řešení v plugin repozitáři:

Pohled na nejvýraznější pluginy WordPressu pro implementaci lazy loadingu.

K provedení této implementace máme několik možností:

• ›Vybrat konkrétní plugin lazy loadingu jako „Lazy loader", „a3 lazy load"…
• ›Vybrat plugin pro optimalizaci webu jako „WP Rocket", který už tuto možnost ve výchozím nastavení zahrnuje spolu s dalšími vylepšeními.

SEO aspekty související s lazy loadingem

Hlavní misi odloženého načítání a klíčové výhody již známe a víme, jak ovlivňuje zlepšení výkonu naší stránky, našeho UX a SEO.

Nyní je třeba odložené načítání používat chytře, abychom z něj vytěžili maximum, protože při nesprávném použití by mohlo způsobit opačný efekt.

Například lazy loading využívá cache pro zlepšení rychlosti, takže pokud se v ní uloží příliš obsahu, mohou nastat zpomalení nebo chyby, pokud není implementován správně, dokonce může bránit Googlu indexovat stránky a prvky, což může mít vážný dopad na umístění webu. Některé tipy:

• ›Optimalizujte cache a používejte ji chytře.
• ›Použijte Google Search Console k ověření obsahu, který Google na webu crawluje.
• ›Přidejte ALT text, aby byl každý obrázek pro Google indexovatelný.
• ›Vždy používejte API IntersectionObserver.
• ›Přidejte atribut loading k iframe nebo vloženému obsahu z jiných stránek či zdrojů, díky funkci Blink LazyLoad v prohlížeči Chrome. Platí pro obrázky, fotky, videa, text a další obsah.

Lazy loading a UX

Pokud jde o web, technická i obecná optimalizace pro nabídku dobré uživatelské zkušenosti (UX) je nezbytná, ohledně dob načítání, responzivity, využití zdrojů a obecného chování. Pokud web není moc responzivní, jeho bounce rate bude vysoký, a pokud nabízí špatnou uživatelskou zkušenost, ovlivní to návštěvnost, viditelnost a dokonce i SEO.

S odloženým načítáním je cílem dramaticky zlepšit UX webu jediným krokem tak, že se obsah načítá postupně a tehdy, kdy ho uživatel při scrollování stránky vyžaduje, ať už jde o obrázky nebo text, čímž se optimalizuje využití zdrojů ve srovnání s načítáním celé platformy, která pravděpodobně zobrazuje prvky, jež pro uživatele nejsou důležité.

Nativní lazy loading (HTML) v Chromu

Jako důkaz důležitosti, kterou Google UX přikládá, je od roku 2020 a počínaje verzí 75 jeho prohlížeče Chrome možné přidávat nativní lazy loading na tagy HTML stránek a jejich multimediální obsah jako fotky, videa a další.

Tímto způsobem, díky automatickému přidání atributu HTML lazy loadingu, prohlížeč Chrome pochopí, že obsah stránky se načte podle navigace uživatele, a ne najednou, čímž se zlepší rychlost a responzivita. K použití se přidává atribut loading s hodnotou lazy ke každému tagu vizuálních a multimediálních zdrojů a iframů:

<img src="image.jpg" loading="lazy" alt="..." />

<iframe src="video-player.html" loading="lazy"></iframe> Tento zdroj lze použít jak u obrázků, které představují velkou část informací, jež musí prohlížeč stáhnout, tak u iframů; připomeňme, že je používáme k vkládání externích zdrojů do našeho webu.

Je důležité vyzdvihnout použití u iframů, protože ty mohou představovat kritická místa načítání na našem webu.

Na minus, nativní lazy loading je kompatibilní pouze s Chromem, i když jeho použití lze implementovat v jiných prohlížečích přes kompatibilní knihovny v případě, že podpora chybí, jak se to děje u Mozilla Firefox.

Použití lazy loadingu

Jak jsme již komentovali, lazy loading se zaměřuje na zpoždění načítání prvků stránky kvůli optimalizaci její odezvy. V tomto smyslu se použití nástroje zaměřuje na všechny vizuální zdroje, i když důraz je kladen na obrázky, videa a iframy, které mohou zahrnovat dokumenty a další soubory, vše skrze modifikaci tagů a zařazení atributu loading s hodnotou lazy, čímž se optimalizuje obecná rychlost webu, i když má těžké prvky nebo velký multimediální obsah.

Máte otázky k lazy loadingu nebo ho chcete ve svém projektu implementovat? Jsme vám k dispozici!

Dokumentace a reference:

• ›Lazy loading pro obrázky
• ›Lazy loading pro videa
• ›Native lazy loading