Lazy loading: oneskorené načítanie obrázkov správne
Lazy loading znamená, že obrázky a videá mimo prvej obrazovky sa načítajú až vtedy, keď k nim návštevník doskroluje. Web sa tak načíta rýchlejšie a zbytočne nesťahuje dáta, ktoré návštevník možno ani neuvidí.
Ako lazy loading funguje
Moderné prehliadače ho podporujú priamo, stačí pri obrázku uviesť atribút loading="lazy". Prehliadač potom obrázok stiahne, až keď sa blíži k viditeľnej časti stránky. Na rovnakom princípe sa dajú odložiť aj vložené videá a mapy.
Prínosy
- rýchlejšie prvé zobrazenie stránky,
- menej prenesených dát, čo ocenia návštevníci na mobilných dátach,
- menšia záťaž servera.
Najčastejšia chyba: lazy loading pri hlavnom obrázku
Ak sa oneskorene načítava aj obrázok na vrchu stránky, napríklad banner alebo hlavná fotka produktu, prehliadač s ním začne až neskôr. Výsledkom je horšie LCP, teda pomalšie zobrazenie hlavného obsahu. Obrázky na prvej obrazovke sa majú načítavať hneď.
Ďalšie chyby
- Chýbajúce rozmery: obrázok bez šírky a výšky po načítaní posunie obsah a zhorší CLS.
- Staré riešenia cez JavaScript: ak skript zlyhá, obrázky sa nenačítajú vôbec a roboti vyhľadávačov ich nemusia nájsť.
- Lazy loading v posuvných prvkoch: v galériách a nekonečne bežiacich pásoch sa obrázky môžu objaviť neskoro a vzniknú prázdne miesta.
Ako to nastaviť správne
- obrázky na prvej obrazovke: bez lazy loadingu, hlavný obrázok s vyššou prioritou,
- obrázky nižšie na stránke: loading="lazy",
- všetky obrázky s uvedenými rozmermi,
- vložené videá zobrazovať ako náhľad a prehrávač načítať až po kliknutí.
WordPress pridáva lazy loading automaticky, no nie vždy správne rozpozná hlavný obrázok. Pri zrýchlení webu to kontrolujeme na každom type stránky. Viac o obrázkoch v článku Obrázky vo formáte WebP a AVIF.
