Lazy-load SEO

Prečo riešiť lazy-load bez straty indexovateľnosti

Lazy-loading (odložené načítanie) obrázkov a videí je dnes štandard pre zrýchlenie načítania stránok, zníženie prenosu dát a zlepšenie Core Web Vitals. Pri nesprávnej implementácii však hrozí, že vyhľadávače neobjavia alebo nepochopia vizuálne zdroje, čo znižuje viditeľnosť v Obrázkoch/Vo Videách Google, zhoršuje pochopenie obsahu a môže poškodiť výkon v Snippetoch, Discover či vo video rich results. Tento článok predstavuje techniky, vzory a kontrolný zoznam, ako robiť lazy-load správne, bez kompromisov v indexovateľnosti.

Indexovateľnosť vizuálov: ako ju vyhľadávače posudzujú

• Dostupné HTML elementy: <img>, <picture>, <video>, <source>, <iframe> (pre embedy).
• Jednoznačné adresy: crawlable URL v atribútoch src/srcset/poster/data-* (pri JS lazyloade nutný fallback).
• Kontext a textové signály: alt texty, figcaption, okolitý text, nadpisy; pre video aj thumbnail, prepis a štruktúrované dáta.
• Štruktúrované dáta: ImageObject a VideoObject via schema.org (JSON-LD) s contentUrl, thumbnailUrl, uploadDate, duration.
• Sitemapy: image a video rozšírenia v XML sitemapách na podporu objavenia.

Kedy (ne)lazy-loadovať: pravidlo „nad záhybom“ a LCP

• Nelazy-loadujte LCP obrázok: hero obrázok nad záhybom by mal mať loading="eager" (default) a voliteľne fetchpriority="high".
• Lazy-loadujte všetko mimo viewportu: galérie, článkové ilustrácie ďalej v texte, embedované videá mimo prvej obrazovky.
• Stredná hranica: prvky tesne pod záhybom; zvážte threshold v IntersectionObserver alebo prefetch.

Preferovaná voľba: natívny lazy-load

Moderné prehliadače podporujú natívny lazy-load pre <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, spoľahlivé pre indexovateľnosť (ak src existuje v HTML).
• Náležitosti: vždy definujte width a height pre prevenciu CLS; používajte decoding="async" pre off-main-thread dekódovanie.

JS lazy-load s IntersectionObserverom (bez straty indexácie)

Ak potrebujete vlastnú logiku (fade-in, blur-up, meranie):

1. Serverom vypíšte plnohodnotný <img> s validným src (nie prázdne!) a loading="lazy". JS potom môže zdroj „vymeniť“ za väčšie rozlíšenie alebo WebP/AVIF podľa potreby.
2. Alternatívne použite data-src/data-srcset, ale pridajte noscript fallback s identickým <img src=…> blokom, aby bol zdroj objaviteľný aj bez JS.

