Lazy-load obrázků a videí: optimalizace bez kompromisů v indexovatelnosti

Technické SEO a strukturovaná data
Eva Senková
Lazy-load obrázkov a videí: Optimalizácia bez kompromitácie indexovateľnosti

Proč řešit lazy-load bez ztráty indexovatelnosti

Lazy-loading (odložené načítání) obrázků a videí je dnes standardem pro zrychlení načítání stránek, snížení objemu přenesených dat a zlepšení Core Web Vitals. Při nesprávné implementaci však hrozí, že vyhledávače vizuální zdroje neobjeví nebo jim neporozumí, což snižuje viditelnost v Obrázcích Google a na kartě Videa, zhoršuje pochopení obsahu a může poškodit výkon ve Snippetech, službě Discover či v rozšířených výsledcích vyhledávání pro videa. Tento článek představuje techniky, postupy a kontrolní seznam, jak používat lazy-load správně a bez kompromisů v indexovatelnosti.

Indexovatelnost vizuálních prvků: jak ji vyhledávače posuzují

  • Dostupné HTML elementy: <img>, <picture>, <video>, <source>, <iframe> (pro vložený obsah).
  • Jednoznačné adresy: procházetelné URL v atributech src/srcset/poster/data-* (při JS lazy-loadu je nutný záložní obsah).
  • Kontext a textové signály: texty alt, figcaption, okolní text, nadpisy; u videa také náhledový obrázek, přepis a strukturovaná data.
  • Strukturovaná data: ImageObject a VideoObject prostřednictvím schema.org (JSON-LD) s položkami contentUrl, thumbnailUrl, uploadDate, duration.
  • Mapy webu: rozšíření pro obrázky a videa v XML mapách webu na podporu jejich objevení.

Kdy (ne)používat lazy-load: pravidlo „nad ohybem“ a LCP

  • Obrázek LCP nenačítejte líně: hlavní obrázek nad ohybem by měl mít loading="eager" (výchozí hodnota) a případně fetchpriority="high".
  • Načítejte líně vše mimo viewport: galerie, ilustrace dále v článku, vložená videa mimo první obrazovku.
  • Hraniční případy: prvky těsně pod ohybem; zvažte threshold v IntersectionObserveru nebo prefetch.

Preferovaná volba: nativní lazy-load

Moderní prohlížeče podporují nativní lazy-load pro <img> a <iframe>:

<img src="obr.jpg" alt="Popis" width="1200" height="800" loading="lazy" decoding="async">
<iframe src="https://player.example/video" title="Video" loading="lazy"></iframe>

  • Výhody: jednoduché, stabilní, bez JS a spolehlivé z hlediska indexovatelnosti (pokud je v HTML uvedeno src).
  • Nezbytné náležitosti: vždy definujte width a height, abyste předešli CLS; používejte decoding="async" pro dekódování mimo hlavní vlákno.

JS lazy-load s IntersectionObserverem (bez ztráty indexace)

Pokud potřebujete vlastní logiku (postupné zobrazení, blur-up, měření):

  1. Vypište na serveru plnohodnotný element <img> s platným atributem src (nikoli prázdným!) a loading="lazy". JS pak může zdroj „vyměnit“ za obrázek s vyšším rozlišením nebo za WebP/AVIF podle potřeby.
  2. Případně použijte data-src/data-srcset, ale přidejte záložní obsah noscript se stejným blokem <img src=…>, aby byl zdroj objevitelný i bez JS.

Příklad HTML se záložním obsahem (bez <pre>):

<img class="lazy" data-src="obr.webp" src="obr-low.jpg" alt="Popis" width="1200" height="800" loading="lazy" decoding="async">
<noscript><img src="obr.webp" alt="Popis" width="1200" height="800"></noscript>

