Lazy loading

Co je lazy loading?

Lazy loading neboli lenivé načítání je technika optimalizace webu, která načítá obsah (obrázky, videa, iframy) až ve chvíli, kdy se uživatel dostane scrollováním k danému prvku. Místo toho, aby se všechny obrázky na stránce stahovaly hned při prvním načtení, lazy loading odkládá jejich načtení na později – až když jsou skutečně potřeba. Představte si to jako restauraci, kde vám servírka nepřinese všechny chody najednou, ale postupně podle toho, jak jíte.

V praxi to znamená, že když návštěvník otevře váš web, prohlížeč stáhne pouze obsah viditelný na obrazovce (tzv. above the fold). Obrázky a další zdroje umístěné níže na stránce se začnou načítat až ve chvíli, kdy se uživatel scrolluje dolů a blíží se k nim. Tato technika výrazně zrychluje počáteční načtení stránky, snižuje datovou spotřebu a zlepšuje uživatelskou zkušenost. Pro většinu webů s větším množstvím obrázků je lazy loading dnes standardem, který doporučuje i Google v rámci optimalizace výkonu.

Lazy loading je důležitý zejména pro mobily a pomalá připojení. Když má stránka například 50 obrázků a každý má průměrně 200 KB, bez lazy loadingu by uživatel musel stáhnout 10 MB dat ještě před tím, než vůbec začne stránku používat. S lazy loadingem se načte pouze to, co vidí – třeba jen 5 obrázků o celkové velikosti 1 MB. To je rozdíl mezi stránkou, která se načte za 1 sekundu, a stránkou, která trvá 8 sekund. A právě tyto sekundy rozhodují o tom, zda návštěvník zůstane nebo odejde ke konkurenci.

Jak lazy loading funguje?

Moderní lazy loading funguje pomocí Intersection Observer API v JavaScriptu nebo nativně pomocí atributu loading="lazy" v HTML. Prohlížeč sleduje pozici prvků na stránce a když se obrázek nebo video dostane do viditelné oblasti (viewport) nebo se k ní blíží, spustí se jeho načítání. Celý proces probíhá automaticky na pozadí bez zásahu uživatele.

Nativní lazy loading v HTML je dnes nejjednodušší a nejčistší řešení. Stačí přidat atribut loading="lazy" k elementu <img> nebo <iframe> a prohlížeč se postará o zbytek. Není potřeba žádný JavaScript. Tuto metodu podporují všechny moderní prohlížeče včetně Chrome, Firefox, Safari a Edge.

Příklad implementace nativního lazy loadingu:

<img src="obrazek.jpg" alt="Popis obrázku" loading="lazy" width="800" height="600">

Pro starší prohlížeče nebo pokročilejší kontrolu se používá JavaScript knihovna založená na Intersection Observer API. Tento přístup umožňuje přizpůsobit vzdálenost od viewportu, kdy se má obrázek začít načítat, nebo přidat efekty jako fade-in animace. Knihovny jako lazysizes nebo vanilla-lazyload nabízejí fallback pro starší prohlížeče a pokročilé možnosti konfigurace.

Důležitou součástí správné implementace lazy loadingu je použití placeholder obrázků nebo nízkokvalitních verzí (LQIP – Low Quality Image Placeholders). Místo prázdného prostoru se zobrazí rozmazaná verze obrázku nebo barevný gradient, který uživateli naznačí, že se tam nachází obrázek a brzy se načte. To výrazně zlepšuje vnímání rychlosti a zabraňuje "poskakování" obsahu při postupném načítání.

Výhody lazy loadingu pro výkon webu

• Rychlejší počáteční načtení stránky

Lazy loading výrazně snižuje množství dat, která se musí stáhnout při prvním načtení. Místo desítek megabytů obrázků se načte jen to, co je viditelné. To znamená rychlejší First Contentful Paint (FCP) a lepší celkovou rychlost načítání webu. Návštěvník vidí obsah o sekundy dříve, což výrazně snižuje míru okamžitého opuštění stránky.

• Lepší Core Web Vitals

Google hodnotí rychlost webu pomocí metrik Core Web Vitals, které přímo ovlivňují pozice ve vyhledávání. Lazy loading zlepšuje zejména LCP (Largest Contentful Paint) – metriku měřící, jak rychle se načte hlavní obsah stránky. Když se nenačítají všechny obrázky najednou, prohlížeč má více zdrojů pro rychlé zobrazení důležitých elementů.

