Jak implementovat lazy loading pro obrázky a iframy bez poškození SEO?
Nejbezpečnějším způsobem implementace lazy loadingu je použití nativního HTML atributu `loading="lazy"`. Tím zajistíte, že prohlížeč odloží načítání, zatímco vyhledávače (jako Googlebot) stále uvidí zdrojové URL a správně je zaindexují. Vyhněte se složitým JavaScriptovým řešením, která obsah před roboty skrývají.
Lazy loading je technika pro zvýšení výkonu, která odkládá načítání nekritických zdrojů (jako jsou obrázky a iframy) do chvíle, kdy jsou potřeba – obvykle když na ně uživatel naroluje. To dramaticky zvyšuje rychlost úvodního načtení stránky a šetří data. U SEO panuje obava, zda vyhledávače dokáží „líně“ načítaný obsah najít. Dříve JavaScriptové knihovny často URL adresy před roboty schovávaly. Dnes je osvědčeným postupem „nativní lazy loading“ pomocí atributu `loading="lazy"` v tagu `<img>` a `<iframe>`. Tento způsob podporují všechny moderní prohlížeče a je plně SEO-friendly, protože Googlebot vidí atribut `src` i bez spuštění skriptu. Pokud musíte použít JavaScript pro starší prohlížeče, zajistěte, aby využíval Intersection Observer API a obsahoval záložní řešení `<noscript>`. Důležité je nikdy nepoužívat lazy loading na prvky „nad ohybem“ (viditelné hned po načtení), jako je logo nebo úvodní banner, protože by to negativně ovlivnilo metriku LCP.
Průvodce krok za krokem
Identifikace obsahu pod ohybem
Určete, které obrázky a iframy nejsou viditelné při prvním načtení stránky.
Přidání atributu loading
Vložte `loading="lazy"` do HTML tagů všech identifikovaných obrázků a iframů pod ohybem.
Vyloučení hlavních médií
Ujistěte se, že hlavní hero obrázek a veškerý obsah v horní části stránky NENÍ načítán líně.
Definice rozměrů
Vždy uvádějte atributy width a height, aby nedocházelo k posunům obsahu (CLS) při dodatečném načtení obrázků.
Test indexace
Použijte nástroj pro kontrolu URL v Search Console a ověřte, že Google vaše obrázky stále vidí.
Pro tipy
- Kombinujte lazy loading s atributem 'decoding="async"' pro ještě lepší výkon.
- Používejte zástupné symboly (LQIP) nebo barevné bloky pro lepší uživatelský zážitek během načítání.
- Testujte lazy loading zejména na mobilních zařízeních, kde je viditelná část obrazovky mnohem menší.
- Prověřte, zda lazy loading nekoliduje se styly pro tisk (print CSS).
Jak pSeoMatic pomáhá
Auditní nástroj pSeoMatic kontroluje správnou implementaci lazy loadingu na celém vašem webu. Upozorníme vás na „LCP obrázky“, které jsou chybně načítány líně (což zpomaluje zobrazení), a identifikujeme chybějící atributy u těžkých médií pod ohybem. Zajistíme tak, aby váš web byl rychlý a zároveň plně indexovatelný.
Vyzkoušejte pSeoMatic zdarmaSouvisející dotazy
Může Google indexovat líně načítané obrázky?
Ano, Googlebot indexuje obrázky s nativním atributem `loading="lazy"` i se správně nastaveným JavaScriptem bez problémů.
Pomáhá lazy loading skóre v PageSpeed?
Výrazně. Snižuje počáteční velikost stránky a zlepšuje metriku Time to Interactive (TTI).
Mám líně načítat i své logo?
Ne, logo je obvykle součástí prvního dojmu nad ohybem a mělo by se načíst okamžitě.
Související průvodci
Jste připraveni to uvést do praxe?
pSeoMatic generuje tisíce SEO-optimalizovaných stránek z vašich dat.