Rychlost Střední dopad Snadné 10–30 min

Lazy loading obrázků

Obrázky mimo obrazovku načítej až při scrollování.

Co to je

Lazy loading znamená, že obrázky mimo viditelnou oblast se nenačtou hned, ale teprve když k nim uživatel doscrolluje. Stačí atribut loading="lazy".

Proč to řešit

Bez lazy loadingu stahuje prohlížeč i obrázky úplně dole na stránce, které uživatel třeba nikdy neuvidí, zdržuje to první vykreslení a plýtvá daty. Lazy loading zrychlí start a šetří přenos.

Jak na to

1Přidej loading="lazy" obrázkům a iframe pod viditelnou oblastí.
2NEpoužívej lazy na hlavní obrázek nad ohybem (LCP obrázek), ten chceš naopak co nejdřív (klidně preload).
3Vždy uváděj width a height, ať se layout neposkakuje (CLS).

Příklad

Správně

<img src="galerie-12.webp" alt="..." loading="lazy" width="800" height="600">

Závěr

Lazy loading je dnes nativní (jeden atribut) a téměř zadarmo zrychlí stránky s množstvím obrázků. Pozor jen na hlavní obrázek nad ohybem, ten lazy nedávej. Doplň rozměry kvůli stabilitě layoutu.

Související témata