Lazy loading
Načítání obrázků až ve chvíli, kdy se dostanou do výhledu
Co je lazy loading
Lazy loading je odložené načítání obrázků, videí a dalších prvků stránky až ve chvíli, kdy se k nim návštěvník doroluje. Prohlížeč tak na začátku stahuje jenom to, co je vidět, a zbytek dobírá průběžně. Na dlouhé kategorii e-shopu s dvěma sty náhledy je to rozdíl mezi stránkou, která naskočí, a stránkou, na kterou se čeká.
Past, na které to nejčastěji padá
Hlavní obrázek nad ohybem se odkládat nemá. Prohlížeč se o něm dozví až po zpracování skriptu, začne ho stahovat později než jindy a doba vykreslení největšího prvku se tím zhorší. Opatření nasazené kvůli rychlosti pak srazí přesně tu metriku, kterou mělo vylepšit. Úvodní fotku, banner v hlavičce i logo proto nechávám načítat běžnou cestou a odkládám až obsah pod prvním dotykem obrazovky. Kde přesně ohyb leží, se zařízení od zařízení liší, takže si nechávám rezervu.
Nasazení bez pluginu
Odkládání dnes zvládne sám prohlížeč, u obrázku stačí doplnit atribut loading s hodnotou lazy. Hlídat se musí rozměry: pokud obrázek nemá zadanou šířku a výšku, prohlížeč mu nedrží místo a obsah pod ním po doskočení uskočí. Nejvíc dá dohromady kombinace s úspornějším formátem, třeba WebP.
Nejdřív zmenšit, pak odkládat
Než začnu cokoliv odkládat, koukám se, kolik ty obrázky vlastně váží. Fotka nahraná z foťáku v plné velikosti zůstane obrovská, jenom se stáhne o něco později. Pořadí, které mi dává smysl: zmenšit a překonvertovat, teprve potom odkládat. A po nasazení projet hlavní šablony webu, protože optimalizační pluginy mají sklon odložit úplně všechno včetně obrázku v hlavičce, aniž by se někoho ptaly.