• Úspora datové spotřeby

Uživatelé často nescrollují až na konec dlouhých stránek. Bez lazy loadingu by se zbytečně stahovaly stovky kilobytů nebo megabytů dat za obrázky, které nikdy neuvidí. Lazy loading zajišťuje, že se stáhne pouze to, co uživatel skutečně potřebuje. To je zásadní zejména pro mobilní uživatele s omezeným datovým tarifem.

• Nižší zátěž serveru

Když se nenačítají všechny obrázky najednou, klesá i počet souběžných HTTP požadavků na server. To snižuje zátěž serveru a šetří bandwith (datový přenos). Pro weby s vysokou návštěvností to znamená nižší náklady na hosting a lepší schopnost zvládat návštěvnické špičky. V kombinaci s CDN a cachováním dosáhnete maximálního výkonu.

• Lepší uživatelská zkušenost na mobilech

Na mobilních zařízeních s pomalejším připojením (3G, 4G) je rozdíl ještě výraznější. Stránka bez lazy loadingu může trvat i 10+ sekund, zatímco se správně implementovaným lazy loadingem se načte za 2-3 sekundy. Mobilní uživatelé jsou ještě méně trpěliví než uživatelé na počítači – každá sekunda zpoždění znamená vyšší míru odchodovosti.

• Menší ekologická stopa

Méně přenesených dat znamená nižší spotřebu energie serverů i uživatelských zařízení. V době, kdy environmentální dopad internetu stoupá, je lazy loading jeden ze způsobů, jak udělat web udržitelnější. Každý megabajt ušetřených dat znamená menší uhlíkovou stopu vašeho webu.

Jak implementovat lazy loading

Nejjednodušší způsob je použití nativního HTML atributu loading="lazy". Tuto metodu podporují všechny moderní prohlížeče a nevyžaduje žádný JavaScript. Stačí přidat atribut k obrázku nebo iframe a prohlížeč se postará o zbytek:

<img src="product-image.jpg" alt="Produkt" loading="lazy" width="600" height="400">

<iframe src="https://www.youtube.com/embed/..." loading="lazy"></iframe>

Důležité je vždy specifikovat atributy width a height u obrázků. To prohlížeči umožní rezervovat správný prostor ještě před načtením obrázku a zabraňuje poskakování obsahu (tzv. layout shift), které negativně ovlivňuje metriku CLS (Cumulative Layout Shift) v Core Web Vitals.

Pro WordPress weby je lazy loading od verze 5.5 automaticky zapnutý pro všechny obrázky přidané přes media knihovnu. Není potřeba instalovat žádný plugin. Pokud používáte starší verzi WordPressu nebo chcete pokročilejší kontrolu, můžete použít plugin jako a3 Lazy Load nebo Lazy Load by WP Rocket.

Pro pokročilé použití nebo podporu starších prohlížečů můžete implementovat lazy loading pomocí JavaScript knihovny. Oblíbené řešení je knihovna lazysizes:

<!-- Přidejte lazysizes knihovnu -->
<script src="lazysizes.min.js" async></script>

<!-- Použijte třídu lazyload a data-src místo src -->
<img data-src="obrazek.jpg" class="lazyload" alt="Popis">

Při implementaci lazy loadingu je důležité NEVYNECHÁVAT obrázky above the fold (viditelné při prvním načtení bez scrollování). Tyto obrázky by měly mít buď atribut loading="eager" nebo žádný lazy loading atribut. Pokud by se lazy loadoval i hlavní hero obrázek nebo logo, zpomalilo by to vnímání rychlosti stránky.

Pro obrázky na pozadí definované v CSS můžete použít kombinaci tříd a JavaScriptu, který přidá třídu s pozadím až ve chvíli, kdy je element viditelný:

/* CSS */
.hero-section.loaded {
    background-image: url('hero-background.jpg');
}

/* JavaScript s Intersection Observer */
const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('loaded');
        }
    });
});

observer.observe(document.querySelector('.hero-section'));

Kdy používat a kdy NE používat lazy loading

Kdy POUŽÍVAT lazy loading:

• E-shopy s katalogy produktů

Stránky s desítkami nebo stovkami produktových obrázků jsou ideálním kandidátem na lazy loading. Uživatel stejně neuvidí všechny produkty najednou, takže načítat je všechny hned je zbytečné plýtvání.