Základní zásady:

  • Vyhněte se „přízračným“ elementům: nikdy nevypisujte pouze prázdný <div data-src>. Použijte skutečný element <img> nebo <picture>.
  • „Nekvalitní zástupný obrázek“ (LQIP/blur-up): atribut src může obsahovat malý progresivní JPEG nebo rozmazaný data URI, který později nahradíte skutečným data-src.
  • Bezpečná výměna atributů: při průniku do viewportu přesuňte data-src → src a data-srcset → srcset; pro zpětnou kompatibilitu ponechte loading="lazy".

Responzivní obrázky (picture, srcset, sizes)

Pro správný výběr formátu a šířky:

<picture>
  <source type="image/avif" srcset="obr-800.avif 800w, obr-1600.avif 1600w" sizes="(max-width: 800px) 100vw, 800px">
  <source type="image/webp" srcset="obr-800.webp 800w, obr-1600.webp 1600w" sizes="(max-width: 800px) 100vw, 800px">
  <img src="obr-800.jpg" srcset="obr-800.jpg 800w, obr-1600.jpg 1600w" sizes="(max-width: 800px) 100vw, 800px" alt="Popis" width="800" height="533" loading="lazy" decoding="async">
</picture>

  • Indexovatelnost: Google rozumí elementu <picture>. Důležité je, aby koncový element <img> obsahoval atribut alt a vygenerované hodnoty src/srcset byly prohledávatelné.
  • Preferujte moderní formáty: AVIF a WebP jako první elementy <source>, JPEG jako záložní formát v elementu <img>.

Priority načítání a Core Web Vitals

  • Obrázek LCP: fetchpriority="high", preload, pokud je kritický, a atribut loading ponechte na hodnotě „eager“.
  • CLS: vždy definujte width a height (nebo aspect-ratio v CSS). Při nahrazení zástupného obrázku neměňte rozvržení.
  • INP/TBT: vyhněte se náročným JS knihovnám pro lazy-load; preferujte nativní lazy-load nebo jednoduchý IntersectionObserver.

Lazy-load videí: HTML5 video vs. vložená videa z platforem

HTML5 video:

  • Element: <video controls preload="metadata" poster="thumb.jpg" width="1280" height="720"><source src="video.mp4" type="video/mp4"></video>
  • Lazy-load: videosoubor se celý nenačte při použití preload="metadata"; pro odložené načítání mimo viewport použijte IntersectionObserver a odložené vložení elementu <source> nebo nastavení atributu src až při průniku do viewportu, a to se záložním obsahem noscript.
  • Indexovatelnost: používejte VideoObject s položkami contentUrl (přímá adresa MP4/HLS), thumbnailUrl, name, description, uploadDate, duration.

Vložený obsah z YouTube/Vimeo:

  • Nativní varianta: <iframe loading="lazy" src="https://www.youtube.com/embed/ID" title="…" width="560" height="315" allow="accelerometer; autoplay; encrypted-media" allowfullscreen></iframe>
  • „Lite“ komponenty: pokud používáte „lite“ iframe (zástupný obsah + JS), vždy přidejte do <noscript> plnohodnotný element <iframe>, aby byl vložený obsah objevitelný a prohledávač měl přímou stopu k adrese embedUrl.
  • Strukturovaná data: VideoObject s položkami embedUrl, thumbnailUrl (statický obrázek) a description. Přidejte také transcript jako textový obsah stránky.

Záložní obsah noscript: kdy a jak

  • Obrázky: při použití JS lazy-loadu používejte <noscript><img src="plny-zdroj.jpg" alt="…" width="…" height="…" /></noscript>.
  • Videa/vložený obsah: <noscript><iframe src="…/embed/ID"></iframe></noscript> nebo přímý odkaz na stránku s videem.
  • Obsah noscript: měl by odrážet skutečný obsah, nikoli být prázdný. Tím zajistíte indexovatelnost při vypnutém JS nebo zpožděném vykreslování.

Strukturovaná data pro obrázky a videa

