Obrázek mimo první obrazovku bez loading="lazy"

Na každé živé stránce se projdou obrázky v pořadí, v jakém stojí v HTML. Počítají se jen značky <img>, které mají src nebo srcset, tedy opravdu něco zobrazí: prázdná <img src=""> se nepočítá ani do nálezu, ani do pořadí. První 2 zobrazující se obrázky se považují za „nad ohybem“ (tedy pravděpodobně viditelné hned) a přeskočí se. U všech dalších se kontroluje, jestli mají loading="lazy", a když nemají, vznikne nález. Práh je v config/seo.json pod seo.SEO-38 jako above_fold_image_count: 2, označený PROPOSAL.

Tohle je nejhrubší heuristika mezi kódy placených modulů a je fér to říct hned: pořadí v HTML není totéž co poloha na obrazovce. Skutečný layout bychom museli vykreslit, a to se u téhle kontroly nedělá. Stránka, která má tři obrázky v hlavičce, dostane nález na třetí z nich, neprávem.

Co kontrola nedělá: neměří skutečnou polohu prvku, nerozlišuje velikost obrázku, nepozná líné načítání řešené JavaScriptem a nekontroluje fetchpriority. Nález je na úrovni stránky a je informativní: skóre nesnižuje ani o bod, což u takhle hrubé heuristiky považujeme za jediné poctivé řešení.

Na viditelnost v odpovědích AI doložený vliv nemáme. Líné načítání je výkonová technika; s tím, co si model ze stránky přečte, nesouvisí vůbec.

Co doložené je: atribut loading="lazy" je standardní a prohlížeče ho podporují: odloží stažení obrázku, dokud se návštěvník nepřiblíží k jeho pozici. U stránky s padesáti obrázky to znamená, že se na začátku stáhne pět místo padesáti.

A teď to důležité, co dělá tenhle nález obousměrným: loading="lazy" na obrázku NAD ohybem je škodlivé. Odloží načtení něčeho, co je vidět hned, a tím zhorší LCP, tedy metriku, kterou měří SEO-20. Proto kontrola první dva obrázky přeskakuje a proto nedoporučujeme atribut přidávat plošně.

Praktický závěr, a u tohohle nálezu platí obzvlášť: ověřte si každý případ okem. Naše heuristika o poloze nic neví. Když je „třetí obrázek v pořadí“ ve skutečnosti v hlavičce, nález ignorujte, a když je v patičce, přidejte atribut.

Atribut na obrázky, které jsou pod ohybem:

<img src="foto.jpg" alt="…" width="1200" height="800" loading="lazy">

A u prvního, hlavního obrázku naopak opak, ať se stáhne co nejdřív:

<img src="hero.jpg" alt="…" width="1600" height="900" fetchpriority="high">

• Nikdy loading="lazy" na hlavní obrázek. Je to jedna z mála „optimalizací“, které měřitelně uškodí.
• Rozměry doplňte zároveň s atributem. Líně načítaný obrázek bez vyhrazeného místa poskočí přesně ve chvíli, kdy k němu návštěvník dorolluje, a vyrobíte si SEO-21.
• Nepoužívejte zároveň skriptové líné načítání. Vlastní řešení přes JavaScript a nativní atribut si navzájem překážejí; nativní stačí.
• U dlouhých výpisů je zisk největší: galerie, výpis produktů, archiv článků. U stránky se třemi obrázky je to práce bez efektu.

Jestli si nejste jistí, kde ohyb je: otevřete stránku na mobilu, nescrollujte, a co vidíte, je nad ohybem. Všechno ostatní je kandidát na líné načítání.