• Blogy a dlouhé články

Články s mnoha obrázky, ilustracemi nebo infografikami výrazně profitují z lazy loadingu. Uživatel čte postupně a obrázky se načítají synchronně se scrollováním.

• Galerie a portfolia

Fotogalerie s desítkami high-res obrázků by bez lazy loadingu byly extrémně pomalé. Lazy loading umožňuje zobrazit tisíce obrázků bez dopadu na výkon.

• Landing pages s vícero sekcemi

Dlouhé landing pages s několika sekcemi, kde každá sekce obsahuje obrázky nebo videa, jsou skvělý případ pro lazy loading – zvlášť když většina uživatelů nescrolluje až úplně dolů.

• Stránky s vloženými videi

YouTube, Vimeo nebo jiná vložená videa (iframe) můžou významně zpomalit načítání. Lazy loading iframe elementů výrazně zlepší rychlost prvotního zobrazení stránky.

Kdy NE používat lazy loading:

• Hero obrázky a obsah above the fold

Nikdy nepoužívejte lazy loading na obsah viditelný při prvním načtení stránky. Hero obrázek, logo, hlavní navigace – tyto prvky by se měly načíst okamžitě. Lazy loading by je zpomalil a zhoršil uživatelskou zkušenost.

• Malé ikonky a UI prvky

Lazy loading drobných ikon, šipek nebo dekorativních prvků nemá smysl. Tyto obrázky jsou obvykle optimalizované na několik KB a lazy loading by přidal zbytečnou komplexitu bez výhody.

• Stránky s málo obrázky

Pokud máte stránku s 3-5 obrázky, lazy loading pravděpodobně nepřinese měřitelné zlepšení. Režie na implementaci může převážit nad výhodami.

• Kritické prvky pro SEO

Buďte opatrní s lazy loadingem u obrázků, které jsou důležité pro SEO (produktové fotky, featured images článků). Google je sice umí indexovat, ale je lepší zajistit, aby byly snadno dostupné.

Lazy loading a SEO – Co říká Google?

Google oficiálně podporuje lazy loading a doporučuje ho jako součást optimalizace výkonu webu. Googlebot umí správně implementovaný lazy loading zpracovat a indexovat obrázky, které se načítají dynamicky. Je však důležité implementovat lazy loading správně, aby nedošlo k negativnímu dopadu na SEO.

Podle doporučení Googlu byste měli používat nativní HTML lazy loading (loading="lazy"), protože Googlebot ho plně podporuje a nevyžaduje JavaScript. Pokud používáte JavaScript řešení, musíte zajistit, že obrázky jsou dostupné i při deaktivovaném JavaScriptu nebo použít server-side rendering.

Zásadní je nezapomenout na atribut src u obrázků. Některé staré lazy loading implementace používaly pouze data-src bez src, což způsobovalo, že Googlebot obrázky neviděl. Moderní přístup je mít src s placeholder nebo low-quality verzí a data-src s full-res verzí.

Lazy loading pozitivně ovlivňuje SEO nepřímo prostřednictvím zlepšení Core Web Vitals. Rychlejší načítání stránky (LCP), menší layout shift (CLS) a rychlejší interaktivita (INP) jsou všechny faktory, které Google zohledňuje při rankingu. Weby s lepšími Core Web Vitals mají tendenci dosahovat vyšších pozic, zejména v mobilním vyhledávání.

Pro e-shopy a produktové stránky je důležité správně strukturovat data pomocí Schema.org markup. Pokud používáte lazy loading na produktových obrázcích, ujistěte se, že URL obrázku je stále přítomná ve strukturovaných datech (JSON-LD), aby Google věděl, který obrázek zobrazit ve rich results.

Google Search Console vám může pomoci identifikovat problémy s lazy loadingem. V sekci "Core Web Vitals" uvidíte, jak lazy loading ovlivňuje rychlost vašeho webu. Pokud implementace není správná, může se projevit zhoršením LCP na stránkách s lazy loadovanými obrázky above the fold.

Důležité pravidlo: Nikdy nepoužívejte lazy loading na hlavním obrázku stránky (největší obrázek above the fold, obvykle hero image nebo hlavní produktová fotka). Tento obrázek je často klíčový pro LCP metriku a lazy loading by ho zpomalil. Použijte buď loading="eager" nebo vůbec žádný loading atribut.

Související pojmy