Přidejte JSON-LD (stručně, bez <pre>; zalomené řádky):

<script type="application/ld+json">
{
"@context":"https://schema.org","@type":"Article","image":{
"@type":"ImageObject","url":"https://example.com/obr-1600.jpg","width":1600,"height":900,"caption":"Popis obrázku"}
}
</script>

Pro video:

<script type="application/ld+json">
{ "@context":"https://schema.org","@type":"VideoObject","name":"Název",
"description":"Popis","thumbnailUrl":"https://example.com/thumb.jpg",
"uploadDate":"2025-09-01","duration":"PT2M10S",
"contentUrl":"https://cdn.example.com/video.mp4","embedUrl":"https://www.youtube.com/embed/ID" }
</script>

CDN, optimalizace a formáty

  • Transformace za běhu: CDN (Image CDN) pro generování různých šířek a formátů AVIF/WebP podle hlavičky Accept.
  • Komprese a profily: pro fotografie: AVIF/WebP; pro vektorovou grafiku: SVG (kritické ikony SVG nenačítejte líně, vložte je přímo do HTML). Pro záznamy obrazovky: MP4/H.264 nebo H.265 s přiměřeným datovým tokem + samostatný náhledový obrázek.
  • Mezipaměť: dlouhá hodnota Cache-Control s názvy opatřenými fingerprintem, pokud možno s direktivou immutable.

Časté chyby, které ničí indexovatelnost

  1. V HTML chybí src (je uvedeno pouze data-src bez noscript) – crawler bez vykreslení nic nenajde.
  2. Lazy-load obrázku LCP: výrazné zhoršení LCP a nestabilní indexace obrázků v hlavní sekci.
  3. Skryté nebo prázdné elementy <img>: CSS display:none nebo kontejner s nulovými rozměry; crawler obrázek ignoruje.
  4. URL CDN blokované v souboru robots.txt – obrázky/videa nelze procházet.
  5. Chybějící rozměry: způsobují CLS a zhoršení hodnocení.
  6. Náročný JS lazy-loader: zhoršení INP/TBT, zejména na mobilech.

Měření dopadu: metriky a protokoly

  • Core Web Vitals: obrázek LCP se načítá včas, CLS je nulové nebo nízké, INP je stabilní.
  • CrUX a RUM: skutečná data uživatelů; sledujte element LCP (obvykle <img>).
  • Search Console: pokrytí, vylepšení videa, obrázky v přehledu Prozkoumání.
  • Protokoly serveru/CDN: přístupy botů na URL obrázků/videí (Googlebot-Image/Video).
  • Pokrytí indexace médií: počet indexovaných obrázků/videí, výskyt v rozšířených výsledcích.

Testování a audit implementace

  1. Test zdrojového kódu: ověřte, zda jsou ve statickém HTML přítomné elementy <img>/<video>/<iframe> se skutečnými URL nebo záložním obsahem noscript.
  2. Vykreslení „bez JS“: spusťte stránku s vypnutým JS – zobrazí se obrázky alespoň prostřednictvím noscript?
  3. Lighthouse a web-vitals: LCP, CLS, INP; identifikujte element LCP a jeho atributy (rozměry, loading, fetchpriority).
  4. Kontrola URL: ověřte, zda Google vidí video a načítá náhledový obrázek; zkontrolujte platnost položek VideoObject/ImageObject.
  5. Robots a mezipaměť: URL CDN, obrázků a videí musí být povolené a vracet stavový kód 200; zkontrolujte správnost hlaviček.

Ukázkové postupy pro různé scénáře

Hlavní obrázek (bez lazy-loadu):
<img src="/img/hero-1600.avif" alt="Produkt v akci" width="1600" height="900" decoding="async" fetchpriority="high">

Ilustrace v článku (nativní lazy-load):
<img src="/img/chart-800.webp" alt="Porovnání metrik" width="800" height="500" loading="lazy" decoding="async">