Príklad HTML s fallbackom (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>

Kľúčové zásady:

• Vyhnite sa „phantom“ elementom: nikdy nevypisujte iba prázdny <div data-src>. Použite reálny <img> alebo <picture>.
• „Low-quality placeholder“ (LQIP/blur-up): src môže byť malý progresívny JPEG/blur data-uri, ktorý neskôr nahradíte skutočným data-src.
• Bezpečná výmena atribútov: pri intersecte presuňte data-src → src a data-srcset → srcset, nechajte loading="lazy" pre spätnú kompatibilitu.

Responzívne obrázky (picture, srcset, sizes)

Pre správnu voľbu formátu a šírky:

<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>

• Indexovateľnosť: Google rozumie <picture>. Dôležité je, aby finálny <img> obsahoval alt a vygenerované src/srcset boli crawlable.
• Preferujte moderné formáty: AVIF a WebP ako prvé <source>, JPEG ako fallback v <img>.

Priority načítania a Core Web Vitals

• LCP obrázok: fetchpriority="high", preload ak je kritický, loading ponechať „eager“.
• CLS: vždy definujte width a height (alebo aspect-ratio v CSS). Nemeníte rozloženie pri nahradení placeholderu.
• INP/TBT: vyhnite sa ťažkým JS lazyload knižniciam; preferujte natívny lazy-load alebo ľahký IntersectionObserver.

Lazy-load videí: HTML5 video vs. platformové embedy

HTML5 video:

• Element: <video controls preload="metadata" poster="thumb.jpg" width="1280" height="720"><source src="video.mp4" type="video/mp4"></video>
• Lazy-load: video súbor sa nenačíta celé s preload="metadata"; na odložené načítanie mimo viewportu použite IntersectionObserver a odložené vkladanie <source> alebo nastavenie src až pri intersecte s noscript fallbackom.
• Indexovateľnosť: používajte VideoObject so contentUrl (priamy MP4/HLS), thumbnailUrl, name, description, uploadDate, duration.

YouTube/Vimeo embed:

• Natívne: <iframe loading="lazy" src="https://www.youtube.com/embed/ID" title="…" width="560" height="315" allow="accelerometer; autoplay; encrypted-media" allowfullscreen></iframe>
• „Lite“ komponenty: ak používate „lite“ iframe (placeholder + JS), vždy pridajte <noscript> s plným <iframe>, aby bol embed objaviteľný a prehľadávač mal priamu stopu na embedUrl.
• Štruktúrované dáta: VideoObject s embedUrl, thumbnailUrl (statický obrázok), description. Pridajte aj transcript ako textový obsah stránky.

Noscript fallbacky: kedy a ako

• Obrázky: pri JS lazyloadoch používajte <noscript><img src="plny-zdroj.jpg" alt="…" width="…" height="…" /></noscript>.
• Videá/embedy: <noscript><iframe src="…/embed/ID"></iframe></noscript> alebo priamy odkaz na video stránku.
• Obsah v noscript: mal by zrkadliť reálny obsah, nie byť prázdny. Zabezpečujete tým indexovateľnosť pri vypnutom JS alebo oneskorenom renderi.

Štruktúrované dáta pre obrázky a videá

Pridajte JSON-LD (skrátka, bez <pre>; zalomené riadky):

<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ázka"}
}
</script>

Pre video:

