Ovlivňuje lazy loading viditelnost pro AI? Smíšené signály

Rozepíšu jednotlivé typy lazy loadingu.

1. Nativní lazy loading obrázků (loading=“lazy”):

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

Dopad: Obecně v pořádku pro AI crawlery.

• URL obrázku je v HTML
• Crawlery vidí odkaz
• Nemusí obrázek “vykreslovat”, aby věděly, že existuje

2. Lazy loading obrázků pomocí JavaScriptu:

<img data-src="image.jpg" class="lazy">
// JS zamění data-src za src při scrollování

Dopad: Potenciálně problémový.

• Bez spuštění JS je src prázdné
• Crawlery nemusí obrázek vidět
• Používejte raději loading=“lazy”

3. Intersection Observer pro obsah:

observer.observe(element);
// Načítá obsah, když element vstoupí do viewportu

Dopad: Pro AI problémový.

• AI crawlery nemají “viewport”
• Nescrollují ani nespouští intersection
• Obsah se nemusí nikdy načíst

4. Nekonečný scroll:

Dopad: Velmi problematické.

• Obsah za první stránkou je neviditelný
• Crawlery nescrollují, aby načetly další obsah
• Vidí jen první stránku obsahu

Obecné pravidlo:

Pokud načtení obsahu vyžaduje interakci uživatele nebo přítomnost ve viewportu, AI crawlery ho pravděpodobně neuvidí.

Kompromis mezi výkonem a viditelností pro AI.

Proč používáme lazy loading:

• Rychlejší načtení stránky
• Lepší Core Web Vitals
• Méně přenesených dat pro uživatele

Napětí:

• Co je dobré pro výkon, může škodit viditelnosti pro AI
• Zejména lazy loading závislý na JavaScriptu

Řešení:

U obrázků: Nativní lazy loading dává obě výhody. Používejte ho.

U obsahu: Serverově renderujte kritický obsah. Lazy load pouze:

• Dodatečný obsah pod přehybem
• Doporučení, která nemají být cílem citací
• UI vylepšení, která nemají vliv na indexovatelný obsah

Priorita:

Určete, jaký obsah chcete, aby AI citovala. Tento obsah musí být v počátečním HTML. Vše ostatní lze optimalizovat na výkon.

Praktický příklad:

Stránka článku:

• Text článku: Vždy v HTML (cílový pro citace)
• Související články: Můžou být lazy loaded (ne cílový pro citace)
• Komentáře: Můžou být lazy loaded (ne cílový)
• Sdílecí tlačítka: Můžou být lazy loaded (pouze UI)

Co víme o chování AI crawlerů.

GPTBot:

• Základní HTTP požadavky
• Minimální spouštění JavaScriptu
• Sleduje odkazy, které vidí v HTML

ClaudeBot:

• Podobný jako GPTBot
• Zaměřený na HTML crawling
• Omezená práce s dynamickým obsahem

PerplexityBot:

• Sofistikovanější
• Nějaké zpracování JavaScriptu
• Stále hlavně HTML-fokusovaný

Společné pro všechny:

• Nescrollují
• Nesimulují interakci uživatele
• Mají časové limity na zpracování
• Upřednostňují HTML obsah

Důsledek:

Obsah, který vyžaduje:

• Scrollování
• Kliknutí
• Dlouhé spouštění JavaScriptu
• Přítomnost ve viewportu

…je pro tyto crawlery pravděpodobně neviditelný.

Testovací strategie:

1. Zobrazte zdrojový kód stránky (ne inspektor)
2. Je váš klíčový obsah přítomen?
3. Pokud ne, crawlery ho nevidí

Jednoduché, ale jednoznačné.

Doporučení pro implementaci.

Pro nové implementace:

Obrázky:

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

Hotovo. Nativní je nejlepší.

Sekce obsahu:

<div class="content">
  <!-- Plný obsah v HTML -->
  Kompletní text článku zde
</div>

Lazy loadujte jen vizuální vylepšení, ne obsah.

Seznamy/mřížky:

<ul class="items">
  <li>Položka 1</li>
  <li>Položka 2</li>
  <!-- Alespoň 10–20 položek v HTML -->
</ul>
<a href="?page=2">Načíst další</a>

Počáteční položky v HTML, další přes stránkování.

Pro stávající implementace:

Pokud máte lazy loading závislý na JS:

1. Zkontrolujte, jaký obsah je tím ovlivněn
2. Upřednostněte klíčové cíle pro citace
3. Ty přesunout na serverově renderované
4. Lazy loading ponechejte pro méně důležitý obsah

Kontrola:

Po provedených změnách:

curl -s https://vasestranka.cz/page | grep "fráze z kritického obsahu"

Pokud je tam, je to v pořádku.

Monitorovací pohled.

Jak zjistit, jestli vám lazy loading škodí:

1. Sledujte data z Am I Cited

• Jsou stránky s lazy loaded obsahem méně citované?
• Porovnejte podobné stránky s různou implementací

2. Ruční testování

• Zeptejte se AI na obsah v lazy loaded sekcích
• Zná tuto informaci?
• Pokud ne, obsah může být neviditelný

3. Serverové logy

• Jak AI crawlery interagují s vaším webem?
• Získávají kompletní odpovědi?

Co jsme zaznamenali:

Weby s výrazným lazy loadingem (hlavně nekonečný scroll):

• 40–60 % obsahu méně viditelné pro AI
• Nižší míra citací tohoto obsahu
• Po implementaci SSR/paginace se situace zlepšila

Weby pouze s lazy loadingem obrázků:

• Nevýznamný dopad
• Nativní loading=“lazy” funguje dobře

Doporučení:

Provádějte audit, testujte, sledujte. Nepředpokládejte, že je vaše implementace v pořádku. Ověřte si to.

Teď už mám jasný plán.

Co ponecháváme:

• Nativní lazy loading obrázků – bez problémů

Co měníme:

Intersection Observer sekce:

• Kritický obsah přesouváme do počátečního HTML
• Lazy loadujeme jen UI vylepšení

Nekonečný scroll stránky:

• Přidáváme stránkování
• Prvních 20 položek v HTML
• Tlačítko “Načíst další” pro zbytek

Testovací postup:

1. Po změnách stránku stáhnout přes curl
2. Ověřit, že kritický obsah je v HTML
3. Sledovat AI viditelnost přes Am I Cited
4. Porovnat míru citací před/po

Princip: Obsah, který chceme, aby AI citovala = vždy v HTML Vše ostatní = může být optimalizováno na výkon

Díky za technické vysvětlení!