Video v hero sekci vypadá efektně, ale na statickém webu je to obvykle nejdražší element na stránce. I krátký komprimovaný klip typicky přidá stovky kilobajtů až jednotky megabajtů a jeho dekódování zatěžuje CPU a baterku mobilu právě v okamžiku, kdy prohlížeč měří LCP.
Co jsme místo toho použili
XIK Lab používá v hero jeden lehký canvas prvek – animovanou signální linku připomínající waveform. Implementace používá requestAnimationFrame, nekreslí nic mimo canvas (žádný layout thrash) a respektuje prefers-reduced-motion.
Proč je to levnější
- Síťový payload navíc: 0 B. Animace je generovaná JavaScriptem, ne stažená jako soubor.
- CPU zátěž na frame: desítky bodů na křivce se přepočítají a vykreslí řádově pod 1–2 ms na frame na běžném mobilu, což je hluboko pod rozpočtem 16 ms na 60 fps snímek.
- LCP text má prioritu: canvas se inicializuje jako Astro island až po hydrataci, takže nadpis a strapline se vykreslí bez čekání na skript.
Kdy se to vyplatí i jinde
Kdykoliv je hlavním sdělením textová informace (nadpis, CTA), a vizuál slouží jen jako podpůrný signál – ne jako hlavní obsah – dává větší smysl generovaná grafika než stažené médium. Video má smysl tam, kde nese informaci, kterou nejde nahradit (např. ukázka pohybu v UI), ne jako dekorace.