<script type="application/ld+json">
{ "@context":"https://schema.org","@type":"VideoObject","name":"Názov",
"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, optimalizácia a formáty

• On-the-fly transformácie: CDN (Image CDN) na generovanie šírok a formátov AVIF/WebP podľa Accept hlavičky.
• Komprese a profily: pre fotografie: AVIF/WebP; pre vektorovú grafiku: SVG (nelazy-loadujte kritické SVG ikony, vložte inline). Pre screencasty: MP4/H.264 alebo H.265 s rozumným bitrate, + samostatný thumbnail.
• Cache: dlhá Cache-Control s fingerprintovaním názvov, immutable ak je to možné.

Časté chyby, ktoré zabíjajú indexovateľnosť

1. Žiadny src v HTML (iba data-src bez noscript) – crawler bez renderu nič nenájde.
2. Lazy-load LCP obrázka: dramatické zhoršenie LCP a nestabilná indexácia obrázkov v hero sekcii.
3. Skryté či prázdne <img>: CSS display:none alebo zero-size wrapper; crawler obrázok ignoruje.
4. Blokované CDN URL v robots.txt – obrázky/videá nie sú crawlable.
5. Chýbajúce rozmery: spôsobuje CLS a degradáciu hodnotenia.
6. Ťažký JS lazyloader: zhoršenie INP/TBT, najmä na mobiloch.

Meranie dopadu: metriky a logy

• Core Web Vitals: LCP obrázok načítaný včas, nulové alebo nízke CLS, stabilný INP.
• CrUX a RUM: reálne dáta používateľov; sledujte LCP element (typicky <img>).
• Search Console: Pokrytie, Vylepšenia videa, Obrázky v Skúmaní.
• Logy servera/CDN: hity na obrázkové/video URL z botov (Googlebot-Image/Video).
• Index Coverage pre médiá: počet indexovaných obrázkov/videí, výskyt v rich výsledkoch.

Testovanie a audit implementácie

1. View-source test: Skontrolujte, či sú v statickom HTML prítomné elementy <img>/<video>/<iframe> s reálnymi URL alebo noscript fallbackmi.
2. „Bez JS“ render: Spustite stránku s vypnutým JS – zobrazia sa obrázky aspoň cez noscript?
3. Lighthouse a web-vitals: LCP, CLS, INP; identifikujte LCP element a jeho atribúty (rozmery, loading, fetchpriority).
4. URL Inspection: Overte, či Google vidí video a vyťahuje thumbnail; validujte VideoObject/ImageObject.
5. Robots a cache: CDN/obrázkové/videá URL musia byť povolené a návratový kód 200; správne hlavičky.

Vzorové vzory pre rôzne scenáre

Hero (bez lazy-loadu):
<img src="/img/hero-1600.avif" alt="Produkt v akcii" width="1600" height="900" decoding="async" fetchpriority="high">

Ilustrácia v článku (natívny lazy-load):
<img src="/img/chart-800.webp" alt="Porovnanie metrík" width="800" height="500" loading="lazy" decoding="async">

Galerie s LQIP + JS výmena:
<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 zdrojom:
<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>

YouTube embed (lite + fallback):
<div class="lite-yt" data-id="ID"></div>
<noscript><iframe loading="lazy" src="https://www.youtube.com/embed/ID" title="Názov videa" width="560" height="315" allow="accelerometer; autoplay; encrypted-media" allowfullscreen></iframe></noscript>

Špecifiká SPA/SSR platforiem

• SSR/SSG je ideál: vygenerujte <img>/<video> priamo na serveri; vyhýbajte sa čisto klientskemu vkladaniu.
• Hydratácia: nech nezamieňa atribúty tak, že dôjde k CLS alebo strate alt/width/height.
• Route prefetch: pre galérie na nasledujúcich stránkach zvážte prefetch náhľadov, nie plných zdrojov.

Právne a dostupnostné aspekty

• Alt text: povinný pre prístupnosť a SEO; opisný, stručný, bez kľúčových slov navyše.
• Captions/figcaption: zlepšuje kontext a angažovanosť; pri videu doplňte titulky.
• Autorské práva: jasný pôvod médií; pri embedoch rešpektujte licencie.

Kontrolný zoznam: lazy-load bez straty indexovateľnosti

• Nad záhybom: žiadny lazy-load, fetchpriority="high" pre LCP.
• Mimo viewportu: loading="lazy" pre <img>/<iframe>.
• Pri vlastnom JS: vždy <noscript> fallback s plným <img>/<iframe>.
• Responzivita: srcset/sizes, <picture> s AVIF/WebP + JPEG fallback.
• Rozmery: width/height alebo aspect-ratio na všetkých vizuáloch.
• Štruktúrované dáta: ImageObject/VideoObject s contentUrl/thumbnailUrl.
• Sitemapy: image & video rozšírenia; CDN URL povolené v robots.txt.
• Testy: „bez JS“ render, URL Inspection, Lighthouse/CrUX, logy botov.

Praktické odporúčania pre tímy

• Design & UX: navrhujte pevnú plochu pre vizuály, aby blur-up nevyvolal posuny.
• Vývoj: štandardizujte komponenty (HeroImage, ArticleImage, VideoEmbed) s povinnými atribútmi.
• SEO: nastavte pravidlá pre LCP, alt texty, JSON-LD, sitemapy a audity release-ov.
• Obsah: udržiavajte konzistentné popisy, názvoslovie súborov, captions a prepisy videí.

Lazy-load môže byť výhra-výhra pre rýchlosť aj SEO, ak dodržíte tri princípy: 1) nad záhybom nelazy-loadujte a dajte prioritu LCP prvku, 2) mimo viewportu používajte natívny lazy-load (alebo ľahký JS) bez skrývania adresy zdroja pred crawlermi, 3) poskytnite bohaté kontextové a štruktúrované signály (alt, captions, JSON-LD, sitemapy). Takáto implementácia minimalizuje riziko straty indexovateľnosti a maximalizuje výkon v organiku aj používateľskú spokojnosť.