Galerie s LQIP + výměna pomocí JS:
<img class="lazy" src="/img/gal/1-lqip.jpg" data-src="/img/gal/1-1600.avif" alt="Detail produktu" width="1200" height="800" loading="lazy" decoding="async">
<noscript><img src="/img/gal/1-1600.avif" alt="Detail produktu" width="1200" height="800"></noscript>

HTML5 video s odloženým zdrojem:
<video class="lazy-video" controls preload="metadata" poster="/thumbs/v1.jpg" width="1280" height="720"></video>
<noscript><video controls preload="metadata" poster="/thumbs/v1.jpg" width="1280" height="720"><source src="/video/v1.mp4" type="video/mp4"></video></noscript>

Vložené video z YouTube (lite + záložní varianta):
<div class="lite-yt" data-id="ID"></div>
<noscript><iframe loading="lazy" src="https://www.youtube.com/embed/ID" title="Název videa" width="560" height="315" allow="accelerometer; autoplay; encrypted-media" allowfullscreen></iframe></noscript>

Specifika platforem SPA/SSR

  • SSR/SSG je ideální: generujte elementy <img>/<video> přímo na serveru; vyhýbejte se vkládání obsahu výhradně na straně klienta.
  • Hydratace: zajistěte, aby neměnila atributy způsobem, který by vedl k CLS nebo ztrátě atributů alt/width/height.
  • Přednačítání při přechodu na jinou stránku: u galerií na následujících stránkách zvažte prefetch náhledových obrázků, nikoli obrázků v plné velikosti.

Právní aspekty a přístupnost

  • Text alt: povinný pro přístupnost a SEO; výstižný, stručný a bez nadbytečných klíčových slov.
  • Titulky/figcaption: zlepšují kontext a angažovanost; u videa doplňte titulky.
  • Autorská práva: uveďte jasný původ médií; u vloženého obsahu respektujte licence.

Kontrolní seznam: lazy-load bez ztráty indexovatelnosti

  • Nad ohybem: žádný lazy-load, pro LCP nastavte fetchpriority="high".
  • Mimo viewport: loading="lazy" pro <img>/<iframe>.
  • Při vlastním JS: vždy záložní obsah <noscript> s plnohodnotným elementem <img>/<iframe>.
  • Responzivita: srcset/sizes, <picture> s AVIF/WebP a JPEG jako záložním formátem.
  • Rozměry: width/height nebo aspect-ratio u všech vizuálních prvků.
  • Strukturovaná data: ImageObject/VideoObject s položkami contentUrl/thumbnailUrl.
  • Mapy webu: rozšíření pro obrázky a videa; URL CDN povolené v souboru robots.txt.
  • Testy: vykreslení „bez JS“, kontrola URL, Lighthouse/CrUX, protokoly botů.

Praktická doporučení pro týmy

  • Design & UX: navrhujte pro vizuální prvky pevnou plochu, aby efekt blur-up nevyvolával posuny.
  • Vývoj: standardizujte komponenty (HeroImage, ArticleImage, VideoEmbed) s povinnými atributy.
  • SEO: nastavte pravidla pro LCP, texty alt, JSON-LD, mapy webu a audity jednotlivých vydání.
  • Obsah: udržujte konzistentní popisy, názvy souborů, popisky a přepisy videí.

Lazy-load může být výhodný pro všechny z hlediska rychlosti i SEO, pokud dodržíte tři zásady: 1) nad ohybem lazy-load nepoužívejte a upřednostněte prvek LCP, 2) mimo viewport používejte nativní lazy-load (nebo jednoduchý JS), aniž byste před crawlery skrývali adresu zdroje, 3) poskytujte bohaté kontextové a strukturované signály (text alt, popisky, JSON-LD, mapy webu). Taková implementace minimalizuje riziko ztráty indexovatelnosti a maximalizuje organický výkon i spokojenost uživatelů.