Čo je Lazy loading?

Lazy loading, po slovensky oneskorené načítanie, znamená, že prehliadač nesťahuje všetky obrázky, videá či vložené mapy hneď po otvorení stránky. Načíta ich až vtedy, keď sa k nim návštevník pri posúvaní priblíži. Moderné prehliadače to podporujú natívne cez atribút loading="lazy" pri obrázkoch a prvkoch iframe, takže netreba žiadny ďalší skript.

Prečo na tom záleží

Stránka s množstvom obrázkov sa bez lazy loadingu načítava pomalšie a zbytočne míňa mobilné dáta aj na obsah, ku ktorému sa návštevník nikdy nedostane. Rýchlosť ovplyvňuje používateľskú skúsenosť, metriky Core Web Vitals aj konverzie. Pozor však na metriku LCP (Largest Contentful Paint), ktorá meria, kedy sa zobrazí najväčší prvok vo viditeľnej časti. Ak lazy loading použijete na hlavný obrázok nad zlomom, prehliadač ho načíta neskôr a LCP sa zhorší.

Ako na to v praxi

• Pridajte loading="lazy" obrázkom, ktoré sú mimo prvej obrazovky.
• Hlavný obrázok či banner nad zlomom načítajte hneď, prípadne mu pridajte fetchpriority="high".
• Obrázkom uveďte rozmery (width a height), aby obsah pri načítaní neposkakoval.
• Lazy loading využite aj pre vložené videá a mapy.
• Výsledok overte v nástroji PageSpeed Insights.

Najčastejšie chyby

• Plošné zapnutie lazy loadingu na všetky obrázky vrátane hlavného banneru.
• Staré riešenia v JavaScripte, pri ktorých sa obrázky bez spusteného skriptu vôbec nezobrazia.
• Chýbajúce rozmery obrázkov, ktoré spôsobujú skákanie obsahu.